mirror of
https://github.com/yldio/copilot.git
synced 2024-11-28 14:10:04 +02:00
removing inline styles and passing styles down to styled-component via props
This commit is contained in:
parent
7b54efb036
commit
f7b9ea20d0
@ -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>
|
||||
);
|
||||
|
@ -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'
|
||||
/>
|
||||
|
@ -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
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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 }
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
@ -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}
|
||||
|
@ -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'
|
||||
/>
|
||||
);
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user