diff --git a/packages/component-faraday-ui/src/Steps.js b/packages/component-faraday-ui/src/Steps.js new file mode 100644 index 0000000000000000000000000000000000000000..8a7bcd7611d3bd797132fa906bade095ad66d8d9 --- /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 0000000000000000000000000000000000000000..4731d9e02ff7bad7dcc0d8fbe29698508705eaa4 --- /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 0000000000000000000000000000000000000000..ccdc56e11a44b5a7927f9cd73d6b6f4201554139 --- /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 61399916a9c2f2426ae94fbb60fa0f05fbe51da5..57b52794e91a123574ee50abbb41889ebbd6afc6 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 1cc12a85386bb5c32ea1e7518319aa8f1d7a7a4d..c2b3c650c71cf5249ce0e949eb23a3f3e2b46395 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,