1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

removing inline styles and passing styles down to styled-component via props

This commit is contained in:
Alex Windett 2017-02-09 13:56:29 +00:00
parent 7b54efb036
commit f7b9ea20d0
13 changed files with 48 additions and 58 deletions

View File

@ -37,6 +37,8 @@ const Avatar = styled.div`
overflow: hidden;
position: relative;
text-align: center;
${props => props.styles}
`;
module.exports = ({
@ -77,7 +79,7 @@ module.exports = ({
);
return (
<Avatar className={className} style={_style}>
<Avatar className={className} styles={_style}>
{av}
</Avatar>
);

View File

@ -26,6 +26,8 @@ const StyledInput = styled.input`
&:disabled + label::after {
opacity: 0.3;
}
${props => props.styles}
`;
const StyledLabel = styled.label`
@ -92,7 +94,7 @@ const Checkbox = ({
onChange={onChange}
readOnly={readOnly}
required={required}
style={style}
styles={style}
tabIndex={tabIndex}
type='checkbox'
/>

View File

@ -18,19 +18,17 @@ const StyledButton = styled.button`
top: ${remcalc(16)};
right: ${remcalc(16)};
${props => props.customStyles ? props.customStyles : null}
${props => props.styles}
`;
const Close = ({
style,
onClick,
customStyles = ''
}) => {
return (
<StyledButton
customStyles={customStyles}
onClick={onClick}
style={style}
styles={style}
>
<img
alt="Close"
@ -41,7 +39,6 @@ const Close = ({
};
Close.propTypes = {
customStyles: React.PropTypes.string,
onClick: React.PropTypes.func,
style: React.PropTypes.object
};

View File

@ -2,12 +2,21 @@
const React = require('react');
const ReactRouter = require('react-router-dom');
const Styled = require('styled-components');
const {
default: styled
} = Styled;
const {
Link,
Route
} = ReactRouter;
const StyledLink = styled(Link)`
${props => props.styles}
`;
const NavLink = ({
activeClassName,
activeStyle,
@ -39,7 +48,7 @@ const NavLink = ({
: className;
return (
<Link
<StyledLink
className={clssnm}
// eslint-disable-next-line object-curly-newline
style={isActive ? { ...style, ...activeStyle } : style}
@ -47,7 +56,7 @@ const NavLink = ({
{...rest}
>
{newChildren}
</Link>
</StyledLink>
);
};

View File

@ -31,6 +31,7 @@ const StyledNotification = styled.div`
width: 100%;
${baseBox(0)}
${props => props.styles}
&::before {
background-color: ${props => colors[props.type] || colors.brandPrimary}
@ -60,7 +61,7 @@ const Notificaton = ({
return (
<StyledNotification
className={className}
style={style}
styles={style}
type={type}
>
{ renderClose }

View File

@ -1,19 +1,15 @@
const React = require('react');
// 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
boxes,
colors
} = constants;
const {
@ -21,7 +17,7 @@ const {
} = Styled;
const RadioItem = styled.div`
background: #FFFFFF;
background: ${colors.base.white};
border: ${boxes.border.unchecked};
cursor: pointer;
flaot: left;

View File

@ -1,33 +0,0 @@
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: remcalc(~boxes.borderRadius);
--bottom-shaddow: ~boxes.bottomShaddow;
}
.group {
& .item {
background: #FFFFFF;
cursor: pointer;
margin-bottom: remcalc(15);
padding: remcalc(25);
@add-mixin create-base-box-properties;
&:last-child {
margin-bottom: initial;
}
&.checked {
border: var(--border-checked);
box-shadow: var(--bottom-shaddow);
}
&.disabled {
cursor: default;
}
}
}

View File

@ -32,6 +32,8 @@ const StyledInput = styled.input`
`;
const StyledLabel = styled.label`
${props => props.styles}
`;
const StyledContent = styled.div`
@ -82,7 +84,7 @@ const Radio = ({
}) => {
return (
<StyledLabel>
<StyledLabel styles={style}>
<StyledInput
checked={checked}
defaultChecked={defaultChecked}

View File

@ -127,6 +127,8 @@ const StyledRange = styled.input`
&:focus::-ms-fill-upper {
${rangeUpper}
}
${props => props.styles}
`;
const RangeSlider = ({
@ -138,7 +140,7 @@ const RangeSlider = ({
<StyledRange
className={className}
onChange={onChange}
style={style}
styles={style}
type='range'
/>
);

View File

@ -14,18 +14,21 @@ const StyledTitle = styled.h3`
const StyledTableWrapper = styled.section`
font-family: 'LibreFranklin', sans-serif;
font-style: normal;
${props => props.styles}
`;
const Table = ({
children,
columns = [],
data = [],
style,
title,
}) => {
return (
<StyledTableWrapper>
<StyledTableWrapper styles={style}>
<StyledTitle>{title}</StyledTitle>
<TableContent
@ -40,6 +43,7 @@ Table.propTypes = {
children: React.PropTypes.node,
columns: React.PropTypes.array,
data: React.PropTypes.array,
style: React.PropTypes.object,
title: React.PropTypes.string,
};

View File

@ -15,19 +15,23 @@ const StyledTableWrapper = styled.section`
border: solid 1px ${colors.base.greyDark}
font-family: 'LibreFranklin', sans-serif;
font-style: normal;
${props => props.styles}
`;
const Table = ({
children,
style,
title,
}) => (
<StyledTableWrapper>
<StyledTableWrapper styles={style}>
{children}
</StyledTableWrapper>
);
Table.propTypes = {
children: React.PropTypes.node,
style: React.PropTypes.object,
title: React.PropTypes.string,
};

View File

@ -22,6 +22,10 @@ const {
default: styled
} = Styled;
const StyledDiv = styled.div`
${props => props.styles}
`;
const Label = styled.label`
color: ${props => props.error ? colors.alert : colors.fonts.regular}
`;
@ -81,7 +85,7 @@ const Textarea = ({
const _error = error ? (<Error>{error}</Error>) : null;
return (
<div>
<StyledDiv styles={style}>
<Label
error={error}
htmlFor={id}
@ -112,7 +116,7 @@ const Textarea = ({
value={value}
/>
{_children}
</div>
</StyledDiv>
);
};

View File

@ -39,7 +39,7 @@ const StyledList = styled.ul`
padding: ${remcalc(ulPadder)};
min-width: ${remcalc(200)};
${props => props.style}
${props => props.styles}
${baseBox()}
@ -86,7 +86,7 @@ module.exports = ({
<StyledList
arrowPosition={arrowPosition}
className={className}
style={style}
styles={style}
>
{children}
</StyledList>