mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00
Code Issues 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;
const {
H1,
H2,
} = BaseElements;
const {
@ -66,6 +66,10 @@ function getNameLink(name) {
}));
}
const StyledH2 = styled(H2)`
color: ${colors.base.primary};
`;
const Breadcrumb = ({
children,
links = [],
@ -76,9 +80,9 @@ const Breadcrumb = ({
<Row>
<Column xs={12}>
<StyledDiv>
<H1>
<StyledH2>
{getNameLink(name)}
</H1>
</StyledH2>
</StyledDiv>
</Column>
</Row>

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

@ -4,9 +4,17 @@ const {
storiesOf
} = require('@kadira/storybook');
const constants = require('../../shared/constants');
const Column = require('../column');
const Row = require('../row');
const Base = require('../base');
const BaseElements = require('./');
const {
colors
} = constants;
const {
H1,
H2,
@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
<Small>This is a Small</Small>
</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)
.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)`
background: ${colors.base[color]}
`;
const StyledSquare = styled(Square)`
background: ${colors.base[color]}
`;
return (
<Column
key={index}
md={3}
xs={6}
>
<StyledWrapper>
<StyledSquare />
<StyledP>
<strong>Name</strong>:
<br />{convertCase(color)}
</StyledP>
return (
<Column
key={index}
md={3}
xs={6}
>
<StyledWrapper>
<StyledSquare />
<StyledP>
<strong>Name</strong>:
<br />{convertCase(color)}
</StyledP>
<StyledP>
<strong>Const</strong>:
<br />{color}
</StyledP>
<StyledP>
<strong>Const</strong>:
<br />{color}
</StyledP>
<StyledP>
<strong>Hex</strong>: {colors.base[color].toUpperCase()}
</StyledP>
</StyledWrapper>
</Column>
);
});
<StyledP>
<strong>Hex</strong>: {colors.base[color].toUpperCase()}
</StyledP>
</StyledWrapper>
</Column>
);
});
return (
<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,
text: '#646464',
grey: '#D8D8D8',
disabled: "#FAFAFA",
background: "#FAFAFA",
disabled: '#FAFAFA',
background: '#FAFAFA',
green: '#00AF66',
greenDark: '#009858',
orange: '#E38200',