feat: remove readme from stories (#65)

bigcommerce · Jul 17, 2019 · f266ebd · f266ebd
1 parent 80e327b
commit f266ebd
Show file tree

Hide file tree

Showing 10 changed files with 83 additions and 241 deletions.
diff --git a/packages/big-design/src/components/Box/README.md b/packages/big-design/src/components/Box/README.md
diff --git a/packages/big-design/src/components/ProgressBar/README.md b/packages/big-design/src/components/ProgressBar/README.md
diff --git a/packages/big-design/src/components/ProgressCircle/README.md b/packages/big-design/src/components/ProgressCircle/README.md
diff --git a/packages/storybook/.storybook/config.tsx b/packages/storybook/.storybook/config.tsx
@@ -1,9 +1,8 @@
-import { defaultTheme, Panel } from '@bigcommerce/big-design';
+import { defaultTheme } from '@bigcommerce/big-design';
 import { withA11y } from '@storybook/addon-a11y';
 import { withKnobs } from '@storybook/addon-knobs';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import React from 'react';
-import { addReadme } from 'storybook-readme-source';
 
 import { StoryWrapper } from '../components/StoryWrapper/StoryWrapper';
 
@@ -32,13 +31,8 @@ addParameters({
       value: '#ffffff',
     },
   ],
-  readme: {
-    codeTheme: 'a11y-dark',
-    StoryPreview: (props: any) => <Panel>{props.children}</Panel>,
-  },
 });
 
-addDecorator(addReadme);
 addDecorator(withKnobs);
 
 addParameters({

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -56,7 +56,6 @@
     "@types/styled-components": "^4.1.12",
     "babel-loader": "^8.0.5",
     "rimraf": "^2.6.3",
-    "storybook-readme-source": "^5.0.6",
     "ts-loader": "^6.0.4"
   }
 }
diff --git a/packages/storybook/stories/Box.story.tsx b/packages/storybook/stories/Box.story.tsx
@@ -2,14 +2,7 @@ import { Box } from '@bigcommerce/big-design';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 
-import BoxReadme from '../../big-design/src/components/Box/README.md';
-
 storiesOf('Box', module)
-  .addParameters({
-    readme: {
-      content: BoxReadme,
-    },
-  })
   .add('Basic', () => <Box>I'm a Box</Box>)
   .add('With Border', () => (
     <>

diff --git a/packages/storybook/stories/Button.story.tsx b/packages/storybook/stories/Button.story.tsx
@@ -1,4 +1,4 @@
-import { Button, DropdownIcon, Flex, Grid, Link, PlusIcon } from '@bigcommerce/big-design';
+import { Button, DropdownIcon, Flex, Grid, Link, Panel, PlusIcon } from '@bigcommerce/big-design';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import { linkTo } from '@storybook/addon-links';
@@ -12,7 +12,7 @@ const actionType = ['normal' as 'normal', 'destructive' as 'destructive'];
 
 storiesOf('Button', module)
   .add('Overview', () => (
-    <>
+    <Panel>
       <Grid columns="repeat(6, min-content)" marginBottom="xxLarge">
         <Button onClick={action('click')}>Label</Button>
         <Button onClick={action('click')} isLoading={true}>
@@ -94,7 +94,7 @@ storiesOf('Button', module)
           One of: <code>primary</code>, <code>secondary</code>, <code>subtle</code>
         </PropTable.Prop>
       </PropTable>
-    </>
+    </Panel>
   ))
   .add('With icons', () => (
     <Flex direction="column" alignItems="flex-start">

diff --git a/packages/storybook/stories/ProgressBar.story.tsx b/packages/storybook/stories/ProgressBar.story.tsx
@@ -1,26 +1,40 @@
-import { ProgressBar } from '@bigcommerce/big-design';
-import { number } from '@storybook/addon-knobs';
+import { Box, H1, H2, H3, Panel, ProgressBar } from '@bigcommerce/big-design';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 
-import ProgressBarReadme from '../../big-design/src/components/ProgressBar/README.md';
+import { CodePreview, PropTable } from '../components';
 
-const percentKnob = {
-  name: 'percentage',
-  value: 50,
-  options: {
-    range: true,
-    min: 0,
-    max: 100,
-    step: 1,
-  },
-};
+storiesOf('ProgressBar', module).add('Overview', () => (
+  <Panel>
+    <H1>ProgressBar</H1>
+    <H2>Examples</H2>
+    <H3 marginTop="xLarge">Determinant</H3>
+    <CodePreview>
+      <Box marginVertical="large">
+        <ProgressBar percent={50} />
+      </Box>
+    </CodePreview>
+    <p>
+      Determinant Progress represents a known amount of time or completeness for a task. A <code>percent</code> prop
+      needs to be passed to render a determinate progress.
+    </p>
 
-storiesOf('ProgressBar', module)
-  .addParameters({
-    readme: {
-      content: ProgressBarReadme,
-    },
-  })
-  .add('Determinant', () => <ProgressBar percent={number(percentKnob.name, percentKnob.value, percentKnob.options)} />)
-  .add('Indeterminant', () => <ProgressBar />);
+    <H3 marginTop="xLarge">Indeterminant</H3>
+    <CodePreview>
+      <Box marginVertical="large">
+        <ProgressBar />
+      </Box>
+    </CodePreview>
+    <p>
+      Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render an
+      indeterminant progress when missing a <code>percent</code> prop.
+    </p>
+
+    <H2 marginTop="xxxLarge">Properties & Methods</H2>
+    <PropTable>
+      <PropTable.Prop name="percent" types="number">
+        Sets the fill length from 0 to 100.
+      </PropTable.Prop>
+    </PropTable>
+  </Panel>
+));
diff --git a/packages/storybook/stories/ProgressCircle.story.tsx b/packages/storybook/stories/ProgressCircle.story.tsx
@@ -1,34 +1,42 @@
-import { ProgressCircle } from '@bigcommerce/big-design';
-import { boolean, number, select } from '@storybook/addon-knobs';
+import { H1, H2, H3, Panel, ProgressCircle } from '@bigcommerce/big-design';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
 
-import ProgressCircleReadme from '../../big-design/src/components/ProgressCircle/README.md';
+import { CodePreview, PropTable } from '../components';
 
-const percentKnob = {
-  name: 'percentage',
-  value: 50,
-  options: {
-    range: true,
-    min: 0,
-    max: 100,
-    step: 1,
-  },
-};
+storiesOf('ProgressCircle', module).add('Overview', () => (
+  <Panel>
+    <H1>ProgressCircle</H1>
+    <H2>Examples</H2>
+    <H3 marginTop="xLarge">Determinant</H3>
+    <CodePreview>
+      <ProgressCircle error={false} percent={50} size="large" />
+    </CodePreview>
+    <p>
+      Determinant Progress represents a known amount of time or completeness for a task. A <code>percent</code> prop
+      needs to be passed to render a determinate progress.
+    </p>
 
-const sizes = ['large' as 'large', 'medium' as 'medium', 'small' as 'small', 'xSmall' as 'xSmall'];
+    <H3 marginTop="xLarge">Indeterminant</H3>
+    <CodePreview>
+      <ProgressCircle size={'large'} />
+    </CodePreview>
+    <p>
+      Indeterminant Progress represents an unknown amount of time for a task to complete. Component will render an
+      indeterminant progress when missing a <code>percent</code> prop.
+    </p>
 
-storiesOf('ProgressCircle', module)
-  .addParameters({
-    readme: {
-      content: ProgressCircleReadme,
-    },
-  })
-  .add('Determinant', () => (
-    <ProgressCircle
-      error={boolean('error', false)}
-      percent={number(percentKnob.name, percentKnob.value, percentKnob.options)}
-      size={select('size', sizes, 'large')}
-    />
-  ))
-  .add('Indeterminant', () => <ProgressCircle size={select('size', sizes, 'large')} />);
+    <H2 marginTop="xxxLarge">Properties & Methods</H2>
+    <PropTable>
+      <PropTable.Prop name="error" types="boolean">
+        Sets state to error.
+      </PropTable.Prop>
+      <PropTable.Prop name="percent" types="number">
+        Sets the fill length from 0 to 100.
+      </PropTable.Prop>
+      <PropTable.Prop name="size" types={['xSmall', 'small', 'medium', 'large']} defaults="medium">
+        Size of the component.
+      </PropTable.Prop>
+    </PropTable>
+  </Panel>
+));