Merge pull request 'Create Default Container' (#35) from Create-Container-component-and/or-tailwind-class into develop

Reviewed-on: http://85.143.176.51:3000/free-land/front-end/pulls/35

src/components/Container.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+
+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='h-40 bg-yellow-400 flex items-center justify-center uppercase font-bold'>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',
+      },
+    },
+    
+    
+}

src/components/Container.tsx

@@ -0,0 +1,23 @@
+import classNames from "classnames";
+import React from "react";
+type Props = {
+  /**
+   * Content of component
+   */
+  children: React.ReactNode;
+  /**
+   * Component styling
+   */
+  className?: string;
+} & Omit<React.ComponentPropsWithoutRef<"div">, "">
+/**
+ * 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>
+  )
+}

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',
           },
         },
       });