refactoring and updating list item

This commit is contained in:
Alex Windett 2017-02-02 19:05:45 +00:00
parent 7b5eb32d00
commit dfd358573f
15 changed files with 40 additions and 113 deletions

View File

@ -1,36 +0,0 @@
const React = require('react');
const Styled = require('styled-components');
const {
default: styled,
css
} = Styled;
const styles = css`
font-size: inherit;
${props => props.style}
`;
const Icon = ({
name = 'beer',
className,
iconSet = 'fa',
style = '',
}) => {
const Icon = require(`react-icons/lib/${iconSet}/${name}`);
const Component = styled(Icon)(styles);
return (
<Component className={className} />
);
};
Icon.propTypes = {
className: React.PropTypes.string,
iconSet: React.PropTypes.string.isRequired,
name: React.PropTypes.string.isRequired,
style: React.PropTypes.string,
};
module.exports = Icon;

View File

@ -1,37 +0,0 @@
# `<Icon>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Base = require('../base');
const Container = require('../container');
const Row = require('../row');
const Column = require('../column');
const Icon = require('./index.js');
const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString(
<Base>
<Row>
<Column>
<Icon iconSet='fa' name='beer' />
</Column>
</Row>
</Base>
);
```
## usage
```js
const React = require('react');
const Icon = require('ui/icon');
module.exports = () => {
return (
<Icon iconSet='fa' name='beer' />
);
}
```

View File

@ -21,5 +21,5 @@ module.exports = styled(View)`
padding-left: ${remcalc(23)}; padding-left: ${remcalc(23)};
padding-right: ${remcalc(23)}; padding-right: ${remcalc(23)};
padding-bottom: ${remcalc(5)}; padding-bottom: ${remcalc(5)};
background-color: ${colors.brandInactive}; background-color: ${colors.inactive.default};
`; `;

View File

@ -1,4 +1,5 @@
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const Item = require('./item'); const Item = require('./item');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
@ -7,6 +8,10 @@ const {
remcalc remcalc
} = fns; } = fns;
const {
colors
} = constants;
const { const {
default: styled default: styled
} = Styled; } = Styled;
@ -25,6 +30,11 @@ const StyledItem = styled(Item)`
top: ${remcalc(-1)}; top: ${remcalc(-1)};
left: ${remcalc(-1)}; left: ${remcalc(-1)};
right: ${remcalc(-1)}; right: ${remcalc(-1)};
& [name="list-item-subtitle"],
& [name="list-item-title"] {
color: ${colors.base.white};
}
`; `;
const addFromHeader = (children) => React.Children.map(children, (c) => { const addFromHeader = (children) => React.Children.map(children, (c) => {

View File

@ -19,10 +19,10 @@ const {
} = Styled; } = Styled;
const paper = ` const paper = `
0 ${remcalc(8)} 0 ${remcalc(-5)} #fafafa, 0 ${remcalc(8)} 0 ${remcalc(-5)} ${colors.base.grey},
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.borderSecondary}, 0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${colors.base.greyDark},
0 ${remcalc(16)} 0 ${remcalc(-10)} #fafafa, 0 ${remcalc(16)} 0 ${remcalc(-10)} ${colors.base.grey},
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.borderSecondary}; 0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${colors.base.greyDark};
`; `;
const height = (props) => props.collapsed const height = (props) => props.collapsed
@ -52,8 +52,8 @@ const Item = styled(Row)`
height: ${height}; height: ${height};
min-height: ${minHeight}; min-height: ${minHeight};
box-shadow: ${shadow}; box-shadow: ${shadow};
border: ${remcalc(1)} solid ${colors.borderSecondary}; border: ${remcalc(1)} solid ${colors.base.grey};
background-color: ${colors.brandSecondary}; background-color: ${colors.base.white};
margin-bottom: ${marginBottom}; margin-bottom: ${marginBottom};
`; `;

View File

@ -22,8 +22,8 @@ const height = (props) => props.collapsed
: remcalc(124); : remcalc(124);
const borderLeftColor = (props) => !props.fromHeader const borderLeftColor = (props) => !props.fromHeader
? colors.borderSecondary ? colors.base.greyLight
: colors.borderPrimary; : colors.base.primary;
const Nav = styled.nav` const Nav = styled.nav`
flex: 0 0 ${remcalc(47)}; flex: 0 0 ${remcalc(47)};

View File

@ -1,13 +1,8 @@
const constants = require('../../shared/constants');
const fns = require('../../shared/functions'); const fns = require('../../shared/functions');
const Title = require('./title'); const Title = require('./title');
const React = require('react'); const React = require('react');
const Styled = require('styled-components'); const Styled = require('styled-components');
const {
colors
} = constants;
const { const {
remcalc remcalc
} = fns; } = fns;
@ -20,10 +15,6 @@ const padding = (props) => !props.collapsed
? `0 ${remcalc(18)}` ? `0 ${remcalc(18)}`
: 0; : 0;
const color = (props) => props.fromHeader
? colors.brandPrimaryColor
: '#646464';
const display = (props) => !props.collapsed const display = (props) => !props.collapsed
? 'inline-block' ? 'inline-block'
: 'flex'; : 'flex';
@ -36,7 +27,6 @@ const Span = styled.span`
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
font-size: ${remcalc(14)}; font-size: ${remcalc(14)};
color: ${color};
justify-content: flex-end; justify-content: flex-end;
`; `;

View File

@ -17,8 +17,8 @@ const {
} = Styled; } = Styled;
const color = (props) => !props.fromHeader const color = (props) => !props.fromHeader
? colors.brandSecondaryColor ? colors.base.secondary
: colors.brandPrimaryColor; : colors.base.primary;
const padding = (props) => !props.collapsed const padding = (props) => !props.collapsed
? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}` ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`

View File

@ -24,17 +24,17 @@ const StyledButton = styled.button`
display: flex; display: flex;
margin: 0; margin: 0;
padding: ${remcalc(18)} ${remcalc(24)}; padding: ${remcalc(18)} ${remcalc(24)};
color: ${colors.brandPrimaryColor}; color: ${colors.base.primary};
float: right; float: right;
background-color: ${colors.brandPrimaryDark}; background-color: ${colors.base.primaryLight};
line-height: 1.5; line-height: 1.5;
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest}; border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
cursor: pointer; cursor: pointer;
`; `;
const StyledIcon = styled(CloseIcon)` const StyledIcon = styled(CloseIcon)`
fill: ${colors.brandPrimaryColor}; fill: ${colors.base.primary};
`; `;
const AddMetricButton = ({ const AddMetricButton = ({

View File

@ -19,7 +19,7 @@ const Container = styled.div`
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: ${colors.brandPrimaryColor}; background-color: ${colors.base.primary};
`; `;
const Canvas = styled.canvas` const Canvas = styled.canvas`

View File

@ -22,8 +22,8 @@ const StyledHeader = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
width: 100%; width: 100%;
background-color: ${colors.brandPrimaryDark}; background-color: ${colors.base.primaryDark};
border: solid ${remcalc(1)} ${colors.brandPrimaryDarkest}; border: solid ${remcalc(1)} ${colors.base.primaryDark};
`; `;
const Header = (props) => ( const Header = (props) => (

View File

@ -29,7 +29,7 @@ const SelectWrapper = styled.div`
&:after { &:after {
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-right: 5px solid transparent; border-right: 5px solid transparent;
border-top: 5px solid ${colors.brandPrimaryColor}; border-top: 5px solid ${colors.base.primary};
${pseudoEl({ ${pseudoEl({
top: '28px', top: '28px',
@ -44,10 +44,10 @@ const StyledSelect = styled.select`
font-size:16px; font-size:16px;
text-align: right !important; text-align: right !important;
border-radius: 0; border-radius: 0;
color: ${colors.brandPrimaryColor}; color: ${colors.base.primary};
background-color: ${colors.brandPrimaryDark}; background-color: ${colors.base.primaryLight};
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest}; border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
-webkit-appearance: none; -webkit-appearance: none;
cursor: pointer; cursor: pointer;
`; `;

View File

@ -25,26 +25,26 @@ const StyledButton = styled(Button)`
display: flex; display: flex;
margin: 0; margin: 0;
padding: ${remcalc(18)} ${remcalc(24)}; padding: ${remcalc(18)} ${remcalc(24)};
color: ${colors.brandPrimaryColor}; color: ${colors.base.primary};
float: right; float: right;
background-color: ${colors.brandPrimaryDark}; background-color: ${colors.base.primaryLight};
line-height: 1.5; line-height: 1.5;
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest}; border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
&:hover, &:hover,
&:focus, &:focus,
&:active, &:active,
&:active:hover, &:active:hover,
&:active:focus { &:active:focus {
background-color: ${colors.brandPrimaryDark}; background-color: ${colors.base.primaryLight};
border: none; border: none;
border-left: solid ${remcalc(1)} ${colors.brandPrimaryDarkest}; border-left: solid ${remcalc(1)} ${colors.base.primaryDark};
} }
`; `;
const StyledIcon = styled(SettingsIcon)` const StyledIcon = styled(SettingsIcon)`
fill: ${colors.brandPrimaryColor}; fill: ${colors.base.primary};
margin-right: ${remcalc(12)}; margin-right: ${remcalc(12)};
`; `;

View File

@ -23,5 +23,5 @@ module.exports = styled.h3`
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
line-height: 1.5; line-height: 1.5;
color: ${colors.brandPrimaryColor}; color: ${colors.base.primary};
`; `;

View File

@ -23,7 +23,7 @@ const Container = styled.div`
width: 100%; width: 100%;
max-width: ${remcalc(940)}; max-width: ${remcalc(940)};
box-shadow: ${boxes.bottomShaddow}; box-shadow: ${boxes.bottomShaddow};
border: 1px solid ${colors.borderSecondary}; border: 1px solid ${colors.base.greyLight};
`; `;
const View = (props) => ( const View = (props) => (