wip

src/Button/Button.stories.mdx

@@ -10,6 +10,8 @@ import { IconShip2 } from "../icons/IconShip2";
 import { ButtonLayout } from "./button.stories/ButtonLayout";
 import { colors } from "../colors";
 
+export const SampleIcon = () => <IconShip2 style={{ height: '100%', width: '100%' }} />
+
 <Meta title="Components|Button" component={Button} />
 
 # Button
@@ -21,51 +23,33 @@ import { colors } from "../colors";
 
 <Props of={Button} />
 
-### Button Sizes
-
-There are three different sizes of buttons, with the most common button being the default size. Small and large buttons are avialble for specific settings.
-
-#### standard
+## Sizes
 
-Need a button, start with this one. It’s the most common size, not too big, not too small.
+There are three different sizes of buttons, with the most common button being the default size. Small and large buttons are available for specific settings.
 
 <Preview>
   <Story inline name="default size">
     <Button>Rest click</Button>
   </Story>
   <Story inline name="default size icon">
-    <Button icon={<IconShip2 style={{ width: "100%", height: "100%" }} />} />
+    <Button icon={<SampleIcon />} />
   </Story>
-</Preview>
-
-#### small
-
-Used in situations where space might be a constraint, like in a sidebar for example.
-
-<Preview>
   <Story inline name="small">
     <Button size="small">Rest</Button>
   </Story>
   <Story inline name="small icon">
     <Button
       size="small"
-      icon={<IconShip2 style={{ width: "100%", height: "100%" }} />}
+      icon={<SampleIcon />}
     />
   </Story>
-</Preview>
-
-#### large
-
-Large buttons will likely be used in situations with a lot of whitespace, for example, large modals.
-
-<Preview>
   <Story inline name="large">
     <Button size="large">Rest</Button>
   </Story>
   <Story inline name="large icon">
     <Button
       size="large"
-      icon={<IconShip2 style={{ width: "100%", height: "100%" }} />}
+      icon={<SampleIcon />}
     />
   </Story>
 </Preview>
@@ -120,7 +104,7 @@ Light themed buttons have a border. The hover state is a shade darker than the r
       </ButtonLayout>
       <ButtonLayout theme="light">
         <Button color={colors.indigo.dark} theme="light">
-          sweet
+          Rest
         </Button>
         <Button
           color={colors.indigo.dark}
@@ -244,7 +228,12 @@ For dark themed buttons, the borders are completely removed to make the colors l
 
 <Preview>
   <Story inline name="button states dark">
-    <div style={{ margin: "0 auto" }}>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+      }}
+    >
       <ButtonLayout theme="dark">
         <Button theme="dark">Rest</Button>
         <Button theme="dark" data-force-hover-state="true">

src/Button/button.stories/ButtonLayout.tsx

@@ -17,9 +17,8 @@ export const ButtonLayout: React.FC<Props> = ({ children, theme }) => (
               theme === "light" ? colors.white : colors.black.base,
             border: "solid 1px #dee2e7",
             borderRadius: 8,
-            // display: "inline-flex",
-            // flexDirection: "column",
-            margin: 8,
+            display: "inline-flex",
+            flexDirection: "column",
 
             "> *": {
               margin: 8,