Add Container component and story

Author: itsamoreh

components/atoms/Container/Container.js

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './Container.module.css'
+
+/**
+ * Render the Container component.
+ *
+ * @param {object}  props          Container component props.
+ * @param {Element} props.children Container children.
+ * @return {Element}               The Container component.
+ */
+export default function Container({children}) {
+  return <div className={styles.containerW}>{children && children}</div>
+}
+
+Container.propTypes = {
+  children: PropTypes.element
+}

components/atoms/Container/Container.module.css

@@ -0,0 +1,3 @@
+.containerW {
+  @apply container;
+}

components/atoms/Container/Container.stories.mdx

@@ -0,0 +1,16 @@
+import {Canvas, Meta, Story} from '@storybook/addon-docs/blocks'
+import Container from './'
+
+<Meta title="Components/Atoms/Container" component={Container} />
+
+# Component
+
+Use this to wrap another component in a container. This will limit the max width of everything inside of it. See [the tailwind container docs](https://tailwindcss.com/docs/container) for details.
+
+<Canvas>
+  <Story name="Component">
+    <Container>
+      <div className="p-32 bg-black text-white">I am contained.</div>
+    </Container>
+  </Story>
+</Canvas>

components/atoms/Container/index.js

@@ -0,0 +1 @@
+export {default} from './Container'