feat(ui-toolkit): add principles

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 = () => (
+  <List>
+    <Flex>
+      <Wrapper>
+        <Img src={eng} alt="Uncover & Apply" />
+      </Wrapper>
+      <Flex column justifyCenter>
+        <H3>Uncover & Apply</H3>
+        <P>
+          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.
+        </P>
+      </Flex>
+    </Flex>
+    <Flex>
+      <Wrapper>
+        <Img src={help} alt="Empower & Uplift" />
+      </Wrapper>
+      <Flex column justifyCenter>
+        <H3>Empower & Uplift</H3>
+        <P>
+          Regardless of previous knowledge of Triton, we should aim to empower
+          all users to do more and do it better.
+        </P>
+      </Flex>
+    </Flex>
+    <Flex>
+      <Wrapper>
+        <Img src={secure} alt="Secure & Stable" />
+      </Wrapper>
+      <Flex column justifyCenter>
+        <H3>Secure & Stable</H3>
+        <P>
+          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.
+        </P>
+      </Flex>
+    </Flex>
+    <Flex>
+      <Wrapper>
+        <Img src={beauty} alt="Utility & Beauty" />
+      </Wrapper>
+      <Flex column justifyCenter>
+        <H3>Utility & Beauty</H3>
+        <P>
+          Through collaboration between engineering and design, we can strike
+          that fine balance between utility and beauty.
+        </P>
+      </Flex>
+    </Flex>
+  </List>
+);
+
+export default Principles;

packages/ui-toolkit/src/principles/readme.md

@@ -0,0 +1,6 @@
+```jsx noeditor
+    const React = require('react');
+    const { default: Principles } = require('./index');
+
+    <Principles />
+```

packages/ui-toolkit/src/styleguide/ghlogo.js

@@ -4,7 +4,7 @@ export default () => (
   <svg
     id="Capa_1"
     xmlns="http://www.w3.org/2000/svg"
-    width="438.549"
+    width="22"
     height="22"
     viewBox="0 0 438.549 438.549"
   >

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 () => (
+  <Header>
+    <List>
+      <li>
+        <a href="/">Visuals</a>
+      </li>
+      <li>Copy Guide</li>
+      <li>
+        <a href="#!/Download">Downloads</a>
+      </li>
+    </List>
+    <Logo />
+    <a
+      href="https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <GHLogo />
+    </a>
+  </Header>
+);

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

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 = ({
 }) => (
   <ThemeProvider theme={fullTheme}>
     <Fragment>
-      <Header>
-        <List>
-          <li>
-            <a href="/">Visuals</a>
-          </li>
-          <li>Copy Guide</li>
-          <li>
-            <a href="#!/Download">Downloads</a>
-          </li>
-        </List>
-        <Logo />
-        <a
-          href="https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          <GHLogo />
-        </a>
-      </Header>
+      <Header />
       <Grid style={{ marginLeft: 0 }}>
         <Main>
           {hasSidebar && (

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;

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. '