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