From 3cae270cb70ec7e69a1abbcd23f8ff47948bad5a Mon Sep 17 00:00:00 2001 From: zouxuoz Date: Mon, 10 Dec 2018 17:14:51 +0300 Subject: [PATCH] feat(Progress): add initial progress --- src/atoms/Progress/Progress.js | 27 ++++ src/atoms/Progress/Progress.stories.js | 20 +++ src/atoms/Progress/Progress.theme.js | 37 +++++ src/atoms/Progress/index.js | 2 + src/atoms/atoms.js | 1 + src/atoms/theme.js | 2 + .../__snapshots__/storyshots.test.js.snap | 135 ++++++++++++++++++ 7 files changed, 224 insertions(+) create mode 100644 src/atoms/Progress/Progress.js create mode 100644 src/atoms/Progress/Progress.stories.js create mode 100644 src/atoms/Progress/Progress.theme.js create mode 100644 src/atoms/Progress/index.js 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; +} + +
+
+
+
+
+
+ 0 + % +
+
+
+
+
+
+
+
+ 30 + % +
+
+
+
+
+
+
+
+ 50 + % +
+
+
+
+
+
+
+
+ 100 + % +
+
+
+
+`; + exports[`Storyshots ATOMS/Scrollable with default modifiers 1`] = ` .emotion-4 { margin: 2rem;