feat(atoms): adds container component

closes #134

src/components/atoms/Container/Container.jsx

@@ -0,0 +1,29 @@
+import { css } from '@emotion/react';
+import PropTypes from 'prop-types';
+
+export function Container({ children, className }) {
+  return (
+    <div
+      className={className}
+      css={css`
+        margin: 0 auto;
+        padding: 0 1rem;
+        max-width: var(--page-width);
+      `}
+    >
+      {children}
+    </div>
+  );
+}
+
+Container.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+Container.defaultProps = {
+  children: null,
+  className: null,
+};
+
+export default Container;

src/components/atoms/Container/Container.stories.jsx

@@ -0,0 +1,28 @@
+import { css } from '@emotion/react';
+import { Container } from './Container';
+
+const StoryContainer = (props) => (
+  <Container
+    {...props}
+    css={css`
+      background: rgba(255, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 300px;
+      height: 50vh;
+    `}
+  />
+);
+
+export default {
+  component: Container,
+  title: 'Components/Atoms/Container',
+};
+
+const Template = (args) => <StoryContainer {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Container',
+};

src/components/atoms/Container/Container.test.jsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { Container } from './Container';
+
+describe('<Container />', () => {
+  it('should render a container', () => {
+    expect.assertions(2);
+
+    const child = 'Test';
+
+    render(<Container>{child}</Container>);
+
+    expect(screen.getByText('Test')).toBeInTheDocument();
+
+    expect(screen.getByText('Test')).toHaveStyle(`
+      margin: 0 auto;
+      padding: 0 1rem;
+      max-width: var(--page-width);
+    `);
+  });
+
+  it('should render a container with a className', () => {
+    expect.assertions(1);
+
+    const child = 'Test';
+
+    render(<Container className="test">{child}</Container>);
+
+    expect(screen.getByText('Test')).toHaveClass('test');
+  });
+});

src/components/atoms/Container/index.js

@@ -0,0 +1,5 @@
+import { Container } from './Container';
+
+export * from './Container';
+
+export default Container;

src/styles/theme/elements.js

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { rem } from 'polished';
 import { colors } from './colors';
 
 export const link = {
@@ -40,7 +41,16 @@ export const textCSS = css`
   --text-color-muted: ${text.color.muted};
 `;
 
+export const page = {
+  width: rem(800),
+};
+
+export const pageCSS = css`
+  --page-width: ${page.width};
+`;
+
 export const elementsCSS = css`
   ${linkCSS}
   ${textCSS}
+  ${pageCSS}
 `;

src/styles/theme/index.js

@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { colors, colorsCSS } from './colors';
 import { fonts, fontsCSS } from './fonts';
 import { elevation, elevationCSS } from './elevation';
-import { elementsCSS, text, link } from './elements';
+import { elementsCSS, text, link, page } from './elements';
 
 export const themeCSS = css`
   ${colorsCSS}
@@ -17,6 +17,7 @@ export const theme = {
   elevation,
   text,
   link,
+  page,
 };
 
 export default theme;