Merge pull request #343 from dcos-labs/ph/feat/DCOS-54270-add-pagehea…

…der-component

DCOS-54461 feat(pageheader): add minimal component implementation

packages/pageheader/README.md

@@ -0,0 +1 @@
+# PageHeader

packages/pageheader/components/PageHeader.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import { default as Breadcrumb } from "../../breadcrumb/components/Breadcrumb";
+
+import { flush } from "../../shared/styles/styleUtils";
+
+import { style } from "../style";
+
+export interface PageHeaderProps {
+  breadcrumbElements: React.ReactNodeArray;
+  actions?: Array<React.ReactElement<any>>;
+}
+
+class PageHeader extends React.PureComponent<PageHeaderProps, {}> {
+  public render() {
+    const { breadcrumbElements, actions = [] } = this.props;
+
+    return (
+      <div className={style}>
+        <Breadcrumb>{breadcrumbElements}</Breadcrumb>
+        <ul className={flush("all")}>
+          {actions.map(action => {
+            return <li key={`${action.key}`}>{action}</li>;
+          })}
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default PageHeader;

packages/pageheader/index.ts

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

packages/pageheader/stories/PageHeader.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withReadme } from "storybook-readme";
+
+import { PageHeader } from "../index";
+import { Clickable } from "../../clickable";
+
+const readme = require("../README.md");
+const action = () => alert("Action 1 triggered");
+
+storiesOf("PageHeader", module)
+  .addDecorator(withReadme([readme]))
+  .add("default", () => (
+    <PageHeader
+      breadcrumbElements={[
+        <span key="ElementOne">One</span>,
+        <span key="ElementTwo">Two</span>
+      ]}
+      actions={[
+        <Clickable key="Action1" action={action}>
+          <div>Action 1</div>
+        </Clickable>
+      ]}
+    />
+  ));

packages/pageheader/style.ts

@@ -0,0 +1,6 @@
+import { css } from "emotion";
+
+export const style = css`
+  display: grid;
+  grid-template-columns: repeat(2, 50%);
+`;

packages/pageheader/tests/PageHeader.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render } from "enzyme";
+import toJSON from "enzyme-to-json";
+
+import { PageHeader } from "../";
+import { Clickable } from "../../clickable";
+
+describe("PageHeader", () => {
+  it("default", () => {
+    const action = () => 1;
+    expect(
+      toJSON(
+        render(
+          <PageHeader
+            breadcrumbElements={[
+              <span key="One">One</span>,
+              <span key="Two">Two</span>
+            ]}
+            actions={[
+              <Clickable key="Action1" action={action}>
+                <div>Action 1</div>
+              </Clickable>
+            ]}
+          />
+        )
+      )
+    ).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageHeader default 1`] = `
+<div
+  class="css-jiaax5"
+>
+  <div
+    class="css-ewxxaj"
+  >
+    <span>
+      One
+    </span>
+    <span>
+      Two
+    </span>
+  </div>
+  <ul
+    class="css-10pfh7o"
+  >
+    <li>
+      <div
+        class="css-1h5x3dy"
+        role="button"
+        tabindex="-1"
+      >
+        Action 1
+      </div>
+    </li>
+  </ul>
+</div>
+`;