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:
commit
e337cbadd6
@ -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',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
x
Reference in New Issue
Block a user