convert toggle
This commit is contained in:
Sérgio Ramos
parent
21c9a77c28
commit
07ee904c96
@ -27,7 +27,8 @@
|
||||
"react-dom": "^15.4.1",
|
||||
"react-icons": "^2.2.1",
|
||||
"reduce-css-calc": "^1.3.0",
|
||||
"styled-components": "^1.1.3"
|
||||
"styled-components": "^1.1.3",
|
||||
"uuid": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@kadira/storybook": "^2.34.0",
|
||||
|
||||
@ -1,48 +1,116 @@
|
||||
// TODO: use a checkbox
|
||||
|
||||
const classNames = require('classnames');
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const styles = require('./style.css');
|
||||
const Styled = require('styled-components');
|
||||
const uuid = require('uuid').v4;
|
||||
|
||||
const {
|
||||
boxes,
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
border-radius: ${boxes.borderRadius};
|
||||
color: #464646;
|
||||
height: 2.5rem;
|
||||
width: 110px;
|
||||
`;
|
||||
|
||||
const StyledToggleLabel = styled.div`
|
||||
background-color: #E6E6E6;
|
||||
border: solid 1px #D8D8D8;
|
||||
border-radius: ${boxes.borderRadius};
|
||||
color: #000000;
|
||||
height: ${remcalc(54)};
|
||||
margin: 0.125rem;
|
||||
padding: ${remcalc('12 12 12 0')};
|
||||
position: relative;
|
||||
text-align: right;
|
||||
width: ${remcalc(106)};
|
||||
|
||||
&::before {
|
||||
content: "Off";
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: ${boxes.borderRadius};
|
||||
content: "";
|
||||
height: ${remcalc(46)};
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: ${remcalc(46)};
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input`
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
& + .tgl-label {
|
||||
background: ${colors.confirmation};
|
||||
border: ${boxes.border.confirmed};
|
||||
color: #FFFFFF;
|
||||
padding: ${remcalc('12 0 12 12')};
|
||||
text-align: left;
|
||||
|
||||
&::before {
|
||||
content: "On";
|
||||
left: 14px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: auto;
|
||||
right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Toggle = ({
|
||||
checked = false,
|
||||
checked,
|
||||
className,
|
||||
defaultChecked,
|
||||
id = uuid(),
|
||||
style
|
||||
}) => {
|
||||
const tgl = classNames(
|
||||
className,
|
||||
styles.tgl,
|
||||
checked ? styles.on : styles.off,
|
||||
);
|
||||
|
||||
const input = classNames(
|
||||
className,
|
||||
styles.input
|
||||
);
|
||||
|
||||
const label = classNames(
|
||||
className,
|
||||
styles['tgl-label']
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='' style={style}>
|
||||
<label className={tgl} htmlFor='toggle' >
|
||||
<input
|
||||
<StyledLabel
|
||||
className={className}
|
||||
htmlFor={id}
|
||||
style={style}
|
||||
>
|
||||
<StyledInput
|
||||
checked={checked}
|
||||
className={input}
|
||||
id='toggle'
|
||||
id={id}
|
||||
type='checkbox'
|
||||
/>
|
||||
<div className={label} />
|
||||
</label>
|
||||
</div>
|
||||
<StyledToggleLabel className='tgl-label' />
|
||||
</StyledLabel>
|
||||
);
|
||||
};
|
||||
|
||||
Toggle.propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
defaultChecked: React.PropTypes.bool,
|
||||
id: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
/*
|
||||
* - This can probably be achieved with flexbox so that we don't use any
|
||||
* margins or paddings
|
||||
* - We shouldn't use #FFFFFF but a variation of it to have less contrast
|
||||
*/
|
||||
|
||||
~boxes: "../../shared/constants.js";
|
||||
~colors: "../../shared/constants.js";
|
||||
|
||||
:root {
|
||||
--background-confirmed: ~colors.confirmation;
|
||||
--border-confirmed: ~boxes.border.confirmed;
|
||||
--border-unchecked: ~boxes.border.unchecked;
|
||||
--border-radius: remcalc(~boxes.borderRadius);
|
||||
--bottom-shaddow: ~boxes.bottomShaddow;
|
||||
}
|
||||
|
||||
.tgl {
|
||||
border-radius: var(--border-radius);
|
||||
color: #464646;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
height: 2.5rem;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.tgl-label {
|
||||
background-color: #E6E6E6;
|
||||
border: solid 1px #D8D8D8;
|
||||
border-radius: var(--border-radius);
|
||||
color: #000000;
|
||||
height: remcalc(54);
|
||||
margin: 0.125rem;
|
||||
padding: remcalc(12 12 12 0);
|
||||
position: relative;
|
||||
text-align: right;
|
||||
width: remcalc(106);
|
||||
|
||||
&::before {
|
||||
content: "Off";
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: #FFFFFF;
|
||||
border-radius: var(--border-radius);
|
||||
content: "";
|
||||
height: remcalc(46);
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
width: remcalc(46);
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
& + .tgl-label {
|
||||
background: var(--background-confirmed);
|
||||
border: var(--border-confirmed);
|
||||
color: #FFFFFF;
|
||||
padding: remcalc(12 0 12 12);
|
||||
text-align: left;
|
||||
|
||||
&::before {
|
||||
content: "On";
|
||||
left: 14px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: auto;
|
||||
right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,7 +9,7 @@ module.exports = {
|
||||
Row: require('./components/row'),
|
||||
// Tab: require('./components/tabs/tab'),
|
||||
// Tabs: require('./components/tabs'),
|
||||
// Toggle: require('./components/toggle'),
|
||||
Toggle: require('./components/toggle'),
|
||||
// Notificaton: require('./components/notification'),
|
||||
// Input: require('./components/input'),
|
||||
// Icon: require('./components/icon'),
|
||||
|
||||
@ -13,6 +13,7 @@ const {
|
||||
Row,
|
||||
Column,
|
||||
Avatar,
|
||||
Toggle,
|
||||
Widget
|
||||
} = require('../src/');
|
||||
|
||||
@ -125,6 +126,20 @@ storiesOf('Checkbox', module)
|
||||
<Checkbox disabled />
|
||||
));
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('checked', () => (
|
||||
<Toggle checked />
|
||||
))
|
||||
.add('unchecked', () => (
|
||||
<Toggle checked={false} />
|
||||
))
|
||||
.add('defaultChecked', () => (
|
||||
<Toggle defaultChecked />
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle />
|
||||
))
|
||||
|
||||
storiesOf('Widget', module)
|
||||
.add('single', () => (
|
||||
<Widget checked selectable='single' name='flag' value='flag_1'>
|
||||
|
||||
@ -5910,14 +5910,14 @@ utils-merge@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.0.tgz#0294fb922bb9375153541c4f7096231f287c8af8"
|
||||
|
||||
uuid, uuid@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
|
||||
|
||||
uuid@^2.0.1, uuid@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
|
||||
|
||||
uuid@^3.0.0:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
|
||||
|
||||
v8flags@^2.0.10:
|
||||
version "2.0.11"
|
||||
resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.0.11.tgz#bca8f30f0d6d60612cc2c00641e6962d42ae6881"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user