Merge pull request #404 from dcos-labs/mp/feat/pageheader-children

feat(pageheader): allows pageheader to render children

packages/index.ts

@@ -65,7 +65,7 @@ export {
   LargeDialogModalWithFooter,
   FullscreenModal
 } from "./modal";
-export { PageHeader } from "./pageheader";
+export { PageHeader, PageHeaderTabs } from "./pageheader";
 export { ProgressBar } from "./progressbar";
 export { SegmentedControl, SegmentedControlButton } from "./segmentedControl";
 export { SelectInput } from "./selectInput";

packages/pageheader/components/PageHeader.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
-
+import { cx } from "emotion";
 import { default as Breadcrumb } from "../../breadcrumb/components/Breadcrumb";
-
 import {
   listReset,
   flex,
@@ -10,46 +9,53 @@ import {
   display,
   border
 } from "../../shared/styles/styleUtils";
-import { cx } from "emotion";
+import { SpaceSizes } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
+import PageHeaderTabs from "../components/PageHeaderTabs";
 
 export interface PageHeaderProps {
   breadcrumbElements: React.ReactNodeArray;
   actions?: Array<React.ReactElement<any>>;
+  children?: React.ReactNode;
 }
 
+export const pageHeaderPaddingSize: SpaceSizes = "l";
+
 class PageHeader extends React.PureComponent<PageHeaderProps, {}> {
   public render() {
-    const { breadcrumbElements, actions = [] } = this.props;
+    const { breadcrumbElements, actions = [], children } = this.props;
+    const hasTabsChild = React.Children.toArray(children).some(
+      child => React.isValidElement(child) && child.type === PageHeaderTabs
+    );
 
     return (
       <div
-        className={cx(
-          flex({ align: "center" }),
-          padding("all", "l"),
-          border("bottom")
-        )}
-        data-cy="pageHeader"
+        className={cx(padding("all", pageHeaderPaddingSize), {
+          [border("bottom")]: !hasTabsChild
+        })}
       >
-        <div className={flexItem("grow")}>
-          <Breadcrumb>{breadcrumbElements}</Breadcrumb>
-        </div>
-        <div className={flexItem("shrink")}>
-          <ul
-            className={cx(listReset, flex({ align: "center" }))}
-            data-cy="pageHeader-actions"
-          >
-            {actions.map(action => {
-              return (
-                <li
-                  className={cx(padding("left", "s"), display("inherit"))}
-                  key={`${action.key}`}
-                >
-                  {action}
-                </li>
-              );
-            })}
-          </ul>
+        <div className={cx(flex({ align: "center" }))} data-cy="pageHeader">
+          <div className={flexItem("grow")}>
+            <Breadcrumb>{breadcrumbElements}</Breadcrumb>
+          </div>
+          <div className={flexItem("shrink")}>
+            <ul
+              className={cx(listReset, flex({ align: "center" }))}
+              data-cy="pageHeader-actions"
+            >
+              {actions.map(action => {
+                return (
+                  <li
+                    className={cx(padding("left", "s"), display("inherit"))}
+                    key={`${action.key}`}
+                  >
+                    {action}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         </div>
+        {children}
       </div>
     );
   }

packages/pageheader/components/PageHeaderTabs.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { css } from "react-emotion";
+import { spaceSizes } from "../../shared/styles/styleUtils/modifiers/modifierUtils";
+import { pageHeaderPaddingSize } from "./PageHeader";
+
+const PageHeaderTabs = ({ children }) => {
+  return (
+    <div
+      className={css`
+        margin-left: -${spaceSizes[pageHeaderPaddingSize]};
+        margin-right: -${spaceSizes[pageHeaderPaddingSize]};
+      `}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default PageHeaderTabs;

packages/pageheader/index.ts

@@ -1 +1,2 @@
 export { default as PageHeader } from "./components/PageHeader";
+export { default as PageHeaderTabs } from "./components/PageHeaderTabs";

packages/pageheader/stories/PageHeader.stories.tsx

@@ -2,9 +2,11 @@ import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { withReadme } from "storybook-readme";
 
-import { PageHeader } from "../index";
+import { PageHeader, PageHeaderTabs } from "../index";
 import { PrimaryButton, SecondaryButton } from "../../button";
+import { SpacingBox } from "../../styleUtils/modifiers";
 import PageHeaderOverflowMenu from "./helpers/PageHeaderOverflowMenu";
+import { Tabs, TabItem, TabTitle } from "../../tabs";
 
 const readme = require("../README.md");
 const action = () => alert("Action triggered");
@@ -54,4 +56,45 @@ storiesOf("PageHeader", module)
         <div key="Earth">Earth</div>
       ]}
     />
-  ));
+  ))
+  .add("with children", () => (
+    <PageHeader
+      breadcrumbElements={[
+        <div key="Universe">Universe</div>,
+        <div key="MilkyWay">Milky Way</div>,
+        <div key="Earth">Earth</div>
+      ]}
+    >
+      <SpacingBox side="top" spacingSize="l">
+        This content is PageHeader children
+      </SpacingBox>
+    </PageHeader>
+  ))
+  .add("with PageHeaderTabs", () => {
+    const tabOnSelect = selectedTab => {
+      alert(`${selectedTab} clicked`);
+    };
+
+    return (
+      <PageHeader
+        breadcrumbElements={[
+          <div key="Universe">Universe</div>,
+          <div key="MilkyWay">Milky Way</div>,
+          <div key="Earth">Earth</div>
+        ]}
+      >
+        <PageHeaderTabs>
+          <Tabs selectedIndex={0} onSelect={tabOnSelect}>
+            <TabItem>
+              <TabTitle>Tab 1 Name</TabTitle>
+              <div>First tab Content</div>
+            </TabItem>
+            <TabItem>
+              <TabTitle>Tab 2 Name</TabTitle>
+              Second Tab Content
+            </TabItem>
+          </Tabs>
+        </PageHeaderTabs>
+      </PageHeader>
+    );
+  });

packages/pageheader/tests/__snapshots__/PageHeader.test.tsx.snap

@@ -2,71 +2,75 @@
 
 exports[`PageHeader default 1`] = `
 <div
-  class="css-ya955p"
-  data-cy="pageHeader"
+  class="css-1ik9ay"
 >
   <div
-    class="css-qi8t7c"
+    class="css-1s0dtwu"
+    data-cy="pageHeader"
   >
-    <nav
-      class="css-td03f2"
+    <div
+      class="css-qi8t7c"
     >
-      <div
-        class="css-1ixtlzk"
-        data-cy="breadcrumb"
+      <nav
+        class="css-td03f2"
       >
-        <span>
-          One
-        </span>
-      </div>
-      <div
-        class="css-19hcarb"
-        data-cy="breadcrumb"
-      >
-        <svg
-          aria-label="system-caret-right icon"
-          class="css-zgvqkl"
-          data-cy="icon"
-          height="16"
-          preserveAspectRatio="xMinYMin meet"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
+        <div
+          class="css-1ixtlzk"
+          data-cy="breadcrumb"
         >
-          <use
-            href="#system-caret-right"
-          />
-        </svg>
-      </div>
-      <div
-        class="css-19hcarb"
-        data-cy="breadcrumb"
-      >
-        <span>
-          Two
-        </span>
-      </div>
-    </nav>
-  </div>
-  <div
-    class="css-48ylac"
-  >
-    <ul
-      class="css-cdxrln"
-      data-cy="pageHeader-actions"
-    >
-      <li
-        class="css-1skqmzz"
-      >
+          <span>
+            One
+          </span>
+        </div>
+        <div
+          class="css-19hcarb"
+          data-cy="breadcrumb"
+        >
+          <svg
+            aria-label="system-caret-right icon"
+            class="css-zgvqkl"
+            data-cy="icon"
+            height="16"
+            preserveAspectRatio="xMinYMin meet"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <use
+              href="#system-caret-right"
+            />
+          </svg>
+        </div>
         <div
-          class="css-1h5x3dy"
-          role="button"
-          tabindex="-1"
+          class="css-19hcarb"
+          data-cy="breadcrumb"
         >
-          Action 1
+          <span>
+            Two
+          </span>
         </div>
-      </li>
-    </ul>
+      </nav>
+    </div>
+    <div
+      class="css-48ylac"
+    >
+      <ul
+        class="css-cdxrln"
+        data-cy="pageHeader-actions"
+      >
+        <li
+          class="css-1skqmzz"
+        >
+          <div
+            class="css-1h5x3dy"
+            role="button"
+            tabindex="-1"
+          >
+            Action 1
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 `;