Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #100 from yldio/styled-components

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/radio-group/index.js
View File

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

59
ui/src/components/radio-group/item.js
View File

@ -1,31 +1,67 @@
const classNames = require('classnames');
const React = require('react'); 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 = ({ const Item = ({
children, children,
checked = false, checked = false,
itemContent = '',
disabled = false, disabled = false,
onClick, onClick,
tabIndex tabIndex
}) => { }) => {
const cn = classNames(
styles.item,
disabled ? styles.disabled : '',
checked ? styles.checked : ''
);
return ( return (
<div <RadioItem
aria-checked={checked} aria-checked={checked}
aria-disabled={disabled} aria-disabled={disabled}
className={cn}
onClick={onClick} onClick={onClick}
role='radio' role='radio'
tabIndex={tabIndex} tabIndex={tabIndex}
> >
{children} {children}
</div> </RadioItem>
); );
}; };
@ -33,6 +69,7 @@ Item.propTypes = {
checked: React.PropTypes.bool, checked: React.PropTypes.bool,
children: React.PropTypes.node, children: React.PropTypes.node,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
itemContent: React.PropTypes.node,
onClick: React.PropTypes.func, onClick: React.PropTypes.func,
tabIndex: React.PropTypes.number tabIndex: React.PropTypes.number
}; };

124
ui/src/components/radio/index.js
View File

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

74
ui/src/components/select/index.js
View File

@ -1,11 +1,17 @@
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const composers = require('../../shared/composers');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const { const {
rndId rndId,
remcalc
} = fns; } = fns;
const {
pseudoEl
} = composers;
const { const {
default: styled default: styled
} = Styled; } = Styled;
@ -15,8 +21,37 @@ const StyledLabel = styled.div`
color: #464646; 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` 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 */ /* select[multiple] is valid CSS syntax - not added to lint library yet */
/* stylelint-disable */ /* stylelint-disable */
@ -25,9 +60,9 @@ const StyledSelect = styled.select`
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
& :global option { & option {
padding-left: 15px; padding-left: ${remcalc(15)};
padding-right: 15px; padding-right: ${remcalc(15)};
width: 100%; width: 100%;
} }
} }
@ -51,19 +86,22 @@ const Select = ({
<StyledLabel htmlFor={id}> <StyledLabel htmlFor={id}>
{label} {label}
</StyledLabel> </StyledLabel>
<StyledSelect
autoFocus={autoFocus} <SelectWrapper>
disabled={disabled} <StyledSelect
form={form} autoFocus={autoFocus}
id={id} disabled={disabled}
label={label} form={form}
multiple={multiple} id={id}
name={name} label={label}
required={required} multiple={multiple}
selected={selected} name={name}
> required={required}
{children} selected={selected}
</StyledSelect> >
{children}
</StyledSelect>
</SelectWrapper>
</div> </div>
); );
}; };

28
ui/src/components/toggle/index.js
View File

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

10
ui/src/shared/composers.js
View File

@ -37,5 +37,15 @@ module.exports = {
border: ${border}; border: ${border};
border-radius: ${radius}; border-radius: ${radius};
box-shadow: ${shadow}; 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'};
` `
}; };

15
ui/stories/index.js
View File

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