oui docs - headers page changes (#109)

* Changes for style and inclusivity, removes references to outdated products and apps Signed-off-by: Kroosh <[email protected]> * Changed logoOUI to logoOpenSearch Signed-off-by: Kristen Crusius <[email protected]> * Update header_elastic_pattern.js * Update header_links.js * Update header_position.js * Update header_sections.js * Update header_stacked.js Signed-off-by: Kroosh Crusius [email protected] * Update header_position.js Signed-off-by: Matt Provost <[email protected]> * Update header_position.js Signed-off-by: Matt Provost <[email protected]> * Update header_stacked.js Signed-off-by: Matt Provost <[email protected]> --------- Signed-off-by: Kroosh <[email protected]> Signed-off-by: Kristen Crusius <[email protected]> Signed-off-by: Kroosh Crusius [email protected] Signed-off-by: Matt Provost <[email protected]> Co-authored-by: Matt Provost <[email protected]> Co-authored-by: Sean Neumann <[email protected]> Co-authored-by: Matt Provost <[email protected]>
opensearch-project · Mar 7, 2023 · fac9770 · fac9770
1 parent 16be7f7
commit fac9770
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 168 deletions.
diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
@@ -14,7 +14,6 @@ import { Link } from 'react-router-dom';
 
 import {
   OuiAvatar,
-  OuiButton,
   OuiFlexGroup,
   OuiFlexItem,
   OuiHeader,
@@ -28,9 +27,6 @@ import {
   OuiKeyPadMenuItem,
   OuiLink,
   OuiPopover,
-  OuiPopoverFooter,
-  OuiPopoverTitle,
-  OuiSelectable,
   OuiSelectableMessage,
   OuiSelectableTemplateSitewide,
   OuiSpacer,
@@ -41,7 +37,7 @@ import { htmlIdGenerator } from '../../../../src/services';
 export default () => {
   const renderLogo = () => (
     <OuiHeaderLogo
-      iconType="logoElastic"
+      iconType="logoOpenSearch"
       href="#"
       onClick={(e) => e.preventDefault()}
       aria-label="Go to home page"
@@ -60,7 +56,7 @@ export default () => {
         className: 'customClass',
       },
       {
-        text: 'Truncation test is here for a really long item',
+        text: 'Truncation of a really long item',
         href: '#',
         onClick: (e) => {
           e.preventDefault();
@@ -124,9 +120,6 @@ export default () => {
         <OuiHeaderSectionItem border="right">
           {renderLogo()}
         </OuiHeaderSectionItem>
-        <OuiHeaderSectionItem border="right">
-          <HeaderSpacesMenu />
-        </OuiHeaderSectionItem>
       </OuiHeaderSection>
 
       {renderBreadcrumbs()}
@@ -165,7 +158,7 @@ const HeaderUserMenu = () => {
       aria-haspopup="true"
       aria-label="Account menu"
       onClick={onMenuButtonClick}>
-      <OuiAvatar name="John Username" size="s" />
+      <OuiAvatar name="A. User" size="s" />
     </OuiHeaderSectionItemButton>
   );
 
@@ -183,12 +176,12 @@ const HeaderUserMenu = () => {
           className="ouiHeaderProfile"
           responsive={false}>
           <OuiFlexItem grow={false}>
-            <OuiAvatar name="John Username" size="xl" />
+            <OuiAvatar name="A. User" size="xl" />
           </OuiFlexItem>
 
           <OuiFlexItem>
             <OuiText>
-              <p>John Username</p>
+              <p>A. User</p>
             </OuiText>
 
             <OuiSpacer size="m" />
@@ -213,130 +206,6 @@ const HeaderUserMenu = () => {
   );
 };
 
-const HeaderSpacesMenu = () => {
-  const id = htmlIdGenerator()();
-  const spacesValues = [
-    {
-      label: 'Sales team',
-      prepend: <OuiAvatar type="space" name="Sales Team" size="s" />,
-      checked: 'on',
-    },
-    {
-      label: 'Engineering',
-      prepend: <OuiAvatar type="space" name="Engineering" size="s" />,
-    },
-    {
-      label: 'Security',
-      prepend: <OuiAvatar type="space" name="Security" size="s" />,
-    },
-    {
-      label: 'Default',
-      prepend: <OuiAvatar type="space" name="Default" size="s" />,
-    },
-  ];
-
-  const additionalSpaces = [
-    {
-      label: 'Sales team 2',
-      prepend: <OuiAvatar type="space" name="Sales Team 2" size="s" />,
-    },
-    {
-      label: 'Engineering 2',
-      prepend: <OuiAvatar type="space" name="Engineering 2" size="s" />,
-    },
-    {
-      label: 'Security 2',
-      prepend: <OuiAvatar type="space" name="Security 2" size="s" />,
-    },
-    {
-      label: 'Default 2',
-      prepend: <OuiAvatar type="space" name="Default 2" size="s" />,
-    },
-  ];
-
-  const [spaces, setSpaces] = useState(spacesValues);
-  const [selectedSpace, setSelectedSpace] = useState(
-    spaces.filter((option) => option.checked)[0]
-  );
-  const [isOpen, setIsOpen] = useState(false);
-
-  const isListExtended = () => {
-    return spaces.length > 4 ? true : false;
-  };
-
-  const onMenuButtonClick = () => {
-    setIsOpen(!isOpen);
-  };
-
-  const closePopover = () => {
-    setIsOpen(false);
-  };
-
-  const onChange = (options) => {
-    setSpaces(options);
-    setSelectedSpace(options.filter((option) => option.checked)[0]);
-    setIsOpen(false);
-  };
-
-  const addMoreSpaces = () => {
-    setSpaces(spaces.concat(additionalSpaces));
-  };
-
-  const button = (
-    <OuiHeaderSectionItemButton
-      aria-controls={id}
-      aria-expanded={isOpen}
-      aria-haspopup="true"
-      aria-label="Spaces menu"
-      onClick={onMenuButtonClick}>
-      {selectedSpace.prepend}
-    </OuiHeaderSectionItemButton>
-  );
-
-  return (
-    <OuiPopover
-      id={id}
-      button={button}
-      isOpen={isOpen}
-      anchorPosition="downLeft"
-      closePopover={closePopover}
-      panelPaddingSize="none">
-      <OuiSelectable
-        searchable={isListExtended()}
-        searchProps={{
-          placeholder: 'Find a space',
-          compressed: true,
-        }}
-        options={spaces}
-        singleSelection="always"
-        style={{ width: 300 }}
-        onChange={onChange}
-        listProps={{
-          rowHeight: 40,
-          showIcons: false,
-        }}>
-        {(list, search) => (
-          <>
-            <OuiPopoverTitle paddingSize="s">
-              {search || 'Your spaces'}
-            </OuiPopoverTitle>
-            {list}
-            <OuiPopoverFooter paddingSize="s">
-              <OuiButton
-                size="s"
-                fullWidth
-                onClick={addMoreSpaces}
-                disabled={isListExtended()}>
-                Add more spaces
-              </OuiButton>
-            </OuiPopoverFooter>
-          </>
-        )}
-      </OuiSelectable>
-    </OuiPopover>
-  );
-};
-
 const HeaderAppMenu = () => {
   const idGenerator = htmlIdGenerator();
   const popoverId = idGenerator('popover');
@@ -384,21 +253,9 @@ const HeaderAppMenu = () => {
           <OuiIcon type="devToolsApp" size="l" />
         </OuiKeyPadMenuItem>
 
-        <OuiKeyPadMenuItem label="Machine Learning">
-          <OuiIcon type="machineLearningApp" size="l" />
-        </OuiKeyPadMenuItem>
-
-        <OuiKeyPadMenuItem label="Graph">
-          <OuiIcon type="graphApp" size="l" />
-        </OuiKeyPadMenuItem>
-
         <OuiKeyPadMenuItem label="Visualize">
           <OuiIcon type="visualizeApp" size="l" />
         </OuiKeyPadMenuItem>
-
-        <OuiKeyPadMenuItem label="Timelion" betaBadgeLabel="Beta">
-          <OuiIcon type="timelionApp" size="l" />
-        </OuiKeyPadMenuItem>
       </OuiKeyPadMenu>
     </OuiPopover>
   );

diff --git a/src-docs/src/views/header/header_elastic_pattern.js b/src-docs/src/views/header/header_elastic_pattern.js
@@ -76,7 +76,7 @@ export default ({ theme }) => {
       onClose={() => setNavIsOpen(false)}>
       <OuiFlexItem className="oui-yScroll">
         {/* Docs callout */}
-        <OuiCollapsibleNavGroup background="none" title="OuiCollapsibleNav">
+        <OuiCollapsibleNavGroup title="OuiCollapsibleNav">
           <OuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
             <p>
               Please see the component page for{' '}
@@ -157,7 +157,7 @@ export default ({ theme }) => {
           aria-haspopup="true"
           aria-label="User menu"
           onClick={() => setIsUserMenuVisible(!isUserMenuVisible)}>
-          <OuiAvatar name="John Username" size="s" />
+          <OuiAvatar name="A. User" size="s" />
         </OuiHeaderSectionItemButton>
       }
       isOpen={isUserMenuVisible}
@@ -283,8 +283,8 @@ export default ({ theme }) => {
         sections={[
           {
             items: [
-              <OuiHeaderLogo iconType="logoElastic" href="">
-                Elastic
+              <OuiHeaderLogo iconType="logoOpenSearch" href="">
+                OpenSearch
               </OuiHeaderLogo>,
               deploymentMenu,
             ],

diff --git a/src-docs/src/views/header/header_links.js b/src-docs/src/views/header/header_links.js
@@ -23,7 +23,7 @@ export default () => {
   return (
     <OuiHeader>
       <OuiHeaderSectionItem border="right">
-        <OuiHeaderLogo>Elastic</OuiHeaderLogo>
+        <OuiHeaderLogo iconType="logoOpenSearch">OpenSearch</OuiHeaderLogo>
       </OuiHeaderSectionItem>
 
       <OuiHeaderSectionItem>

diff --git a/src-docs/src/views/header/header_position.js b/src-docs/src/views/header/header_position.js
@@ -23,7 +23,9 @@ export default () => {
 
   const sections = [
     {
-      items: [<OuiHeaderLogo>Elastic</OuiHeaderLogo>],
+      items: [
+        <OuiHeaderLogo iconType="logoOpenSearch">OpenSearch</OuiHeaderLogo>,
+      ],
       borders: 'right',
     },
   ];

diff --git a/src-docs/src/views/header/header_sections.js b/src-docs/src/views/header/header_sections.js
@@ -27,19 +27,13 @@ import {
 export default () => {
   const renderLogo = (
     <OuiHeaderLogo
-      iconType="logoElastic"
+      iconType="logoOpenSearch"
       href="#"
       onClick={(e) => e.preventDefault()}
-      aria-label="Go to home page"
+      aria-label="Navigate to home page"
     />
   );
 
-  const renderSpaces = (
-    <OuiHeaderSectionItemButton aria-label="Spaces menu">
-      <OuiAvatar type="space" name="Sales Team" size="s" />
-    </OuiHeaderSectionItemButton>
-  );
-
   const breadcrumbs = [
     {
       text: 'Management',
@@ -67,22 +61,22 @@ export default () => {
   );
   const renderUser = (
     <OuiHeaderSectionItemButton disabled aria-label="Account menu">
-      <OuiAvatar isDisabled name="John Username" size="s" />
+      <OuiAvatar isDisabled name="A. User" size="s" />
     </OuiHeaderSectionItemButton>
   );
 
   const renderApps = (
     <OuiHeaderSectionItemButton
       disabled
-      aria-label="Apps menu with 1 new app"
-      notification="1">
+      aria-label="Apps menu with 3 new apps"
+      notification="3">
       <OuiIcon type="apps" size="m" />
     </OuiHeaderSectionItemButton>
   );
 
   const sections = [
     {
-      items: [renderLogo, renderSpaces],
+      items: [renderLogo],
       borders: 'right',
       breadcrumbs: breadcrumbs,
       breadcrumbProps: {

diff --git a/src-docs/src/views/header/header_stacked.js b/src-docs/src/views/header/header_stacked.js
@@ -53,14 +53,16 @@ export default () => {
         sections={[
           {
             items: [
-              <OuiHeaderLogo iconType="logoElastic">Elastic</OuiHeaderLogo>,
+              <OuiHeaderLogo iconType="logoOpenSearch">
+                OpenSearch
+              </OuiHeaderLogo>,
             ],
             borders: 'none',
           },
           {
             items: [
               <OuiHeaderSectionItemButton aria-label="Account menu">
-                <OuiAvatar name="John Username" size="s" />
+                <OuiAvatar name="A. User" size="s" />
               </OuiHeaderSectionItemButton>,
             ],
             borders: 'none',