oui docs - headers page changes

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>
   );

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="logoOUI" href="">
+                OpenSearch
               </OuiHeaderLogo>,
               deploymentMenu,
             ],

src-docs/src/views/header/header_links.js

@@ -23,7 +23,7 @@ export default () => {
   return (
     <OuiHeader>
       <OuiHeaderSectionItem border="right">
-        <OuiHeaderLogo>Elastic</OuiHeaderLogo>
+        <OuiHeaderLogo iconType="logoOUI">OpenSearch</OuiHeaderLogo>
       </OuiHeaderSectionItem>
 
       <OuiHeaderSectionItem>

src-docs/src/views/header/header_position.js

@@ -23,7 +23,7 @@ export default () => {
 
   const sections = [
     {
-      items: [<OuiHeaderLogo>Elastic</OuiHeaderLogo>],
+      items: [<OuiHeaderLogo iconType="logoOUI">OpenSearch</OuiHeaderLogo>],
       borders: 'right',
     },
   ];

src-docs/src/views/header/header_sections.js

@@ -27,19 +27,13 @@ import {
 export default () => {
   const renderLogo = (
     <OuiHeaderLogo
-      iconType="logoElastic"
+      iconType="logoOUI"
       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: {

src-docs/src/views/header/header_stacked.js

@@ -53,14 +53,14 @@ export default () => {
         sections={[
           {
             items: [
-              <OuiHeaderLogo iconType="logoElastic">Elastic</OuiHeaderLogo>,
+              <OuiHeaderLogo iconType="logoOUI">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',