mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-12-03 00:20:04 +02:00
Code Issues Releases Wiki Activity

Implement checkbox

Browse Source
This commit is contained in:
Tom Gallacher 2016-12-08 15:39:16 +00:00 committed by Sérgio Ramos
parent e56dabe9d5
commit c43e06651e
4 changed files with 56 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/button/index.js
View File

@ -55,6 +55,6 @@ module.exports = styled.button`
padding: ${remcalc('18 24')}; padding: ${remcalc('18 24')};
background: ${background}; background: ${background};
border: 1px solid ${border}; border: solid 1px ${border};
color: ${color}; color: ${color};
`; `;

60
ui/src/components/checkbox/index.js
View File

@ -24,10 +24,55 @@ const styles = {
}; };
const StyledInput = styled.input` const StyledInput = styled.input`
visibility: hidden;
&:checked + label::after {
opacity: 1;
}
&:disabled + label {
background-color: rgb(249, 249, 249);
}
&:disabled + label::after {
opacity: 0.3;
}
`; `;
const StyledLabel = styled.label` const StyledLabel = styled.label`
color: #646464; color: rgb(100, 100, 100);
position: absolute;
width: 24px;
height: 24px;
top: 0;
border-radius: ${boxes.borderRadius};
background-color: rgb(255, 255, 255);
box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked};
&::after {
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 4px;
background: transparent;
top: 7px;
left: 7px;
border: 3px solid #333;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
&:hover {
&::after {
opacity: 0.3;
}
}
`;
const StyledDiv = styled.div`
width: 24px;
height: 24px;
position: relative;
`; `;
const Checkbox = ({ const Checkbox = ({
@ -45,21 +90,12 @@ const Checkbox = ({
style, style,
tabIndex tabIndex
}) => { }) => {
const cn = classNames(
className,
styles.checkbox,
checked ? styles.checked : '',
disabled ? styles.disabled : ''
);
return ( return (
<StyledLabel className={styles.label} htmlFor={id}> <StyledDiv>
<StyledInput <StyledInput
checked={checked} checked={checked}
className={cn}
disabled={disabled} disabled={disabled}
form={form} form={form}
id={id}
name={name} name={name}
onChange={onChange} onChange={onChange}
readOnly={readOnly} readOnly={readOnly}
@ -68,8 +104,10 @@ const Checkbox = ({
tabIndex={tabIndex} tabIndex={tabIndex}
type='checkbox' type='checkbox'
/> />
<StyledLabel>
<span>{children}</span> <span>{children}</span>
</StyledLabel> </StyledLabel>
</StyledDiv>
); );
}; };

3
ui/src/shared/constants.js
View File

@ -1,6 +1,5 @@
const styled = require('styled-components'); const styled = require('styled-components');
const calc = require('reduce-css-calc'); const calc = require('reduce-css-calc');
const traverse = require('traverse'); const traverse = require('traverse');
const isFunction = require('lodash.isfunction'); const isFunction = require('lodash.isfunction');
@ -76,7 +75,7 @@ const boxes = {
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)', insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)',
border: { border: {
checked: '1px solid #2532bb', checked: '1px solid #2532bb',
unchecked: '1px solid #d8d8d8', unchecked: '1px solid rgb(216, 216, 216)',
confirmed: '1px solid #23AC32' confirmed: '1px solid #23AC32'
} }
}; };

12
ui/stories/index.js
View File

@ -111,17 +111,11 @@ storiesOf('Button', module)
storiesOf('Checkbox', module) storiesOf('Checkbox', module)
.add('Default', () => ( .add('Default', () => (
<Checkbox> <Checkbox />
Checkbox
</Checkbox>
)) ))
.add('Checked', () => ( .add('Checked', () => (
<Checkbox checked onChange={function noop() {}}> <Checkbox checked onChange={function noop() {}} />
Checkbox Checked
</Checkbox>
)) ))
.add('Disabled', () => ( .add('Disabled', () => (
<Checkbox disabled> <Checkbox disabled />
Checkbox Disabled
</Checkbox>
)); ));