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

refactoring base components to use styled-component string

Browse Source
This commit is contained in:
Alex Windett 2017-02-20 15:52:52 +00:00
parent b256a06c78
commit 7d0ee71504
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ui/src/components/base-elements/index.js
View File

@ -4,17 +4,13 @@ const Styled = require('styled-components');
const React = require('react');
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const composers = require('../../shared/composers');
const typography = require('../../shared/composers/typography');
const {
default: styled
} = Styled;
const {
colors,
} = constants;
const {
Baseline
} = composers;
@ -27,36 +23,40 @@ const {
// before using !important
const elements = [{
name: 'H1',
properties: {
'font-size': remcalc(36),
'font-weight': 600,
'font-style': 'normal',
'font-stretch': 'normal',
'color': colors.base.primaryLight,
'margin': 0
}
properties: `
font-size: ${remcalc(36)};
font-style: normal;
font-stretch: normal;
margin: 0;
${typography.bold}
`
}, {
name: 'H2',
properties: {
'font-size': remcalc(24),
}
properties: `
font-size: ${remcalc(24)};
${typography.bold}
`
}, {
name: 'H3',
properties: {
'font-size': remcalc(16),
}
properties: `
font-size: ${remcalc(16)};
${typography.bold}
`
}, {
name: 'P',
properties: {
'line-height': remcalc(24),
'font-size': remcalc(16),
}
properties: `
line-height: ${remcalc(24)};
font-size: ${remcalc(16)};
`
}, {
name: 'Small',
properties: {
'line-height': remcalc(18),
'font-size': remcalc(14),
},
properties: `
line-height: ${remcalc(18)};
font-size: ${remcalc(14)};
`
}];
/*
@ -70,7 +70,7 @@ const elements = [{
*/
const BaseElements = elements.reduce((acc, {
name = '',
properties = {}
properties = ''
}) => {
const StyledElement = styled[name.toLowerCase()]`
${properties}