1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-11 05:40:11 +02:00

Merge pull request #100 from yldio/styled-components

updating styled components
This commit is contained in:
Sérgio Ramos 2016-12-15 11:15:19 +00:00 committed by GitHub
commit 0287041cc8
7 changed files with 207 additions and 107 deletions

View File

@ -19,7 +19,7 @@ const RadioGroup = React.createClass({
children: React.PropTypes.node,
className: React.PropTypes.string,
id: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
style: React.PropTypes.object
},
@ -105,6 +105,7 @@ const RadioGroup = React.createClass({
const tabIndex = i + 1;
const disabled = get(child, 'props.disabled');
const value = get(child, 'props.value');
const itemContent = get(child, 'props.children');
const _handleChange = (!hasChecked && !disabled)
? handleChange(value)
@ -129,6 +130,7 @@ const RadioGroup = React.createClass({
<Item
checked={_checked}
disabled={disabled}
itemContent={itemContent}
onClick={_handleChange}
tabIndex={tabIndex}
>

View File

@ -1,31 +1,67 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
// const composers = require('../../shared/composers');
const fns = require('../../shared/functions');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
// const {
// verticallyAlignCenter
// } = composers;
const {
remcalc
} = fns;
const {
boxes
} = constants;
const {
default: styled
} = Styled;
const RadioItem = styled.div`
background: #FFFFFF;
border: ${boxes.border.unchecked};
cursor: pointer;
flaot: left;
margin-bottom: ${remcalc(15)};
padding: ${remcalc(25)};
outline: none;
&:last-child {
margin-bottom: initial;
}
&[aria-checked="true"] {
border: ${boxes.border.checked};
box-shadow: ${remcalc(boxes.borderRadius)};
}
&.disabled {
cursor: default;
}
`;
const Item = ({
children,
checked = false,
itemContent = '',
disabled = false,
onClick,
tabIndex
}) => {
const cn = classNames(
styles.item,
disabled ? styles.disabled : '',
checked ? styles.checked : ''
);
return (
<div
<RadioItem
aria-checked={checked}
aria-disabled={disabled}
className={cn}
onClick={onClick}
role='radio'
tabIndex={tabIndex}
>
{children}
</div>
</RadioItem>
);
};
@ -33,6 +69,7 @@ Item.propTypes = {
checked: React.PropTypes.bool,
children: React.PropTypes.node,
disabled: React.PropTypes.bool,
itemContent: React.PropTypes.node,
onClick: React.PropTypes.func,
tabIndex: React.PropTypes.number
};

View File

@ -1,52 +1,71 @@
const React = require('react');
const constants = require('../../shared/constants');
const Styled = require('styled-components');
const fns = require('../../shared/functions');
const {
boxes
boxes,
colors
} = constants;
const {
remcalc
} = fns;
const {
default: styled,
} = Styled;
const CustomInputCircle = `
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #646464;
top: -14px;
left: 14px;
border-radius: 100%;
`;
const StyledInput = styled.input`
visibility: hidden;
display: none;
&:checked + label::after {
opacity: 1;
&:checked + span::after {
${CustomInputCircle}
}
&:disabled + label {
background-color: rgb(249, 249, 249);
&:disabled + span {
background-color: ${colors.inactiveBackground};
}
&:disabled + label::after {
&:disabled + span::after {
opacity: 0.3;
${CustomInputCircle}
}
`;
const border = 1;
const StyledLabel = styled.label`
color: rgb(100, 100, 100);
position: absolute;
width: ${24 - border}px;
height: ${24 - border}px;
top: 0;
border-radius: 100%;
background-color: rgb(255, 255, 255);
box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked};
`;
&::after {
opacity: 0;
const StyledContent = styled.div`
margin-left: ${remcalc(45)};
padding-top: ${remcalc(10)};
`;
const StyledSpan = styled.span`
color: #646464;
position: relative;
&::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgb(100, 100, 100);
top: ${(23 / 2) - 4}px;
left: ${(23 / 2) - 4}px;
width: ${remcalc(24)};
height: ${remcalc(24)};
background-color: ${colors.inactiveBackground};
box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked};
top: 5px;
left: 5px;
border-radius: 100%;
transform: rotate(-45deg);
}
&:hover {
@ -56,15 +75,6 @@ const StyledLabel = styled.label`
}
`;
const StyledDiv = styled.div`
width: 24px;
height: 24px;
position: relative;
`;
const TextLabel = styled.label`
`;
const Radio = ({
checked,
children,
@ -83,32 +93,30 @@ const Radio = ({
tabIndex,
value
}) => {
const _children = label && children ? children : null;
return (
<TextLabel>
<StyledDiv>
<StyledInput
checked={checked}
defaultChecked={defaultChecked}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
tabIndex={tabIndex}
type='radio'
value={value}
/>
<StyledLabel />
</StyledDiv>
<span>
{_children}
</span>
</TextLabel>
<StyledLabel>
<StyledInput
checked={checked}
defaultChecked={defaultChecked}
disabled={disabled}
form={form}
id={id}
name={name}
onChange={onChange}
readOnly={readOnly}
required={required}
selectionDirection={selectionDirection}
tabIndex={tabIndex}
type='radio'
value={value}
/>
<StyledSpan>
<StyledContent>
{children}
</StyledContent>
</StyledSpan>
</StyledLabel>
);
};
@ -121,7 +129,7 @@ Radio.propTypes = {
form: React.PropTypes.string,
id: React.PropTypes.string,
label: React.PropTypes.string,
name: React.PropTypes.string.isRequired,
name: React.PropTypes.string,
onChange: React.PropTypes.func,
readOnly: React.PropTypes.bool,
required: React.PropTypes.bool,

View File

@ -1,11 +1,17 @@
const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const React = require('react');
const Styled = require('styled-components');
const {
rndId
rndId,
remcalc
} = fns;
const {
pseudoEl
} = composers;
const {
default: styled
} = Styled;
@ -15,8 +21,37 @@ const StyledLabel = styled.div`
color: #464646;
`;
const SelectWrapper = styled.div`
position: relative;
display: inline-block;
&:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
${pseudoEl({
top: '25px',
right: '20px'
})}
}
`;
const StyledSelect = styled.select`
color: #464646;
font-size:16px;
min-width: ${remcalc(288)};
min-height: ${remcalc(54)};
border-radius: 4px;
padding-left: ${remcalc(20)};
background-color: #FFFFFF;
box-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.05);
border: solid 1px #D8D8D8;
-webkit-appearance: none;
&:before {
${pseudoEl()}
}
/* select[multiple] is valid CSS syntax - not added to lint library yet */
/* stylelint-disable */
@ -25,9 +60,9 @@ const StyledSelect = styled.select`
padding-left: 0;
padding-right: 0;
& :global option {
padding-left: 15px;
padding-right: 15px;
& option {
padding-left: ${remcalc(15)};
padding-right: ${remcalc(15)};
width: 100%;
}
}
@ -51,19 +86,22 @@ const Select = ({
<StyledLabel htmlFor={id}>
{label}
</StyledLabel>
<StyledSelect
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
label={label}
multiple={multiple}
name={name}
required={required}
selected={selected}
>
{children}
</StyledSelect>
<SelectWrapper>
<StyledSelect
autoFocus={autoFocus}
disabled={disabled}
form={form}
id={id}
label={label}
multiple={multiple}
name={name}
required={required}
selected={selected}
>
{children}
</StyledSelect>
</SelectWrapper>
</div>
);
};

View File

@ -1,4 +1,5 @@
const constants = require('../../shared/constants');
const composers = require('../../shared/composers');
const fns = require('../../shared/functions');
const React = require('react');
const Styled = require('styled-components');
@ -8,6 +9,10 @@ const {
colors
} = constants;
const {
pseudoEl
} = composers;
const {
remcalc,
rndId
@ -25,7 +30,7 @@ const StyledLabel = styled.label`
border-radius: ${boxes.borderRadius};
color: #464646;
height: 2.5rem;
width: 110px;
width: ${remcalc(110)};
`;
const StyledToggleLabel = styled.div`
@ -35,7 +40,7 @@ const StyledToggleLabel = styled.div`
color: #000000;
height: ${remcalc(54)};
margin: 0.125rem;
padding: ${remcalc('12 12 12 0')};
padding-left: ${remcalc(12)};
position: relative;
text-align: right;
width: ${remcalc(106)};
@ -46,19 +51,20 @@ const StyledToggleLabel = styled.div`
font-size: inherit;
font-weight: bold;
position: absolute;
right: 14px;
top: 13px;
right: 24px;
top: 19px;
}
&::after {
background-color: #FFFFFF;
border-radius: ${boxes.borderRadius};
content: "";
height: ${remcalc(46)};
left: 3px;
position: absolute;
top: 3px;
width: ${remcalc(46)};
${pseudoEl({
top: '3px',
left: '3px',
})}
}
`;
@ -70,12 +76,13 @@ const StyledInput = styled.input`
background: ${colors.confirmation};
border: ${boxes.border.confirmed};
color: #FFFFFF;
padding: ${remcalc('12 0 12 12')};
padding-left: 0;
padding-right: ${remcalc(12)};
text-align: left;
&::before {
content: "On";
left: 14px;
left: 20px;
right: auto;
}
@ -101,7 +108,6 @@ const Toggle = ({
style={style}
>
<StyledInput
checked={checked}
id={id}
type='checkbox'
/>

View File

@ -37,5 +37,15 @@ module.exports = {
border: ${border};
border-radius: ${radius};
box-shadow: ${shadow};
`,
pseudoEl: (
positions = {}
) => css`
content: "";
position: absolute;
top: ${positions.top || 'auto'};
right: ${positions.right || 'auto'};
bottom: ${positions.bottom || 'auto'};
left: ${positions.left || 'auto'};
`
};

View File

@ -203,13 +203,13 @@ storiesOf('Pagination', module)
storiesOf('Radio Group', module)
.add('Default', () => (
<RadioGroup>
<Radio value='default'>
<Radio name='hello' value='default'>
Video killed the radio star
</Radio>
<Radio value='fancy'>
<Radio name='hello' value='fancy'>
Video killed the radio star
</Radio>
<Radio value='none'>
<Radio name='hello' value='none'>
Video killed the radio star
</Radio>
</RadioGroup>
@ -223,11 +223,10 @@ storiesOf('RangeSlider', module)
storiesOf('Select', module)
.add('Default', () => (
<Select label='example select'>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>Apple</option>
<option>Banana</option>
<option>Pear</option>
<option>Orange</option>
</Select>
))
.add('multiple', () => (