From 98933873c13c13b06cef7ee53a1bec9cf12b65de Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 9 Jan 2017 18:04:56 +0000 Subject: [PATCH] refactoring toggle component --- ui/src/components/toggle/index-old.js | 136 -------------------------- ui/src/components/toggle/index.js | 125 ++++++++++++----------- ui/stories/index.js | 18 ++-- 3 files changed, 79 insertions(+), 200 deletions(-) delete mode 100644 ui/src/components/toggle/index-old.js diff --git a/ui/src/components/toggle/index-old.js b/ui/src/components/toggle/index-old.js deleted file mode 100644 index 559ccd5d..00000000 --- a/ui/src/components/toggle/index-old.js +++ /dev/null @@ -1,136 +0,0 @@ -const constants = require('../../shared/constants'); -const composers = require('../../shared/composers'); -const fns = require('../../shared/functions'); -const React = require('react'); -const Styled = require('styled-components'); - -const { - boxes, - colors, - typography -} = constants; - -const { - pseudoEl -} = composers; - -const { - remcalc, - rndId -} = fns; - -const { - default: styled -} = Styled; - -const classNames = { - label: rndId() -}; - -const StyledLabel = styled.label` - border-radius: ${boxes.borderRadius}; - color: #464646; - height: 2.5rem; - width: ${remcalc(110)}; -`; - -const StyledToggleLabel = styled.div` - background-color: #E6E6E6; - border: solid 1px #D8D8D8; - border-radius: ${boxes.borderRadius}; - color: #000000; - height: ${remcalc(54)}; - margin: 0.125rem; - padding-left: ${remcalc(12)}; - position: relative; - text-align: right; - width: ${remcalc(106)}; - - &::before { - content: "${props => props.labelRight}"; - font-family: ${typography.fontPrimary}; - font-size: inherit; - font-weight: bold; - position: absolute; - right: 24px; - top: 19px; - } - - &::after { - content: "${props => props.labelLeft}"; - background-color: #FFFFFF; - border-radius: ${boxes.borderRadius}; - height: ${remcalc(46)}; - width: ${remcalc(46)}; - - ${pseudoEl({ - top: '3px', - left: '3px', - })} - } -`; - -const StyledInput = styled.input` - display: none; - - &:checked { - & + .${classNames.label} { - background: ${colors.confirmation}; - border: ${boxes.border.confirmed}; - color: #FFFFFF; - padding-left: 0; - padding-right: ${remcalc(12)}; - text-align: left; - - &::before { - content: "${props => props.labelLeft}"; - - left: 20px; - right: auto; - } - - &::after { - left: auto; - right: 3px; - } - } - } -`; - -const Toggle = ({ - checked, - className, - defaultChecked, - labelLeft = "On", - labelRight = "Off", - id = rndId(), - style -}) => { - return ( - - - - - ); -}; - -Toggle.propTypes = { - checked: React.PropTypes.bool, - className: React.PropTypes.string, - defaultChecked: React.PropTypes.bool, - id: React.PropTypes.string, - style: React.PropTypes.object -}; - -module.exports = Toggle; diff --git a/ui/src/components/toggle/index.js b/ui/src/components/toggle/index.js index 50bb449d..4a0a4abe 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -5,13 +5,10 @@ const React = require('react'); const Styled = require('styled-components'); const { - boxes, - colors, - typography + colors } = constants; const { - pseudoEl, baseBox } = composers; @@ -22,36 +19,22 @@ const { const { default: styled, - keyframes + css } = Styled; -const classNames = { - label: rndId() -}; - -const slide = ( - direction = 'left' -) => { - keyframes` - from { - left: 0; - } - - to { - left: 100%; - } - `; -} - +/* const backgroundGradient = (index) => { const colorDefault = index === 1 ? 'red' : 'blue'; const colorAlt = index === 1 ? 'blue' : 'red'; - debugger + // debugger return css` - background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%); + // background: linear-gradient(to right, + ${colorDefault} 50%, + ${colorAlt} 50%); + background: linear-gradient(to right, red 50%, blue 50%); `; -} - +}; +*/ const StyledText = styled.span` padding: 1rem; @@ -61,77 +44,104 @@ const StyledText = styled.span` const StyledDiv = styled.div` display: inline-block; background-color: ${colors.brandInactive}; - animation: ${slide} 0.5s forwards; ${baseBox()} `; +const inputStyled = css` + background-size: 200% 100%; + transition:all .5s ease; + min-width: ${remcalc(120)}; + text-align: center; +`; -const StyledInput_1 = styled.input` + +const StyledInput0 = styled.input` display: none; & + span { - background: #ff3232; - background: linear-gradient(to right, red 50%, blue 50%); - background-size: 200% 100%; - background-position:left bottom; - transition:all .5s ease; + background: linear-gradient(to right, + transparent 50%, + ${colors.brandSecondary} 50%); + background-position: left bottom; + + ${inputStyled} } &:checked { - & + span { background-position: right bottom; } } `; -const StyledInput_2 = styled.input` +const StyledInput1 = styled.input` display: none; - & + span { - background: #ff3232; - background: linear-gradient(to right, blue 50%, red 50%); - background-size: 200% 100%; - background-position:right bottom; - transition:all .5s ease; + & + span { + background: linear-gradient(to right, + ${colors.brandSecondary} 50%, + transparent 50%); + background-position: right bottom; + + ${inputStyled} } &:checked { - & + span { background-position: left bottom; } } `; -const StyledLabel = styled.label` -`; - - const Toggle = ({ checked, className, defaultChecked, options = [ - "On", - "Off" + { + label: 'On', + checked: true + }, + { + label: 'Off', + checked: false + } ], id = rndId(), style }) => { return ( - - - {options[0]} - - - - {options[1]} - + {options.map( (option, index) => { + + if ( index > 2 ) return; + + const customProps = { + defaultChecked: option.checked, + name: 'toggler', + type: 'radio', + value: option.label, + id: rndId() + }; + + const InputVarients = { + input_0: (), + input_1: () + }; + + return ( + + ); + })} ); }; @@ -141,6 +151,7 @@ Toggle.propTypes = { className: React.PropTypes.string, defaultChecked: React.PropTypes.bool, id: React.PropTypes.string, + options: React.PropTypes.array, style: React.PropTypes.object }; diff --git a/ui/stories/index.js b/ui/stories/index.js index 25723fc7..a4665e19 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -339,16 +339,20 @@ storiesOf('Toggle', module) .add('checked', () => ( )) .add('no props', () => ( - + )); storiesOf('Tooltip', module)