88 lines
2.2 KiB
TypeScript
Executable File
88 lines
2.2 KiB
TypeScript
Executable File
import React from 'react';
|
|
|
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
|
|
import Container from './Container';
|
|
|
|
export default {
|
|
// Title inside navigation bar
|
|
title: 'Container',
|
|
// Component to test
|
|
component: Container,
|
|
// Clarifying the way how to process specific
|
|
// properties of your component and which values
|
|
// it can accept.
|
|
} as ComponentMeta<typeof Container>;
|
|
|
|
/**
|
|
* This is a way to define a tempalte for your component.
|
|
*
|
|
* This template should cover all the states.
|
|
*
|
|
* In most cases you should just distruct args attribute
|
|
* on a returning component.
|
|
*/
|
|
const Template: ComponentStory<typeof Container> = (args) => (
|
|
<Container {...args}></Container>
|
|
);
|
|
//
|
|
/* -------------------------------------------------------------------------- */
|
|
/* States of your component */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
export const Desktop: ComponentStory<typeof Container> = Template.bind({});
|
|
Desktop.args = {
|
|
className: 'bg-blue-500 w-840 block',
|
|
children: <div>840px</div>,
|
|
|
|
}
|
|
|
|
Desktop.parameters = {
|
|
viewport: {
|
|
defaultViewport: 'desktop',
|
|
|
|
viewports: {
|
|
|
|
desktop: {
|
|
name: 'main_container',
|
|
styles: {
|
|
width: '840px',
|
|
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',
|
|
},
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|