Add Container with branding component

src/components/Container.js

@@ -0,0 +1,68 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from '@emotion/styled'
+import { color, spacing, shadows } from './shared/styles'
+import { Paragraph } from './Paragraph'
+
+const StyleContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 608px;
+  width: 352px;
+  border-radius: ${spacing.borderRadius.default}px;
+  background-color: ${color.moonGrey};
+  box-shadow: ${shadows.default};
+`
+
+const StyledContent = styled.div`
+  flex: 1 1 auto;
+  padding: ${spacing.padding.small}px ${spacing.padding.small}px 0
+    ${spacing.padding.small}px;
+  overflow-y: auto;
+`
+
+const StyledParagraph = styled(Paragraph)`
+  line-height: 0;
+  margin-bottom: ${spacing.padding.small}px;
+  display: block;
+  flex: 0 0 auto;
+`
+
+const StyledHeader = styled.div`
+  flex: 0 0 auto;
+`
+
+export const Container = props => {
+  const { branded, appName, children, header } = props
+
+  return (
+    <StyleContainer {...props}>
+      {header && <StyledHeader>{header}</StyledHeader>}
+
+      <StyledContent>{children}</StyledContent>
+
+      {branded && (
+        <StyledParagraph size="small" align="center" color="stoneGrey">
+          {appName ? `${appName} ` : ''} ⚡️by Groove
+        </StyledParagraph>
+      )}
+    </StyleContainer>
+  )
+}
+
+Container.propTypes = {
+  /**
+   * Specify whether branded
+   */
+  branded: PropTypes.bool,
+  /**
+   * Specify branding app name
+   */
+  appName: PropTypes.string,
+}
+
+Container.defaultProps = {
+  branded: false,
+  appName: null,
+}

src/components/Container.stories.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Container } from './Container'
+import { Heading } from './Heading'
+
+export default {
+  title: 'Design System|Container',
+  parameters: {
+    component: Container,
+  },
+}
+
+export const ContainerDefault = () => <Container />
+export const ContainerBranded = () => <Container branded appName="Chat" />
+export const ContainerWithChildren = () => (
+  <Container branded appName="Chat">
+    <Heading size="medium" align="center">
+      Take care of your children
+    </Heading>
+  </Container>
+)

src/components/Heading.js

@@ -21,7 +21,7 @@ const StyledHeading = styled.span`
   font-weight: ${props => typography.sizes[SIZES[props.size]].weight};
   font-size: ${props => typography.sizes[SIZES[props.size]].size}px;
   line-height: ${props => typography.sizes[SIZES[props.size]].height}px;
-  color: ${color.jetBlack};
+  color: ${props => color[props.color]};
   text-align: ${props => ALIGNMENT[props.align]};
 `
 
@@ -32,6 +32,10 @@ Heading.propTypes = {
    * Specify size
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * Specify color
+   */
+  color: PropTypes.string,
   /**
    * Specify alignmnet
    */
@@ -40,5 +44,6 @@ Heading.propTypes = {
 
 Heading.defaultProps = {
   size: 'medium',
+  color: 'jetBlack',
   align: ALIGNMENT.left,
 }

src/components/Paragraph.js

@@ -23,7 +23,7 @@ const StyledParagraph = styled.span`
   font-weight: ${props => typography.sizes[SIZES[props.size]].weight};
   font-size: ${props => typography.sizes[SIZES[props.size]].size}px;
   line-height: ${props => typography.sizes[SIZES[props.size]].height}px;
-  color: ${color.jetBlack};
+  color: ${props => color[props.color]};
   text-align: ${props => ALIGNMENT[props.align]};
 `
 
@@ -34,6 +34,10 @@ Paragraph.propTypes = {
    * Specify size
    */
   size: PropTypes.oneOf(Object.keys(SIZES)),
+  /**
+   * Specify color
+   */
+  color: PropTypes.string,
   /**
    * Specify alignmnet
    */
@@ -46,6 +50,7 @@ Paragraph.propTypes = {
 
 Paragraph.defaultProps = {
   size: 'medium',
+  color: 'jetBlack',
   align: ALIGNMENT.left,
   isInline: false,
 }

src/components/index.js

@@ -4,4 +4,7 @@ import * as animation from './shared/animation'
 
 export { styles, global, animation }
 
+export * from './Container'
 export * from './Heading'
+export * from './Paragraph'
+export * from './Icon'

src/components/shared/styles.js

@@ -43,6 +43,11 @@ export const borderColor = {
   default: color.ashGrey,
 }
 
+// Shadows
+export const shadows = {
+  default: '0 4px 16px 0 rgba(0, 0, 0, 0.1)',
+}
+
 // Spacing
 export const spacing = {
   padding: {