@@ -177,10 +173,7 @@ export const ReversedDefaultUnselected = () => (
)
-ReversedDefaultUnselected.story = {
- name: "Reversed Default Unselected",
- parameters: { ...REVERSED_BG },
-}
+ReversedDefaultUnselected.parameters = { ...REVERSED_BG }
export const ReversedDefaultUnselectedDisabled = () => (
(
)
-ReversedDefaultUnselectedDisabled.story = {
- name: "Reversed Default Unselected Disabled ",
- parameters: { ...REVERSED_BG },
-}
+ReversedDefaultUnselectedDisabled.parameters = { ...REVERSED_BG }
export const ReversedDefaultSelected = () => (
(
)
-ReversedDefaultSelected.story = {
- name: "Reversed Default Selected",
- parameters: { ...REVERSED_BG },
-}
+ReversedDefaultSelected.parameters = { ...REVERSED_BG }
export const ReversedDefaultSelectedDisabled = () => (
(
)
-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
index 35410fdbf9a..4c158420b4c 100644
--- 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 = () => (
@@ -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
index ebf3f9591f0..a04ff162e84 100644
--- 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 = () => (
(
maxLabel="Fantastic"
/>
)
-LabelAboveSlider.storyName = "Label above input"
-LabelAboveSlider.parameters = { chromatic: { disable: false } }
+LabelAboveInput.parameters = { chromatic: { disable: false } }
export const CustomMinMaxLabels = () => (
(
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
index 68a4f85dccd..1b5c9af158e 100644
--- 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
index 52eee6c0cdf..aa601447987 100644
--- 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: ,
scene: ,
diff --git a/draft-packages/illustration/docs/IllustrationScene.stories.tsx b/draft-packages/illustration/docs/IllustrationScene.stories.tsx
index 51fcbe3f349..0e348f43165 100644
--- 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,
}
diff --git a/draft-packages/table/docs/Table.stories.tsx b/draft-packages/table/docs/Table.stories.tsx
index a457abd4ed9..8ac58dcbbb9 100644
--- a/draft-packages/table/docs/Table.stories.tsx
+++ b/draft-packages/table/docs/Table.stories.tsx
@@ -196,7 +196,6 @@ export const Reversed = () => (
)
-Reversed.storyName = "Reversed"
Reversed.parameters = {
backgrounds: { default: "Purple 700" },
chromatic: { disable: false },
@@ -220,7 +219,6 @@ export const DataVariant = () => (
)
-DataVariant.storyName = "Data Variant"
DataVariant.parameters = { chromatic: { disable: false } }
export const Clickable = () => (
@@ -324,7 +322,6 @@ export const ExpandedPopout = () => {
)
}
-ExpandedPopout.storyName = "Expanded popout"
ExpandedPopout.parameters = { chromatic: { disable: false } }
export const NoHeader = () => (
@@ -342,7 +339,6 @@ export const NoHeader = () => (
)
-NoHeader.storyName = "No header"
NoHeader.parameters = { chromatic: { disable: false } }
export const ExtraSpacing = () => (
@@ -360,7 +356,7 @@ export const ExtraSpacing = () => (
)
-ExtraSpacing.storyName = "Default variant (extra spacing)"
+ExtraSpacing.storyName = "Default Variant (Extra Spacing)"
ExtraSpacing.parameters = { chromatic: { disable: false } }
export const HeaderAlignmentAndWrapping = () => (
@@ -419,7 +415,6 @@ export const HeaderAlignmentAndWrapping = () => (
)
-HeaderAlignmentAndWrapping.storyName = "Header alignments and wrapping"
HeaderAlignmentAndWrapping.parameters = { chromatic: { disable: false } }
export const Tooltip = () => (
@@ -478,7 +473,6 @@ export const Tooltip = () => (
)
-Tooltip.storyName = "Tooltip"
Tooltip.parameters = { chromatic: { disable: false } }
export const AnchorLink = () => (
@@ -525,9 +519,8 @@ export const AnchorLink = () => (
)
-AnchorLink.storyName = "Anchor Link"
-export const HoverHeaderCell = () => (
+export const HeaderRowHover = () => (
@@ -579,4 +572,3 @@ export const HoverHeaderCell = () => (
)
-HoverHeaderCell.storyName = "Header row hover"
diff --git a/draft-packages/title-block-zen/docs/TitleBlockZen.stories.tsx b/draft-packages/title-block-zen/docs/TitleBlockZen.stories.tsx
index b05b6779566..c4db25a857a 100644
--- a/draft-packages/title-block-zen/docs/TitleBlockZen.stories.tsx
+++ b/draft-packages/title-block-zen/docs/TitleBlockZen.stories.tsx
@@ -121,7 +121,6 @@ Default.args = {
,
],
}
-Default.storyName = "Default"
export const WithBadge = () => {
const [badgeCount, setBadgeCount] = React.useState(1)
@@ -437,7 +436,6 @@ export const Engagement = () => (
/>
)
-Engagement.storyName = "Engagement"
Engagement.parameters = { chromatic: { disable: false } }
export const Performance = () => (
@@ -496,7 +494,6 @@ export const Performance = () => (
/>
)
-Performance.storyName = "Performance"
Performance.parameters = { chromatic: { disable: false } }
export const PerformanceWithAvatarProps = () => (
@@ -1168,9 +1165,8 @@ export const DefaultCollapsedNavigationCard = () => (
)
-DefaultCollapsedNavigationCard.story = {
- name: "Default (collapsed navigation with card)",
-}
+DefaultCollapsedNavigationCard.storyName =
+ "Default (collapsed navigation with card)"
export const AdminVariantNavigation = () => (
diff --git a/package.json b/package.json
index 69f3e7a0452..028031f87e3 100644
--- a/package.json
+++ b/package.json
@@ -28,14 +28,14 @@
"commit": "cz"
},
"dependencies": {
- "@storybook/addon-essentials": "^6.4.22",
- "@storybook/addon-links": "^6.4.22",
- "@storybook/addons": "^6.4.22",
- "@storybook/api": "^6.4.22",
- "@storybook/components": "^6.4.22",
- "@storybook/core-events": "^6.4.22",
- "@storybook/react": "^6.4.22",
- "@storybook/theming": "^6.4.22",
+ "@storybook/addon-essentials": "^6.5.6",
+ "@storybook/addon-links": "^6.5.6",
+ "@storybook/addons": "^6.5.6",
+ "@storybook/api": "^6.5.6",
+ "@storybook/components": "^6.5.6",
+ "@storybook/core-events": "^6.5.6",
+ "@storybook/react": "^6.5.6",
+ "@storybook/theming": "^6.5.6",
"chalk": "^2.4.2",
"classnames": "^2.3.1",
"focus-visible": "^5.2.0",
@@ -45,11 +45,11 @@
"normalize.css": "^8.0.1",
"postcss-flexbugs-fixes": "^4.2.1",
"react": "^18.1.0",
- "react-17": "npm:react@^17.0.2",
"react-16": "npm:react@^16.9.0",
+ "react-17": "npm:react@^17.0.2",
"react-dom": "^18.1.0",
- "react-dom-17": "npm:react-dom@^17.0.2",
"react-dom-16": "npm:react-dom@^16.9.0",
+ "react-dom-17": "npm:react-dom@^17.0.2",
"react-gtm-module": "^2.0.11",
"svgo": "1.3.2"
},
@@ -64,10 +64,10 @@
"@babel/plugin-proposal-object-rest-spread": "^7.17.3",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.16.7",
- "@storybook/addon-a11y": "^6.4.22",
- "@storybook/builder-webpack5": "^6.4.22",
- "@storybook/manager-webpack5": "^6.4.22",
- "@storybook/node-logger": "^6.4.22",
+ "@storybook/addon-a11y": "^6.5.6",
+ "@storybook/builder-webpack5": "^6.5.6",
+ "@storybook/manager-webpack5": "^6.5.6",
+ "@storybook/node-logger": "^6.5.6",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/react-12": "npm:@testing-library/react@^12.1.5",
@@ -95,6 +95,7 @@
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
"eslint-plugin-ssr-friendly": "^1.0.6",
+ "eslint-plugin-storybook": "^0.5.12",
"jest": "^27.5.1",
"jest-canvas-mock": "^2.3.1",
"jest-circus": "^27.4.2",
@@ -104,8 +105,8 @@
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.1",
"prettier": "^2.5.1",
- "react-test-renderer-17": "npm:react-test-renderer@^17.0.2",
"react-test-renderer": "^18.1.0",
+ "react-test-renderer-17": "npm:react-test-renderer@^17.0.2",
"sass-loader": "^12.6.0",
"storybook-addon-designs": "^6.2.1",
"style-loader": "^1.3.0",
diff --git a/packages/button/docs/Button.stories.tsx b/packages/button/docs/Button.stories.tsx
index 0932a28f213..4ce0a173ce8 100644
--- a/packages/button/docs/Button.stories.tsx
+++ b/packages/button/docs/Button.stories.tsx
@@ -36,9 +36,7 @@ export default {
}
export const DefaultKaizenSiteDemo = args =>
-DefaultKaizenSiteDemo.story = {
- name: "Button",
-}
+DefaultKaizenSiteDemo.storyName = "Button"
const StickerSheetTemplate: Story<{ isReversed: boolean }> = ({
isReversed,
diff --git a/packages/component-library/stories/Box.stories.tsx b/packages/component-library/stories/Box.stories.tsx
index 0c0051d92ba..7cc4730d43f 100644
--- a/packages/component-library/stories/Box.stories.tsx
+++ b/packages/component-library/stories/Box.stories.tsx
@@ -80,7 +80,6 @@ export const BoxWithMargin = () => (
)
-BoxWithMargin.storyName = "Box With Margin"
BoxWithMargin.parameters = { chromatic: { disable: false } }
export const BoxWithPadding = () => (
@@ -90,7 +89,6 @@ export const BoxWithPadding = () => (
)
-BoxWithPadding.storyName = "Box With Padding"
BoxWithPadding.parameters = { chromatic: { disable: false } }
export const BoxWithXAndYPadding = () => (
@@ -100,7 +98,6 @@ export const BoxWithXAndYPadding = () => (
)
-BoxWithXAndYPadding.storyName = "Box With X And Y Padding"
BoxWithXAndYPadding.parameters = { chromatic: { disable: false } }
export const BoxWithRtlSupport = () => (
@@ -113,5 +110,4 @@ export const BoxWithRtlSupport = () => (
)
-BoxWithRtlSupport.storyName = "Box With Rtl Support"
BoxWithRtlSupport.parameters = { chromatic: { disable: false } }
diff --git a/packages/design-tokens/docs/ColorTokens.stories.tsx b/packages/design-tokens/docs/ColorTokens.stories.tsx
index 66f28b3cebe..427d2eda4bc 100644
--- a/packages/design-tokens/docs/ColorTokens.stories.tsx
+++ b/packages/design-tokens/docs/ColorTokens.stories.tsx
@@ -256,5 +256,3 @@ export const ColorTokens: Story = () => {
)
}
-
-ColorTokens.storyName = "Color Tokens"
diff --git a/packages/design-tokens/docs/pages/README.stories.mdx b/packages/design-tokens/docs/pages/README.stories.mdx
index 08e35c2ec80..72ce1dfa743 100644
--- a/packages/design-tokens/docs/pages/README.stories.mdx
+++ b/packages/design-tokens/docs/pages/README.stories.mdx
@@ -1,6 +1,6 @@
-import { Meta, Markdown } from '@storybook/addon-docs/blocks';
+import { Meta, Markdown } from '@storybook/addon-docs'
import Readme from '../../README.md'