Refactors the rest of the React stories

AgnosticUI · Sep 17, 2020 · 16f8c00 · 16f8c00
1 parent 70a4937
commit 16f8c00
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 69 deletions.
diff --git a/agnosticui-react/src/stories/ButtonIcon.stories.js b/agnosticui-react/src/stories/ButtonIcon.stories.js
@@ -6,8 +6,8 @@ export default {
   component: Button,
 };
 
-const Template = (args) => (
-  <Button {...args}>
+const SampleSvgIcon = () => {
+  return (
     <svg
       className="btn-icon"
       viewBox="0 0 16 16"
@@ -19,24 +19,25 @@ const Template = (args) => (
         fill="currentColor"
         fillRule="evenodd"
         d="M9 12h2l-3 3-3-3h2V7h2v5zm3-8c0-.44-.91-3-4.5-3C5.08 1 3 2.92 3 5 1.02
-      5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
-      1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
-      0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
-      5.06 14.08 4 12 4z" />
+  5 0 6.52 0 8c0 1.53 1 3 3 3h3V9.7H3C1.38 9.7 1.3 8.28 1.3 8c0-.17.05-1.7
+  1.7-1.7h1.3V5c0-1.39 1.56-2.7 3.2-2.7 2.55 0 3.13 1.55 3.2 1.8v1.2H12c.81
+  0 2.7.22 2.7 2.2 0 2.09-2.25 2.2-2.7 2.2h-2V11h2c2.08 0 4-1.16 4-3.5C16
+  5.06 14.08 4 12 4z" />
     </svg>
-  </Button>
-)
-
-export const IconOnLeft = Template.bind({});
-IconOnLeft.args = {
-  label: 'Icon on Left',
-  mode: 'primary',
-  isIconLeft: true,
-};
+  )
+}
 
-export const IconOnRight = Template.bind({});
-IconOnRight.args = {
-  label: 'Icon on Right',
-  mode: 'primary',
-  isIconRight: true,
-};
+export const ButtonIcons = () => (
+  <>
+    <div>
+      <Button label="Icon on Left" mode="primary" isIconLeft={true}>
+        <SampleSvgIcon />
+      </Button>
+    </div>
+    <div style={{ marginTop: 16 }}>
+      <Button label="Icon on Right" mode="primary" isIconRight={true}>
+        <SampleSvgIcon />
+      </Button>
+    </div>
+  </>
+)
diff --git a/agnosticui-react/src/stories/Card.stories.js b/agnosticui-react/src/stories/Card.stories.js
@@ -5,34 +5,32 @@ import Card from './Card.js';
 export default {
   title: 'Card',
   component: Card,
-  argTypes: {
-    css: { control: 'text' },
-    isSkinned: { control: 'boolean' },
-    isStacked: { control: 'boolean' },
-  },
-};
-
-const Template = (args) => <Card {...args}>
+}
+export const All = () => (
   <>
-    <div style={{ padding: 24 }}>Hello</div>
-    <div style={{ padding: 24 }}>World</div>
+    <Card>
+      <>
+        <div style={{ padding: 24 }}>Default</div>
+        <div style={{ padding: 24 }}>Card</div>
+      </>
+    </Card>
+    <Card isStacked={true}>
+      <>
+        <div style={{ padding: 24 }}>Stacked</div>
+        <div style={{ padding: 24 }}>Card</div>
+      </>
+    </Card>
+    <Card isSkinned={false}>
+      <>
+        <div style={{ padding: 24 }}>Base Card</div>
+        <div style={{ padding: 24 }}>No Skin</div>
+      </>
+    </Card>
+    <Card css='foo-bar'>
+      <>
+        <div style={{ padding: 24 }}>Custom CSS Class</div>
+        <div style={{ padding: 24 }}>Inspect to see foo-bar</div>
+      </>
+    </Card>
   </>
-</Card>;
-
-export const CardDefault = Template.bind({});
-CardDefault.args = {};
-
-export const CardStacked = Template.bind({});
-CardStacked.args = {
-  isStacked: true,
-};
-
-export const CardUnskinned = Template.bind({});
-CardUnskinned.args = {
-  isSkinned: false,
-};
-
-export const CardCustomCSS = Template.bind({});
-CardCustomCSS.args = {
-  css: 'foo-bar'
-};
+)
diff --git a/agnosticui-react/src/stories/Progress.stories.js b/agnosticui-react/src/stories/Progress.stories.js
@@ -4,24 +4,13 @@ import Progress from './Progress.js';
 export default {
   title: 'Progress',
   component: Progress,
-  argTypes: {
-    value: { control: 'number' },
-    max: { control: 'number' },
-  },
 };
 
-
-const Template = (args) => <Progress {...args} />;
-
-export const ProgressTest = Template.bind({});
-ProgressTest.args = {
-  value: 30,
-  max: 100,
-};
-
-export const ProgressCSS = Template.bind({});
-ProgressCSS.args = {
-  value: 30,
-  max: 100,
-  css: 'foo-bar-baz'
-};
+export const All = () => (
+  <>
+    <Progress value={30} max={100} />
+    <Progress value={30} max={100} css="foo-bar" />
+    <Progress value={0} max={100} css="foo-bar" />
+    <Progress value={100} max={100} css="foo-bar" />
+  </>
+)