[EuiHeader] Added sections and position props

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `showOnFocus` prop to `EuiScreenReaderOnly` to force display on keyboard focus ([#2976](https://github.com/elastic/eui/pull/2976))
 - Added `EuiSkipLink` component ([#2976](https://github.com/elastic/eui/pull/2976))
 - Created `EuiBadgeGroup` component ([#2921](https://github.com/elastic/eui/pull/2921))
+- Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928))
 
 **Bug Fixes**
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router';
 
 import { renderToHtml } from '../../services';
 
@@ -17,10 +18,20 @@ import {
   EuiHeaderLink,
 } from '../../../../src/components';
 
+import { EuiHeaderSectionsProp } from './props';
+
 import Header from './header';
 const headerSource = require('!!raw-loader!./header');
 const headerHtml = renderToHtml(Header);
 
+import HeaderSections from './header_sections';
+const headerSectionsSource = require('!!raw-loader!./header_sections');
+const headerSectionsHtml = renderToHtml(HeaderSections);
+
+import HeaderPosition from './header_position';
+const headerPositionSource = require('!!raw-loader!./header_position');
+const headerPositionHtml = renderToHtml(HeaderPosition);
+
 import HeaderAlert from './header_alert';
 const headerAlertSource = require('!!raw-loader!./header_alert');
 const headerAlertHtml = renderToHtml(HeaderAlert);
@@ -45,10 +56,27 @@ const headerSnippet = `<EuiHeader>
   </EuiHeaderSection>
 </EuiHeader>`;
 
+const headerSectionsSnippet = `<EuiHeader
+  sections={[
+    {
+      items: [...],
+      borders: 'right',
+      breadcrumbs: [...],
+    },
+    {
+      items: [...],
+      borders: 'none',
+    },
+    {
+      items: [...],
+    },
+  ]}
+/>`;
+
 const headerLinksSnippet = `<EuiHeader>
   <EuiHeaderSectionItem border="right">
     <EuiHeaderLogo
-      iconType="iconName" 
+      iconType="iconName"
       href="#"
     />
   </EuiHeaderSectionItem>
@@ -78,20 +106,92 @@ export const HeaderExample = {
           code: headerHtml,
         },
       ],
-      text: <p>The header is made up of several individual components.</p>,
+      text: (
+        <p>
+          The header is made up of <strong>many</strong> individual components.
+        </p>
+      ),
       props: {
         EuiHeader,
         EuiHeaderBreadcrumbs,
         EuiHeaderSection,
         EuiHeaderSectionItem,
         EuiHeaderSectionItemButton,
         EuiHeaderLogo,
+        EuiHeaderSectionsProp,
       },
       snippet: headerSnippet,
       demo: <Header />,
     },
     {
-      title: 'Links',
+      title: 'Sections',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: headerSectionsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: headerSectionsHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Alternatively, you can pass an array objects to the{' '}
+            <EuiCode>sections</EuiCode> props that takes a key of{' '}
+            <EuiCode>items</EuiCode> (array of children to wrap in an{' '}
+            <strong>EuiHeaderSectionItem</strong>) and/or{' '}
+            <EuiCode>breadcrumbs</EuiCode> (array of{' '}
+            <Link to="/navigation/breadcrumbs">breadcrumb</Link> objects). Each
+            item in the array will be wrapped in an{' '}
+            <strong>EuiHeaderSection</strong>.
+          </p>
+          <p>
+            <strong>Note:</strong> Passing <EuiCode>sections</EuiCode> and{' '}
+            <EuiCode>children</EuiCode> will disregard the{' '}
+            <EuiCode>children</EuiCode> as it is not easily interpreted at what
+            location the children should be placed.
+          </p>
+        </>
+      ),
+      props: {
+        EuiHeader,
+        EuiHeaderSectionsProp,
+        EuiHeaderSection,
+        EuiHeaderSectionItem,
+      },
+      snippet: headerSectionsSnippet,
+      demo: <HeaderSections />,
+    },
+    {
+      title: 'Fixed header',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: headerPositionSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: headerPositionHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Most consumer need a header that does not scroll way with the page
+            contents. You can apply this display by changing{' '}
+            <EuiCode>position</EuiCode> to <EuiCode>fixed</EuiCode>. It will
+            also add the appropriate padding to the window body by applying a
+            class.
+          </p>
+        </>
+      ),
+      snippet: '<EuiHeader position="fixed" />',
+      demo: <HeaderPosition />,
+    },
+    {
+      title: 'Header links',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -117,7 +217,7 @@ export const HeaderExample = {
       demo: <HeaderLinks />,
     },
     {
-      title: 'Display header alerts',
+      title: 'Alerts in the header',
       source: [
         {
           type: GuideSectionTypes.JS,

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

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+
+import {
+  EuiHeader,
+  EuiHeaderLogo,
+  EuiSwitch,
+} from '../../../../src/components';
+
+export default () => {
+  const [position, setPosition] = useState('static');
+
+  const sections = [
+    {
+      items: [
+        <EuiHeaderLogo
+          iconType="logoKibana"
+          href="#"
+          aria-label="Go to home page"
+        />,
+      ],
+      borders: 'none',
+    },
+    {
+      items: [
+        <div style={{ padding: 16 }}>
+          <EuiSwitch
+            label={`position: ${position}`}
+            checked={position === 'fixed'}
+            onChange={e => setPosition(e.target.checked ? 'fixed' : 'static')}
+          />
+        </div>,
+      ],
+      borders: 'none',
+    },
+  ];
+
+  return <EuiHeader position={position} sections={sections} />;
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+
+import {
+  EuiHeader,
+  EuiFieldSearch,
+  EuiHeaderLogo,
+} from '../../../../src/components';
+
+import HeaderAppMenu from './header_app_menu';
+import HeaderUserMenu from './header_user_menu';
+import HeaderSpacesMenu from './header_spaces_menu';
+
+export default () => {
+  const renderLogo = (
+    <EuiHeaderLogo
+      iconType="logoKibana"
+      href="#"
+      aria-label="Go to home page"
+    />
+  );
+
+  const breadcrumbs = [
+    {
+      text: 'Management',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked management');
+      },
+      'data-test-subj': 'breadcrumbsAnimals',
+      className: 'customClass',
+    },
+    {
+      text: 'Truncation test is here for a really long item',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked truncation test');
+      },
+    },
+    {
+      text: 'hidden',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked hidden');
+      },
+    },
+    {
+      text: 'Users',
+      href: '#',
+      onClick: e => {
+        e.preventDefault();
+        console.log('You clicked users');
+      },
+    },
+    {
+      text: 'Create',
+    },
+  ];
+
+  const renderSearch = (
+    <EuiFieldSearch placeholder="Search for anything" compressed />
+  );
+
+  const sections = [
+    {
+      items: [renderLogo, <HeaderSpacesMenu />],
+      borders: 'right',
+      breadcrumbs: breadcrumbs,
+    },
+    {
+      items: [renderSearch, <div style={{ width: 8 }} />],
+      borders: 'none',
+    },
+    {
+      items: [<HeaderUserMenu />, <HeaderAppMenu />],
+    },
+  ];
+
+  return <EuiHeader sections={sections} />;
+};

src-docs/src/views/header/props.tsx

@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiHeaderSections } from '../../../../src/components/header';
+
+export const EuiHeaderSectionsProp: FunctionComponent<
+  EuiHeaderSections
+> = () => <div />;