updating toggle ui component
This commit is contained in:
Alex Windett
parent
5c52332f67
commit
0b8b1ee379
|
|
@ -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;
|
||||
|
|
@ -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 (
|
||||
<StyledLabel
|
||||
className={className}
|
||||
htmlFor={id}
|
||||
style={style}
|
||||
>
|
||||
<StyledInput
|
||||
id={id}
|
||||
type='checkbox'
|
||||
/>
|
||||
<StyledToggleLabel className={classNames.label} />
|
||||
</StyledLabel>
|
||||
<StyledDiv>
|
||||
<StyledLabel>
|
||||
<StyledInput_1 defaultChecked name="toggler" type="radio" value={options[0]} index={1} />
|
||||
<StyledText>{options[0]}</StyledText>
|
||||
</StyledLabel>
|
||||
<StyledLabel>
|
||||
<StyledInput_2 name="toggler" type="radio" value={options[1]} index={2} />
|
||||
<StyledText>{options[1]}</StyledText>
|
||||
</StyledLabel>
|
||||
</StyledDiv>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,11 @@ nmodule.exports = ReactDOM.renderToString(
|
|||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<Toggle checked />
|
||||
<Toggle
|
||||
checked
|
||||
labelLeft='Topology'
|
||||
lavelRight='List'
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
|
|
|
|||
|
|
@ -333,17 +333,22 @@ storiesOf('Tabs', module)
|
|||
));
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('checked', () => (
|
||||
.add('default', () => (
|
||||
<Toggle checked />
|
||||
))
|
||||
.add('unchecked', () => (
|
||||
<Toggle checked={false} />
|
||||
))
|
||||
.add('defaultChecked', () => (
|
||||
<Toggle defaultChecked />
|
||||
.add('checked', () => (
|
||||
<Toggle
|
||||
defaultChecked
|
||||
labelLeft='Topology'
|
||||
labelRight='List'
|
||||
/>
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle />
|
||||
<Toggle
|
||||
checked
|
||||
labelLeft='Topology'
|
||||
labelRight='List'
|
||||
/>
|
||||
));
|
||||
|
||||
storiesOf('Tooltip', module)
|
||||
|
|
|
|||
Loading…
Reference in New Issue