Merge pull request 'add viewports for container' (#46) from fix-container.stories into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/46
This commit is contained in:
Denis Gorbunov 2022-08-05 13:25:54 +00:00
commit e337cbadd6

View File

@ -23,7 +23,7 @@ export default {
* on a returning component. * on a returning component.
*/ */
const Template: ComponentStory<typeof Container> = (args) => ( const Template: ComponentStory<typeof Container> = (args) => (
<Container {...args}><div className='h-40 bg-yellow-400 flex items-center justify-center uppercase font-bold'>simple</div></Container> <Container {...args}></Container>
); );
// //
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
@ -31,14 +31,58 @@ const Template: ComponentStory<typeof Container> = (args) => (
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
export const Desktop: ComponentStory<typeof Container> = Template.bind({}); export const Desktop: ComponentStory<typeof Container> = Template.bind({});
Desktop.args = {
className: 'bg-blue-500 w-840 block',
children: <div>840px</div>,
}
Desktop.parameters = { Desktop.parameters = {
viewport: { viewport: {
defaultViewport: 'desktop', defaultViewport: 'desktop',
viewports: {
desktop: {
name: 'main_container',
styles: { styles: {
height: '568px', width: '840px',
width: '320px', height: '100%',
paddingLeft: '0.5rem',
paddingRight: '0.5rem',
}, },
type: 'desktop',
}, },
screen_sm: {
name: 'screen_sm',
styles: {
width: 'calc(100% - 30px)',
height: '100%',
},
type: 'tablet',
},
screen_md: {
name: 'screen_md',
styles: {
width: 'calc(100% - 30px)',
height: '100%',
},
type: 'tablet',
},
screen_lg_xl_2xl: {
name: 'lg-xl-2xl',
styles: {
width: '840px',
height: '100%',
},
type: 'desktop',
},
} }
}
}