updates the stories based on feedback and packages versions

naoki8ster · Jun 25, 2020 · 47e6a12 · 47e6a12
1 parent 1db5586
commit 47e6a12
Show file tree

Hide file tree

Showing 41 changed files with 1,063 additions and 1,006 deletions.
diff --git a/package.json b/package.json
@@ -53,12 +53,12 @@
  },
  "devDependencies": {
  "@babel/core": "^7.4.5",
- "@storybook/addon-a11y": "^6.0.0-beta.34",
- "@storybook/addon-actions": "^6.0.0-beta.34",
- "@storybook/addon-links": "^6.0.0-beta.34",
- "@storybook/addon-viewport": "^6.0.0-beta.34",
- "@storybook/addons": "^6.0.0-beta.34",
- "@storybook/react": "^6.0.0-beta.34",
+ "@storybook/addon-a11y": "^6.0.0-beta.36",
+ "@storybook/addon-actions": "^6.0.0-beta.36",
+ "@storybook/addon-links": "^6.0.0-beta.36",
+ "@storybook/addon-viewport": "^6.0.0-beta.36",
+ "@storybook/addons": "^6.0.0-beta.36",
+ "@storybook/react": "^6.0.0-beta.36",
  "babel-eslint": "^10.0.3",
  "babel-loader": "^8.0.6",
  "babel-plugin-styled-components": "^1.10.0",

diff --git a/src/components/basics/BoxLink.stories.js b/src/components/basics/BoxLink.stories.js
@@ -12,5 +12,4 @@ const Wrapper = styled.div`
  padding: 20px;
 `;
 
-export const Basic = () => <BoxLink to="/">BoxLink content</BoxLink>;
-Basic.storyName = 'Default';
+export const Default = () => <BoxLink to="/">BoxLink content</BoxLink>;
diff --git a/src/components/basics/GatsbyLink.stories.js b/src/components/basics/GatsbyLink.stories.js
@@ -6,5 +6,4 @@ export default {
  title: 'Basics/GatsbyLink',
 };
 
-export const Basic = () => <GatsbyLink to="/">I am a GatsbyLink</GatsbyLink>;
-Basic.storyName = 'Default';
+export const Default = () => <GatsbyLink to="/">I am a GatsbyLink</GatsbyLink>;
diff --git a/src/components/basics/IconLearnStorybook.stories.js b/src/components/basics/IconLearnStorybook.stories.js
@@ -6,5 +6,4 @@ export default {
  title: 'Basics/IconLearnStorybook',
 };
 
-export const Basic = () => <IconLearnStorybook />;
-Basic.storyName = 'Default';
+export const Default = () => <IconLearnStorybook />;
diff --git a/src/components/basics/Logo.stories.js b/src/components/basics/Logo.stories.js
@@ -12,12 +12,10 @@ const BlueBackground = styled.div`
  background-image: linear-gradient(14deg, #26c6db 0%, #2694db 100%);
 `;
 
-export const Basic = () => <Logo />;
-Basic.storyName = 'Default';
+export const Default = () => <Logo />;
 
 export const Inverted = () => (
  <BlueBackground>
  <Logo isInverted />
  </BlueBackground>
 );
-Inverted.storyName = 'inverted';
diff --git a/src/components/basics/LogoChroma.stories.js b/src/components/basics/LogoChroma.stories.js
@@ -6,5 +6,4 @@ export default {
  title: 'Basics/LogoChroma',
 };
 
-export const Basic = () => <LogoChroma />;
-Basic.storyName = 'Default';
+export const Default = () => <LogoChroma />;
diff --git a/src/components/basics/LogoChromatic.stories.js b/src/components/basics/LogoChromatic.stories.js
@@ -6,5 +6,4 @@ export default {
  title: 'Basics/LogoChromatic',
 };
 
-export const Basic = () => <LogoChromatic />;
-Basic.storyName = 'Default';
+export const Default = () => <LogoChromatic />;
diff --git a/src/components/basics/ShadowBox.stories.js b/src/components/basics/ShadowBox.stories.js
@@ -6,5 +6,4 @@ export default {
  title: 'Basics/ShadowBox',
 };
 
-export const Basic = () => <ShadowBox>Shadow box content</ShadowBox>;
-Basic.storyName = 'default';
+export const Default = () => <ShadowBox>Shadow box content</ShadowBox>;
diff --git a/src/components/basics/Stat.stories.js b/src/components/basics/Stat.stories.js
@@ -14,5 +14,4 @@ const Wrapper = styled.div`
  padding: 20px;
 `;
 
-export const Basic = () => <Stat value="6" label="Contributors" />;
-Basic.storyName = 'Default';
+export const Default = () => <Stat value="6" label="Contributors" />;
diff --git a/src/components/composite/AppLayout.stories.js b/src/components/composite/AppLayout.stories.js
@@ -8,15 +8,12 @@ const Children = styled.div`
  justify-content: center;
  padding: 169px 0 100px;
 `;
-
-const props = {
- children: <Children>I am the app.</Children>,
- location: { pathname: '' },
-};
-
 export default {
  component: AppLayout,
  title: 'Composite/AppLayout',
+ args: {
+ children: <Children>I am the app.</Children>,
+ location: { pathname: '' },
+ },
 };
-export const Basic = () => <AppLayout {...props} />;
-Basic.storyName = 'Default';
+export const Default = args => <AppLayout {...args} />;
diff --git a/src/components/composite/CTA.stories.js b/src/components/composite/CTA.stories.js
@@ -29,4 +29,3 @@ export const All = () => (
  />
  </>
 );
-All.storyName = 'all';
diff --git a/src/components/composite/Footer.stories.js b/src/components/composite/Footer.stories.js
@@ -5,25 +5,27 @@ export default {
  component: Footer,
  excludeStories: /.*Data$/,
  title: 'Composite/Footer',
-};
-
-export const Basic = args => <Footer {...args} />;
-Basic.storyName = 'Default';
-Basic.args = {
- guides: {
- edges: [
- {
- node: { frontmatter: { title: 'Intro to Storybook' }, fields: { slug: 'slug' } },
- },
- {
- node: { frontmatter: { title: 'Storybook Best Practices' }, fields: { slug: 'slug' } },
- },
- {
- node: { frontmatter: { title: 'Master Storybook' }, fields: { slug: 'slug' } },
- },
- {
- node: { frontmatter: { title: 'Component-Driven Development' }, fields: { slug: 'slug' } },
- },
- ],
+ args: {
+ guides: {
+ edges: [
+ {
+ node: { frontmatter: { title: 'Intro to Storybook' }, fields: { slug: 'slug' } },
+  },
+  {
+  node: { frontmatter: { title: 'Storybook Best Practices' }, fields: { slug: 'slug' } },
+ },
+  {
+  node: { frontmatter: { title: 'Master Storybook' }, fields: { slug: 'slug' } },
+ },
+  {
+  node: {
+  frontmatter: { title: 'Component-Driven Development' },
+  fields: { slug: 'slug' },
+  },
+ },
+ ],
+ },
  },
 };
+
+export const Default = args => <Footer {...args} />;
diff --git a/src/components/composite/Header.stories.js b/src/components/composite/Header.stories.js
@@ -8,55 +8,33 @@ const BlueBackground = styled.div`
  height: 120px;
 `;
 
-const props = {
- firstChapter: 'get-started',
- githubUrl: 'https://github.com/chromaui/learnstorybook.com',
- guides: {
- edges: [
- {
- node: {
- frontmatter: {
- title: 'Guide title',
- description: 'Guide description',
- },
- fields: {
- slug: 'guide-slug',
- },
- },
- },
- ],
- },
-};
-
 export default {
  component: Header,
  title: 'Composite/Header',
-};
-
-export const Basic = args => <Header {...args} />;
-Basic.storyName = 'default';
-Basic.args = {
- firstChapter: 'get-started',
- githubUrl: 'https://github.com/chromaui/learnstorybook.com',
- guides: {
- edges: [
- {
- node: {
- frontmatter: {
- title: 'Guide title',
- description: 'Guide description',
- },
- fields: {
- slug: 'guide-slug',
+ args: {
+ firstChapter: 'get-started',
+ githubUrl: 'https://github.com/chromaui/learnstorybook.com',
+ guides: {
+ edges: [
+ {
+ node: {
+ frontmatter: {
+ title: 'Guide title',
+ description: 'Guide description',
+ },
+ fields: {
+ slug: 'guide-slug',
+ },
  },
  },
- },
- ],
+ ],
+ },
  },
 };
-export const Inverted = () => (
+
+export const Default = args => <Header {...args} />;
+export const Inverted = args => (
  <BlueBackground>
- <Header isInverted {...props} />
+ <Header isInverted {...args} />
  </BlueBackground>
 );
-Inverted.storyName = 'inverted';
diff --git a/src/components/composite/MailingListSignup.stories.js b/src/components/composite/MailingListSignup.stories.js
@@ -10,5 +10,4 @@ export default {
  decorators: [story => <Wrapper>{story()}</Wrapper>],
  title: 'Composite/MailingListSignup',
 };
-export const Basic = () => <MailingListSignup />;
-Basic.storyName = 'Default';
+export const Default = () => <MailingListSignup />;
diff --git a/src/components/composite/ShadowBoxCTA.stories.js b/src/components/composite/ShadowBoxCTA.stories.js
@@ -17,13 +17,11 @@ export default {
  component: ShadowBoxCTA,
  decorators: [story => <Wrapper>{story()}</Wrapper>],
  title: 'Composite/ShadowBoxCTA',
+ args: {
+ action: ctaAction,
+ headingText: 'Composite component',
+ messageText: 'Assemble a composite component out of simpler components',
+ },
 };
 
-export const Basic = () => (
- <ShadowBoxCTA
- action={ctaAction}
- headingText="Composite component"
- messageText="Assemble a composite component out of simpler components"
- />
-);
-Basic.storyName = 'Default';
+export const Default = args => <ShadowBoxCTA {...args} />;
diff --git a/src/components/composite/User.stories.js b/src/components/composite/User.stories.js
@@ -4,12 +4,11 @@ import User from './User';
 export default {
  component: User,
  title: 'Composite/User',
+ args: {
+ src: 'https://avatars2.githubusercontent.com/u/263385',
+ name: 'Dominic Nguyen',
+ detail: 'Professional rapper',
+ },
 };
 
-export const Basic = args => <User {...args} />;
-Basic.storyName = 'Default';
-Basic.args = {
- src: 'https://avatars2.githubusercontent.com/u/263385',
- name: 'Dominic Nguyen',
- detail: 'Professional rapper',
-};
+export const Default = args => <User {...args} />;
diff --git a/src/components/screens/ChapterScreen/ChapterLinks.stories.js b/src/components/screens/ChapterScreen/ChapterLinks.stories.js
@@ -4,18 +4,17 @@ import ChapterLinks from './ChapterLinks';
 export default {
  component: ChapterLinks,
  title: 'Screens/ChapterScreen/ChapterLinks',
+ args: {
+ guide: 'guide',
+ },
 };
 
-export const Basic = args => <ChapterLinks {...args} />;
-Basic.storyName = 'with commit';
-Basic.args = {
+const ChapterLinksStory = args => <ChapterLinks {...args} />;
+
+export const WithCommit = ChapterLinksStory.bind();
+WithCommit.args = {
  codeGithubUrl: 'https://github.com',
  commit: 'AAAAAA',
- guide: 'guide',
 };
 
-export const WithoutCommit = Basic.bind();
-WithoutCommit.storyName = 'without commit';
-WithoutCommit.args = {
- guide: 'guide',
-};
+export const WithoutCommit = ChapterLinksStory.bind();