Upgrade to 6.0 / Args

.storybook/main.js

@@ -1,15 +1,7 @@
 module.exports = {
-  presets: [{
-    name: 'storybook-addon-deps/preset',
-    options: {
-      exclude: /^@babel/
-    }
-  }],
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
   addons: [
     '@storybook/addon-essentials',
-    '@storybook/addon-docs',
-    '@storybook/addon-actions',
     '@storybook/addon-storysource',
     '@storybook/addon-a11y',
   ],

.storybook/preview.js

@@ -1,33 +1,32 @@
 import React from 'react';
-import { addDecorator, addParameters } from '@storybook/react';
-import { withA11y } from '@storybook/addon-a11y';
-import { DocsPage } from 'storybook-addon-deps/blocks';
 import { loadFontsForStorybook } from '../src/utils/index';
 
 import { GlobalStyle } from '../src/components/shared/global';
 
-addParameters({
+export const parameters = {
   options: {
     showRoots: true,
   },
-  docs: { page: DocsPage },
-  dependencies: { 
-    //display only dependencies/dependents that have a story in storybook
-    //by default this is false
+  // automatically create action args for all props that start with "on"
+  actions: { argTypesRegex: '^on.*' },
+  dependencies: {
+    // display only dependencies/dependents that have a story in storybook
+    // by default this is false
     withStoriesOnly: true,
 
-    //completely hide a dependency/dependents block if it has no elements
-    //by default this is false
+    // completely hide a dependency/dependents block if it has no elements
+    // by default this is false
     hideEmpty: true,
-  }
-});
+  },
+};
 
-addDecorator(withA11y);
-addDecorator(story => (
+const withGlobalStyle = (storyFn) => (
   <>
     <GlobalStyle />
-    {story()}
+    {storyFn()}
   </>
-));
+);
+
+export const decorators = [withGlobalStyle];
 
 loadFontsForStorybook();

package.json

@@ -61,12 +61,12 @@
     "@babel/plugin-transform-runtime": "^7.6.2",
     "@babel/preset-env": "^7.6.3",
     "@babel/preset-react": "^7.6.3",
-    "@storybook/addon-a11y": "^5.3.8",
-    "@storybook/addon-actions": "^5.3.8",
-    "@storybook/addon-docs": "^5.3.8",
-    "@storybook/addon-essentials": "^5.3.8",
-    "@storybook/addon-storysource": "^5.3.8",
-    "@storybook/react": "^5.3.8",
+    "@storybook/addon-a11y": "6.0.0-beta.20",
+    "@storybook/addon-actions": "6.0.0-beta.20",
+    "@storybook/addon-docs": "6.0.0-beta.20",
+    "@storybook/addon-essentials": "6.0.0-beta.20",
+    "@storybook/addon-storysource": "6.0.0-beta.20",
+    "@storybook/react": "6.0.0-beta.20",
     "auto": "^7.11.0",
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.0.6",
@@ -91,7 +91,6 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "sort-package-json": "^1.21.0",
-    "storybook-addon-deps": "^1.0.9",
     "storybook-chromatic": "^3.0.3"
   },
   "peerDependencies": {

src/components/Avatar.stories.js

@@ -4,12 +4,11 @@ import { Avatar } from './Avatar';
 
 export default {
   title: 'Design System/Avatar',
-
-  parameters: {
-    component: Avatar,
-  },
+  component: Avatar,
 };
 
+export const Basic = args => <Avatar {...args} />;
+
 export const large = () => (
   <div>
     <Avatar isLoading size="large" />

src/components/AvatarList.stories.js

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { AvatarList } from './AvatarList';
 import { Avatar } from './Avatar';
 
@@ -35,19 +34,23 @@ export default {
   excludeStories: ['users'],
 };
 
-export const short = () => <AvatarList users={users.slice(0, 2)} />;
-export const ellipsized = () => <AvatarList users={users} />;
-export const bigUserCount = () => <AvatarList users={users} userCount={100} />;
+export const Basic = args => <AvatarList {...args} />;
+Basic.args = { users };
 
-bigUserCount.story = {
-  name: 'big userCount',
-};
+export const Short = Basic.bind();
+Short.args = { users: users.slice(0, 2) };
 
-export const smallSize = () => <AvatarList users={users} userCount={100} size="small" />;
+export const Ellipsized = Basic.bind();
+Ellipsized.args = { users };
 
-smallSize.story = {
-  name: 'small size',
-};
+export const BigUserCount = Basic.bind();
+BigUserCount.args = { users, userCount: 100 };
+
+export const SmallSize = Basic.bind();
+SmallSize.args = { users, userCount: 100, size: 'small' };
+
+export const Loading = Basic.bind();
+Loading.args = { users: [], isLoading: true };
 
-export const loading = () => <AvatarList isLoading />;
-export const empty = () => <AvatarList users={[]} />;
+export const Empty = Basic.bind();
+Empty.args = { users: [] };

src/components/Badge.stories.js

@@ -7,7 +7,9 @@ export default {
   component: Badge,
 };
 
-export const all = () => (
+export const Basic = args => <Badge {...args}>Badge</Badge>;
+
+export const All = () => (
   <div>
     <Badge status="positive">Positive</Badge>
     <Badge status="negative">Negative</Badge>
@@ -17,13 +19,9 @@ export const all = () => (
   </div>
 );
 
-export const withIcon = () => (
+export const WithIcon = () => (
   <Badge status="warning">
     <Icon icon="check" inline />
     with icon
   </Badge>
 );
-
-withIcon.story = {
-  name: 'with icon',
-};

src/components/Button.stories.js

@@ -23,7 +23,10 @@ export default {
   component: Button,
 };
 
-export const buttons = () => (
+export const Basic = args => <Button {...args} />;
+Basic.args = { children: 'Label' };
+
+export const All = () => (
   <>
     <Button appearance="primary">Primary</Button>
     <Button appearance="secondary">Secondary</Button>
@@ -43,7 +46,7 @@ export const buttons = () => (
   </>
 );
 
-export const sizes = () => (
+export const Sizes = () => (
   <>
     <Button appearance="primary">Default</Button>
     <Button appearance="primary" size="small">
@@ -52,7 +55,7 @@ export const sizes = () => (
   </>
 );
 
-export const loading = () => (
+export const Loading = () => (
   <>
     <Button appearance="primary" isLoading>
       Primary
@@ -72,7 +75,7 @@ export const loading = () => (
   </>
 );
 
-export const disabled = () => (
+export const Disabled = () => (
   <>
     <Button appearance="primary" isDisabled>
       Primary
@@ -89,7 +92,7 @@ export const disabled = () => (
   </>
 );
 
-export const containsIcon = () => (
+export const ContainsIcon = () => (
   <>
     <Button appearance="outline" containsIcon>
       <Icon icon="link" aria-label="Link" />
@@ -100,7 +103,7 @@ export const containsIcon = () => (
   </>
 );
 
-export const buttonWrapper = () => (
+export const BasicWrapper = () => (
   <div>
     <ButtonWrapper>Original Button Wrapper</ButtonWrapper>
     <br />
@@ -110,11 +113,7 @@ export const buttonWrapper = () => (
   </div>
 );
 
-buttonWrapper.story = {
-  name: 'button wrapper',
-};
-
-export const anchorWrapper = () => (
+export const AnchorWrapper = () => (
   <div>
     <StoryLinkWrapper to="http://storybook.js.org">Original Link Wrapper</StoryLinkWrapper>
     <br />
@@ -123,7 +122,3 @@ export const anchorWrapper = () => (
     </Button>
   </div>
 );
-
-anchorWrapper.story = {
-  name: 'anchor wrapper',
-};

src/components/Checkbox.stories.js

@@ -10,7 +10,10 @@ export default {
   component: Checkbox,
 };
 
-export const allCheckboxes = () => (
+export const Basic = args => <Checkbox {...args} />;
+Basic.args = { label: 'Basic', hideLabel: false };
+
+export const All = () => (
   <form>
     <Checkbox id="Unchecked" label="Cats" hideLabel onChange={onChange} />
     <Checkbox id="Checked" label="Cats" hideLabel checked onChange={onChange} />
@@ -32,14 +35,8 @@ export const allCheckboxes = () => (
   </form>
 );
 
-allCheckboxes.story = {
-  name: 'all checkboxes',
-};
+export const Unchecked = Basic.bind();
+Unchecked.args = { id: 'Unchecked', label: 'Cats', hideLabel: true };
 
-export const unchecked = () => (
-  <Checkbox id="Unchecked" label="Cats" hideLabel onChange={onChange} />
-);
-
-export const checked = () => (
-  <Checkbox id="Checked" label="Cats" hideLabel checked onChange={onChange} />
-);
+export const Checked = Basic.bind();
+Checked.args = { id: 'Checked', label: 'Cats', hideLabel: true, checked: true };

src/components/Highlight.stories.js

@@ -75,24 +75,10 @@ export default {
   component: Highlight,
 };
 
-export const allLanguages = () => (
-  <Highlight>
-    {[
-      bashCodeWithWrappers,
-      javascriptCodeWithWrappers,
-      typescriptCodeWithWrappers,
-      cssCodeWithWrappers,
-      jsonCodeWithWrappers,
-      yamlCodeWithWrappers,
-    ].join('')}
-  </Highlight>
-);
-
-allLanguages.story = {
-  name: 'all languages',
-};
+export const Basic = args => <Highlight {...args} />;
+Basic.args = {};
 
-export const bash = () => (
+export const Bash = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="bash">{bashCode}</Highlight>
@@ -101,7 +87,7 @@ export const bash = () => (
   </>
 );
 
-export const javascript = () => (
+export const Javascript = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="javascript">{javascriptCode}</Highlight>
@@ -110,7 +96,7 @@ export const javascript = () => (
   </>
 );
 
-export const typescript = () => (
+export const Typescript = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="typescript">{typescriptCode}</Highlight>
@@ -119,7 +105,7 @@ export const typescript = () => (
   </>
 );
 
-export const css = () => (
+export const CSS = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="css">{cssCode}</Highlight>
@@ -128,7 +114,7 @@ export const css = () => (
   </>
 );
 
-export const json = () => (
+export const JSON = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="json">{jsonCode}</Highlight>
@@ -137,7 +123,7 @@ export const json = () => (
   </>
 );
 
-export const yaml = () => (
+export const YAML = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="yaml">{yamlCode}</Highlight>
@@ -150,7 +136,7 @@ const SmallContainer = styled.div`
   max-width: 300px;
 `;
 
-export const wrapping = () => (
+export const Wrapping = () => (
   <SmallContainer>
     <Highlight language="javascript">{javascriptCode}</Highlight>
   </SmallContainer>
@@ -163,4 +149,4 @@ const StyledHighlight = styled(Highlight)`
   }
 `;
 
-export const customStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;
+export const CustomStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;