Merge pull request #100 from yldio/styled-components
updating styled components
This commit is contained in:
Sérgio Ramos
GitHub
commit
0287041cc8
@ -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}
|
||||
>
|
||||
|
||||
@ -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
|
||||
};
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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'
|
||||
/>
|
||||
|
||||
@ -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'};
|
||||
`
|
||||
};
|
||||
|
||||
@ -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', () => (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user