diff options
Diffstat (limited to 'src/components/organisms/widgets/image-widget.stories.tsx')
| -rw-r--r-- | src/components/organisms/widgets/image-widget.stories.tsx | 71 |
1 files changed, 61 insertions, 10 deletions
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx index 1c2397b..27871ae 100644 --- a/src/components/organisms/widgets/image-widget.stories.tsx +++ b/src/components/organisms/widgets/image-widget.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import ImageWidgetComponent from './image-widget'; +import ImageWidget from './image-widget'; +/** + * ImageWidget - Storybook Meta + */ export default { - title: 'Organisms/Widgets', - component: ImageWidgetComponent, + title: 'Organisms/Widgets/Image', + component: ImageWidget, args: { alignment: 'left', }, @@ -58,6 +61,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'The widget title level (hn).', type: { @@ -89,12 +94,17 @@ export default { }, }, }, -} as ComponentMeta<typeof ImageWidgetComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof ImageWidget>; -const Template: ComponentStory<typeof ImageWidgetComponent> = (args) => ( - <IntlProvider locale="en"> - <ImageWidgetComponent {...args} /> - </IntlProvider> +const Template: ComponentStory<typeof ImageWidget> = (args) => ( + <ImageWidget {...args} /> ); const img = { @@ -102,10 +112,51 @@ const img = { height: 480, src: 'http://placeimg.com/640/480/nature', width: 640, + unoptimized: true, }; -export const ImageWidget = Template.bind({}); -ImageWidget.args = { +/** + * ImageWidget Stories - Align left + */ +export const AlignLeft = Template.bind({}); +AlignLeft.args = { + alignment: 'left', + expanded: true, + img, + level: 2, + title: 'Quo et totam', +}; + +/** + * ImageWidget Stories - Align center + */ +export const AlignCenter = Template.bind({}); +AlignCenter.args = { + alignment: 'center', + expanded: true, + img, + level: 2, + title: 'Quo et totam', +}; + +/** + * ImageWidget Stories - Align right + */ +export const AlignRight = Template.bind({}); +AlignRight.args = { + alignment: 'right', + expanded: true, + img, + level: 2, + title: 'Quo et totam', +}; + +/** + * ImageWidget Stories - With description + */ +export const WithDescription = Template.bind({}); +WithDescription.args = { + description: 'Sint enim harum', expanded: true, img, level: 2, |
