[Page Layouts] Adding content props to EuiPageHeader for pre-determined page layout patterns

src-docs/src/components/guide_components.scss

@@ -96,7 +96,7 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   min-height: 100vh;
   background-color: $euiColorEmptyShade;
   border-left: $euiBorderThin;
-  max-width: 1000px;
+  max-width: $euiPageDefaultMaxWidth;
   margin-left: 240px;
 }
 
@@ -110,6 +110,10 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   }
 }
 
+.guideDemo__highlightLayout--single {
+  background: transparentize($euiColorPrimary, .9);
+}
+
 .guideDemo__highlightSpacer {
   .euiSpacer {
     background: transparentize($euiColorPrimary, .9);

src-docs/src/services/playground/iconValidator.js

@@ -1,8 +1,9 @@
 import { iconTypes } from '../../views/icon/icons';
+import { iconTypes as logoTypes } from '../../views/icon/logos';
 import { mapOptions } from './mapOptions';
 import { PropTypes } from 'react-view';
 
-const iconOptions = mapOptions(iconTypes);
+const iconOptions = mapOptions(iconTypes.concat(logoTypes));
 
 export const iconValidator = (prop = { custom: {} }) => {
   const newProp = {

src-docs/src/services/playground/knobs.js

@@ -251,6 +251,16 @@ const Knob = ({
                 />
               </>
             );
+          case 'textarea':
+            return (
+              <EuiTextArea
+                placeholder={placeholder}
+                value={val}
+                onChange={(e) => {
+                  set(e.target.value);
+                }}
+              />
+            );
         }
       }
 

src-docs/src/views/icon/logos.js

@@ -20,7 +20,7 @@ import {
   EuiCopy,
 } from '../../../../src/components';
 
-const iconTypes = [
+export const iconTypes = [
   'logoAppSearch',
   'logoBeats',
   'logoBusinessAnalytics',

src-docs/src/views/page/page.js

@@ -8,7 +8,6 @@ import {
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiPageSideBar,
   EuiTitle,
 } from '../../../../src/components';
@@ -17,14 +16,7 @@ export default () => (
   <EuiPage>
     <EuiPageSideBar>SideBar nav</EuiPageSideBar>
     <EuiPageBody component="div">
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Page title</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader pageTitle="Page title" />
       <EuiPageContent>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

src-docs/src/views/page/page_content_center_with_side_bar.js

@@ -8,7 +8,6 @@ import {
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiPageSideBar,
   EuiTitle,
 } from '../../../../src/components';
@@ -18,14 +17,10 @@ export default () => (
     <EuiPageSideBar>SideBar nav</EuiPageSideBar>
     {/* The EUI docs site  already has a wrapping <main> tag, so we've changed this example to a <div> for accessibility. You likely don't need to copy the `component` prop for your own usage. */}
     <EuiPageBody component="div">
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Page title</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-        <EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader
+        pageTitle="Page title"
+        rightSideContent={['Page abilities']}
+      />
       <EuiPageContent verticalPosition="center" horizontalPosition="center">
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

src-docs/src/views/page/page_example.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
+import Playground from './playground';
 
 import {
   EuiCode,
@@ -27,6 +28,14 @@ import PageSimple from './page_simple';
 const pageSimpleSource = require('!!raw-loader!./page_simple');
 const pageSimpleHtml = renderToHtml(PageSimple);
 
+import PageHeader from './page_header';
+const pageHeaderSource = require('!!raw-loader!./page_header');
+const pageHeaderHtml = renderToHtml(PageHeader);
+
+import PageHeaderCustom from './page_header_custom';
+const pageHeaderCustomSource = require('!!raw-loader!./page_header_custom');
+const pageHeaderCustomHtml = renderToHtml(PageHeaderCustom);
+
 import PageContentOnly from './page_content_only';
 const pageContentOnlySource = require('!!raw-loader!./page_content_only');
 const pageContentOnlyHtml = renderToHtml(Page);
@@ -40,6 +49,7 @@ const PageContentCenterWithSideBarSource = require('!!raw-loader!./page_content_
 const PageContentCenterWithSideBarHtml = renderToHtml(Page);
 
 export const PageExample = {
+  playground: Playground,
   title: 'Page',
   intro: (
     <EuiText>
@@ -117,6 +127,89 @@ export const PageExample = {
         </div>
       ),
     },
+    {
+      title: 'Page header',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: pageHeaderSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: pageHeaderHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            <strong>EuiPageHeader</strong> comes with some pre-determined
+            content that you can apply to the left and right sides of the
+            component.
+          </p>
+          <p>
+            The left side allows you to pass any combination of{' '}
+            <EuiCode>pageTitle</EuiCode>, <EuiCode>description</EuiCode>,{' '}
+            <EuiCode>tabs</EuiCode>, or any <EuiCode>leftSideContent</EuiCode>.
+            The order of which are determined by the particular combination.
+          </p>
+          <p>
+            The right side, <EuiCode>rightSideContent</EuiCode>, allows for just
+            a simple <strong>array of nodes</strong> which are placed within a
+            flexbox row. This is usually in the form of multiple buttons, of
+            which, at least one is primary (or{' '}
+            <EuiCode language="ts">{'fill="true"'}</EuiCode>). These items are
+            also display in <strong>reverse order</strong> so that the first and
+            primary action should be first in the list.
+          </p>
+          <p>
+            You can further adjust the display of these content types with an
+            optional <EuiCode>iconType</EuiCode> placed to the left of the
+            title, <EuiCode>alignItems</EuiCode> for adjusting the vertical
+            alignment of the two sides, and <EuiCode>responsiveOrder</EuiCode>
+            to determine which content to display first on smaller screens.
+          </p>
+        </>
+      ),
+      demo: (
+        <div className="guideDemo__highlightLayout--single">
+          <PageHeader />
+        </div>
+      ),
+      props: { EuiPageHeader },
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: pageHeaderCustomSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: pageHeaderCustomHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            The page header content props mainly are helpful props to push
+            content into established Elastic page layout patterns. They are
+            completely optional and by nature, inflexible. If you need a layout
+            that does not match these patterns you can simply pass in your own{' '}
+            <EuiCode>children</EuiCode> utilizing the{' '}
+            <strong>EuiPageHeaderSection</strong> components. Do note, that when
+            supplying <EuiCode>children</EuiCode>,{' '}
+            <strong>EuiPageHeader</strong> will completely ignore any other
+            content props and only render the children.
+          </p>
+        </>
+      ),
+      demo: (
+        <div className="guideDemo__highlightLayout">
+          <PageHeaderCustom />
+        </div>
+      ),
+      props: { EuiPageHeader },
+    },
     {
       title: 'Page with content only',
       source: [

src-docs/src/views/page/page_header.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { EuiPageHeader, EuiText, EuiButton } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    pageTitle="Page title"
+    iconType="logoKibana"
+    tabs={[
+      {
+        label: 'Tab 1',
+        isSelected: true,
+      },
+      {
+        label: 'Tab 2',
+      },
+    ]}
+    description="Page description goes here."
+    leftSideContent={
+      <EuiText>
+        <p>And some custom content</p>
+      </EuiText>
+    }
+    rightSideContent={[
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ]}
+    alignItems="top"
+  />
+);

src-docs/src/views/page/page_header_custom.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {
+  EuiPageHeader,
+  EuiPageHeaderSection,
+  EuiTitle,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader>
+    <EuiPageHeaderSection>
+      <EuiTitle size="l">
+        <h1>Page title</h1>
+      </EuiTitle>
+    </EuiPageHeaderSection>
+    <EuiPageHeaderSection>Page abilities</EuiPageHeaderSection>
+  </EuiPageHeader>
+);

src-docs/src/views/page/page_simple.js

@@ -8,20 +8,13 @@ import {
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
   EuiPageHeader,
-  EuiPageHeaderSection,
   EuiTitle,
 } from '../../../../src/components';
 
 export default () => (
   <EuiPage>
     <EuiPageBody component="div">
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>Page title</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
+      <EuiPageHeader pageTitle="Page title" />
       <EuiPageContent>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>

src-docs/src/views/page/playground.js

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import React from 'react';
+import { PropTypes } from 'react-view';
+import { EuiPageHeader, EuiButton } from '../../../../src/components/';
+import {
+  propUtilityForPlayground,
+  iconValidator,
+} from '../../services/playground';
+
+// HELP: Can we get a "simulate" toggle and pass ReactNodes?
+const tabs = [
+  {
+    label: 'Tab 1',
+    isSelected: true,
+  },
+  {
+    label: 'Tab 2',
+  },
+];
+
+const rightSideContent = [
+  <EuiButton fill>Button 1</EuiButton>,
+  <EuiButton>Button 2</EuiButton>,
+];
+
+export default () => {
+  const docgenInfo = Array.isArray(EuiPageHeader.__docgenInfo)
+    ? EuiPageHeader.__docgenInfo[0]
+    : EuiPageHeader.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
+
+  propsToUse.pageTitle = {
+    ...propsToUse.pageTitle,
+    type: PropTypes.String,
+    value: 'Page title',
+  };
+
+  propsToUse.leftSideContent = {
+    ...propsToUse.leftSideContent,
+    type: PropTypes.String,
+  };
+
+  // HELP: NOT WORKING
+  propsToUse.alignItems = {
+    ...propsToUse.alignItems,
+    defaultValue: 'center',
+  };
+
+  propsToUse.description = {
+    ...propsToUse.description,
+    type: PropTypes.String,
+  };
+
+  propsToUse.rightSideContent = {
+    ...propsToUse.rightSideContent,
+    type: PropTypes.Array,
+  };
+
+  return {
+    config: {
+      componentName: 'EuiPageHeader',
+      props: propsToUse,
+      scope: {
+        EuiPageHeader,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiPageHeader'],
+        },
+      },
+    },
+  };
+};