45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
|
|
|
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}><div className='w-40 h-40 bg-yellow-400'>simple</div></Container>
|
|
);
|
|
//
|
|
/* -------------------------------------------------------------------------- */
|
|
/* States of your component */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
export const Desktop: ComponentStory<typeof Container> = Template.bind({});
|
|
Desktop.parameters = {
|
|
viewport: {
|
|
defaultViewport: 'desktop',
|
|
styles: {
|
|
height: '568px',
|
|
width: '320px',
|
|
},
|
|
},
|
|
|
|
|
|
} |