From dc066f9cad9c8b42961506c363af4a1bff29965c Mon Sep 17 00:00:00 2001 From: Alex Windett Date: Wed, 15 Feb 2017 16:57:27 +0000 Subject: [PATCH] adding in new typography styles and creating composers where appropriate --- frontend/src/components/breadcrumb/index.js | 10 ++- ui/src/components/base-elements/story.js | 64 +++++++++++++++++++ ui/src/components/colors/story.js | 56 ++++++++-------- ui/src/components/typography/story.js | 54 ---------------- .../{composers.js => composers/index.js} | 0 ui/src/shared/composers/typography.js | 28 ++++++++ ui/src/shared/constants/colors.js | 4 +- 7 files changed, 130 insertions(+), 86 deletions(-) delete mode 100644 ui/src/components/typography/story.js rename ui/src/shared/{composers.js => composers/index.js} (100%) create mode 100644 ui/src/shared/composers/typography.js diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js index 04605b4e..06e1315b 100644 --- a/frontend/src/components/breadcrumb/index.js +++ b/frontend/src/components/breadcrumb/index.js @@ -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 = ({ -

+ {getNameLink(name)} -

+ diff --git a/ui/src/components/base-elements/story.js b/ui/src/components/base-elements/story.js index e483a915..3316265a 100644 --- a/ui/src/components/base-elements/story.js +++ b/ui/src/components/base-elements/story.js @@ -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) This is a Small )) + .add('Style Guide', () => ( + +
+ + +

Special Heading - H1

+
    +
  • Size - 36px
    • +
  • Line Height - 42px
    • +
  • Color - {colors.base.secondary}
    • +
+ + + + +

Standard Heading - H2

+
    +
  • Size - 24px
    • +
  • Line Height - 36px
    • +
  • Color - {colors.base.secondary}
    • +
+ + + + +

Sub Heading - H3

+
    +
  • Size - 16px
    • +
  • Line Height - 24px
    • +
  • Color - {colors.base.secondary}
    • +
+ + + + +

Body Copy

+
    +
  • Size - 16px
    • +
  • Line Height - 24px
    • +
  • Color - {colors.base.text}
    • +
+ + + + + Small Body Copy +
    +
  • Size - 14px
    • +
  • Line Height - 18px
    • +
  • Color - {colors.base.text}
    • +
+ + +
+ + )) ; \ No newline at end of file diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js index 25abeab6..bd7cd9d3 100644 --- a/ui/src/components/colors/story.js +++ b/ui/src/components/colors/story.js @@ -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 ( - - - - - Name: -
{convertCase(color)} - + return ( + + + + + Name: +
{convertCase(color)} + - - Const: -
{color} - + + Const: +
{color} + - - Hex: {colors.base[color].toUpperCase()} - - - - ); - }); + + Hex: {colors.base[color].toUpperCase()} + + + + ); + }); return ( diff --git a/ui/src/components/typography/story.js b/ui/src/components/typography/story.js deleted file mode 100644 index fe74a933..00000000 --- a/ui/src/components/typography/story.js +++ /dev/null @@ -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 ( - - -

Special Heading - H1

-
    -
  • Size - 36px
    • -
  • Line Height - 42px
    • -
  • Color- 
    Some Hex
    • -
- - - ); - }); \ No newline at end of file diff --git a/ui/src/shared/composers.js b/ui/src/shared/composers/index.js similarity index 100% rename from ui/src/shared/composers.js rename to ui/src/shared/composers/index.js diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js new file mode 100644 index 00000000..e732e33d --- /dev/null +++ b/ui/src/shared/composers/typography.js @@ -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}; + `, +}; diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js index 61815a27..46af4bae 100644 --- a/ui/src/shared/constants/colors.js +++ b/ui/src/shared/constants/colors.js @@ -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',