From 0b8b1ee379d1175a400cc3bf60a08c59ae5f729d Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 9 Jan 2017 16:45:18 +0000 Subject: [PATCH 01/11] updating toggle ui component --- ui/src/components/toggle/index-old.js | 136 ++++++++++++++++++++++ ui/src/components/toggle/index.js | 159 ++++++++++++++------------ ui/src/components/toggle/readme.md | 6 +- ui/stories/index.js | 19 +-- 4 files changed, 242 insertions(+), 78 deletions(-) create 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 new file mode 100644 index 00000000..559ccd5d --- /dev/null +++ b/ui/src/components/toggle/index-old.js @@ -0,0 +1,136 @@ +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 28f69630..50bb449d 100644 --- a/ui/src/components/toggle/index.js +++ b/ui/src/components/toggle/index.js @@ -11,7 +11,8 @@ const { } = constants; const { - pseudoEl + pseudoEl, + baseBox } = composers; const { @@ -20,100 +21,118 @@ const { } = fns; const { - default: styled + default: styled, + keyframes } = Styled; const classNames = { label: rndId() }; -const StyledLabel = styled.label` - border-radius: ${boxes.borderRadius}; - color: #464646; - height: 2.5rem; - width: ${remcalc(110)}; +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 + return css` + background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%); + `; +} + + +const StyledText = styled.span` + padding: 1rem; + display: inline-block; `; -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: "Off"; - font-family: ${typography.fontPrimary}; - font-size: inherit; - font-weight: bold; - position: absolute; - right: 24px; - top: 19px; - } - - &::after { - background-color: #FFFFFF; - border-radius: ${boxes.borderRadius}; - height: ${remcalc(46)}; - width: ${remcalc(46)}; - - ${pseudoEl({ - top: '3px', - left: '3px', - })} - } +const StyledDiv = styled.div` + display: inline-block; + background-color: ${colors.brandInactive}; + animation: ${slide} 0.5s forwards; + + ${baseBox()} `; -const StyledInput = styled.input` + +const StyledInput_1 = 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; + } + &:checked { - & + .${classNames.label} { - background: ${colors.confirmation}; - border: ${boxes.border.confirmed}; - color: #FFFFFF; - padding-left: 0; - padding-right: ${remcalc(12)}; - text-align: left; - - &::before { - content: "On"; - left: 20px; - right: auto; - } - - &::after { - left: auto; - right: 3px; - } + + + & + span { + background-position: right bottom; } } `; +const StyledInput_2 = 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; + } + + &:checked { + + + & + span { + background-position: left bottom; + } + } +`; + +const StyledLabel = styled.label` +`; + + const Toggle = ({ checked, className, defaultChecked, + options = [ + "On", + "Off" + ], id = rndId(), style }) => { return ( - - - - + + + + {options[0]} + + + + {options[1]} + + ); }; diff --git a/ui/src/components/toggle/readme.md b/ui/src/components/toggle/readme.md index ef30ac9c..a6e55ccd 100644 --- a/ui/src/components/toggle/readme.md +++ b/ui/src/components/toggle/readme.md @@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString( - + diff --git a/ui/stories/index.js b/ui/stories/index.js index 6c6db31e..25723fc7 100644 --- a/ui/stories/index.js +++ b/ui/stories/index.js @@ -333,17 +333,22 @@ storiesOf('Tabs', module) )); storiesOf('Toggle', module) - .add('checked', () => ( + .add('default', () => ( )) - .add('unchecked', () => ( - - )) - .add('defaultChecked', () => ( - + .add('checked', () => ( + )) .add('no props', () => ( - + )); storiesOf('Tooltip', module) From 98933873c13c13b06cef7ee53a1bec9cf12b65de Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Mon, 9 Jan 2017 18:04:56 +0000 Subject: [PATCH 02/11] 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) From 7b73e822379772fc4a85d3c12b7a28fafe8c0a46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= Date: Mon, 9 Jan 2017 18:58:30 +0000 Subject: [PATCH 03/11] headed list item ui component --- ui/src/components/list/collapsed.js | 18 -------- ui/src/components/list/description.js | 4 +- ui/src/components/list/header.js | 55 ++++++++++++++++++++++ ui/src/components/list/index.js | 11 +++-- ui/src/components/list/item.js | 20 ++++++-- ui/src/components/list/meta.js | 39 ++++++++++------ ui/src/components/list/options.js | 26 ++++++++--- ui/src/components/list/outlet.js | 38 ++++++++------- ui/src/components/list/subtitle.js | 18 ++++++-- ui/src/components/list/title.js | 6 ++- ui/src/components/list/transfer-props.js | 29 ++++++++++++ ui/src/components/list/view.js | 23 ++++++++- ui/src/shared/constants/boxes.js | 1 + ui/stories/index.js | 59 ++++++++++++++++++++++-- 14 files changed, 272 insertions(+), 75 deletions(-) delete mode 100644 ui/src/components/list/collapsed.js create mode 100644 ui/src/components/list/header.js create mode 100644 ui/src/components/list/transfer-props.js diff --git a/ui/src/components/list/collapsed.js b/ui/src/components/list/collapsed.js deleted file mode 100644 index c5824212..00000000 --- a/ui/src/components/list/collapsed.js +++ /dev/null @@ -1,18 +0,0 @@ -const React = require('react'); - -module.exports = (Component) => (props) => { - // eslint-disable-next-line react/prop-types - const _children = React.Children.map(props.children, (c) => { - return React.cloneElement(c, { - ...c.props, - // eslint-disable-next-line react/prop-types - collapsed: props.collapsed - }); - }); - - return ( - - {_children} - - ); -}; diff --git a/ui/src/components/list/description.js b/ui/src/components/list/description.js index 35ba6cf8..80240ff2 100644 --- a/ui/src/components/list/description.js +++ b/ui/src/components/list/description.js @@ -1,6 +1,6 @@ -const Title = require('./title'); -const Styled = require('styled-components'); const React = require('react'); +const Styled = require('styled-components'); +const Title = require('./title'); const { default: styled diff --git a/ui/src/components/list/header.js b/ui/src/components/list/header.js new file mode 100644 index 00000000..3d022475 --- /dev/null +++ b/ui/src/components/list/header.js @@ -0,0 +1,55 @@ +const constants = require('../../shared/constants'); +const fns = require('../../shared/functions'); +const Item = require('./item'); +const React = require('react'); +const Styled = require('styled-components'); + +const { + colors +} = constants; + +const { + remcalc +} = fns; + +const { + default: styled +} = Styled; + +const StyledItem = styled(Item)` + position: absolute; + + background-color: ${colors.brandPrimary}; + border: solid 1px ${colors.borderPrimary}; + box-shadow: none; + + width: calc(100% + ${remcalc(2)}); + margin: 0; + + top: ${remcalc(-1)}; + left: ${remcalc(-1)}; + right: ${remcalc(-1)}; +`; + +const addFromHeader = (children) => React.Children.map(children, (c) => { + return React.cloneElement(c, { + ...c.props, + fromHeader: true + }); +}); + +const Header = (props) => ( + + {addFromHeader(props.children)} + +); + +Header.propTypes = { + children: React.PropTypes.node +}; + +module.exports = Header; diff --git a/ui/src/components/list/index.js b/ui/src/components/list/index.js index 0d79549b..cfb4ab13 100644 --- a/ui/src/components/list/index.js +++ b/ui/src/components/list/index.js @@ -1,10 +1,11 @@ module.exports = { - ListItem: require('./item'), - ListItemView: require('./view'), - ListItemTitle: require('./title'), - ListItemSubTitle: require('./subtitle'), ListItemDescription: require('./description'), + ListItemHeader: require('./header'), + ListItem: require('./item'), ListItemMeta: require('./meta'), + ListItemOptions: require('./options'), ListItemOutlet: require('./outlet'), - ListItemOptions: require('./options') + ListItemSubTitle: require('./subtitle'), + ListItemTitle: require('./title'), + ListItemView: require('./view') }; diff --git a/ui/src/components/list/item.js b/ui/src/components/list/item.js index e6c11391..bf6670f5 100644 --- a/ui/src/components/list/item.js +++ b/ui/src/components/list/item.js @@ -1,9 +1,9 @@ -const Collapsed = require('./collapsed'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); const Row = require('../row'); const Styled = require('styled-components'); +const transferProps = require('./transfer-props'); const { boxes, @@ -18,16 +18,28 @@ const { default: styled } = Styled; -const height = (props) => props.collapsed ? remcalc(48) : remcalc(126); +const height = (props) => props.collapsed + ? remcalc(48) + : remcalc(126); + +const shadow = (props) => props.collapsed && props.headed + ? boxes.bottomShaddowDarker + : boxes.bottomShaddow; const Item = styled(Row)` + position: relative; + height: ${height} - box-shadow: ${boxes.bottomShaddow}; + box-shadow: ${shadow}; border: 1px solid ${colors.borderSecondary}; background-color: ${colors.brandSecondary}; + margin-bottom: ${remcalc(10)}; `; -module.exports = Collapsed((props) => ( +module.exports = transferProps([ + 'collapsed', + 'headed' +], (props) => ( {props.children} diff --git a/ui/src/components/list/meta.js b/ui/src/components/list/meta.js index 1a2bfda6..df41aa5b 100644 --- a/ui/src/components/list/meta.js +++ b/ui/src/components/list/meta.js @@ -1,8 +1,9 @@ -const Collapsed = require('./collapsed'); const Column = require('../column'); -const Styled = require('styled-components'); const React = require('react'); const Row = require('../row'); +const Styled = require('styled-components'); +const transferProps = require('./transfer-props'); +const View = require('./view'); const { default: styled @@ -14,14 +15,26 @@ const InnerRow = styled(Row)` height: 100%; `; -module.exports = Collapsed((props) => ( - - - {props.children} - - -)); +module.exports = transferProps([ + 'collapsed', + 'headed', + 'fromHeader' +], (props) => { + const meta = ( + + + {props.children} + + + ); + + return !props.fromHeader ? meta : ( + + {meta} + + ); +}); diff --git a/ui/src/components/list/options.js b/ui/src/components/list/options.js index a04c3303..6f8f0f90 100644 --- a/ui/src/components/list/options.js +++ b/ui/src/components/list/options.js @@ -2,6 +2,7 @@ const Button = require('../button'); const constants = require('../../shared/constants'); const fns = require('../../shared/functions'); const React = require('react'); +const transferProps = require('./transfer-props'); const Styled = require('styled-components'); const { @@ -16,11 +17,17 @@ const { default: styled } = Styled; -const height = (props) => props.collapsed ? remcalc(46) : remcalc(124); +const height = (props) => props.collapsed + ? remcalc(46) + : remcalc(124); + +const borderLeftColor = (props) => !props.fromHeader + ? colors.borderSecondary + : colors.borderPrimary; const Nav = styled.nav` flex: 0 0 ${remcalc(47)}; - border-left: 1px solid ${colors.borderSecondary}; + border-left: 1px solid ${borderLeftColor}; `; const StyledButton = styled(Button)` @@ -44,17 +51,24 @@ const StyledButton = styled(Button)` } `; -const Options = (props) => ( -