feat: create box container (#172)

packages/styled-components/src/components/containers/Box/Box.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Box } from '.';
+import { text, select } from '@storybook/addon-knobs';
+import styled from 'styled-components';
+
+export default {
+  title: 'Containers/Box',
+  component: Box,
+};
+
+const StyledBox = styled(Box)`
+  background: #cdd7ff;
+  border: 2px solid black;
+  padding: 10px;
+`;
+
+export const Sizes = () => (
+  <>
+    <h1>Box sizes</h1>
+    {Object.keys(Box.Sizes).map((size: any) => (
+      <>
+        <StyledBox size={Box.Sizes[size]}>{size}</StyledBox>
+        <br />
+      </>
+    ))}
+  </>
+);
+
+export const Playground = () => (
+  <>
+    <h1>Playground</h1>
+    <StyledBox size={select('Box size', Box.Sizes, Box.Sizes.Content)}>
+      {text('Children', 'Children')}
+    </StyledBox>
+  </>
+);

packages/styled-components/src/components/containers/Box/Box.styled.ts

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { getTheme } from 'utils/getTheme';
+
+interface Props {
+  theme: any;
+}
+
+export const StyledBox = styled.div<Props>`
+  &.screen {
+    width: 100vw;
+    height: 100vh;
+  }
+  &.full {
+    width: 100%;
+    height: 100%;
+  }
+  &.content {
+    width: 100%;
+    height: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: ${(props) => getTheme(props).breakpoints.xl};
+  }
+`;

packages/styled-components/src/components/containers/Box/Box.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Box } from '.';
+
+describe('Box', () => {
+  const testId = 'box';
+  it('should render children', () => {
+    render(<Box>foo</Box>);
+    screen.getByText('foo');
+  });
+  it('should render class', () => {
+    render(<Box className="foo">foo</Box>);
+    const box = screen.getByTestId(testId);
+    expect(box).toHaveClass('foo');
+  });
+  it('should render screen size', () => {
+    render(<Box size={Box.Sizes.Screen}>foo</Box>);
+    const box = screen.getByTestId(testId);
+    expect(box).toHaveClass(Box.Sizes.Screen);
+  });
+  it('should render full size', () => {
+    render(<Box size={Box.Sizes.Full}>foo</Box>);
+    const box = screen.getByTestId(testId);
+    expect(box).toHaveClass(Box.Sizes.Full);
+  });
+  it('should render content size', () => {
+    render(<Box size={Box.Sizes.Content}>foo</Box>);
+    const box = screen.getByTestId(testId);
+    expect(box).toHaveClass(Box.Sizes.Content);
+  });
+});

packages/styled-components/src/components/containers/Box/Box.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+import { Props, Sizes } from './Box.types';
+import { StyledBox } from './Box.styled';
+
+export const Box = ({ children, className, size, testId = 'box' }: Props) => (
+  <StyledBox className={cn(className, size)} data-testid={testId}>
+    {children}
+  </StyledBox>
+);
+
+Box.Sizes = Sizes;

packages/styled-components/src/components/containers/Box/Box.types.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+export type Props = {
+  children?: ReactNode;
+  className?: string;
+  size?: Sizes;
+  testId?: string;
+};
+
+export enum Sizes {
+  Full = 'full',
+  Screen = 'screen',
+  Content = 'content',
+}

packages/styled-components/src/components/containers/Box/index.tsx

@@ -0,0 +1 @@
+export * from './Box';

packages/styled-components/src/components/containers/index.tsx

@@ -0,0 +1 @@
+export * from './Box';

packages/styled-components/src/index.ts

@@ -1 +1,2 @@
 export * from './components/primitives';
+export * from './components/containers';