feat(Progress): add initial progress

src/atoms/Progress/Progress.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  ProgressOuterTag,
+  ProgressInnerTag,
+  ProgressValueTag,
+  ProgressTextTag,
+} from './Progress.theme';
+
+type ProgressProps = {|
+  value: number,
+|};
+
+const Progress = ({ value, ...rest }: ProgressProps) => {
+  value = value > 100 ? value % 100 : value;
+
+  return (
+    <ProgressOuterTag { ...rest }>
+      <ProgressInnerTag>
+        <ProgressValueTag style={{ width: `${value}%` }} />
+      </ProgressInnerTag>
+      <ProgressTextTag>{ value } %</ProgressTextTag>
+    </ProgressOuterTag>
+  );
+};
+
+export { Progress };

src/atoms/Progress/Progress.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default (asStory) => {
+  asStory('ATOMS/Progress', module, (story, { Progress }) => {
+    story
+      .add('with default modifiers', () => (
+        <React.Fragment>
+          <Progress value={ 0 } />
+          <br />
+          <Progress value={ 30 } />
+          <br />
+          <Progress value={ 50 } />
+          <br />
+          <Progress value={ 100 } />
+          <br />
+        </React.Fragment>
+      ));
+  });
+};
+

src/atoms/Progress/Progress.theme.js

@@ -0,0 +1,37 @@
+import { createStyledTag, createTheme } from '../../utils';
+
+const name = 'progress';
+
+export const theme = createTheme(name, {
+  modifiers: {
+  },
+  defaults: {
+  },
+});
+
+export const ProgressOuterTag = createStyledTag(name, {
+  width: '100%',
+  display: 'flex',
+});
+
+export const ProgressInnerTag = createStyledTag(`${name}Inner`, ({ theme }) => ({
+  heigth: '1.2rem',
+  flex: '1',
+  background: theme.COLORS.LIGHT_GRAY4,
+  borderRadius: '1.2rem',
+}));
+
+export const ProgressValueTag = createStyledTag(`${name}Value`, ({ theme }) => ({
+  backgroundColor: theme.COLORS.PRIMARY,
+  borderRadius: '1.2rem',
+  height: '100%',
+}));
+
+export const ProgressTextTag = createStyledTag(`${name}Text`, ({ theme }) => ({
+  fontSize: '13px',
+  fontWeight: '600',
+  marginLeft: '1.2rem',
+  whiteSpace: 'nowrap',
+  color: theme.COLORS.PRIMARY,
+  width: '3.6rem',
+}));

src/atoms/Progress/index.js

@@ -0,0 +1,2 @@
+export { Progress } from './Progress';
+export { theme } from './Progress.theme';

src/atoms/atoms.js

@@ -38,5 +38,6 @@ export { TextArea } from './dataEntry/TextArea';
 export { TextAreaField } from './dataEntry/TextAreaField';
 export { Loader } from './Loader';
 export { Table } from './Table';
+export { Progress } from './Progress';
 export { SecondaryNavigation } from './SecondaryNavigation';
 

src/atoms/theme.js

@@ -32,6 +32,7 @@ import { theme as switchTheme } from './dataEntry/Switch';
 import { theme as textTheme } from './typography/Text';
 import { theme as loaderTheme } from './Loader';
 import { theme as tableTheme } from './Table';
+import { theme as progressTheme } from './Progress';
 import { theme as secondaryNavigationTheme } from './SecondaryNavigation';
 
 export const theme = {
@@ -68,4 +69,5 @@ export const theme = {
   ...tableTheme,
   ...switchTheme,
   ...secondaryNavigationTheme,
+  ...progressTheme,
 };

storybook/__tests__/__snapshots__/storyshots.test.js.snap

@@ -15460,6 +15460,141 @@ exports[`Storyshots ATOMS/Paper with header and sections 1`] = `
 </div>
 `;
 
+exports[`Storyshots ATOMS/Progress with default modifiers 1`] = `
+.emotion-32 {
+  margin: 2rem;
+}
+
+.emotion-6 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-2 {
+  heigth: 1.2rem;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  background: #EDF0F2;
+  border-radius: 1.2rem;
+}
+
+.emotion-0 {
+  background-color: #4DA1FF;
+  border-radius: 1.2rem;
+  height: 100%;
+}
+
+.emotion-4 {
+  font-size: 13px;
+  font-weight: 600;
+  margin-left: 1.2rem;
+  white-space: nowrap;
+  color: #4DA1FF;
+  width: 3.6rem;
+}
+
+<div
+  className="emotion-32 emotion-33"
+>
+  <div
+    className="emotion-6 emotion-1"
+  >
+    <div
+      className="emotion-2 emotion-1"
+    >
+      <div
+        className="emotion-0 emotion-1"
+        style={
+          Object {
+            "width": "0%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="emotion-4 emotion-1"
+    >
+      0
+       %
+    </div>
+  </div>
+  <br />
+  <div
+    className="emotion-6 emotion-1"
+  >
+    <div
+      className="emotion-2 emotion-1"
+    >
+      <div
+        className="emotion-0 emotion-1"
+        style={
+          Object {
+            "width": "30%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="emotion-4 emotion-1"
+    >
+      30
+       %
+    </div>
+  </div>
+  <br />
+  <div
+    className="emotion-6 emotion-1"
+  >
+    <div
+      className="emotion-2 emotion-1"
+    >
+      <div
+        className="emotion-0 emotion-1"
+        style={
+          Object {
+            "width": "50%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="emotion-4 emotion-1"
+    >
+      50
+       %
+    </div>
+  </div>
+  <br />
+  <div
+    className="emotion-6 emotion-1"
+  >
+    <div
+      className="emotion-2 emotion-1"
+    >
+      <div
+        className="emotion-0 emotion-1"
+        style={
+          Object {
+            "width": "100%",
+          }
+        }
+      />
+    </div>
+    <div
+      className="emotion-4 emotion-1"
+    >
+      100
+       %
+    </div>
+  </div>
+  <br />
+</div>
+`;
+
 exports[`Storyshots ATOMS/Scrollable with default modifiers 1`] = `
 .emotion-4 {
   margin: 2rem;