From 885bd686169708aeb81c40605910fa16c821eba5 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Mon, 1 Aug 2022 17:20:27 +0300
Subject: [PATCH] added states for the container into storybooks
---
src/components/Container.stories.tsx | 66 +++++++++++++++++++++++-----
src/components/Container.tsx | 3 ++
2 files changed, 58 insertions(+), 11 deletions(-)
diff --git a/src/components/Container.stories.tsx b/src/components/Container.stories.tsx
index 47b9a09..b7ed31e 100644
--- a/src/components/Container.stories.tsx
+++ b/src/components/Container.stories.tsx
@@ -24,7 +24,7 @@ export default {
* on a returning component.
*/
const Template: ComponentStory<typeof Container> = (args) => (
- <Container {...args}><div className='w-40 h-40 bg-yellow-400'>simple</div></Container>
+ <Container {...args}></Container>
);
//
/* -------------------------------------------------------------------------- */
@@ -32,14 +32,58 @@ const Template: ComponentStory<typeof Container> = (args) => (
/* -------------------------------------------------------------------------- */
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',
- styles: {
- height: '568px',
- width: '320px',
- },
- },
-
-
-}
\ No newline at end of file
+ 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',
+ },
+ }
+ }
+}
+
+
+
\ No newline at end of file
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index c7c432d..622e4eb 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,4 +1,7 @@
import classNames from "classnames";
+import '../index.css';
+
+
type Props = {
/**
* Content of compnent
--
2.39.5