add viewports

src/components/Container.stories.tsx

@@ -23,7 +23,7 @@ export default {
  * on a returning component.
  */
 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({});
-Desktop.parameters = {
+Desktop.args = {
-    viewport: {
+  className: 'bg-blue-500 w-840 block',
-      defaultViewport: 'desktop',
+  children: <div>840px</div>,   
-      styles: {
-        height: '568px',
-        width: '320px',
-      },
-    },
-    
     
 }
+
+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',
+          },
+     }
+  }
+}
+
+
+