From b50ba2319310a643f441e8bd1eaba87d8ff4fd3b Mon Sep 17 00:00:00 2001
From: Justin Anastos <justin.anastos@gmail.com>
Date: Mon, 26 Aug 2019 15:55:41 -0400
Subject: [PATCH] button docs progress

---
 .storybook/config.js                       |   1 +
 src/Button/Button.stories.mdx              | 317 ++++++++++++++++++++-
 src/Button/button.stories/ButtonLayout.tsx |  35 +++
 src/Table/Table.story.tsx                  |   2 -
 4 files changed, 350 insertions(+), 5 deletions(-)
 create mode 100644 src/Button/button.stories/ButtonLayout.tsx

diff --git a/.storybook/config.js b/.storybook/config.js
index d291be4c..b6807f36 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -12,4 +12,5 @@ configure([
 addParameters({
   docsContainer: DocsContainer,
   docs: DocsPage,
+  framework: "react",
 });
diff --git a/src/Button/Button.stories.mdx b/src/Button/Button.stories.mdx
index 9f1bc738..d9e0702e 100644
--- a/src/Button/Button.stories.mdx
+++ b/src/Button/Button.stories.mdx
@@ -1,5 +1,4 @@
 import { Button } from "./Button";
-import { colors } from "../colors";
 import {
   Description,
   Meta,
@@ -8,6 +7,8 @@ import {
   Preview,
 } from "@storybook/addon-docs/blocks";
 import { IconShip2 } from "../icons/IconShip2";
+import { ButtonLayout } from "./button.stories/ButtonLayout";
+import { colors } from "../colors";
 
 <Meta title="Components|Button" component={Button} />
 
@@ -30,7 +31,7 @@ Need a button, start with this one. It’s the most common size, not too big, no
 
 <Preview>
   <Story inline name="default size">
-    <Button onClick={() => alert("test")}>Rest click</Button>
+    <Button>Rest click</Button>
   </Story>
   <Story inline name="default size icon">
     <Button icon={<IconShip2 style={{ width: "100%", height: "100%" }} />} />
@@ -55,7 +56,7 @@ Used in situations where space might be a constraint, like in a sidebar for exam
 
 #### large
 
-Used in situations where space might be a constraint, like in a sidebar for example.
+Large buttons will likely be used in situations with a lot of whitespace, for example, large modals.
 
 <Preview>
   <Story inline name="large">
@@ -68,3 +69,313 @@ Used in situations where space might be a constraint, like in a sidebar for exam
     />
   </Story>
 </Preview>
+
+## Colors
+
+The states for our buttons are formulaic. You pass a `color` (from the Space Kit palette) and a `theme` (light or dark) and the button states will be automatically configured to show hover states, borders, focus borders, and disabled state.
+
+<Preview>
+  <Story inline name="color">
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <Button>Default</Button>
+      <Button color={colors.white}>White</Button>
+      <Button color={colors.indigo.dark}>Indigo</Button>
+      <Button color={colors.red.base}>Red</Button>
+      <Button color={colors.green.base}>Green</Button>
+      <Button color={colors.blue.base}>Blue</Button>
+    </div>
+  </Story>
+</Preview>
+
+## Buttons and States
+
+The states for our buttons are formulaic. You pass a `color` (from the Space Kit palette) and a `theme` (light or dark) and the button states will be automatically configured to show hover states, borders, focus borders, and disabled state.
+
+### Light Theme
+
+Light themed buttons have a border. The hover state is a shade darker than the rest color.
+
+<Preview>
+  <Story inline name="button states light">
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+      }}
+    >
+      <ButtonLayout theme="light">
+        <Button theme="light">Rest</Button>
+        <Button theme="light" data-force-hover-state="true">
+          Hover
+        </Button>
+        <Button theme="light" data-force-active-state="true">
+          Active
+        </Button>
+        <Button theme="light" data-force-focus-state="true">
+          Focused
+        </Button>
+        <Button theme="light" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="light">
+        <Button color={colors.indigo.dark} theme="light">
+          sweet
+        </Button>
+        <Button
+          color={colors.indigo.dark}
+          theme="light"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.indigo.dark}
+          theme="light"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.indigo.dark}
+          theme="light"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.indigo.dark} theme="light" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="light">
+        <Button color={colors.green.base} theme="light">
+          Rest
+        </Button>
+        <Button
+          color={colors.green.base}
+          theme="light"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.green.base}
+          theme="light"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.green.base}
+          theme="light"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.green.base} theme="light" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="light">
+        <Button color={colors.red.base} theme="light">
+          Rest
+        </Button>
+        <Button
+          color={colors.red.base}
+          theme="light"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.red.base}
+          theme="light"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.red.base}
+          theme="light"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.red.base} theme="light" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="light">
+        <Button color={colors.blue.base} theme="light">
+          Rest
+        </Button>
+        <Button
+          color={colors.blue.base}
+          theme="light"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.blue.base}
+          theme="light"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.blue.base}
+          theme="light"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.blue.base} theme="light" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+    </div>
+  </Story>
+</Preview>
+
+### Dark Theme
+
+For dark themed buttons, the borders are completely removed to make the colors look sharper on the background. The focus state border is same color as the button and reduced to it's lighest shade.
+
+<Preview>
+  <Story inline name="button states dark">
+    <div style={{ margin: "0 auto" }}>
+      <ButtonLayout theme="dark">
+        <Button theme="dark">Rest</Button>
+        <Button theme="dark" data-force-hover-state="true">
+          Hover
+        </Button>
+        <Button theme="dark" data-force-active-state="true">
+          Active
+        </Button>
+        <Button theme="dark" data-force-focus-state="true">
+          Focused
+        </Button>
+        <Button theme="dark" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="dark">
+        <Button color={colors.indigo.dark} theme="dark">
+          sweet
+        </Button>
+        <Button
+          color={colors.indigo.dark}
+          theme="dark"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.indigo.dark}
+          theme="dark"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.indigo.dark}
+          theme="dark"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.indigo.dark} theme="dark" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="dark">
+        <Button color={colors.green.base} theme="dark">
+          Rest
+        </Button>
+        <Button
+          color={colors.green.base}
+          theme="dark"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.green.base}
+          theme="dark"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.green.base}
+          theme="dark"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.green.base} theme="dark" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="dark">
+        <Button color={colors.red.base} theme="dark">
+          Rest
+        </Button>
+        <Button
+          color={colors.red.base}
+          theme="dark"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.red.base}
+          theme="dark"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.red.base}
+          theme="dark"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.red.base} theme="dark" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+      <ButtonLayout theme="dark">
+        <Button color={colors.blue.base} theme="dark">
+          Rest
+        </Button>
+        <Button
+          color={colors.blue.base}
+          theme="dark"
+          data-force-hover-state="true"
+        >
+          Hover
+        </Button>
+        <Button
+          color={colors.blue.base}
+          theme="dark"
+          data-force-active-state="true"
+        >
+          Active
+        </Button>
+        <Button
+          color={colors.blue.base}
+          theme="dark"
+          data-force-focus-state="true"
+        >
+          Focused
+        </Button>
+        <Button color={colors.blue.base} theme="dark" disabled>
+          Disabled
+        </Button>
+      </ButtonLayout>
+    </div>
+  </Story>
+</Preview>
diff --git a/src/Button/button.stories/ButtonLayout.tsx b/src/Button/button.stories/ButtonLayout.tsx
new file mode 100644
index 00000000..464e79af
--- /dev/null
+++ b/src/Button/button.stories/ButtonLayout.tsx
@@ -0,0 +1,35 @@
+import { ClassNames } from "@emotion/core";
+import React from "react";
+import { Button } from "../Button";
+import { colors } from "../../colors";
+
+interface Props {
+  theme: NonNullable<React.ComponentProps<typeof Button>["theme"]>;
+}
+
+export const ButtonLayout: React.FC<Props> = ({ children, theme }) => (
+  <ClassNames>
+    {({ css, cx }) => (
+      <div
+        className={cx(
+          css({
+            backgroundColor:
+              theme === "light" ? colors.white : colors.black.base,
+            border: "solid 1px #dee2e7",
+            borderRadius: 8,
+            // display: "inline-flex",
+            // flexDirection: "column",
+            margin: 8,
+
+            "> *": {
+              margin: 8,
+              display: "block",
+            },
+          })
+        )}
+      >
+        {children}
+      </div>
+    )}
+  </ClassNames>
+);
diff --git a/src/Table/Table.story.tsx b/src/Table/Table.story.tsx
index d0cd501a..d90f9476 100644
--- a/src/Table/Table.story.tsx
+++ b/src/Table/Table.story.tsx
@@ -6,8 +6,6 @@ import { colors } from "../colors";
 import * as typography from "../typography";
 import { Table } from "./Table";
 
-import { Meta, Story, Props, Preview } from "@storybook/addon-docs/blocks";
-
 interface User {
   name: string;
   email: string;