From 5cade4e17dba62f3a9bae7c9656d8691083000b1 Mon Sep 17 00:00:00 2001 From: robertzlatarski Date: Tue, 27 Jun 2017 15:22:05 +0100 Subject: [PATCH] feat(ui-toolkit): initial Progressbar implementation --- packages/ui-toolkit/src/icons/index.js | 1 + .../ui-toolkit/src/icons/svg/icon_tick.svg | 4 +- packages/ui-toolkit/src/icons/tick.js | 7 + packages/ui-toolkit/src/index.js | 8 +- .../ui-toolkit/src/progress-bar/button.js | 131 ++++++++++++++++++ packages/ui-toolkit/src/progress-bar/index.js | 23 +++ .../ui-toolkit/src/progress-bar/indicator.js | 55 ++++++++ packages/ui-toolkit/src/progress-bar/item.js | 14 ++ packages/ui-toolkit/src/progress-bar/usage.md | 23 +++ packages/ui-toolkit/styleguide.config.js | 3 +- 10 files changed, 265 insertions(+), 4 deletions(-) create mode 100644 packages/ui-toolkit/src/icons/tick.js create mode 100644 packages/ui-toolkit/src/progress-bar/button.js create mode 100644 packages/ui-toolkit/src/progress-bar/index.js create mode 100644 packages/ui-toolkit/src/progress-bar/indicator.js create mode 100644 packages/ui-toolkit/src/progress-bar/item.js create mode 100644 packages/ui-toolkit/src/progress-bar/usage.md diff --git a/packages/ui-toolkit/src/icons/index.js b/packages/ui-toolkit/src/icons/index.js index d94712c5..4a0a5a90 100644 --- a/packages/ui-toolkit/src/icons/index.js +++ b/packages/ui-toolkit/src/icons/index.js @@ -2,3 +2,4 @@ export { default as CloseIcon } from './close'; export { default as PlusIcon } from './plus'; export { default as MinusIcon } from './minus'; export { default as ArrowIcon } from './arrow'; +export { default as TickIcon } from './tick'; diff --git a/packages/ui-toolkit/src/icons/svg/icon_tick.svg b/packages/ui-toolkit/src/icons/svg/icon_tick.svg index ba0ee959..a8732f7b 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_tick.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_tick.svg @@ -4,8 +4,8 @@ tick Created with Sketch. - - + + diff --git a/packages/ui-toolkit/src/icons/tick.js b/packages/ui-toolkit/src/icons/tick.js new file mode 100644 index 00000000..472e0e23 --- /dev/null +++ b/packages/ui-toolkit/src/icons/tick.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import TickIcon from './svg/icon_tick.svg'; + +export default Baseline(TickIcon); diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js index 596c5f1c..7fae9e64 100644 --- a/packages/ui-toolkit/src/index.js +++ b/packages/ui-toolkit/src/index.js @@ -15,10 +15,16 @@ export { default as Topology } from './topology'; export { default as Modal } from './modal'; export { default as CloseButton } from './close-button'; export { default as IconButton } from './icon-button'; - export { Tooltip, TooltipButton, TooltipDivider } from './tooltip'; export { Dropdown } from './dropdown'; +export { + Progressbar, + ProgressbarButton, + ProgressbarItem, + Indicator +} from './progress-bar'; + export { borderRadius, bottomShaddow, diff --git a/packages/ui-toolkit/src/progress-bar/button.js b/packages/ui-toolkit/src/progress-bar/button.js new file mode 100644 index 00000000..3262281f --- /dev/null +++ b/packages/ui-toolkit/src/progress-bar/button.js @@ -0,0 +1,131 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import unitcalc from 'unitcalc'; +import theme from '../theme'; +import Button from '../button'; +import remcalc from 'remcalc'; +import Baseline from '../baseline'; +import Indicator from './indicator'; +import is, { isNot, isOr } from 'styled-is'; + +const StyledButton = styled(Button)` + padding: ${unitcalc(2)} ${unitcalc(3)} ${unitcalc(2)} ${unitcalc(2)}; + background-color: ${theme.white}; + color: ${theme.secondary}; + text-align: left; + border: none; + box-shadow: none; + line-height: 1.6; + cursor: default; + + &:focus { + background-color: ${theme.white}; + border: none; + color: ${theme.secondary}; + } + + &:hover { + background-color: ${theme.white}; + border: none; + color: ${theme.secondary}; + } + + &:active, + &:active:hover, + &:active:focus { + background-color: ${theme.white}; + border: none; + color: ${theme.secondary}; + } +`; + +const StyledContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + position: relative; + z-index: ${props => props.zIndex}; + + padding-left: ${remcalc(40)}; + border-top: ${remcalc(1)} solid ${props => props.theme.grey}; + border-bottom: ${remcalc(1)} solid ${props => props.theme.grey}; + + ${isOr('active', 'completed')` + border-top: ${remcalc(1)} solid ${props => props.theme.green}; + border-bottom: ${remcalc(1)} solid ${props => props.theme.green}; + `} + + ${is('first')` + border-left: ${remcalc(1)} solid ${props => props.theme.green}; + padding-left: ${remcalc(13)}; + `} + + ${isNot('first', 'completed', 'active')` + border-right: ${remcalc(1)} solid ${props => props.theme.grey}; + `} + + ${isOr('active', 'completed')` + border-right: ${remcalc(1)} solid ${props => props.theme.green}; + `} + + ${isNot('last')` + border-right: none; + `} +`; + +const StyledArrow = styled.span` + position: absolute; + top: 0; + right: -${remcalc(27)}; + border: solid ${props => props.theme.grey}; + border-width: 0 ${remcalc(1)} ${remcalc(1)} 0; + padding: ${remcalc(17.1)}; + transform: rotate(-45deg); + margin: ${remcalc(6.4)} ${remcalc(10)} ${remcalc(6.4)} ${remcalc(10)}; + + ${is('last')` + display: none; + `}; + + ${isOr('completed', 'active')` + border-color: ${props => props.theme.green}; + `}; +`; + +const ProgressbarButton = ({ + children, + first, + completed, + active, + last, + ...rest +}) => { + const state = { + first, + completed, + active, + last + }; + + return ( + + + + {children} + + + + ); +}; + +ProgressbarButton.propTypes = { + zIndex: PropTypes.string, + active: PropTypes.bool, + completed: PropTypes.bool, + first: PropTypes.bool, + last: PropTypes.bool, + onClick: PropTypes.func +}; + +export default Baseline(ProgressbarButton); diff --git a/packages/ui-toolkit/src/progress-bar/index.js b/packages/ui-toolkit/src/progress-bar/index.js new file mode 100644 index 00000000..4ed039e6 --- /dev/null +++ b/packages/ui-toolkit/src/progress-bar/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styled from 'styled-components'; +import theme from '../theme'; +import Baseline from '../baseline'; + +const StyledList = styled.ul` + display: table; + list-style-type: none; + background-color: ${theme.white}; + padding: 0; +`; + +/** + * @example ./usage.md + */ +export default ({ children, ...rest }) => + + {children} + ; + +export { default as ProgressbarItem } from './item'; +export { default as ProgressbarButton } from './button'; +export { default as Indicator } from './indicator'; diff --git a/packages/ui-toolkit/src/progress-bar/indicator.js b/packages/ui-toolkit/src/progress-bar/indicator.js new file mode 100644 index 00000000..8f581496 --- /dev/null +++ b/packages/ui-toolkit/src/progress-bar/indicator.js @@ -0,0 +1,55 @@ +import React from 'react'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; +import Baseline from '../baseline'; +import { TickIcon } from '../icons'; +import is, { isNot, isOr } from 'styled-is'; + +const Tick = styled(TickIcon)` + fill: none; + + ${is('active')` + fill: ${props => props.theme.secondary}; + `} + + ${is('completed')` + fill: ${props => props.theme.white}; + `} +`; + +const StyledIndicator = styled.span` + display: inline-block; + border-radius: 50%; + width: ${remcalc(18)}; + height: ${remcalc(18)}; + background: inherit; + border: ${remcalc(1)} solid ${props => props.theme.grey}; + display: flex; + justify-content: center; + align-items: center; + + ${isOr('completed', 'active')` + border: ${remcalc(1)} solid ${props => props.theme.green}; + `} + + ${is('completed')` + background: ${props => props.theme.green}; + `} +`; + +const Indicator = ({ first, completed, active, last, ...rest }) => { + const state = { + first, + completed, + active, + last + }; + + return ( + + + + ); +}; + +export default Baseline(Indicator); diff --git a/packages/ui-toolkit/src/progress-bar/item.js b/packages/ui-toolkit/src/progress-bar/item.js new file mode 100644 index 00000000..3262695f --- /dev/null +++ b/packages/ui-toolkit/src/progress-bar/item.js @@ -0,0 +1,14 @@ +import React from 'react'; +import styled from 'styled-components'; +import Baseline from '../baseline'; + +const StyledItem = styled.li` + float: left; +`; + +const ProgressbarItem = ({ children, ...props }) => + + {children} + ; + +export default Baseline(ProgressbarItem); diff --git a/packages/ui-toolkit/src/progress-bar/usage.md b/packages/ui-toolkit/src/progress-bar/usage.md new file mode 100644 index 00000000..f2fb1346 --- /dev/null +++ b/packages/ui-toolkit/src/progress-bar/usage.md @@ -0,0 +1,23 @@ +``` +const Progressbar = require('./index').default; +const ProgressbarButton = require('./button').default; +const ProgressbarItem = require('./item').default; + + + + console.log("name")}> + Name the group + + + + console.log("define")}> + Define services + + + + console.log("review")}> + Review and deploy + + + +``` diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index 40c616e3..7a89bd99 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -20,7 +20,7 @@ module.exports = { return Object.assign(rule, { options: { babelrc: true, - cacheDirectory: true + cacheDirectory: false } }); }) @@ -60,6 +60,7 @@ module.exports = { 'src/form/number-input.js', 'src/form/checkbox.js', 'src/dropdown/index.js', + 'src/progress-bar/index.js', 'src/form/radio.js', 'src/form/select.js', 'src/form/toggle.js',