diff --git a/packages/ui-toolkit/src/principles/Beauty.png b/packages/ui-toolkit/src/principles/Beauty.png new file mode 100644 index 00000000..595d4c2b Binary files /dev/null and b/packages/ui-toolkit/src/principles/Beauty.png differ diff --git a/packages/ui-toolkit/src/principles/Engineers.png b/packages/ui-toolkit/src/principles/Engineers.png new file mode 100644 index 00000000..ebf2a6ee Binary files /dev/null and b/packages/ui-toolkit/src/principles/Engineers.png differ diff --git a/packages/ui-toolkit/src/principles/Helpful.png b/packages/ui-toolkit/src/principles/Helpful.png new file mode 100644 index 00000000..95d310e5 Binary files /dev/null and b/packages/ui-toolkit/src/principles/Helpful.png differ diff --git a/packages/ui-toolkit/src/principles/Secure.png b/packages/ui-toolkit/src/principles/Secure.png new file mode 100644 index 00000000..49735010 Binary files /dev/null and b/packages/ui-toolkit/src/principles/Secure.png differ diff --git a/packages/ui-toolkit/src/principles/index.js b/packages/ui-toolkit/src/principles/index.js new file mode 100644 index 00000000..129b4bf8 --- /dev/null +++ b/packages/ui-toolkit/src/principles/index.js @@ -0,0 +1,79 @@ +import React from 'react'; +import styled from 'styled-components'; +import Flex from 'styled-flex-component'; +import remcalc from 'remcalc'; + +import { H3, P } from '../'; +import beauty from './Beauty.png'; +import eng from './Engineers.png'; +import help from './Helpful.png'; +import secure from './Secure.png'; + +const List = styled.ul` + margin: 0; + padding: 0; +`; + +const Img = styled.img` + transform: scale(0.8); +`; + +const Wrapper = styled.div` + width: ${remcalc(280)}; +`; + +const Principles = () => ( + + + + Uncover & Apply + + +

Uncover & Apply

+

+ There is so much knowledge within the Triton community, both those + building it and using it, and it’s our job to uncover and apply it. +

+ + + + + Empower & Uplift + + +

Empower & Uplift

+

+ Regardless of previous knowledge of Triton, we should aim to empower + all users to do more and do it better. +

+ + + + + Secure & Stable + + +

Secure & Stable

+

+ For many clients, Triton’s stability and security is essential to + their own success. We should continue to design products that users + can use with confidence. +

+ + + + + Utility & Beauty + + +

Utility & Beauty

+

+ Through collaboration between engineering and design, we can strike + that fine balance between utility and beauty. +

+ + + +); + +export default Principles; diff --git a/packages/ui-toolkit/src/principles/readme.md b/packages/ui-toolkit/src/principles/readme.md new file mode 100644 index 00000000..3ac569ec --- /dev/null +++ b/packages/ui-toolkit/src/principles/readme.md @@ -0,0 +1,6 @@ +```jsx noeditor + const React = require('react'); + const { default: Principles } = require('./index'); + + +``` diff --git a/packages/ui-toolkit/src/styleguide/ghlogo.js b/packages/ui-toolkit/src/styleguide/ghlogo.js index dfa7f99f..e35ad907 100644 --- a/packages/ui-toolkit/src/styleguide/ghlogo.js +++ b/packages/ui-toolkit/src/styleguide/ghlogo.js @@ -4,7 +4,7 @@ export default () => ( diff --git a/packages/ui-toolkit/src/styleguide/header.js b/packages/ui-toolkit/src/styleguide/header.js new file mode 100644 index 00000000..a850101c --- /dev/null +++ b/packages/ui-toolkit/src/styleguide/header.js @@ -0,0 +1,58 @@ +import React from 'react'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; + +import Logo from './logo'; +import GHLogo from './ghlogo'; + +const Header = styled.header` + background: ${props => props.theme.greyDarker}; + color: ${props => props.theme.white}; + height: ${remcalc(48)}; + padding: 0 ${remcalc(24)}; + display: flex; + align-items: center; + justify-content: space-between; +`; + +const List = styled.ul` + list-style: none; + display: flex; + margin: 0; + padding: 0; + + li { + a { + color: ${props => props.theme.white}; + text-decoration: none; + } + + &:not(:last-child) { + border-right: ${remcalc(1)} solid ${props => props.theme.text}; + padding-right: ${remcalc(24)}; + margin-right: ${remcalc(24)}; + } + } +`; + +export default () => ( +
+ +
  • + Visuals +
    • +
  • Copy Guide
    • +
  • + Downloads +
    • + + + + + + +); diff --git a/packages/ui-toolkit/src/styleguide/playground.js b/packages/ui-toolkit/src/styleguide/playground.js index c3b8828a..55ef04c3 100644 --- a/packages/ui-toolkit/src/styleguide/playground.js +++ b/packages/ui-toolkit/src/styleguide/playground.js @@ -104,31 +104,6 @@ class Playground extends Component { } } - // async componentDidMount() { - // const code = this.props.preview.props.code; - - // const matches = (/Tab:\s*?(.*)/gi).exec(code) - - // if (!matches) { - // return; - // } - - // matches.unshift(); - - // await ForEach( - // matches, - // match => - // new Promise(resolve => - // this.setState( - // { - // states: [...this.state.states, match.trim()] - // }, - // resolve - // ) - // ) - // ); - // } - changeTab = tab => { this.setState({ tab diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js index ff99254b..bf04055e 100644 --- a/packages/ui-toolkit/src/styleguide/renderer.js +++ b/packages/ui-toolkit/src/styleguide/renderer.js @@ -4,8 +4,7 @@ import styled, { ThemeProvider } from 'styled-components'; import remcalc from 'remcalc'; import theme from '../theme'; -import Logo from './logo'; -import GHLogo from './ghlogo'; +import Header from './header'; const Main = styled(Row)` padding-top: ${remcalc(24)}; @@ -27,34 +26,6 @@ const Sidebar = styled.div` box-sizing: border-box; `; -const Header = styled.header` - background: ${props => props.theme.greyDarker}; - color: ${props => props.theme.white}; - height: ${remcalc(48)}; - padding: 0 ${remcalc(24)}; - display: flex; - align-items: center; - justify-content: space-between; -`; - -const List = styled.ul` - list-style: none; - display: flex; - - li { - a { - color: ${props => props.theme.white}; - text-decoration: none; - } - - &:not(:last-child) { - border-right: ${remcalc(1)} solid ${props => props.theme.text}; - padding-right: ${remcalc(24)}; - margin-right: ${remcalc(24)}; - } - } -`; - const fullTheme = { ...theme, flexboxgrid: { @@ -63,12 +34,12 @@ const fullTheme = { xs: 0, // em sm: 48, // em md: 68, // em - lg: 85 // em + lg: 70 // em }, container: { - sm: 48, // rem - md: 68, // rem - lg: 85 // rem + sm: remcalc(1115), // rem + md: remcalc(1115), // rem + lg: remcalc(1115) // rem } } }; @@ -82,25 +53,7 @@ const StyleGuideRenderer = ({ }) => ( -
    - -
  • - Visuals -
    • -
  • Copy Guide
    • -
  • - Downloads -
    • -     - - - - -
    +
    {hasSidebar && ( diff --git a/packages/ui-toolkit/src/styleguide/sidebar.js b/packages/ui-toolkit/src/styleguide/sidebar.js index c8e58978..f805f775 100644 --- a/packages/ui-toolkit/src/styleguide/sidebar.js +++ b/packages/ui-toolkit/src/styleguide/sidebar.js @@ -8,7 +8,7 @@ const List = styled.ul` padding: 0; ul.rsg--list-1 { - padding-left: ${remcalc(6)}; + padding-left: ${remcalc(36)}; } a.rsg--link-6 { @@ -45,7 +45,7 @@ export default ({ children: { props } }) => { const items = props.items.filter(item => item.name); const link = decodeURIComponent(window.location.href).split('/#!/')[1] || '/'; const isActive = name => - link === name || (name === 'Color Palette' && link === '/'); + link === name || (name === 'Principles' && link === '/'); if (!items.length) { return null; diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index d26cb63b..551bf731 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -36,13 +36,19 @@ module.exports = { showCode: true, sections: [ { - name: 'Color Palette', + name: 'Principles', + description: + 'Tritons design language is underpinned by 4 key principles. These principle guide our hand when we are decision making and help us keep our thinking consistent.', + content: 'src/principles/readme.md' + }, + { + name: 'Colors', description: 'Triton’s color palette aim to accessible and clear, whilst making distinctions between elements that are alive and elements that are static. We’ve split our palette into two sections; Action colors and Greys. ', content: 'src/theme/colors.md' }, { - name: 'Typographic Scale', + name: 'Typography', content: 'src/text/Readme.md', description: 'Triton uses two typographic scales, a large and a small. The large is to be used on breakpoints above 600px, whilst the small is to be used on anything under that. '