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

adding in new typography styles and creating composers where appropriate

Browse Source
This commit is contained in:
Alex Windett 2017-02-15 16:57:27 +00:00
parent 12717c26cf
commit dc066f9cad
7 changed files with 130 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/breadcrumb/index.js
View File

@ -20,7 +20,7 @@ const {
} = constants; } = constants;
const { const {
H1, H2,
} = BaseElements; } = BaseElements;
const { const {
@ -66,6 +66,10 @@ function getNameLink(name) {
})); }));
} }
const StyledH2 = styled(H2)`
color: ${colors.base.primary};
`;
const Breadcrumb = ({ const Breadcrumb = ({
children, children,
links = [], links = [],
@ -76,9 +80,9 @@ const Breadcrumb = ({
<Row> <Row>
<Column xs={12}> <Column xs={12}>
<StyledDiv> <StyledDiv>
<H1> <StyledH2>
{getNameLink(name)} {getNameLink(name)}
</H1> </StyledH2>
</StyledDiv> </StyledDiv>
</Column> </Column>
</Row> </Row>

64
ui/src/components/base-elements/story.js
View File

@ -4,9 +4,17 @@ const {
storiesOf storiesOf
} = require('@kadira/storybook'); } = require('@kadira/storybook');
const constants = require('../../shared/constants');
const Column = require('../column');
const Row = require('../row');
const Base = require('../base'); const Base = require('../base');
const BaseElements = require('./'); const BaseElements = require('./');
const {
colors
} = constants;
const { const {
H1, H1,
H2, H2,
@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
<Small>This is a Small</Small> <Small>This is a Small</Small>
</Base> </Base>
)) ))
.add('Style Guide', () => (
<Base>
<div>
<Row>
<Column>
<H1>Special Heading - H1</H1>
<ul>
<li>Size - 36px</li>
<li>Line Height - 42px</li>
<li>Color - <code>{colors.base.secondary}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<H2>Standard Heading - H2</H2>
<ul>
<li>Size - 24px</li>
<li>Line Height - 36px</li>
<li>Color - <code>{colors.base.secondary}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<H3>Sub Heading - H3</H3>
<ul>
<li>Size - 16px</li>
<li>Line Height - 24px</li>
<li>Color - <code>{colors.base.secondary}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<P>Body Copy</P>
<ul>
<li>Size - 16px</li>
<li>Line Height - 24px</li>
<li>Color - <code>{colors.base.text}</code></li>
</ul>
</Column>
</Row>
<Row>
<Column>
<Small>Small Body Copy</Small>
<ul>
<li>Size - 14px</li>
<li>Line Height - 18px</li>
<li>Color - <code>{colors.base.text}</code></li>
</ul>
</Column>
</Row>
</div>
</Base>
))
; ;

56
ui/src/components/colors/story.js
View File

@ -43,37 +43,39 @@ const convertCase = (val) => {
storiesOf('Colors', module) storiesOf('Colors', module)
.add('default', () => { .add('default', () => {
const renderColors = Object.keys(colors.base).sort().map( (color, index) => { const renderColors = Object.keys(colors.base)
.sort()
.map( (color, index) => {
const StyledSquare = styled(Square)` const StyledSquare = styled(Square)`
background: ${colors.base[color]} background: ${colors.base[color]}
`; `;
return ( return (
<Column <Column
key={index} key={index}
md={3} md={3}
xs={6} xs={6}
> >
<StyledWrapper> <StyledWrapper>
<StyledSquare /> <StyledSquare />
<StyledP> <StyledP>
<strong>Name</strong>: <strong>Name</strong>:
<br />{convertCase(color)} <br />{convertCase(color)}
</StyledP> </StyledP>
<StyledP> <StyledP>
<strong>Const</strong>: <strong>Const</strong>:
<br />{color} <br />{color}
</StyledP> </StyledP>
<StyledP> <StyledP>
<strong>Hex</strong>: {colors.base[color].toUpperCase()} <strong>Hex</strong>: {colors.base[color].toUpperCase()}
</StyledP> </StyledP>
</StyledWrapper> </StyledWrapper>
</Column> </Column>
); );
}); });
return ( return (
<Row> <Row>

54
ui/src/components/typography/story.js
View File

@ -1,54 +0,0 @@
const React = require('react');
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const Column = require('../column');
const Row = require('../row');
const BaseElements = require('../base-elements');
const {
default: styled
} = Styled;
const {
storiesOf
} = require('@kadira/storybook');
const {
colors
} = constants;
const {
H1,
H2,
H3,
P,
} = BaseElements;
const StyledWrapper = styled.div`
display: inline-block;
float: left;
margin-left: 20px;
`;
const Square = styled.div`
display: inline-block;
width: 100px;
height: 100px
`;
storiesOf('Typography', module)
.add('default', () => {
return (
<Row>
<Column>
<H2>Special Heading - H1</H2>
<ul>
<li>Size - 36px</li>
<li>Line Height - 42px</li>
<li>Color- <pre>Some Hex</pre></li>
</ul>
</Column>
</Row>
);
});

0
ui/src/shared/composers.js → ui/src/shared/composers/index.js
View File

28
ui/src/shared/composers/typography.js Normal file
View File

@ -0,0 +1,28 @@
const Styled = require('styled-components');
const constants = require('../../shared/constants');
const {
colors
} = constants;
const {
css
} = Styled;
module.export = {
libreFranklin: css`
font-family: 'LibreFranklin', Helvetica, sans-serif;
`,
bold: css`
font-weight: 600;
`,
regular: css`
font-weight: normal;
`,
titleColor: css`
color: ${colors.base.secondary};
`,
bodyColor: css`
color: ${colors.base.text};
`,
};

4
ui/src/shared/constants/colors.js
View File

@ -46,8 +46,8 @@ const base = {
...white, ...white,
text: '#646464', text: '#646464',
grey: '#D8D8D8', grey: '#D8D8D8',
disabled: "#FAFAFA", disabled: '#FAFAFA',
background: "#FAFAFA", background: '#FAFAFA',
green: '#00AF66', green: '#00AF66',
greenDark: '#009858', greenDark: '#009858',
orange: '#E38200', orange: '#E38200',