updating toggle ui component

This commit is contained in:
Alex Windett 2017-01-09 16:45:18 +00:00
parent 5c52332f67
commit 0b8b1ee379
4 changed files with 242 additions and 78 deletions

View File

@ -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 (
<StyledLabel
className={className}
htmlFor={id}
style={style}
>
<StyledInput
id={id}
labelLeft={labelLeft}
type='checkbox'
/>
<StyledToggleLabel
className={classNames.label}
labelRight={labelRight}
/>
</StyledLabel>
);
};
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;

View File

@ -11,7 +11,8 @@ const {
} = constants; } = constants;
const { const {
pseudoEl pseudoEl,
baseBox
} = composers; } = composers;
const { const {
@ -20,100 +21,118 @@ const {
} = fns; } = fns;
const { const {
default: styled default: styled,
keyframes
} = Styled; } = Styled;
const classNames = { const classNames = {
label: rndId() label: rndId()
}; };
const StyledLabel = styled.label` const slide = (
border-radius: ${boxes.borderRadius}; direction = 'left'
color: #464646; ) => {
height: 2.5rem; keyframes`
width: ${remcalc(110)}; from {
`; left: 0;
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 { to {
background-color: #FFFFFF; left: 100%;
border-radius: ${boxes.borderRadius};
height: ${remcalc(46)};
width: ${remcalc(46)};
${pseudoEl({
top: '3px',
left: '3px',
})}
} }
`; `;
}
const StyledInput = styled.input` 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 StyledDiv = styled.div`
display: inline-block;
background-color: ${colors.brandInactive};
animation: ${slide} 0.5s forwards;
${baseBox()}
`;
const StyledInput_1 = styled.input`
display: none; 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 { &: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 { & + span {
left: auto; background-position: right bottom;
right: 3px;
}
} }
} }
`; `;
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 = ({ const Toggle = ({
checked, checked,
className, className,
defaultChecked, defaultChecked,
options = [
"On",
"Off"
],
id = rndId(), id = rndId(),
style style
}) => { }) => {
return ( return (
<StyledLabel <StyledDiv>
className={className} <StyledLabel>
htmlFor={id} <StyledInput_1 defaultChecked name="toggler" type="radio" value={options[0]} index={1} />
style={style} <StyledText>{options[0]}</StyledText>
>
<StyledInput
id={id}
type='checkbox'
/>
<StyledToggleLabel className={classNames.label} />
</StyledLabel> </StyledLabel>
<StyledLabel>
<StyledInput_2 name="toggler" type="radio" value={options[1]} index={2} />
<StyledText>{options[1]}</StyledText>
</StyledLabel>
</StyledDiv>
); );
}; };

View File

@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString(
<Base> <Base>
<Row> <Row>
<Column> <Column>
<Toggle checked /> <Toggle
checked
labelLeft='Topology'
lavelRight='List'
/>
</Column> </Column>
</Row> </Row>
</Base> </Base>

View File

@ -333,17 +333,22 @@ storiesOf('Tabs', module)
)); ));
storiesOf('Toggle', module) storiesOf('Toggle', module)
.add('checked', () => ( .add('default', () => (
<Toggle checked /> <Toggle checked />
)) ))
.add('unchecked', () => ( .add('checked', () => (
<Toggle checked={false} /> <Toggle
)) defaultChecked
.add('defaultChecked', () => ( labelLeft='Topology'
<Toggle defaultChecked /> labelRight='List'
/>
)) ))
.add('no props', () => ( .add('no props', () => (
<Toggle /> <Toggle
checked
labelLeft='Topology'
labelRight='List'
/>
)); ));
storiesOf('Tooltip', module) storiesOf('Tooltip', module)