docs(buttons): Document buttons CSS in styleguidist format

.gitignore

@@ -23,4 +23,5 @@ docs/src/assets/fonts/*
 !docs/src/assets/fonts/.gitkeep
 docs/src/assets/downloads
 !docs/src/assets/downloads/.gitkeep
+
 styleguide

config/styleguide.config.js

@@ -5,7 +5,6 @@ const version = require('../package.json').version;
 module.exports = {
   title: `TDS v${version}`,
 
-  components: '../src/components/**/*.jsx',
   skipComponentsWithoutExample: true,
   getComponentPathLine(componentPath) {
     const name = path.basename(componentPath, '.jsx');
@@ -16,8 +15,26 @@ module.exports = {
   showUsage: true,
   showCode: true,
 
+  sections: [
+    {
+      name: 'Foundational Elements',
+      sections: [
+        {
+          name: 'Buttons',
+          content: '../docs-new/elements/buttons.md'
+        }
+      ]
+    },
+    {
+      name: 'Components',
+      components: '../src/components/**/*.jsx',
+    }
+  ],
+
+  styleguideDir: path.resolve('styleguide'),
   require: [
-    path.resolve("src/scss/global.scss")
+    path.resolve('src/scss/global.scss'),
+    path.resolve('docs-new/scss/styleguide.scss')
   ],
   webpackConfig: {
     module: {
@@ -38,4 +55,4 @@ module.exports = {
       ]
     }
   }
-}
+};

docs-new/elements/buttons.md

@@ -0,0 +1,189 @@
+## Overview
+
+---
+
+A button is a graphical control element which triggers an action. The button houses a label in its center which describes the action.
+
+### Behavior
+
+**Colour Change**
+
+The shape colour of normal and hover fade between one another on hover of the button.
+
+### Recommendations
+
+* Use buttons to move though a transaction.
+* Aim to use only one button per page.
+* Avoid excessively long button text
+* Make sure the button text describes an action
+
+## Primary Button
+
+---
+
+A button that's used for primary actions. The `button` and `button--primary` blocks define its default appearance. In general, button classes can be applied to both `<button>` and `<a>` tags.
+
+<button class="button button--primary">
+  Submit form
+</button>
+
+```html
+<button class="button button--primary">
+  Submit form
+</button>
+```
+
+### Outlined Primary button
+
+<button class="button button--primary button--outlined">
+  Submit form
+</button>
+
+```html
+<button class="button button--primary button--outlined">
+  Submit form
+</button>
+```
+
+### Inverted Primary button
+
+<div class="example example--inverted example--primary">
+    <button class="button button--primary button--inverted">
+        Submit form
+    </button>
+</div>
+
+```html
+<button class="button button--primary button--inverted">
+    Submit form
+</button>
+```
+
+### Inverted Outlined Primary button
+
+<div class="example example--inverted example--primary">
+    <button class="button button--primary button--inverted button--outlined">
+        Submit form
+    </button>
+</div>
+
+```html
+<button class="button button--primary button--inverted button--outlined">
+    Submit form
+</button>
+```
+
+
+## Secondary Button
+
+---
+
+<button class="button button--secondary">
+    Submit Form
+</button>
+
+```html
+<button class="button button--secondary">
+    Submit Form
+</button>
+```
+
+### Outlined secondary button
+
+<button class="button button--secondary button--outlined">
+    Submit form
+</button>
+
+```html
+<button class="button button--secondary button--outlined">
+    Submit form
+</button>
+```
+
+### Inverted Secondary button
+
+<div class="example example--inverted example--secondary">
+    <button class="button button--secondary button--inverted">
+        Submit form
+    </button>
+</div>
+
+```html
+<button class="button button--secondary button--inverted">
+    Submit form
+</button>
+```
+
+### Inverted Outlined Secondary button
+
+<div class="example example--inverted example--secondary">
+    <button class="button button--secondary button--inverted button--outlined">
+        Submit form
+    </button>
+</div>
+
+```html
+<button class="button button--secondary button--inverted button--outlined">
+    Submit form
+</button>
+```
+
+
+## Anchor buttons
+
+Button classes can also be applied to `<a>` tags.
+
+<a class="button button--primary" role="button" href="#">Anchor button</a>
+
+<a class="button button--primary button--outlined" role="button" href="#">Anchor Outlined button</a>
+<div class="example example--inverted example--primary">
+  <a class="button button--primary button--inverted button--outlined" role="button" href="#">Anchor Inverted button</a>
+</div>
+
+```html
+<a class="button button--primary" role="button" href="#">
+    Anchor button
+</a>
+
+<a class="button button--primary button--outlined" role="button" href="#">
+  Anchor Outlined button
+</a>
+
+<div class="example example--inverted example--primary">
+  <a class="button button--primary button--inverted button--outlined" role="button" href="#">Anchor Inverted button</a>
+</div>
+```
+
+_Note_: The mobile button width is fluid and stretches to cover all columns currently in view.
+
+
+## Links
+
+---
+
+The `button--link` class creates an element which behaves like a button, but looks like a link.
+
+<div>
+    <a class="button button--secondary button--link">Link button</a>
+</div>
+
+```html
+<a class="button button--secondary button--link" role="button" href="#">
+    A link button
+</a>
+```
+
+## Spacing
+
+---
+
+Buttons will occupy 100% width of their parent's at the small viewport and below. In other viewports, they'll display inline. Link buttons are separated from buttons by 40 pixels.
+
+<div>
+    <button class="button button--secondary">Button</button>
+    <a class="button button--secondary button--link">Link button</a>
+</div>
+<div>
+    <button class="button button--primary">Button</button>
+    <a class="button button--primary button--link">Link button</a>
+</div>

docs-new/scss/_examples.scss

@@ -0,0 +1,13 @@
+.example {
+  &--inverted {
+    padding: 2rem;
+  }
+
+  &--primary {
+    background-color: $color-primary;
+  }
+
+  &--secondary {
+    background-color: $color-secondary;
+  }
+}

docs-new/scss/styleguide.scss

@@ -0,0 +1,3 @@
+@import '../../src/scss/settings/variables';
+
+@import "examples";

package.json

@@ -22,11 +22,11 @@
     "test": "jest --config config/.jestrc.json",
     "test:watch": "yarn test -- --watch",
     "test:u": "yarn test -- -u",
-    "build": "yarn build:js && yarn build:scss",
+    "build": "yarn build:js && yarn build:scss && yarn build:styleguide",
     "build:js": "rollup -c config/rollup.config.js && cp ./src/components/Headline/wave_header_default.png ./dist/",
     "build:scss": "sh ./scripts/cp-scss.sh",
-    "build:styleguidist": "styleguidist build --config config/styleguide.config.js",
-    "start:styleguidist": "styleguidist server --config config/styleguide.config.js"
+    "build:styleguide": "styleguidist build --config config/styleguide.config.js",
+    "start:styleguide": "styleguidist server --config config/styleguide.config.js"
   },
   "repository": {
     "type": "git",