From 9c242b30dfabe3a49abf0c3ff9b39b909c9eab39 Mon Sep 17 00:00:00 2001 From: Alexandru Munteanu <alexandru.munt@gmail.com> Date: Wed, 15 Aug 2018 14:20:53 +0300 Subject: [PATCH] feat(styleguide): steps override --- packages/component-faraday-ui/src/Steps.js | 10 ++++ packages/component-faraday-ui/src/Steps.md | 5 ++ packages/hindawi-theme/src/elements/Steps.js | 49 ++++++++++++++++++++ packages/hindawi-theme/src/elements/index.js | 2 + packages/hindawi-theme/src/index.js | 6 +++ 5 files changed, 72 insertions(+) create mode 100644 packages/component-faraday-ui/src/Steps.js create mode 100644 packages/component-faraday-ui/src/Steps.md create mode 100644 packages/hindawi-theme/src/elements/Steps.js diff --git a/packages/component-faraday-ui/src/Steps.js b/packages/component-faraday-ui/src/Steps.js new file mode 100644 index 000000000..8a7bcd761 --- /dev/null +++ b/packages/component-faraday-ui/src/Steps.js @@ -0,0 +1,10 @@ +import React from 'react' +import { Steps } from '@pubsweet/ui' + +export default () => ( + <Steps currentStep={1}> + <Steps.Step key="step-1" title="Previous" /> + <Steps.Step key="step-2" title="Current step" /> + <Steps.Step key="step-3" title="Next step" /> + </Steps> +) diff --git a/packages/component-faraday-ui/src/Steps.md b/packages/component-faraday-ui/src/Steps.md new file mode 100644 index 000000000..4731d9e02 --- /dev/null +++ b/packages/component-faraday-ui/src/Steps.md @@ -0,0 +1,5 @@ +Submission steps. + +```js +<Steps /> +``` \ No newline at end of file diff --git a/packages/hindawi-theme/src/elements/Steps.js b/packages/hindawi-theme/src/elements/Steps.js new file mode 100644 index 000000000..ccdc56e11 --- /dev/null +++ b/packages/hindawi-theme/src/elements/Steps.js @@ -0,0 +1,49 @@ +/* eslint-disable no-nested-ternary */ + +import { css } from 'styled-components' +import { th } from '@pubsweet/ui-toolkit' + +const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"> + <path fill="#fff" d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/> +</svg>` + +export default { + Step: css` + height: 20px; + width: 20px; + box-sizing: border-box; + border: ${props => + props.isPast + ? 'none' + : props.isCurrent ? '6px solid #dbdbdb' : '2px solid #dbdbdb'}; + background-color: ${props => + !props.isCurrent && !props.isPast + ? th('colorBackground') + : 'transparent'}; + z-index: 10; + `, + Separator: css` + background-color: ${props => + props.isPast ? th('colorPrimary') : th('colorBorder')}; + margin: 0 -2px; + z-index: 1; + `, + Bullet: css` + background-color: ${th('colorPrimary')}; + width: 8px; + height: 8px; + `, + Success: css` + background: url('data:image/svg+xml;utf8,${encodeURIComponent( + checkIcon, + )}') center no-repeat, ${th('colorPrimary')}; + `, + StepTitle: css` + color: ${props => + props.isCurrent ? th('steps.currentStepColor') : th('colorText')}; + font-family: ${props => + props.isCurrent ? th('fontHeading') : th('fontReading')}; + font-size: ${th('fontSizeBase')}; + line-height: ${th('lineHeightBase')}; + `, +} diff --git a/packages/hindawi-theme/src/elements/index.js b/packages/hindawi-theme/src/elements/index.js index 61399916a..57b52794e 100644 --- a/packages/hindawi-theme/src/elements/index.js +++ b/packages/hindawi-theme/src/elements/index.js @@ -1,5 +1,6 @@ import Icon from './Icon' import Menu from './Menu' +import Steps from './Steps' import Button from './Button' import Heading from './Heading' import Checkbox from './Checkbox' @@ -10,6 +11,7 @@ import ValidatedTextField from './ValidatedTextField' export { Icon, Menu, + Steps, Button, Heading, Checkbox, diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js index 1cc12a853..c2b3c650c 100644 --- a/packages/hindawi-theme/src/index.js +++ b/packages/hindawi-theme/src/index.js @@ -5,6 +5,7 @@ import './fonts/index.css' import { Icon, Menu, + Steps, Button, Heading, Checkbox, @@ -104,6 +105,10 @@ const hindawiTheme = { hoverShadow: '0 1px 2px 1px #939393', }, + steps: { + currentStepColor: '#003049', + }, + /* Text variables */ // fonts fontInterface: "'Myriad Pro Bold'", @@ -157,6 +162,7 @@ const hindawiTheme = { { Icon, Menu, + Steps, Button, Checkbox, Accordion, -- GitLab