import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import ImageWidget from './image-widget'; /** * ImageWidget - Storybook Meta */ export default { title: 'Organisms/Widgets/Image', component: ImageWidget, args: { alignment: 'left', }, argTypes: { alignment: { control: { type: 'select', }, description: 'The content alignment.', options: ['left', 'center', 'right'], table: { category: 'Options', defaultValue: { summary: 'left' }, }, type: { name: 'string', required: false, }, }, description: { control: { type: 'text', }, description: 'Add a caption image.', table: { category: 'Options', }, type: { name: 'string', required: false, }, }, expanded: { control: { type: 'boolean', }, description: 'The state of the widget.', type: { name: 'boolean', required: true, }, }, img: { description: 'An image object.', type: { name: 'object', required: true, value: {}, }, }, level: { control: { type: 'number', min: 1, max: 6, }, description: 'The widget title level (hn).', type: { name: 'number', required: true, }, }, title: { control: { type: 'text', }, description: 'The widget title.', type: { name: 'string', required: true, }, }, url: { control: { type: 'text', }, description: 'Add a link to the image.', table: { category: 'Options', }, type: { name: 'string', required: false, }, }, }, decorators: [ (Story) => ( ), ], } as ComponentMeta; const Template: ComponentStory = (args) => ( ); const img = { alt: 'Et perferendis quaerat', height: 480, src: 'http://placeimg.com/640/480/nature', width: 640, unoptimized: true, }; /** * 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, title: 'Quo et totam', }; www.armandphilippot.com/tree/src/components/organisms?id=d1fe9e2164fc5c8fd767b456eecc2a4eb929a33f'>organisms/forms/comment-form.module.scss
blob: f3f26469581e94710e13a7d8ffb9b8643a8eae8c (plain) 
1
2
3
4
5
6
7
8

.field {
  width: 100%;
}

.button {
  display: block;
  margin: auto;
}