feat(container): create container atom (#17)

- create a container component
- write test for the component
- create a styleguide for the component

[Finishes #167169184]

src/components/UI/atoms/layouts/FlexContainer/FlexContainer.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import theme from '<variables>/mainTheme';
+
+
+/**
+ * @description - Container Component
+ *
+ * @prop {node} children - children
+ * @prop {string} margin - margin
+ * @prop {string} padding - padding
+ * @prop {string} display - display
+ * @prop {string} backgroundColor - background color
+ * @prop {string} borderColor - border color
+ * @prop {string} borderRadius - add border radius
+ * @prop {string} boxShadow - boxShadow
+ *
+ * @return {component} FlexContainer
+ */
+const FlexContainer = ({
+  children,
+  margin,
+  padding,
+  display,
+  backgroundColor,
+  borderColor,
+  borderRadius,
+  boxShadow,
+}) => (
+  <FlexContainer.Container
+    margin={margin}
+    padding={padding}
+    display={display}
+    backgroundColor={backgroundColor}
+    borderColor={borderColor}
+    borderRadius={borderRadius}
+    boxShadow={boxShadow}
+  >
+    {children}
+  </FlexContainer.Container>
+);
+
+FlexContainer.Container = styled.div`
+  ${({
+    margin,
+    padding,
+    display,
+    borderRadius,
+    boxShadow,
+    backgroundColor,
+    borderColor,
+    theme: {
+      spacing, backgroundColors, borderColors, boxShadows,
+    },
+  }) => `
+    display: ${display};
+    background-color: ${backgroundColors[backgroundColor]};
+    margin: ${spacing[margin]};
+    padding: ${spacing[padding]};
+    border-radius: ${spacing[borderRadius]};
+    box-shadow: ${boxShadows[boxShadow]};
+    border: 1px solid ${borderColors[borderColor] || 'transparent'};
+  `}
+`;
+
+FlexContainer.defaultProps = {
+  display: 'flex',
+  backgroundColor: 'white001',
+  padding: 'sm',
+  boxShadow: 'none',
+  borderRadius: 'zero',
+  margin: 'zero',
+};
+
+const {
+  spacing, backgroundColors, borderColors, boxShadows,
+} = theme;
+
+FlexContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  margin: PropTypes.oneOf(Object.keys(spacing)),
+  padding: PropTypes.oneOf(Object.keys(spacing)),
+  backgroundColor: PropTypes.oneOf(Object.keys(backgroundColors)),
+  display: PropTypes.oneOf(['block', 'inline', 'flex', 'inline-block', 'none']),
+  borderColor: PropTypes.oneOf(Object.keys(borderColors)),
+  borderRadius: PropTypes.oneOf(Object.keys(spacing)),
+  boxShadow: PropTypes.oneOf(Object.keys(boxShadows)),
+};
+
+export default FlexContainer;

src/components/UI/atoms/layouts/FlexContainer/FlexContainer.md

@@ -0,0 +1,71 @@
+FlexContainer Default:
+
+```jsx
+<FlexContainer>
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with borderColor
+
+```jsx
+<FlexContainer borderColor="primary">
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with borderRadius
+
+```jsx
+<FlexContainer borderColor="primary" borderRadius='xs'>
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with articleCard boxShadow
+
+```jsx
+<FlexContainer boxShadow="articleCard">
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with section boxShadow
+
+```jsx
+<FlexContainer boxShadow="section">
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with backgroundColor
+
+```jsx
+<FlexContainer backgroundColor="primary">
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with margin
+
+```jsx
+<FlexContainer borderColor="primary" margin="md">
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with md padding
+
+```jsx
+<FlexContainer borderColor="primary" padding="md">
+ <span />
+</FlexContainer>
+```
+
+FlexContainer with display
+
+```jsx
+<FlexContainer borderColor="primary" display="block">
+ <span />
+</FlexContainer>
+```

src/components/UI/atoms/layouts/FlexContainer/FlexContainer.spec.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, cleanup } from '<src>/helpers/testUtils';
+import FlexContainer from './FlexContainer';
+import 'jest-dom/extend-expect';
+
+afterEach(cleanup);
+
+const defaultProps = `
+  padding: 1.6rem;
+  display: flex;
+  backgroundColor: white001;
+  border: 1px solid tranparent;
+`;
+
+describe('FlexContainer', () => {
+  it('should render the FlexContainer component', () => {
+    const { container } = render(<FlexContainer><span/></FlexContainer>);
+
+    expect(container.lastElementChild.innerHTML).toBe('<span></span>');
+    expect(container.firstChild).toHaveStyle(defaultProps);
+  });
+
+  it('should render with box-radius', () => {
+    const { container } = render(
+      <FlexContainer borderRadius='xs'><span/></FlexContainer>,
+    );
+
+    expect(container.firstChild).toHaveStyle(`
+      border-radius: 0.9rem;
+      ${defaultProps}
+    `);
+  });
+
+  it('should render with box-shadow', () => {
+    const { container } = render(
+      <FlexContainer boxShadow='articleCard'><span/></FlexContainer>,
+    );
+
+    expect(container.firstChild).toHaveStyle(`
+      border-shadow: 16px 16px 32px #F0F0F0;
+      ${defaultProps}
+    `);
+  });
+});

src/styles/GlobalStyle.jsx

@@ -6,6 +6,7 @@ const GlobalStyle = createGlobalStyle`
 html {
   box-sizing: border-box;
   font-size: 62.5%;
+  overflow: hidden;
 }
 
 *,

src/styles/variables/colorPalette.js

@@ -1,5 +1,5 @@
 export const buttonColors = {
-  white: '#FFFFFF',
+  white001: '#FFFFFF',
   black: '#191919',
   primary: '#690375',
   Hover: '#9304A4',
@@ -12,6 +12,8 @@ export const textColors = {
 
 export const backgroundColors = {
   lightPink: '#F4EDED',
+  primary: '#690375',
+  white001: '#FFFFFF',
 };
 
 export const borderColors = {

src/styles/variables/mainTheme.js

@@ -8,6 +8,7 @@ import {
 } from './colorPalette';
 import borderRadius from './border';
 import width from './width';
+import { boxShadows } from './shadows';
 
 export default {
   spacing,
@@ -19,4 +20,5 @@ export default {
   borderRadius,
   width,
   borderColors,
+  boxShadows,
 };

src/styles/variables/shadows.js

@@ -0,0 +1,7 @@
+export const boxShadows = {
+  articleCard: '16px 16px 32px #F0F0F0',
+  section: '4px 4px 40px #C2C2C2',
+  none: 'none',
+};
+
+export default boxShadows;