From 2b845e708da2779b46fbb10339208bc136894815 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Fri, 29 Jul 2022 17:25:54 +0300
Subject: [PATCH] added changes to
Container.stories.tsx,Container.tsx,tailwind.config.js
---
src/components/Container.stories.tsx | 45 ++++++++++++++++++++++++++++
src/components/Container.tsx | 37 +++++++++++++----------
tailwind.config.js | 8 ++---
3 files changed, 70 insertions(+), 20 deletions(-)
create mode 100644 src/components/Container.stories.tsx
diff --git a/src/components/Container.stories.tsx b/src/components/Container.stories.tsx
new file mode 100644
index 0000000..47b9a09
--- /dev/null
+++ b/src/components/Container.stories.tsx
@@ -0,0 +1,45 @@
+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',
+ },
+ },
+
+
+}
\ No newline at end of file
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index b53cf16..c7c432d 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,17 +1,22 @@
+import classNames from "classnames";
type Props = {
- children: React.ReactNode;
- className?: string;
- }
-
- /* -------------------------------------------------------------------------- */
- /* default is 840px as our template */
- /* -------------------------------------------------------------------------- */
-
- export default function Container({children, className}: Props) {
- return (
- <div className={ (className) ? className : 'w-[840px]' }>
- {children}
- </div>
- )
- }
-
\ No newline at end of file
+ /**
+ * Content of compnent
+ */
+ children: React.ReactNode;
+ /**
+ * Compnent styling
+ */
+ className?: string;
+}
+/**
+ * Main container to handle page content max-width on
+ * different screen sizes
+ */
+export default function Container({children, className}: Props) {
+ return (
+ <div className={ classNames('container mx-auto', className) }>
+ {children}
+ </div>
+ )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index ce47318..f8b96c6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,7 +67,7 @@ module.exports = {
function ({ addComponents }) {
addComponents({
'.container': {
- maxWidth: '100%',
+ maxWidth: '840px',
paddingLeft: '0.5rem',
paddingRight: '0.5rem',
'@screen sm': {
@@ -77,13 +77,13 @@ module.exports = {
maxWidth: 'calc(100% - 30px)',
},
'@screen lg': {
- maxWidth: '960px',
+ maxWidth: '840px',
},
'@screen xl': {
- maxWidth: '1080px',
+ maxWidth: '840px',
},
'@screen 2xl': {
- maxWidth: '1080px',
+ maxWidth: '840px',
},
},
});