feat(ui-toolkit): typography and getting started

packages/ui-toolkit/src/anchor/usage.md

@@ -1,15 +0,0 @@
-```
-<Anchor>Inspire the lazy</Anchor>
-```
-
-```
-<span style={{'background-color': '#343434'}}>
-  <Anchor secondary>Inspire the lazy secondary</Anchor>
-</span>
-```
-
-```
-<span>
-  <Anchor secondary disabled>Inspire the lazy disabled</Anchor>
-</span>
-```

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

@@ -38,7 +38,7 @@ List of supported props:
 
 To use this composer, you just do it as you would with any other HOC:
 
-```js
+```js static
 // component implementation
 const Button = (props) => (
   <button>my button</button>

packages/ui-toolkit/src/contribute.md

@@ -0,0 +1,5 @@
+First of all we always looking for ways to improve this toolkit so if you want to contribute that would be amazing.
+
+All of this is open source and can be found [here](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit).
+
+Any problems you find or something you want to add please add a pull request 😀

packages/ui-toolkit/src/download.md

@@ -0,0 +1,28 @@
+The code can be found in:
+
+* [Github](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit)
+* [NPM](https://www.npmjs.com/package/joyent-ui-toolkit)
+
+#### Install
+
+```bash static
+yarn add joyent-portal-ui-toolkit
+```
+
+#### Usage
+
+```js static
+import { H1 } from 'joyent-portal-ui-toolkit'
+
+export default () => (
+  <H1>Hello World</H1>
+);
+```
+
+#### Demo
+
+```bash static
+yarn styleguide
+```
+
+open http://0.0.0.0:6060

packages/ui-toolkit/src/faq.md

@@ -0,0 +1,8 @@
+### What was used to build this ?
+
+The components in this page were built using [React](https://facebook.github.io/react/) and [Styled Components](http://styled-components.com).
+
+### What is the license ?
+
+The licence used for this project is Mozilla Public License 2.0 (MPL-2.0).
+You can read more [here](https://tldrlegal.com/license/mozilla-public-license-2.0-(mpl-2))

packages/ui-toolkit/src/form/base/toggle.js

@@ -2,10 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { Input } from 'normalized-styled-components';
 import { Broadcast, Subscriber } from 'react-broadcast';
-import { insetShaddow, border, borderRadius } from '../../boxes';
+import { border, borderRadius } from '../../boxes';
 import BaseInput from './input';
 import remcalc from 'remcalc';
-import unitcalc from 'unitcalc';
 import is from 'styled-is';
 import rndId from 'rnd-id';
 

packages/ui-toolkit/src/overview.md

@@ -0,0 +1,5 @@
+Welcome !
+
+This page is dedicated to the UI Toolkit used by the [Joyent Team](https://www.joyent.com/) for their new products.
+
+All you see in this page is Open Source and can be used freely.

packages/ui-toolkit/src/purpose.md

@@ -0,0 +1 @@
+well me and yalli really like styleguides

packages/ui-toolkit/src/support.md

@@ -0,0 +1 @@
+We do offer basic support if you find any problems with any of the components, you can create an issue [here](https://github.com/yldio/joyent-portal/tree/master/packages/ui-toolkit) and we will get back to you as soon as you can

packages/ui-toolkit/src/text/Readme.md

@@ -0,0 +1,82 @@
+### Headings
+The HTML `<h1>–<h6>` elements represent six levels of section headings. <h1> is the highest section level and `<h6>` is the lowest.
+
+###### Usage Notes
+
+* Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
+* Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
+* Avoid skipping heading levels: always start from `<h1>`, next use `<h2>` and so on.
+You should consider avoiding using `<h1>` more than once on a page.
+
+#### Heading 1
+```jsx
+const H1 = require('/').H1;
+<H1>Inspire the lazy</H1>
+```
+#### Heading 2
+```jsx
+const H2 = require('/').H2;
+<H2>Inspire the lazy</H2>
+```
+#### Heading 3
+```jsx
+const H3 = require('/').H3;
+<H3>Inspire the lazy</H3>
+```
+#### Heading 4
+```jsx
+const H4 = require('/').H4;
+<H4>Inspire the lazy</H4>
+```
+### Paragraph
+
+The HTML `<p>` element represents a paragraph of text. Paragraphs are usually represented in visual media as blocks of text that are separated from adjacent blocks by vertical blank space and/or first-line indentation. Paragraphs are block-level elements.
+```jsx
+const P = require('/').P;
+<P>Joyent experts provide 360 degree support for modern application architectures, including development frameworks, container orchestration tools, and hybrid cloud infrastructures.</P>
+```
+
+### Small
+
+The HTML `<small>` element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.  In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.
+```jsx
+const Small = require('/').Small;
+<Small>
+Triton is 100% open source and designed to eliminate cloud provider lock-in. With support for popular container management tools like Kubernetes, augmented by our own open source project ContainerPilot, we are working with the community to deliver simple to operate platform services that are open and portable.
+</Small>
+```
+
+### Label
+
+The HTML `<label>` element represents a caption for an item in a user interface.
+```jsx
+const Label = require('/').Label;
+<Label>
+Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud native applications
+</Label>
+```
+
+### Links
+The HTML `<a>` element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
+
+This is called `Anchor` because of how React Router calls routing links `Link`
+
+
+#### Primary
+```
+const Anchor = require('/').Anchor;
+<Anchor>Inspire the lazy</Anchor>
+```
+
+#### Secondary
+```
+const Anchor = require('/').Anchor;
+<span style={{'background-color': '#343434'}}>
+  <Anchor secondary>Inspire the lazy secondary</Anchor>
+</span>
+```
+#### Disabled
+```
+ const Anchor = require('/').Anchor;
+ <Anchor secondary disabled>Inspire the lazy disabled</Anchor>
+```

packages/ui-toolkit/src/text/headings.js

@@ -4,25 +4,88 @@ import remcalc from 'remcalc';
 import typography from '../typography';
 
 export const H1 = NH1.extend`
+  margin: 0;
+  ${typography.color};
   ${typography.fontFamily};
-  ${typography.medium};
+  ${typography.normal};
 
   font-size: ${remcalc(36)};
+  line-height: ${remcalc(45)};
   font-style: normal;
   font-stretch: normal;
-  margin: 0;
+
+  + p,
+  + small,
+  + h1,
+  + h2,
+  + label.
+  + h3,
+  + h4,
+  + h5,
+  + div {
+    margin-top: ${remcalc(24)};
+  }
 `;
 
 export const H2 = styled.h2`
+  margin: 0;
+  ${typography.color};
   ${typography.fontFamily};
-  ${typography.medium};
-
+  ${typography.normal};
+  line-height: ${remcalc(30)};
   font-size: ${remcalc(24)};
+
+  + p,
+  + small,
+  + h1,
+  + h2,
+  + label.
+  + h3,
+  + h4,
+  + h5,
+  + div {
+    margin-top: ${remcalc(24)};
+  }
 `;
 
 export const H3 = styled.h3`
+  margin: 0;
+  ${typography.color};
   ${typography.fontFamily};
-  ${typography.medium};
+  ${typography.normal};
+  line-height: ${remcalc(26)};
+  font-size: ${remcalc(21)};
 
-  font-size: ${remcalc(15)};
+  + p,
+  + small,
+  + h1,
+  + h2,
+  + label.
+  + h3,
+  + h4,
+  + h5,
+  + div {
+    margin-top: ${remcalc(24)};
+  }
+`;
+
+export const H4 = styled.h3`
+  margin: 0;
+  ${typography.color};
+  ${typography.fontFamily};
+  ${typography.semibold};
+  line-height: ${remcalc(24)};
+  font-size: ${remcalc(15)};
+
+  + p,
+  + small,
+  + h1,
+  + h2,
+  + label.
+  + h3,
+  + h4,
+  + h5,
+  + div {
+    margin-top: ${remcalc(12)};
+  }
 `;

packages/ui-toolkit/src/text/index.js

@@ -0,0 +1,5 @@
+export { H1, H2, H3, H4 } from './headings';
+export { default as P } from './p';
+export { default as Small } from './small';
+export { default as Label } from '../label';
+export { default as Anchor } from '../anchor';

packages/ui-toolkit/src/text/p.js

@@ -5,7 +5,9 @@ import remcalc from 'remcalc';
 export default styled.p`
   ${typography.fontFamily};
   ${typography.normal};
+  ${typography.color};
 
   line-height: ${remcalc(24)};
   font-size: ${remcalc(15)};
+  padding-bottom: ${remcalc(36)};
 `;

packages/ui-toolkit/src/text/small.js

@@ -5,7 +5,9 @@ import typography from '../typography';
 export default Small.extend`
   ${typography.fontFamily};
   ${typography.normal};
+  ${typography.color};
 
   line-height: ${remcalc(18)};
-  font-size: ${remcalc(14)};
+  font-size: ${remcalc(13)};
+  padding-bottom: ${remcalc(12)};
 `;

packages/ui-toolkit/src/theme/colors.md

@@ -1,4 +1,4 @@
-```
+```js noeditor
 const Colors = require('./colors').default;
 
 <Colors />

packages/ui-toolkit/src/typography/index.js

@@ -1,4 +1,5 @@
 import { css } from 'styled-components';
+import theme from '../theme'
 
 export const fontFamily = css`
   font-family:
@@ -14,6 +15,8 @@ export const fontFamily = css`
     sans-serif;
 `;
 
+export const color = theme.text;
+
 export const semibold = css`
   font-weight: 600;
 `;

packages/ui-toolkit/styleguide.config.js

@@ -4,7 +4,7 @@ const dnHandler = require('react-docgen-displayname-handler');
 const snapguidist = require('snapguidist');
 const path = require('path');
 
-module.exports = snapguidist({
+module.exports = {
   webpackConfig: Object.assign(webpackConfig, {
     resolve: Object.assign(webpackConfig.resolve, {
       alias: Object.assign(webpackConfig.resolve.alias, {
@@ -28,31 +28,59 @@ module.exports = snapguidist({
   }),
   title: 'UI Toolkit',
   sections: [
-    // {
-    //   name: 'Getting Started',
-    //   content: 'src/getting-started.md'
-    // },
-    // {
-    //   name: 'Guidelines',
-    //   sections: [
-    //     {
-    //       name: 'Overview',
-    //       content: 'src/guidelines/overview.md'
-    //     },
-    //     {
-    //       name: 'Layout',
-    //       content: 'src/guidelines/layout.md'
-    //     }
-    //   ]
-    // },
     {
-      name: 'Theme',
-      content: 'src/theme/colors.md'
+      name: 'Get Started',
+      sections: [
+        {
+          name: 'Overview',
+          content: 'src/overview.md'
+        },
+        {
+          name: 'Purpose',
+          content: 'src/purpose.md'
+        },
+        {
+          name: 'FAQ',
+          content: 'src/faq.md'
+        },
+        {
+          name: 'Support',
+          content: 'src/support.md'
+        },
+        {
+          name: 'File Structure',
+          content: 'src/file-structure.md'
+        },
+        {
+          name: 'Download',
+          content: 'src/download.md'
+        },
+        {
+          name: 'Contribute',
+          content: 'src/contribute.md'
+        }
+      ]
+    },
+    {
+      name: 'Base',
+      sections: [
+        {
+          name: 'Typography',
+          content: 'src/text/Readme.md'
+        },
+        {
+          name: 'Baseline',
+          content: 'src/baseline/readme.md'
+        },
+        {
+          name: 'Colours',
+          content: 'src/theme/colors.md'
+        }
+      ]
     },
     {
       name: 'Components',
       components: () => [
-        'src/anchor/index.js',
         'src/button/index.js',
         'src/breadcrumb/index.js',
         'src/card/card.js',
@@ -73,16 +101,43 @@ module.exports = snapguidist({
         'src/message/index.js',
         'src/slider/index.js'
       ]
-    },
-    {
-      name: 'Baseline',
-      content: 'src/baseline/readme.md'
     }
-    // {
-    //   name: 'F.A.Q.',
-    //   content: 'src/faq.md'
-    // }
   ],
+  theme: {
+    color: {
+      base: '#494949',
+      link: '#3B46CC',
+      linkHover: '#5a62c5'
+    },
+    fontSize: {
+      base: 15,
+      text: 15,
+      small: 13,
+      h1: 36,
+      h2: 30,
+      h3: 26,
+      h4: 15,
+      h5: 14,
+      h6: 12
+    },
+    fontFamily: {
+      base: '"Libre Franklin", -apple-system, cursive'
+    }
+  },
+  styles: {
+    Logo: {
+      logo: {
+        'text-indent': -999,
+        'background-image': 'url("./etc/joyent-white.png")',
+        'background-size': 'cover',
+        width: 180,
+        'background-position': 0,
+        height: 39,
+        padding: 0,
+        margin: 0
+      }
+    }
+  },
   handlers: componentPath =>
     defaultHandlers.concat(dnHandler.createDisplayNameHandler(componentPath))
-});
+};