From 4631c5d862d61bfa4ad6489cdc00e5375a8af1c1 Mon Sep 17 00:00:00 2001
From: filantrop <filantrop83@gmail.com>
Date: Fri, 29 Jul 2022 01:01:38 +0300
Subject: [PATCH 1/3] Create Default Container
---
src/components/Container.tsx | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
create mode 100644 src/components/Container.tsx
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
new file mode 100644
index 0000000..b53cf16
--- /dev/null
+++ b/src/components/Container.tsx
@@ -0,0 +1,17 @@
+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
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 2/3] 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',
},
},
});
From 40a8a3ab44014c8a48b0a8f126faff9174c454f8 Mon Sep 17 00:00:00 2001
From: decamel <den_spb97@mail.ru>
Date: Mon, 1 Aug 2022 12:05:53 +0300
Subject: [PATCH 3/3] Container fixes
---
src/components/Container.stories.tsx | 3 +--
src/components/Container.tsx | 7 ++++---
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src/components/Container.stories.tsx b/src/components/Container.stories.tsx
index 47b9a09..b223fc8 100644
--- a/src/components/Container.stories.tsx
+++ b/src/components/Container.stories.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import Container from './Container';
@@ -24,7 +23,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}><div className='h-40 bg-yellow-400 flex items-center justify-center uppercase font-bold'>simple</div></Container>
);
//
/* -------------------------------------------------------------------------- */
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index c7c432d..9581476 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,14 +1,15 @@
import classNames from "classnames";
+import React from "react";
type Props = {
/**
- * Content of compnent
+ * Content of component
*/
children: React.ReactNode;
/**
- * Compnent styling
+ * Component styling
*/
className?: string;
-}
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">
/**
* Main container to handle page content max-width on
* different screen sizes