chore: upgrade storybook to 6.5 (#2801)

* chore: upgrade storybook to 6.5 * refactor: remove redundant story name assignments * chore: update imports of `@storybook/addon-docs/blocks` to `@storybook/addon-docs` * chore: update stories usage of argType.defaultValue (deprecated) * chore: remove usage of storybook .story annotations (deprecated)
cultureamp · Jun 20, 2022 · 8a4619b · 8a4619b
1 parent 5cece24
commit 8a4619b
Show file tree

Hide file tree

Showing 28 changed files with 848 additions and 1,034 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
     "prettier",
     "plugin:ssr-friendly/recommended",
     "plugin:jsx-a11y/recommended",
+    "plugin:storybook/recommended",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -178,11 +179,9 @@ module.exports = {
     "no-new-wrappers": "error",
     "no-return-await": "error",
     "no-sequences": "error",
-
     // The base no-shadow rule reports incorrect errors in typescript
     "no-shadow": "off",
     "@typescript-eslint/no-shadow": ["error"],
-
     "no-sparse-arrays": "error",
     "no-template-curly-in-string": "error",
     "no-throw-literal": "error",

diff --git a/draft-packages/button/docs/deprecated.Button.stories.tsx b/draft-packages/button/docs/deprecated.Button.stories.tsx
@@ -808,9 +808,7 @@ export const ReversedButtons = () => (
   </>
 )
 export const DefaultKaizenSiteDemo = args => <Button {...args} />
-DefaultKaizenSiteDemo.story = {
-  name: "Default Button (Kaizen Site Demo)",
-}
+DefaultKaizenSiteDemo.storyName = "Default Button (Kaizen Site Demo)"
 
 ReversedButtons.parameters = {
   backgrounds: {

diff --git a/draft-packages/form/docs/CheckboxField.stories.tsx b/draft-packages/form/docs/CheckboxField.stories.tsx
@@ -191,10 +191,8 @@ export const ReversedOn = () => (
     reversed
   />
 )
-ReversedOn.story = {
-  name: "Reversed + on",
-  parameters: { ...REVERSED_BG },
-}
+ReversedOn.storyName = "Reversed + on"
+ReversedOn.parameters = { ...REVERSED_BG }
 
 export const ReversedDisabledOn = () => (
   <CheckboxField
@@ -205,10 +203,8 @@ export const ReversedDisabledOn = () => (
     disabled
   />
 )
-ReversedDisabledOn.story = {
-  name: "Reversed Disabled + on",
-  parameters: { ...REVERSED_BG },
-}
+ReversedDisabledOn.storyName = "Reversed Disabled + on"
+ReversedDisabledOn.parameters = { ...REVERSED_BG }
 
 export const ReversedOff = () => (
   <CheckboxField
@@ -218,10 +214,8 @@ export const ReversedOff = () => (
     reversed
   />
 )
-ReversedOff.story = {
-  name: "Reversed + off",
-  parameters: { ...REVERSED_BG },
-}
+ReversedOff.storyName = "Reversed + off"
+ReversedOff.parameters = { ...REVERSED_BG }
 
 export const ReversedDisabledOff = () => (
   <CheckboxField
@@ -232,7 +226,5 @@ export const ReversedDisabledOff = () => (
     disabled
   />
 )
-ReversedDisabledOff.story = {
-  name: "Reversed Disabled + off",
-  parameters: { ...REVERSED_BG },
-}
+ReversedDisabledOff.storyName = "Reversed Disabled + off"
+ReversedDisabledOff.parameters = { ...REVERSED_BG }
diff --git a/draft-packages/form/docs/CheckboxGroup.stories.tsx b/draft-packages/form/docs/CheckboxGroup.stories.tsx
@@ -112,7 +112,6 @@ export const WithDisabledCheckboxes = () => (
     </CheckboxGroup>
   </div>
 )
-WithDisabledCheckboxes.storyName = "with disabled checkboxes"
 
 export const Rtl = () => (
   <div dir="rtl">
@@ -172,7 +171,6 @@ export const WithBottomMargin = () => (
     />
   </div>
 )
-WithBottomMargin.storyName = "with bottom margin"
 WithBottomMargin.parameters = { chromatic: { disable: false } }
 
 export const WithoutBottomMargin = () => (
@@ -206,7 +204,6 @@ export const WithoutBottomMargin = () => (
     />
   </div>
 )
-WithoutBottomMargin.storyName = "without bottom margin"
 WithoutBottomMargin.parameters = { chromatic: { disable: false } }
 
 export const NestedCheckboxGroup = () => {
@@ -272,7 +269,6 @@ export const NestedCheckboxGroup = () => {
     </div>
   )
 }
-NestedCheckboxGroup.storyName = "Nested Checkbox Group"
 
 export const ReversedCheckboxGroup = args => (
   <div>
@@ -316,10 +312,7 @@ export const ReversedCheckboxGroup = args => (
     </CheckboxGroup>
   </div>
 )
-ReversedCheckboxGroup.story = {
-  name: "Reversed Checkbox Group",
-  parameters: {
-    ...REVERSED_BG,
-    chromatic: { disable: false },
-  },
+ReversedCheckboxGroup.parameters = {
+  ...REVERSED_BG,
+  chromatic: { disable: false },
 }
diff --git a/draft-packages/form/docs/RadioField.stories.tsx b/draft-packages/form/docs/RadioField.stories.tsx
@@ -106,7 +106,6 @@ export const UnselectedDisabled = () => (
     <ExampleContent />
   </RadioField>
 )
-UnselectedDisabled.storyName = "Unselected disabled"
 
 export const UnselectedDefault = () => (
   <RadioField
@@ -120,7 +119,6 @@ export const UnselectedDefault = () => (
     <ExampleContent />
   </RadioField>
 )
-UnselectedDefault.storyName = "Unselected default"
 
 export const SelectedDefault = () => (
   <RadioField
@@ -134,7 +132,6 @@ export const SelectedDefault = () => (
     <ExampleContent />
   </RadioField>
 )
-SelectedDefault.storyName = "Selected default"
 
 export const SelectedDisabled = () => (
   <RadioField
@@ -148,7 +145,6 @@ export const SelectedDisabled = () => (
     <ExampleContent />
   </RadioField>
 )
-SelectedDisabled.storyName = "Selected disabled"
 
 export const Rtl = () => (
   <div dir="rtl">
@@ -177,10 +173,7 @@ export const ReversedDefaultUnselected = () => (
     <ExampleContent />
   </RadioField>
 )
-ReversedDefaultUnselected.story = {
-  name: "Reversed Default Unselected",
-  parameters: { ...REVERSED_BG },
-}
+ReversedDefaultUnselected.parameters = { ...REVERSED_BG }
 
 export const ReversedDefaultUnselectedDisabled = () => (
   <RadioField
@@ -194,10 +187,7 @@ export const ReversedDefaultUnselectedDisabled = () => (
     <ExampleContent />
   </RadioField>
 )
-ReversedDefaultUnselectedDisabled.story = {
-  name: "Reversed Default Unselected Disabled ",
-  parameters: { ...REVERSED_BG },
-}
+ReversedDefaultUnselectedDisabled.parameters = { ...REVERSED_BG }
 
 export const ReversedDefaultSelected = () => (
   <RadioField
@@ -211,10 +201,7 @@ export const ReversedDefaultSelected = () => (
     <ExampleContent />
   </RadioField>
 )
-ReversedDefaultSelected.story = {
-  name: "Reversed Default Selected",
-  parameters: { ...REVERSED_BG },
-}
+ReversedDefaultSelected.parameters = { ...REVERSED_BG }
 
 export const ReversedDefaultSelectedDisabled = () => (
   <RadioField
@@ -229,7 +216,4 @@ export const ReversedDefaultSelectedDisabled = () => (
     <ExampleContent />
   </RadioField>
 )
-ReversedDefaultSelectedDisabled.story = {
-  name: "Reversed Default Selected Disabled",
-  parameters: { ...REVERSED_BG },
-}
+ReversedDefaultSelectedDisabled.parameters = { ...REVERSED_BG }
diff --git a/draft-packages/form/docs/RadioGroup.stories.tsx b/draft-packages/form/docs/RadioGroup.stories.tsx
@@ -126,7 +126,6 @@ export const WithDisabledRadios = () => (
     )}
   />
 )
-WithDisabledRadios.storyName = "With disabled radios"
 
 export const Rtl = () => (
   <div dir="rtl">
@@ -251,7 +250,6 @@ export const WithLinks = () => (
     )}
   />
 )
-WithLinks.storyName = "With links"
 WithLinks.parameters = { chromatic: { disable: false } }
 
 export const WithBottomMargin = () => (
@@ -296,7 +294,6 @@ export const WithBottomMargin = () => (
     )}
   />
 )
-WithBottomMargin.storyName = "With bottom margin"
 WithBottomMargin.parameters = { chromatic: { disable: false } }
 
 export const WithoutBottomMargin = () => (
@@ -341,7 +338,6 @@ export const WithoutBottomMargin = () => (
     )}
   />
 )
-WithoutBottomMargin.storyName = "Without bottom margin"
 WithoutBottomMargin.parameters = { chromatic: { disable: false } }
 
 export const ReversedDefault = () => (
@@ -379,10 +375,7 @@ export const ReversedDefault = () => (
     )}
   />
 )
-ReversedDefault.story = {
-  name: "Reversed Default",
-  parameters: {
-    ...REVERSED_BG,
-    chromatic: { disable: false },
-  },
+ReversedDefault.parameters = {
+  ...REVERSED_BG,
+  chromatic: { disable: false },
 }
diff --git a/draft-packages/form/docs/Slider.stories.tsx b/draft-packages/form/docs/Slider.stories.tsx
@@ -38,7 +38,6 @@ export const Uncontrolled = () => (
     maxLabel="Fantastic"
   />
 )
-Uncontrolled.storyName = "Uncontrolled"
 Uncontrolled.parameters = { chromatic: { disable: false } }
 
 export const Controlled = () => {
@@ -54,9 +53,8 @@ export const Controlled = () => {
     />
   )
 }
-Controlled.storyName = "Controlled"
 
-export const LabelAboveSlider = () => (
+export const LabelAboveInput = () => (
   <Slider
     id="make-me-unique-4"
     labelText="Work overall"
@@ -67,8 +65,7 @@ export const LabelAboveSlider = () => (
     maxLabel="Fantastic"
   />
 )
-LabelAboveSlider.storyName = "Label above input"
-LabelAboveSlider.parameters = { chromatic: { disable: false } }
+LabelAboveInput.parameters = { chromatic: { disable: false } }
 
 export const CustomMinMaxLabels = () => (
   <Slider
@@ -107,7 +104,6 @@ export const Prominent = () => (
     maxLabel="Fantastic"
   />
 )
-Prominent.storyName = "Prominent"
 Prominent.parameters = { chromatic: { disable: false } }
 
 export const Disabled = () => (
@@ -121,7 +117,6 @@ export const Disabled = () => (
     maxLabel="Fantastic"
   />
 )
-Disabled.storyName = "Disabled"
 Disabled.parameters = { chromatic: { disable: false } }
 
 export const ReadOnly = () => (

diff --git a/draft-packages/form/docs/TextAreaField.stories.tsx b/draft-packages/form/docs/TextAreaField.stories.tsx
@@ -18,6 +18,15 @@ export default {
       "https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=14539%3A69482"
     ),
   },
+  args: {
+    status: "default",
+    variant: "default",
+  },
+  argTypes: {
+    autogrow: {
+      table: { defaultValue: { summary: false } },
+    },
+  },
   decorators: [withDesign],
 }
 
@@ -37,15 +46,6 @@ DefaultStory.argTypes = {
       disable: true,
     },
   },
-  autogrow: {
-    defaultValue: { summary: "false" },
-  },
-  status: {
-    defaultValue: "default",
-  },
-  variant: {
-    defaultValue: "default",
-  },
 }
 DefaultStory.storyName = "Default (Kaizen Demo)"
 

diff --git a/draft-packages/guidance-block/docs/GuidanceBlock.stories.tsx b/draft-packages/guidance-block/docs/GuidanceBlock.stories.tsx
@@ -87,7 +87,6 @@ DefaultStory.argTypes = {
   illustration: {
     control: { type: "radio" },
     options: ["spot", "scene"],
-    defaultValue: "spot",
     mapping: {
       spot: <Informative alt="" />,
       scene: <HumanityAtWork alt="" />,

diff --git a/draft-packages/illustration/docs/IllustrationScene.stories.tsx b/draft-packages/illustration/docs/IllustrationScene.stories.tsx
@@ -60,12 +60,10 @@ import { CATEGORIES, SUB_CATEGORIES } from "../../../storybook/constants"
 const IS_CHROMATIC = isChromatic()
 
 const STATIC_SCENE_CONTROLS = {
-  argTypes: {
-    isAnimated: { table: { disable: true } },
-    loop: { table: { disable: true } },
-    autoplay: { table: { disable: true } },
-    onEnded: { table: { disable: true } },
-  },
+  isAnimated: { table: { disable: true } },
+  loop: { table: { disable: true } },
+  autoplay: { table: { disable: true } },
+  onEnded: { table: { disable: true } },
 }
 
 export default {
@@ -268,7 +266,7 @@ const INFORMATION_MODALS_COMPONENTS: SceneComponents = [
 ]
 
 export const InformationModals = IllustrationScenesTemplate.bind({})
-InformationModals.story = { ...STATIC_SCENE_CONTROLS }
+InformationModals.argTypes = STATIC_SCENE_CONTROLS
 InformationModals.args = {
   sceneComponents: INFORMATION_MODALS_COMPONENTS,
 }
@@ -313,7 +311,7 @@ const MISCELLANEOUS_COMPONENTS: SceneComponents = [
 ]
 
 export const Miscellaneous = IllustrationScenesTemplate.bind({})
-Miscellaneous.story = { ...STATIC_SCENE_CONTROLS }
+Miscellaneous.argTypes = STATIC_SCENE_CONTROLS
 Miscellaneous.args = {
   sceneComponents: MISCELLANEOUS_COMPONENTS,
 }
@@ -378,7 +376,7 @@ const SKILLS_COACH_COMPONENTS: SceneComponents = [
 ]
 
 export const SkillsCoach = IllustrationScenesTemplate.bind({})
-SkillsCoach.story = { ...STATIC_SCENE_CONTROLS }
+SkillsCoach.argTypes = STATIC_SCENE_CONTROLS
 SkillsCoach.args = {
   sceneComponents: SKILLS_COACH_COMPONENTS,
 }
@@ -395,7 +393,7 @@ const SURVEY_COMPONENTS: SceneComponents = [
 ]
 
 export const Survey = IllustrationScenesTemplate.bind({})
-Survey.story = { ...STATIC_SCENE_CONTROLS }
+Survey.argTypes = STATIC_SCENE_CONTROLS
 Survey.args = {
   sceneComponents: SURVEY_COMPONENTS,
 }
@@ -416,7 +414,7 @@ const ENGAGEMENT_COMPONENTS: SceneComponents = [
 ]
 
 export const Engagement = IllustrationScenesTemplate.bind({})
-Engagement.story = { ...STATIC_SCENE_CONTROLS }
+Engagement.argTypes = STATIC_SCENE_CONTROLS
 Engagement.args = {
   sceneComponents: ENGAGEMENT_COMPONENTS,
 }