diff --git a/src/atoms/Progress/Progress.js b/src/atoms/Progress/Progress.js
new file mode 100644
index 00000000..4cfbd174
--- /dev/null
+++ b/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 (
+
+
+
+
+ { value } %
+
+ );
+};
+
+export { Progress };
diff --git a/src/atoms/Progress/Progress.stories.js b/src/atoms/Progress/Progress.stories.js
new file mode 100644
index 00000000..511574ad
--- /dev/null
+++ b/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', () => (
+
+
+
+
+
+
+
+
+
+
+ ));
+ });
+};
+
diff --git a/src/atoms/Progress/Progress.theme.js b/src/atoms/Progress/Progress.theme.js
new file mode 100644
index 00000000..73934381
--- /dev/null
+++ b/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',
+}));
diff --git a/src/atoms/Progress/index.js b/src/atoms/Progress/index.js
new file mode 100644
index 00000000..d3dfa461
--- /dev/null
+++ b/src/atoms/Progress/index.js
@@ -0,0 +1,2 @@
+export { Progress } from './Progress';
+export { theme } from './Progress.theme';
diff --git a/src/atoms/atoms.js b/src/atoms/atoms.js
index 8dfd2f4d..7de4ea05 100644
--- a/src/atoms/atoms.js
+++ b/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';
diff --git a/src/atoms/theme.js b/src/atoms/theme.js
index 5cfcf692..476de2eb 100644
--- a/src/atoms/theme.js
+++ b/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,
};
diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
index b17bd145..8776c312 100644
--- a/storybook/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -15460,6 +15460,141 @@ exports[`Storyshots ATOMS/Paper with header and sections 1`] = `
`;
+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;
+}
+
+
+`;
+
exports[`Storyshots ATOMS/Scrollable with default modifiers 1`] = `
.emotion-4 {
margin: 2rem;