Upgrade to 6.0 / Args

.storybook/main.js

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

.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.0",
+    "@storybook/addon-actions": "6.0.0-beta.0",
+    "@storybook/addon-docs": "6.0.0-beta.0",
+    "@storybook/addon-essentials": "6.0.0-beta.0",
+    "@storybook/addon-storysource": "6.0.0-beta.0",
+    "@storybook/react": "6.0.0-beta.0",
     "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,13 @@ import { Avatar } from './Avatar';
 
 export default {
   title: 'Design System/Avatar',
-
   parameters: {
     component: Avatar,
   },
 };
 
+export const Basic = args => <Avatar {...args} />;
+
 export const large = () => (
   <div>
     <Avatar isLoading size="large" />

src/components/AvatarList.stories.js

@@ -35,19 +35,13 @@ 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} />;
-
-bigUserCount.story = {
-  name: 'big userCount',
+export const Basic = args => <AvatarList {...args} />;
+Basic.story = {
+  args: { users },
 };
-
-export const smallSize = () => <AvatarList users={users} userCount={100} size="small" />;
-
-smallSize.story = {
-  name: 'small size',
-};
-
-export const loading = () => <AvatarList isLoading />;
-export const empty = () => <AvatarList 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 SmallSize = () => <AvatarList users={users} userCount={100} size="small" />;
+export const Loading = () => <AvatarList isLoading />;
+export const Empty = () => <AvatarList 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.story = { 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.story = { 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,10 @@ export const allCheckboxes = () => (
   </form>
 );
 
-allCheckboxes.story = {
-  name: 'all checkboxes',
-};
-
-export const unchecked = () => (
+export const Unchecked = () => (
   <Checkbox id="Unchecked" label="Cats" hideLabel onChange={onChange} />
 );
 
-export const checked = () => (
+export const Checked = () => (
   <Checkbox id="Checked" label="Cats" hideLabel checked onChange={onChange} />
 );

src/components/Highlight.stories.js

@@ -75,24 +75,9 @@ 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} />;
 
-export const bash = () => (
+export const Bash = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="bash">{bashCode}</Highlight>
@@ -101,7 +86,7 @@ export const bash = () => (
   </>
 );
 
-export const javascript = () => (
+export const Javascript = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="javascript">{javascriptCode}</Highlight>
@@ -110,7 +95,7 @@ export const javascript = () => (
   </>
 );
 
-export const typescript = () => (
+export const Typescript = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="typescript">{typescriptCode}</Highlight>
@@ -119,7 +104,7 @@ export const typescript = () => (
   </>
 );
 
-export const css = () => (
+export const CSS = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="css">{cssCode}</Highlight>
@@ -128,7 +113,7 @@ export const css = () => (
   </>
 );
 
-export const json = () => (
+export const JSON = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="json">{jsonCode}</Highlight>
@@ -137,7 +122,7 @@ export const json = () => (
   </>
 );
 
-export const yaml = () => (
+export const YAML = () => (
   <>
     <strong>Autoformat</strong>
     <Highlight language="yaml">{yamlCode}</Highlight>
@@ -150,7 +135,7 @@ const SmallContainer = styled.div`
   max-width: 300px;
 `;
 
-export const wrapping = () => (
+export const Wrapping = () => (
   <SmallContainer>
     <Highlight language="javascript">{javascriptCode}</Highlight>
   </SmallContainer>
@@ -163,4 +148,4 @@ const StyledHighlight = styled(Highlight)`
   }
 `;
 
-export const customStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;
+export const CustomStyling = () => <StyledHighlight language="json">{jsonCode}</StyledHighlight>;

src/components/Icon.stories.js

@@ -53,7 +53,10 @@ export default {
   component: Icon,
 };
 
-export const labels = () => (
+export const Basic = args => <Icon {...args} />;
+Basic.story = { args: { icon: 'watch' } };
+
+export const Labels = () => (
   <>
     There are {Object.keys(icons).length} icons
     <List>
@@ -67,7 +70,7 @@ export const labels = () => (
   </>
 );
 
-export const noLabels = () => (
+export const NoLabels = () => (
   <List>
     {Object.keys(icons).map(key => (
       <Item minimal key={key}>
@@ -77,13 +80,13 @@ export const noLabels = () => (
   </List>
 );
 
-export const inline = () => (
+export const Inline = () => (
   <>
     this is an inline <Icon icon="facehappy" aria-label="Happy face" /> icon (default)
   </>
 );
 
-export const block = () => (
+export const Block = () => (
   <>
     this is a block <Icon icon="facehappy" aria-label="Happy face" block /> icon
   </>