Merge pull request #6 from hammer-code/typography

Typography

index.js

@@ -1,3 +1,5 @@
 import './stories/Screen.story'
+import './stories/Typography.story'
 import './stories/Button.story'
-import './stories/Collapse.story'
+import './stories/Collapse.story'
+import './stories/List.story'

src/config/Colors.js

@@ -1,14 +1,28 @@
-export const PRIMARY = '#4050A0'
-export const PRIMARY_LIGHT = '#A5AED7'
-export const SECONDARY = '#FF6490'
-export const SECONDARY_LIGHT = '#FF9FBA'
-export const BLACK = '#02020B'
-export const GREY = '#8C8C90'
-export const GREY_SPACE = '#FEFEFF'
-export const GREY_LIGHT = '#D1D1D2'
-export const GREY_DARK = '#5E5E63'
+export const PRIMARY = '#BE52F2'
+export const PRIMARY_LIGHT = '#DBA5F5'
+export const PRIMARY_LIGHTER = '#EEDFF2'
+export const SECONDARY = '#6979F8'
+export const SECONDARY_LIGHT = '#A5AFFB'
+export const SECONDARY_LIGHTER = '#E5E7FA'
+export const YELLOW = '#FFCF5C'
+export const YELLOW_LIGHT = '#FFE29D'
+export const YELLOW_LIGHTER = '#FFF8E7'
+export const ORANGE = '#FFA26B'
+export const ORANGE_LIGHT = '#FFC7A6'
+export const ORANGE_LIGHTER = '#FFE8DA'
+export const GREEN = '#00C48C'
+export const GREEN_LIGHT = '#7DDFC3'
+export const GREEN_LIGHTER = '#D5F2EA'
+export const RED = '#FF647C'
+export const RED_LIGHT = '#FDAFBB'
+export const RED_LIGHTER = '#FBE4E8'
+export const BLUE = '#0084F4'
+export const BLUE_LIGHT = '#66B5F8'
+export const BLUE_LIGHTER = '#D5E9FA'
+export const BLACK = '#1A051D'
+export const BLACK_MYTIC = '#3F3356'
+export const GREY = '#D0C9D6'
+export const GREY_SPACE = '#F6F7FB'
+export const GREY_LIGHT = '#ECE9F1'
+export const GREY_LIGHTER = '#F7F5F9'
 export const WHITE = '#FFFFFF'
-export const RED = '#DE3C4B'
-export const YELLOW = '#FDB913'
-export const GREEN = '#91D13D'
-export const ORANGE = '#F69220'

src/elements/Collapse/Styles.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components'
-import { WHITE, PRIMARY, GREY_DARK, GREY_LIGHT, SECONDARY, RED, GREEN, YELLOW, ORANGE } from '../../config/Colors'
+import { WHITE, PRIMARY, BLACK_MYTIC, GREY_LIGHT, SECONDARY, RED, GREEN, YELLOW, ORANGE } from '../../config/Colors'
 import { PADDING, MARGIN, ROUNDED, TEXT_SIZE, SHADOW } from '../../config/Metrics'
 
 const handleExpandContainer = ({ open }) => {
@@ -19,7 +19,7 @@ export const Container = styled.div`
 
 export const Head = styled.div`
   padding: ${PADDING.tiny} ${PADDING.small};
-  color: ${GREY_DARK};
+  color: ${BLACK_MYTIC};
   font-size: ${TEXT_SIZE.medium};
   font-weight: 300;
   display: flex;

src/elements/List/Styles.js

@@ -0,0 +1,34 @@
+import styled, { css } from 'styled-components'
+import { WHITE, PRIMARY_LIGHT, BLACK_MYTIC, GREY_LIGHT, SECONDARY, RED, GREEN, YELLOW, ORANGE } from '../../config/Colors'
+import { PADDING, MARGIN, ROUNDED, TEXT_SIZE, SHADOW } from '../../config/Metrics'
+
+export const ListsContainer = styled.ul`
+  list-style: none;
+  margin: ${MARGIN.remove};
+  padding-left: ${PADDING.remove};
+
+  & li:first-child {
+    border-top: 1px solid ${GREY_LIGHT};
+  }
+`
+
+const handleClickable = ({ clickable }) => {
+  return (clickable) ? css`
+    cursor: pointer;
+  ` : null
+}
+
+export const ListContainer = styled.li`
+  padding: ${PADDING.small} ${PADDING.tiny};
+  border-bottom: 1px solid ${GREY_LIGHT};
+  ${handleClickable}
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+`
+
+export const ContentWrapper = styled.div`
+  float: left;
+`

src/elements/List/index.js

@@ -0,0 +1,32 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { ListsContainer, ListContainer, ContentWrapper } from './Styles'
+
+export class Lists extends Component {
+  render () {
+    const { children } = this.props
+    return (
+      <ListsContainer>
+        {children}
+      </ListsContainer>
+    )
+  }
+}
+
+export class ListItem extends Component {
+  render () {
+    const { children, clickable } = this.props
+    return (
+      <ListContainer
+        clickable={clickable}>
+        <ContentWrapper>
+          {children}
+        </ContentWrapper>
+      </ListContainer>
+    )
+  }
+}
+
+ListItem.propsTypes = {
+  clickable: PropTypes.bool
+}

src/elements/Screen/Styles.js

@@ -6,9 +6,9 @@ export const Container = styled.div`
   width: 361px;
   height: 550px;
   background-color: ${GREY_SPACE};
-  font-family: 'Helvetica', sans-serif;
+  font-family: 'San Francisco', sans-serif;
   font-size: ${TEXT_SIZE.small};
-  margin: 20px auto;
+  margin: 20px 0 20px 100px;
   box-shadow: ${SHADOW.medium};
 `
 

src/elements/Typo/Styles.js

@@ -0,0 +1,49 @@
+import styled, { css } from 'styled-components'
+import { TEXT_SIZE, MARGIN } from '../../config/Metrics'
+import { GREY } from '../../config/Colors'
+
+const handleResizingHeading = ({ stage }) => {
+  const stageOne = css`
+    font-size: ${TEXT_SIZE.extraLarge};
+    line-height: calc(${TEXT_SIZE.extraLarge} + 11px);
+  `
+  switch (stage) {
+    case 'one':
+      return stageOne
+      break
+    case 'two':
+      return css`
+        font-size: ${TEXT_SIZE.large};
+        line-height: calc(${TEXT_SIZE.large} + 9px);
+      `
+      break
+    case 'three':
+      return css`
+        font-size: ${TEXT_SIZE.medium};
+        line-height: calc(${TEXT_SIZE.medium} + 7px);
+      `
+      break
+    case 'four':
+      return css`
+        font-size: ${TEXT_SIZE.small};
+        line-height: calc(${TEXT_SIZE.small} + 5px);
+      `
+      break
+    default:
+      return stageOne
+      break
+  }
+}
+
+export const HeadingContainer = styled.div`
+  font-weight: 900;
+  margin-bottom: ${MARGIN.base};
+  ${handleResizingHeading}
+`
+
+export const SubHeadingContainer = styled.div`
+  font-size: ${TEXT_SIZE.small};
+  line-height: calc(${TEXT_SIZE.small} + 5px);
+  color: ${GREY};
+  text-transform: uppercase;
+`

src/elements/Typo/index.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { HeadingContainer, SubHeadingContainer } from './Styles'
+export class Heading extends Component {
+  render () {
+    const { children, stage } = this.props
+    return (
+      <HeadingContainer stage={stage}>
+        {children}
+      </HeadingContainer>
+    )
+  }
+}
+
+export class SubHeading extends Component {
+  render () {
+    const { children } = this.props
+    return (
+      <SubHeadingContainer>
+        {children}
+      </SubHeadingContainer>
+    )
+  }
+}
+
+Heading.propTypes = {
+  stage: PropTypes.string
+}

stories/List.story.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Screen from '../src/elements/Screen'
+import { Lists, ListItem } from '../src/elements/List'
+
+export default storiesOf('List', module)
+.add('Default', () => (
+  <Screen withPadding>
+    <Lists>
+      <ListItem>
+        <b>
+          Zeck Maroin
+        </b>
+      </ListItem>
+      <ListItem>
+        <b>
+          Markoni Jocka
+        </b>
+      </ListItem>
+      <ListItem>
+        <b>
+          Nimasha Mark
+        </b>
+      </ListItem>
+    </Lists>
+  </Screen>
+))
+.add('Clickable', () => (
+  <Screen withPadding>
+    <Lists>
+      <ListItem clickable>
+        <b>
+          Zeck Maroin
+        </b>
+      </ListItem>
+      <ListItem clickable>
+        <b>
+          Markoni Jocka
+        </b>
+      </ListItem>
+      <ListItem clickable>
+        <b>
+          Nimasha Mark
+        </b>
+      </ListItem>
+    </Lists>
+  </Screen>
+))

stories/Typography.story.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import Screen from '../src/elements/Screen'
+import { Heading, SubHeading } from '../src/elements/Typo'
+
+export default storiesOf('Typography', module)
+.add('Heading', () => (
+  <Screen withPadding>
+    <Heading>
+      Heading One
+    </Heading>
+    <Heading stage="two">
+      Heading Two
+    </Heading>
+    <Heading stage="three">
+      Heading Three
+    </Heading>
+    <Heading stage="four">
+      Heading Four
+    </Heading>
+  </Screen>
+))
+.add('Sub Heading', () => (
+  <Screen withPadding>
+    <SubHeading>
+      Sub Head
+    </SubHeading>
+  </Screen>
+))
+.add('Example', () => (
+  <Screen withPadding>
+    <Heading>
+      Now add your first project
+    </Heading>
+    <SubHeading>
+      Project Name
+    </SubHeading>
+  </Screen>
+))