Moved Styleguide to its own repo

2025-12-12 23:35:58 +00:00 · 2019-02-15 19:04:41 +01:00 · 2019-02-15 19:04:41 +01:00 · 3cdd06b252
commit 3cdd06b252
1117 changed files with 71225 additions and 0 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,3 @@
 > 1%
 last 2 versions
 not ie <= 8
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,14 @@
 module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
 }
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,23 @@
 .DS_Store
 node_modules
 # local env files
 .env.local
 .env.*.local
 /src/system/tokens/generated
 /src/system/icons/generated
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw*
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,5 @@
 module.exports = {
  plugins: {
    autoprefixer: {}
  }
 }
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,6 @@
 {
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "bracketSpacing": true
 }
--- a/README.md
+++ b/README.md
@ -0,0 +1,57 @@
 # CION Vue Design System
 CION is a Design System build primary for Vue applications. You can use it as a starting point for building your own Design System.
 The system utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.
 Living styleguide demo: https://styleguide.cion.visualjerk.de
 Landing page demo: https://cion.visualjerk.de
 Integrate it in your application: [Quick Start](https://github.com/visualjerk/vue-cion-design-system/wiki/Quick-Start)
 [![Screenshot](./preview/customize.png)](https://github.com/visualjerk/vue-cion-design-system/raw/master/preview/customize.png)
 ## Project setup
 ```
 yarn install
 ```
 ## Developing
 Compiles and hot-reloads living styleguide
 ```
 yarn dev
 ```
 ## Building
 ### Living styleguide
 Compiles living styleguide to `./docs`
 ```
 yarn build
 ```
 ### Library
 Compiles design system as a library to `./dist`
 ```
 yarn build:lib
 ```
 ## Helper
 ### Serve living styleguide locally
 ```
 yarn serve
 ```
 ### Lints and fixes files
 ```
 yarn lint
 ```
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,4 @@
 module.exports = {
  presets: ['@vue/app'],
  plugins: ['@babel/plugin-syntax-dynamic-import']
 }
--- a/dist/demo.html
+++ b/dist/demo.html
@ -0,0 +1,10 @@
 <meta charset="utf-8">
 <title>system demo</title>
 <script src="./system.umd.js"></script>
 <link rel="stylesheet" href="./system.css">
 <script>
 console.log(system)
 </script>
--- a/dist/fonts/GentiumBasic-Italic.ccdf623e.woff2
+++ b/dist/fonts/GentiumBasic-Italic.ccdf623e.woff2
--- a/dist/fonts/GentiumBasic.64d1e286.woff2
+++ b/dist/fonts/GentiumBasic.64d1e286.woff2
--- a/dist/fonts/Lato-Italic.0acac383.eot
+++ b/dist/fonts/Lato-Italic.0acac383.eot
--- a/dist/fonts/Lato-Italic.4eb103b4.woff2
+++ b/dist/fonts/Lato-Italic.4eb103b4.woff2
--- a/dist/fonts/Lato-Italic.4ffc48d0.ttf
+++ b/dist/fonts/Lato-Italic.4ffc48d0.ttf
--- a/dist/fonts/Lato-Italic.f28f2d64.woff
+++ b/dist/fonts/Lato-Italic.f28f2d64.woff
--- a/dist/fonts/Lato-Regular.27bd77b9.woff
+++ b/dist/fonts/Lato-Regular.27bd77b9.woff
--- a/dist/fonts/Lato-Regular.6d4e7822.ttf
+++ b/dist/fonts/Lato-Regular.6d4e7822.ttf
--- a/dist/fonts/Lato-Regular.8ab18d93.eot
+++ b/dist/fonts/Lato-Regular.8ab18d93.eot
--- a/dist/fonts/Lato-Regular.bd03a2cc.woff2
+++ b/dist/fonts/Lato-Regular.bd03a2cc.woff2
--- a/dist/fonts/Lato-Semibold.3b0cd725.ttf
+++ b/dist/fonts/Lato-Semibold.3b0cd725.ttf
--- a/dist/fonts/Lato-Semibold.8b4f872c.woff2
+++ b/dist/fonts/Lato-Semibold.8b4f872c.woff2
--- a/dist/fonts/Lato-Semibold.8bb939ef.eot
+++ b/dist/fonts/Lato-Semibold.8bb939ef.eot
--- a/dist/fonts/Lato-Semibold.c2b50f4a.woff
+++ b/dist/fonts/Lato-Semibold.c2b50f4a.woff
--- a/dist/fonts/Lato-SemiboldItalic.80f6811f.woff2
+++ b/dist/fonts/Lato-SemiboldItalic.80f6811f.woff2
--- a/dist/fonts/Lato-SemiboldItalic.82b587d9.eot
+++ b/dist/fonts/Lato-SemiboldItalic.82b587d9.eot
--- a/dist/fonts/Lato-SemiboldItalic.9fcec04c.woff
+++ b/dist/fonts/Lato-SemiboldItalic.9fcec04c.woff
--- a/dist/fonts/Lato-SemiboldItalic.d5fa302e.ttf
+++ b/dist/fonts/Lato-SemiboldItalic.d5fa302e.ttf
--- a/dist/report.html
+++ b/dist/report.html
--- a/dist/shared.scss
+++ b/dist/shared.scss
--- a/dist/system.common.js
+++ b/dist/system.common.js
--- a/dist/system.common.js.map
+++ b/dist/system.common.js.map
--- a/dist/system.css
+++ b/dist/system.css
--- a/dist/system.umd.js
+++ b/dist/system.umd.js
--- a/dist/system.umd.js.map
+++ b/dist/system.umd.js.map
--- a/dist/system.umd.min.js
+++ b/dist/system.umd.min.js
--- a/dist/system.umd.min.js.map
+++ b/dist/system.umd.min.js.map
--- a/docs/404.html
+++ b/docs/404.html
@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // https://github.com/rafrex/spa-github-pages
      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
      // ----------------------------------------------------------------------
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)
      // If you're creating a Project Pages site and NOT using a custom domain,
      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
      // Otherwise, leave segmentCount as 0.
      var segmentCount = 0;
      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
 </html>
--- a/docs/CNAME
+++ b/docs/CNAME
@ -0,0 +1 @@
 styleguide.cion.visualjerk.de
--- a/docs/babel-standalone.js
+++ b/docs/babel-standalone.js
--- a/docs/css/app.e38d5069.css
+++ b/docs/css/app.e38d5069.css
--- a/docs/css/chunk-vendors.7a428b56.css
+++ b/docs/css/chunk-vendors.7a428b56.css
--- a/docs/favicon.ico
+++ b/docs/favicon.ico
--- a/docs/fonts/Lato-Italic.0acac383.eot
+++ b/docs/fonts/Lato-Italic.0acac383.eot
--- a/docs/fonts/Lato-Italic.4eb103b4.woff2
+++ b/docs/fonts/Lato-Italic.4eb103b4.woff2
--- a/docs/fonts/Lato-Italic.4ffc48d0.ttf
+++ b/docs/fonts/Lato-Italic.4ffc48d0.ttf
--- a/docs/fonts/Lato-Italic.f28f2d64.woff
+++ b/docs/fonts/Lato-Italic.f28f2d64.woff
--- a/docs/fonts/Lato-Regular.27bd77b9.woff
+++ b/docs/fonts/Lato-Regular.27bd77b9.woff
--- a/docs/fonts/Lato-Regular.6d4e7822.ttf
+++ b/docs/fonts/Lato-Regular.6d4e7822.ttf
--- a/docs/fonts/Lato-Regular.8ab18d93.eot
+++ b/docs/fonts/Lato-Regular.8ab18d93.eot
--- a/docs/fonts/Lato-Regular.bd03a2cc.woff2
+++ b/docs/fonts/Lato-Regular.bd03a2cc.woff2
--- a/docs/fonts/Lato-Semibold.3b0cd725.ttf
+++ b/docs/fonts/Lato-Semibold.3b0cd725.ttf
--- a/docs/fonts/Lato-Semibold.8b4f872c.woff2
+++ b/docs/fonts/Lato-Semibold.8b4f872c.woff2
--- a/docs/fonts/Lato-Semibold.8bb939ef.eot
+++ b/docs/fonts/Lato-Semibold.8bb939ef.eot
--- a/docs/fonts/Lato-Semibold.c2b50f4a.woff
+++ b/docs/fonts/Lato-Semibold.c2b50f4a.woff
--- a/docs/fonts/Lato-SemiboldItalic.80f6811f.woff2
+++ b/docs/fonts/Lato-SemiboldItalic.80f6811f.woff2
--- a/docs/fonts/Lato-SemiboldItalic.82b587d9.eot
+++ b/docs/fonts/Lato-SemiboldItalic.82b587d9.eot
--- a/docs/fonts/Lato-SemiboldItalic.9fcec04c.woff
+++ b/docs/fonts/Lato-SemiboldItalic.9fcec04c.woff
--- a/docs/fonts/Lato-SemiboldItalic.d5fa302e.ttf
+++ b/docs/fonts/Lato-SemiboldItalic.d5fa302e.ttf
--- a/docs/index.html
+++ b/docs/index.html
@ -0,0 +1 @@
 <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script src=/babel-standalone.js></script><title>CION - Vue Design System</title><link href=/css/app.e38d5069.css rel=preload as=style><link href=/css/chunk-vendors.7a428b56.css rel=preload as=style><link href=/js/app.f428b946.js rel=preload as=script><link href=/js/chunk-vendors.0a7f54fd.js rel=preload as=script><link href=/css/chunk-vendors.7a428b56.css rel=stylesheet><link href=/css/app.e38d5069.css rel=stylesheet></head><body><noscript><strong>We're sorry but this CION doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.0a7f54fd.js></script><script src=/js/app.f428b946.js></script></body></html>
--- a/docs/js/app.f428b946.js
+++ b/docs/js/app.f428b946.js
--- a/docs/js/app.f428b946.js.map
+++ b/docs/js/app.f428b946.js.map
--- a/docs/js/chunk-vendors.0a7f54fd.js
+++ b/docs/js/chunk-vendors.0a7f54fd.js
--- a/docs/js/chunk-vendors.0a7f54fd.js.map
+++ b/docs/js/chunk-vendors.0a7f54fd.js.map
--- a/jest.config.js
+++ b/jest.config.js
@ -0,0 +1,24 @@
 module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@@/(.*)$': '<rootDir>/src/system/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)|**/spec.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
 }
--- a/package.json
+++ b/package.json
@ -0,0 +1,76 @@
 {
  "name": "vue-cion-design-system",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "serve": "http-server ./docs -o -s",
    "build": "yarn theo && vue-cli-service build",
    "lint": "vue-cli-service lint --no-fix",
    "dev": "npm-run-all --parallel theo:onchange theo servedev",
    "servedev": "vue-cli-service serve --open",
    "build:lib": "yarn theo && cross-env BUILD=library vue-cli-service build --target lib --name system ./src/library.js",
    "theo": "theo ./src/system/tokens/tokens.yml --transform web --format map.scss,scss,raw.json,json --dest ./src/system/tokens/generated",
    "theo:onchange": "onchange \"./src/system/tokens/*.yml\" -- npm run theo",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "portal-vue": "~1.5.1",
    "vue": "~2.6.6"
  },
  "devDependencies": {
    "@babel/core": "~7.2.2",
    "@babel/plugin-syntax-dynamic-import": "~7.2.0",
    "@babel/standalone": "~7.3.2",
    "@vue/cli-plugin-babel": "~3.4.0",
    "@vue/cli-plugin-eslint": "~3.4.0",
    "@vue/cli-plugin-unit-jest": "~3.4.0",
    "@vue/cli-service": "~3.4.0",
    "@vue/test-utils": "~1.0.0-beta.29",
    "async-validator": "~1.10.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "~24.1.0",
    "babel-plugin-transform-require-context": "~0.1.1",
    "cheerio": "~1.0.0-rc.2",
    "clipboard-copy": "~2.0.1",
    "clone-deep": "~4.0.1",
    "codemirror": "~5.43.0",
    "cross-env": "~5.2.0",
    "dot-prop": "~4.2.0",
    "lodash": "~4.17.11",
    "markdown-it": "~8.4.2",
    "markdown-it-abbr": "~1.0.4",
    "markdown-it-deflist": "~2.0.3",
    "markdown-it-emoji": "~1.4.0",
    "markdown-it-footnote": "~3.0.1",
    "markdown-it-ins": "~2.0.0",
    "markdown-it-katex": "~2.0.3",
    "markdown-it-mark": "~2.0.0",
    "markdown-it-sub": "~1.0.0",
    "markdown-it-sup": "~1.0.0",
    "markdown-it-task-lists": "~2.1.1",
    "node-sass": "~4.11.0",
    "npm-run-all": "~4.1.5",
    "onchange": "~5.2.0",
    "raw-loader": "~1.0.0",
    "sass-loader": "~7.1.0",
    "theo": "~8.1.1",
    "vue-click-outside": "~1.0.7",
    "vue-docgen-api": "~2.6.12",
    "vue-router": "~3.0.2",
    "vue-svg-loader": "~0.12.0",
    "vue-template-compiler": "~2.6.6",
    "vuep": "git+https://github.com/visualjerk/vuep.git#fix-iframe-firefox",
    "webpack-bundle-analyzer": "~3.0.4",
    "webpack-merge-and-include-globally": "~2.1.14"
  },
  "author": "visualjerk",
  "main": "./dist/system.umd.min.js",
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
  "license": "MIT"
 }
--- a/preview/color_tokens.gif
+++ b/preview/color_tokens.gif
--- a/preview/customize.png
+++ b/preview/customize.png
--- a/public/404.html
+++ b/public/404.html
@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <title>Single Page Apps for GitHub Pages</title>
    <script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // https://github.com/rafrex/spa-github-pages
      // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
      // ----------------------------------------------------------------------
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // http://www.foo.tld/?p=/one/two&q=a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)
      // If you're creating a Project Pages site and NOT using a custom domain,
      // then set segmentCount to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?p=/one/two&q=a=b~and~c=d#qwe
      // Otherwise, leave segmentCount as 0.
      var segmentCount = 0;
      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + segmentCount).join('/') + '/?p=/' +
        l.pathname.slice(1).split('/').slice(segmentCount).join('/').replace(/&/g, '~and~') +
        (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );
    </script>
  </head>
  <body>
  </body>
 </html>
--- a/public/CNAME
+++ b/public/CNAME
@ -0,0 +1 @@
 styleguide.cion.visualjerk.de
--- a/public/babel-standalone.js
+++ b/public/babel-standalone.js
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="/babel-standalone.js"></script>
    <title>Human Connection - Styleguide</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this CION doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/library.js
+++ b/src/library.js
@ -0,0 +1,8 @@
 import system from './system'
 import { tokens } from './system/tokens'
 import * as utils from './system/utils'
 import * as mixins from './system/mixins'
 export { tokens, utils, mixins }
 export default system
--- a/src/loader/docs-loader.js
+++ b/src/loader/docs-loader.js
@ -0,0 +1,9 @@
 module.exports = function(source, map) {
  this.callback(
    null,
    `export default function (Component) {
      Component.options.__docs = ${JSON.stringify(source)}
    }`,
    map
  )
 }
--- a/src/loader/docs-trim-loader.js
+++ b/src/loader/docs-trim-loader.js
@ -0,0 +1,7 @@
 module.exports = function(source, map) {
  this.callback(
    null,
    `export default function () {}`,
    map
  )
 }
--- a/src/loader/jsdoc-loader.js
+++ b/src/loader/jsdoc-loader.js
@ -0,0 +1,13 @@
 // Get jsdocs meta from component with
 // @url: https://github.com/vue-styleguidist/vue-docgen-api
 const parseSource = require('vue-docgen-api').parseSource
 module.exports = function(source) {
  const callback = this.async()
  const content = JSON.stringify(source)
    .replace(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029')
    .replace(/\\n/g, '\n')
  const component = parseSource(content, this.resourcePath)
  callback(null, `module.exports = ${JSON.stringify(component)}`)
 }
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1 @@
 require('./styleguide')
--- a/src/styleguide/App.vue
+++ b/src/styleguide/App.vue
@ -0,0 +1,32 @@
 <template>
  <div id="app">
    <ds-page ref="page">
      <template slot="brand">
        <router-link to="/">
          <ds-logo/>
        </router-link>
      </template>
      <navigation
        @navigate="$refs.page.closeDrawer()"
        slot="sidebar"/>
      <navigation
        @navigate="$refs.page.closeDrawer()"
        slot="drawer"/>
      <router-view/>
    </ds-page>
  </div>
 </template>
 <script>
 import Navigation from './components/Navigation'
 export default {
  name: 'App',
  components: {
    Navigation
  }
 }
 </script>
 <style lang="scss">
 </style>
--- a/src/styleguide/components/CodeExample.vue
+++ b/src/styleguide/components/CodeExample.vue
@ -0,0 +1,168 @@
 <template>
  <div :class="`${iframe ? 'vuep-iframe' : ''}`">
    <vuep
      :value="template"
      :options="{ theme: 'vueds' }"
      :iframe="iframe" />
  </div>
 </template>
 <script>
 import Vuep from 'vuep'
 import 'vuep/dist/vuep.css'
 export default {
  name: 'CodeExample',
  data() {
    return {
      iframe: false
    }
  },
  props: {
    code: {
      type: String,
      required: true
    }
  },
  components: {
    Vuep
  },
  computed: {
    template() {
      return this.getCode()
    }
  },
  methods: {
    getCode() {
      const codeLines = this.code.split('\n')
      const codeTypeMatch = codeLines[0].trim().match(/^[A-Za-z]+$/g)
      if (codeTypeMatch) {
        codeLines.shift()
        const codeType = codeTypeMatch[0]
        if (codeType === 'iframe') {
          this.iframe = true
        }
      }
      while (codeLines[0].trim() === '') {
        codeLines.shift()
      }
      while (codeLines[codeLines.length - 1].trim() === '') {
        codeLines.pop()
      }
      if (codeLines[0].trim() === '<template>') {
        return codeLines.join('\n')
      }
      const code = codeLines.map(line => '    ' + line).join('\n')
      /* eslint-disable */
      return `<template>
  <div>
 ${code}
  </div>
 </template>
 <script><\/script>`
    }
  }
 }
 </script>
 <style lang="scss">
 .vuep {
  display: flex;
  height: auto;
  font-family: inherit;
  flex-direction: column-reverse;
 }
 .vuep-editor {
  width: auto;
  height: auto;
  margin-right: 0;
 }
 .vuep-preview {
  width: auto;
  height: auto;
  border-radius: 0;
  border: $border-size-base solid $border-color-softer;
  padding: $space-base;
  margin-bottom: $space-small;
  overflow: visible;
  .vuep-iframe & {
    padding: 0;
    min-height: 600px;
  }
 }
 // Codemirror Theme
 $codemirror-background: $background-color-soft;
 $codemirror-primary: $color-primary;
 .cm-s-vueds {
 	font-size: 1em;
 	line-height: 1.5em;
 	font-family: $font-family-code;
 	letter-spacing: 0.3px;
 	word-spacing: 1px;
 	background: $codemirror-background;
 	color: $text-color-soft;
 	border: $border-size-base solid $border-color-softer;
 	.CodeMirror-lines {
    padding: 8px 0;
  }
  .CodeMirror-gutters {
    background-color: $codemirror-background;
    border: none;
    border-right: $border-size-base solid $border-color-softer;
    padding-right: $space-x-small;
    z-index: 3;
  }
  div.CodeMirror-cursor {
    border-left: 2px solid $text-color-base;
  }
  .CodeMirror-activeline-background {
    background: rgba($codemirror-primary, 0.1);
  }
  .CodeMirror-selected {
    background: rgba($codemirror-primary, 0.1);
  }
  .cm-comment {
    font-style: italic;
    color: $text-color-softer;
  }
  .cm-tag {
    color: $codemirror-primary;
  }
  .cm-attribute {
    color: $text-color-warning;
  }
  .cm-keyword {
    color: $text-color-danger;
  }
  .cm-string {
    color: $text-color-success;
  }
  .cm-property {
    color: $text-color-warning;
  }
  .cm-variable-2 {
    color: $text-color-danger;
  }
  .cm-atom {
    color: $text-color-success;
  }
  .cm-number {
    color: $text-color-danger;
  }
  .cm-operator {
    color: $codemirror-primary;
  }
  .CodeMirror-linenumber {
    color: $text-color-softer;
  }
 }
 </style>
--- a/src/styleguide/components/ComponentDoc.vue
+++ b/src/styleguide/components/ComponentDoc.vue
@ -0,0 +1,142 @@
 <template>
  <div>
    <ds-page-title :heading="component.name | componentName" />
    <ds-container>
      <ds-space
        v-if="component.tags"
        margin-top="base">
        <template
          v-for="(tagGroup, name) in component.tags">
          <ds-tag
            v-for="(tag, index) in tagGroup"
            :color="tagColor(tag)"
            :key="`${name}${index}`">
            {{ tagDescription(tag) }}
          </ds-tag>&nbsp;
        </template>
      </ds-space>
      <ds-space margin-bottom="xx-large">
        <ds-text size="x-large">{{ component.description }}</ds-text>
      </ds-space>
      <ds-space
        v-for="(part, index) in docParts"
        margin-bottom="xx-large"
        :key="index">
        <ds-space>
          <markdown :content="part.description"/>
        </ds-space>
        <code-example
          :code="part.example"
          v-if="part.example"/>
      </ds-space>
      <ds-space margin-bottom="xx-large">
        <component-options-doc :component="component" />
      </ds-space>
      <ds-space
        margin-bottom="xx-large"
        v-if="component.children"
        v-for="child in component.children"
        :key="child.name">
        <component-options-doc :component="child" />
      </ds-space>
  </ds-container></div>
 </template>
 <script>
 import CodeExample from './CodeExample'
 import ComponentOptionsDoc from './ComponentOptionsDoc'
 export default {
  name: 'ComponentDoc',
  props: {
    component: {
      type: Object,
      required: true
    }
  },
  components: {
    CodeExample,
    ComponentOptionsDoc
  },
  data() {
    return {
      propFields: {
        name: {
          label: 'Prop Name',
          width: '20%'
        },
        type: {
          label: 'Type',
          width: '20%'
        },
        default: {
          label: 'Default',
          width: '20%'
        },
        description: 'Description'
      }
    }
  },
  computed: {
    componentProps() {
      return Object.keys(this.component.props).map(name => {
        return {
          name,
          ...this.component.props[name]
        }
      })
    },
    componentSlots() {
      return Object.keys(this.component.slots).map(name => {
        return {
          name,
          ...this.component.slots[name]
        }
      })
    },
    docParts() {
      const component = this.component.component
      if (!component.__docs) {
        return []
      }
      const parts = component.__docs.split('```')
      let i = 0
      const parsed = parts.reduce((result, part, index) => {
        if (index % 2 === 0) {
          result[i] = {
            description: part
          }
        } else {
          result[i].example = part
          i++
        }
        return result
      }, [])
      return parsed
    }
  },
  methods: {
    tagColor(tag) {
      if (tag.title === 'deprecated') {
        return 'warning'
      }
      if (tag.title === 'see') {
        return 'primary'
      }
      return 'inverse'
    },
    tagDescription(tag) {
      if (tag.description === true) {
        return tag.title
      }
      if (tag.title === 'see') {
        return `Child of ${tag.description}`
      }
      return `${tag.title} ${tag.description}`
    }
  }
 }
 </script>
 <style lang="scss">
 </style>
--- a/src/styleguide/components/ComponentItem.vue
+++ b/src/styleguide/components/ComponentItem.vue
@ -0,0 +1,32 @@
 <template>
  <ds-flex-item>
    <ds-card 
      :header="name">
      {{ component.description }}
      <template slot="footer">
        <ds-button
          :path="{ name: component.name }"
          primary>
          {{ name }} Details
        </ds-button>
      </template>
    </ds-card>
  </ds-flex-item>
 </template>
 <script>
 export default {
  name: 'ComponentItem',
  props: {
    component: {
      type: Object,
      required: true
    }
  },
  computed: {
    name() {
      return this.$options.filters.componentName(this.component.name)
    }
  }
 }
 </script>
--- a/src/styleguide/components/ComponentOptionsDoc.vue
+++ b/src/styleguide/components/ComponentOptionsDoc.vue
@ -0,0 +1,215 @@
 <template>
  <div>
    <ds-space v-if="componentProps">
      <ds-heading tag="h2">{{ component.name | componentName }} Props</ds-heading>
      <ds-card>
        <ds-table
          :data="componentProps"
          :fields="propFields">
          <template
            slot="name"
            slot-scope="{row}">
            <ds-code inline>
              {{ row.name | kebabCase }}
            </ds-code>
            <div v-if="row.required">
              <ds-tag v-if="row.required" color="warning">required</ds-tag>
            </div>
            <ds-space :margin-bottom="null" margin-top="small">
              <div v-if="row.options">
                <ds-chip size="small" v-for="option in row.options" :key="option">
                  {{ option }}
                </ds-chip>
              </div>
              <ds-text color="soft">{{ row.description }}</ds-text>
            </ds-space>
          </template>
          <template
            slot="type"
            slot-scope="{row}">
            <ds-chip
              v-for="type in row.types"
              :key="type"
              inline>
              {{ type }}
            </ds-chip>
          </template>
          <template
            slot="default"
            slot-scope="{row}">
            <ds-chip
              v-if="row.defaultValue"
              color="primary">
              <template v-if="row.default">
                {{ row.default }}
              </template>
              <template v-else-if="row.defaultValue.func">
                Function()
              </template>
              <template v-else>
                {{ row.defaultValue.value }}
              </template>
            </ds-chip>
          </template>
        </ds-table>
      </ds-card>
    </ds-space>
    <ds-space v-if="componentSlots && componentSlots.length">
      <ds-heading tag="h2">{{ component.name | componentName }} Slots</ds-heading>
      <ds-card>
        <ds-table
          :data="componentSlots"
          :fields="slotFields">
          <ds-code
            slot="name"
            slot-scope="{row}"
            inline>
              {{ row.name }}
          </ds-code>
          <ds-text
            color="soft"
            slot="description"
            slot-scope="{row}">
            {{ row.description }}
          </ds-text>
        </ds-table>
      </ds-card>
    </ds-space>
    <ds-space v-if="componentEvents && componentEvents.length">
      <ds-heading tag="h2">{{ component.name | componentName }} Events</ds-heading>
      <ds-card>
        <ds-table
          :data="componentEvents"
          :fields="eventFields">
          <ds-code
            slot="name"
            slot-scope="{row}"
            inline>
              @{{ row.name }}
          </ds-code>
          <ds-text
            color="soft"
            slot="description"
            slot-scope="{row}">
            {{ row.description }}
          </ds-text>
        </ds-table>
      </ds-card>
    </ds-space>
  </div>
 </template>
 <script>
 export default {
  name: 'ComponentOptionsDoc',
  props: {
    component: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      propFields: {
        name: {
          label: 'Name'
        },
        type: {
          label: 'Type',
          width: '20%'
        },
        default: {
          label: 'Default',
          width: '20%'
        }
      },
      slotFields: {
        name: {
          label: 'Name',
          width: '20%'
        },
        description: 'Description'
      },
      eventFields: {
        name: {
          label: 'Name',
          width: '20%'
        },
        description: 'Description'
      }
    }
  },
  computed: {
    componentProps() {
      if (!this.component.props) {
        return null
      }
      return Object.keys(this.component.props)
        .map(name => {
          return this.getPropAttributes(name, this.component.props[name])
        })
        .sort((a, b) => {
          return a.name.localeCompare(b.name)
        })
    },
    componentSlots() {
      if (!this.component.slots) {
        return null
      }
      return Object.keys(this.component.slots)
        .map(name => {
          return {
            name: (name.match(/[^/"\\]+/g) || []).join(''),
            ...this.component.slots[name]
          }
        })
        .sort((a, b) => {
          return a.name.localeCompare(b.name)
        })
    },
    componentEvents() {
      if (!this.component.events) {
        return null
      }
      return Object.keys(this.component.events)
        .map(name => {
          return {
            name,
            ...this.component.events[name]
          }
        })
        .sort((a, b) => {
          return a.name.localeCompare(b.name)
        })
    }
  },
  methods: {
    getPropAttributes(name, oldAttributes) {
      const attributes = {
        name,
        ...oldAttributes,
        ...this.getAttributesFromComment(oldAttributes.comment)
      }
      if (attributes.type && attributes.type.name) {
        attributes.types = attributes.type.name.split('|')
      }
      return attributes
    },
    getAttributesFromComment(comment) {
      const attributes = {}
      const optionsMatch = comment.match(/@options[ ]+(\S[ \S]*)\n/)
      if (optionsMatch) {
        attributes.options = optionsMatch[1].split('|')
      }
      const defaultMatch = comment.match(/@default[ ]+(\S[ \S]*)\n/)
      if (defaultMatch) {
        attributes.default = defaultMatch[1]
      }
      return attributes
    }
  }
 }
 </script>
 <style lang="scss">
 </style>
--- a/src/styleguide/components/ComponentPage.vue
+++ b/src/styleguide/components/ComponentPage.vue
@ -0,0 +1,22 @@
 <template>
  <div>
    <component-doc :component="component" />
  </div>
 </template>
 <script>
 import ComponentDoc from './ComponentDoc'
 export default {
  name: 'ComponentPage',
  props: {
    component: {
      type: Object,
      required: true
    }
  },
  components: {
    ComponentDoc
  }
 }
 </script>
--- a/src/styleguide/components/Navigation.vue
+++ b/src/styleguide/components/Navigation.vue
@ -0,0 +1,81 @@
 <template>
  <div class="navigation">
    <div class="navigation-search">
      <ds-input
        v-model="searchString"
        placeholder="Filter menu ..."
        icon="search" />
    </div>
    <ds-menu
      @navigate="$emit('navigate')"
      :routes="routes"
      :url-parser="urlParser"
      :name-parser="nameParser"
      :is-exact="isExact"/>
  </div>
 </template>
 <script>
 export default {
  name: 'Navigation',
  data() {
    return {
      searchString: ''
    }
  },
  computed: {
    routes() {
      const routes = this.$router.options.routes.filter(route => {
        return route.path !== '*'
      })
      return routes
        .map(route => {
          const [parent, ...children] = [...route.children]
          parent.children = children.filter(this.fitsSearch)
          return parent
        })
        .filter(route => {
          return route.children.length || this.fitsSearch(route)
        })
    },
    searchParts() {
      return this.searchString.split(' ')
    }
  },
  methods: {
    fitsSearch(route) {
      if (!this.searchString) {
        return true
      }
      return this.searchParts.every(search => {
        if (!search) {
          return true
        }
        return route.name.toLowerCase().includes(search.toLowerCase())
      })
    },
    nameParser(route) {
      return this.$options.filters.componentName(route.name)
    },
    urlParser(route) {
      return {
        name: route.name
      }
    },
    isExact(url) {
      return url.name === 'Introduction'
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .navigation {
  padding: $space-base $space-x-small;
 }
 .navigation-search {
  padding: 0 $space-small;
  margin-bottom: $space-base;
 }
 </style>
--- a/src/styleguide/components/PageWrapper.vue
+++ b/src/styleguide/components/PageWrapper.vue
@ -0,0 +1,21 @@
 <template>
  <div>
    <router-view/>
  </div>
 </template>
 <script>
 export default {
  name: 'PageWrapper',
  props: {
    section: {
      type: Object,
      required: true
    },
    components: {
      type: Array,
      default: null
    }
  }
 }
 </script>
--- a/src/styleguide/components/SectionPage.vue
+++ b/src/styleguide/components/SectionPage.vue
@ -0,0 +1,71 @@
 <template>
  <div>
    <ds-page-title :heading="section.name" />
    <ds-container>
      <ds-space margin-top="x-large">
        <markdown
          :content="description"
          :components="requiredComponents"
          v-if="description"/>
      </ds-space>
      <ds-flex
        gutter="base"
        :width="{ base: '100%', sm: '50%' }">
        <component-item
          v-if="components"
          v-for="component in components"
          :key="component.name"
          :component="component" />
      </ds-flex>
    </ds-container>
  </div>
 </template>
 <script>
 import ComponentItem from './ComponentItem'
 export default {
  name: 'SectionPage',
  props: {
    section: {
      type: Object,
      required: true
    },
    components: {
      type: Array,
      default: null
    }
  },
  components: {
    ComponentItem
  },
  data() {
    return {
      description: null,
      requiredComponents: {}
    }
  },
  created() {
    const name = this.section.name.replace(' ', '')
    if (this.section.requiredComponents) {
      this.section.requiredComponents.forEach(component => {
        try {
          const cFile = require(`./${component}`).default
          this.requiredComponents[cFile.name] = cFile
        } catch (err) {
          // eslint-disable-next-line
          console.error('could not get required component', err)
        }
      })
    }
    try {
      const mdFile = require(`raw-loader!../docs/${name}.md`)
      this.description = mdFile
    } catch (err) {
      this.description = null
    }
  }
 }
 </script>
--- a/src/styleguide/components/global/DesignTokens.vue
+++ b/src/styleguide/components/global/DesignTokens.vue
@ -0,0 +1,70 @@
 <template>
  <ds-space margin-top="x-large">
    <ds-flex
      gutter="large"
      :direction="{ lg: 'row-reverse' }">
      <ds-flex-item :width="{ base: '100%', lg: '250px' }">
        <div class="sticky">
          <ds-heading tag="h4">Categories</ds-heading>
          <ds-menu :routes="tokenMenu" />
        </div>
      </ds-flex-item>
      <ds-flex-item>
        <ds-space
          v-for="(group, key) in tokenMap"
          :key="key">
          <ds-heading
            tag="h3"
            :id="key">{{ key | startCase }}</ds-heading>
          <ds-table
            :data="group"
            :fields="{token: { width: '300px' }, example: 'Example'}">
            <template
              slot="token"
              slot-scope="data">
              <ds-copy-field>
                {{ data.row.scss }}
              </ds-copy-field>
              <ds-copy-field>
                tokens.{{ data.row.name | camelCase }}
              </ds-copy-field>
            </template>
            <template
              slot="example"
              slot-scope="data">
              <token-item :token="data.row" />
            </template>
          </ds-table>
        </ds-space>
      </ds-flex-item>
    </ds-flex>
  </ds-space>
 </template>
 <script>
 import { tokenMap } from '@@/tokens'
 export default {
  name: 'DesignTokens',
  computed: {
    tokenMap() {
      return tokenMap
    },
    tokenMenu() {
      return Object.keys(this.tokenMap).map(key => {
        return {
          name: this.$options.filters.startCase(key),
          path: `#${key}`
        }
      })
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .sticky {
  position: sticky;
  top: 50px;
 }
 </style>
--- a/src/styleguide/components/global/IconList.vue
+++ b/src/styleguide/components/global/IconList.vue
@ -0,0 +1,70 @@
 <template>
  <ds-space margin-top="x-large">
    <ds-space>
      <ds-input
        v-model="searchString"
        icon="search"
        placeholder="Search icon ..."/>
    </ds-space>
    <ds-flex
      gutter="large"
      :width="{ base: '100%', xs: '50%', lg: '33.3332%'}">
      <ds-flex-item
        v-for="icon in filteredIcons"
        :key="icon">
        <ds-card>
          <div class="icon-preview">
            <ds-text size="x-large">
              <ds-icon :name="icon"/>
            </ds-text>
          </div>
          <ds-copy-field>{{ icon }}</ds-copy-field>
          <template slot="footer">
            <ds-button
              @click="copy(icon)"
              primary>Copy Code</ds-button>
          </template>
        </ds-card>
      </ds-flex-item>
    </ds-flex>
  </ds-space>
 </template>
 <script>
 import { iconNames } from '@@/icons'
 export default {
  name: 'IconList',
  data() {
    return {
      searchString: ''
    }
  },
  computed: {
    icons() {
      return iconNames
    },
    filteredIcons() {
      if (!this.searchString) {
        return this.icons
      }
      return this.icons.filter(icon => {
        return icon.toLowerCase().indexOf(this.searchString.toLowerCase()) > -1
      })
    }
  },
  methods: {
    copy(icon) {
      const code = `<ds-icon name="${icon}" />`
      this.$copyToClipboard(code)
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .icon-preview {
  height: 50px;
  text-align: center;
 }
 </style>
--- a/src/styleguide/components/global/Markdown.vue
+++ b/src/styleguide/components/global/Markdown.vue
@ -0,0 +1,143 @@
 <template>
  <component
    v-if="parsedComponent"
    :is="parsedComponent"/>
 </template>
 <script>
 import cheerio from 'cheerio'
 import Vue from 'vue/dist/vue.common'
 import markdownIt from 'markdown-it'
 import emoji from 'markdown-it-emoji'
 import subscript from 'markdown-it-sub'
 import superscript from 'markdown-it-sup'
 import footnote from 'markdown-it-footnote'
 import deflist from 'markdown-it-deflist'
 import abbreviation from 'markdown-it-abbr'
 import insert from 'markdown-it-ins'
 import mark from 'markdown-it-mark'
 import katex from 'markdown-it-katex'
 import tasklists from 'markdown-it-task-lists'
 export default {
  name: 'Markdown',
  props: {
    content: {
      type: String,
      required: true
    },
    components: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      md: new markdownIt()
        .use(emoji)
        .use(subscript)
        .use(superscript)
        .use(footnote)
        .use(deflist)
        .use(abbreviation)
        .use(insert)
        .use(mark)
        .use(katex, { throwOnError: false, errorColor: ' #cc0000' })
        .use(tasklists)
    }
  },
  computed: {
    parsedComponent() {
      if (!this.content) {
        return false
      }
      return this.parseComponent()
    }
  },
  methods: {
    parseComponent() {
      if (!this.content) {
        return false
      }
      this.md.set({
        html: true,
        xhtmlOut: true,
        linkify: true
      })
      const html = this.md.render(this.content) || ''
      const $ = cheerio.load(html)
      // Replace h-tags
      for (let l = 1; l <= 6; l++) {
        $(`h${l}`).each((i, item) => {
          $(item).replaceWith(
            $(
              '<ds-heading tag="' +
                `h${l}` +
                '">' +
                $(item).html() +
                '</ds-heading>'
            )
          )
        })
      }
      // Replace p-tags
      $('p').each((i, item) => {
        // Handle component tags
        if (
          $(item).children().length &&
          Array.from($(item).children()).some(c => c.name.indexOf('-') > -1)
        ) {
          $(item).replaceWith($('<div>' + $(item).html() + '</div>'))
        } else {
          $(item).replaceWith(
            $('<ds-text size="large">' + $(item).html() + '</ds-text>')
          )
        }
      })
      // Replace ul-tags
      $('ul').each((i, item) => {
        $(item).replaceWith(
          $('<ds-list size="large">' + $(item).html() + '</ds-list>')
        )
      })
      // Replace ol-tags
      $('ol').each((i, item) => {
        $(item).replaceWith(
          $('<ds-list size="large" ordered>' + $(item).html() + '</ds-list>')
        )
      })
      // Replace ol-tags
      $('li').each((i, item) => {
        $(item).replaceWith(
          $('<ds-list-item>' + $(item).html() + '</ds-list-item>')
        )
      })
      const componentHtml = $('body').html()
      const template = `<div>${componentHtml}</div>`
      const component = Vue.compile(template)
      if (this.components) {
        component.components = this.components
      }
      this.$options.components['parsed-markdown-component'] = {
        ...component
      }
      return 'parsed-markdown-component'
    }
  }
 }
 </script>
 <style lang="scss">
 </style>
--- a/src/styleguide/components/global/TokenItem.vue
+++ b/src/styleguide/components/global/TokenItem.vue
@ -0,0 +1,126 @@
 <template>
  <div>
    <div
      v-if="!hideTokenGroups.includes(this.token.category)"
      :style="styles" 
      :class="`token-item${timeGroups.includes(this.token.category) ? ' hover' : ''}`">
      <span v-if="textGroups.includes(this.token.category)">
        Aa
      </span>
    </div>
    <div>
      <code>{{ token.value }}</code>
    </div>
  </div>
 </template>
 <script>
 import { tokens } from '@@/tokens'
 export default {
  name: 'TokenItem',
  props: {
    token: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      textGroups: [
        'text-color',
        'font-size',
        'font-family',
        'font-weight',
        'font-spacing',
        'letter-spacing',
        'line-height'
      ],
      timeGroups: ['time', 'ease'],
      hideTokenGroups: ['space-size', 'media-size', 'z-index', 'media-query']
    }
  },
  computed: {
    styles() {
      const styles = {}
      switch (this.token.category) {
        case 'text-color':
          styles.color = this.token.value
          break
        case 'border-color':
          styles.borderColor = this.token.value
          break
        case 'color':
        case 'background-color':
          styles.backgroundColor = this.token.value
          styles.borderColor = tokens.borderColorSofter
          break
        case 'font-size':
          styles.fontSize = this.token.value
          break
        case 'font-spacing':
          styles.paddingTop = this.token.value
          styles.paddingBottom = this.token.value
          styles.borderColor = tokens.borderColorBase
          styles.height = 'auto'
          break
        case 'font-family':
          styles.fontFamily = this.token.value
          break
        case 'font-weight':
          styles.fontWeight = this.token.value
          break
        case 'opacity':
          styles.opacity = this.token.value
          styles.backgroundColor = tokens.colorBlack
          break
        case 'size':
        case 'space':
          styles.height = this.token.value
          styles.borderColor = tokens.borderColorBase
          break
        case 'border-size':
          styles.borderWidth = this.token.value
          styles.borderColor = tokens.borderColorBase
          break
        case 'border-radius':
          styles.borderRadius = this.token.value
          styles.width = tokens.sizeHeightBase
          styles.borderColor = tokens.borderColorBase
          break
        case 'box-shadow':
          styles.boxShadow = this.token.value
          styles.marginBottom = tokens.spaceBase
          break
        case 'time':
          styles.transitionDuration = this.token.value
          styles.backgroundColor = tokens.backgroundColorInverseSofter
          break
        case 'ease':
          styles.transitionTimingFunction = this.token.value
          styles.transitionDuration = tokens.durationLong
          styles.backgroundColor = tokens.backgroundColorInverseSofter
          break
      }
      return styles
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .token-item {
  height: $size-height-base;
  display: flex;
  align-items: center;
  border: $border-size-base solid transparent;
  line-height: $line-height-base;
 }
 .hover {
  transition: opacity;
  &:hover {
    opacity: 0.5;
  }
 }
 </style>
--- a/src/styleguide/components/global/index.js
+++ b/src/styleguide/components/global/index.js
@ -0,0 +1,14 @@
 // Get components
 const context = require.context('.', true, /\.vue$/)
 const components = []
 context.keys().forEach(key => {
  const c = context(key).default
  components.push(c)
 })
 export default {
  install(Vue) {
    components.forEach(c => Vue.component(c.name, c))
  }
 }
--- a/src/styleguide/config.js
+++ b/src/styleguide/config.js
@ -0,0 +1,26 @@
 export default {
  sections: [
    {
      name: 'Introduction',
      path: '/'
    },
    {
      name: 'Design Tokens'
    },
    {
      name: 'Layout'
    },
    {
      name: 'Typography'
    },
    {
      name: 'Data Input'
    },
    {
      name: 'Data Display'
    },
    {
      name: 'Navigation'
    }
  ]
 }
--- a/src/styleguide/docs/DataDisplay.md
+++ b/src/styleguide/docs/DataDisplay.md
@ -0,0 +1 @@
 Data Display components are used to present data in an approachable way.
--- a/src/styleguide/docs/DesignTokens.md
+++ b/src/styleguide/docs/DesignTokens.md
@ -0,0 +1,8 @@
 Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
 You can use tokens as SCSS variables or import them in your JS:
 ```
 import { tokens } from 'system'
 ```
 <design-tokens />
--- a/src/styleguide/docs/Introduction.md
+++ b/src/styleguide/docs/Introduction.md
@ -0,0 +1,29 @@
 ## Human Connection - Styleguide
 This Design System provides our team with essential components and guidelines to achieve a consistent user experience accross our applications.
 ### Documentation
 If you are searching for more technical information for the UI & API, you can find it in the [HC Documentation](https://docs.human-connection.org).
 ### How to use it
 Use the system's components to solve common UI problems like layout, typography, displaying data or data input.
 When no component fits your case, either extend an existing one or create a new one.
 ### Extending existing components
 When extending components, make sure not to break existing features. If you really need to, it might be better to create a new one and mark the existing component as `deprecated`
 ### Creating new components
 Keep a few things in mind when creating a new component:
 * Keep it simple
 * Keep it extendable
 * Use Design Tokens wherever needed
 * Document it
 ### Resources 
 If you would like to become a component superhero feel free to dive into the [Vuejs Component Style Guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/).
--- a/src/styleguide/docs/Layout.md
+++ b/src/styleguide/docs/Layout.md
@ -0,0 +1 @@
 Layout components are used to group related content together. The also provide consistent spacing for blocks of content.
--- a/src/styleguide/docs/Navigation.md
+++ b/src/styleguide/docs/Navigation.md
@ -0,0 +1 @@
 Navigation components allow the user to navigate through the application.
--- a/src/styleguide/docs/Typography.md
+++ b/src/styleguide/docs/Typography.md
@ -0,0 +1 @@
 Typographic components are used to give text a semantic meaning. They also create hierarchy and provide styling through size and color.
--- a/src/styleguide/index.js
+++ b/src/styleguide/index.js
@ -0,0 +1,21 @@
 import Vue from 'vue'
 import System from '@@'
 import Components from './components/global'
 import App from './App.vue'
 import router from './router'
 import startCase from 'lodash/startCase'
 Vue.config.productionTip = false
 Vue.use(System)
 Vue.use(Components)
 Vue.filter('componentName', value => {
  return startCase(value.replace(/^Ds/, ''))
 })
 new Vue({
  router,
  render: h => h(App)
 }).$mount('#app')
--- a/src/styleguide/router/index.js
+++ b/src/styleguide/router/index.js
@ -0,0 +1,125 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import kebabCase from 'lodash/kebabCase'
 import { componentsMap } from '@@/components'
 import config from '../config'
 import PageWrapper from '../components/PageWrapper'
 import SectionPage from '../components/SectionPage'
 import ComponentPage from '../components/ComponentPage'
 Vue.use(VueRouter)
 function createRoute(section) {
  const components = componentsMap[kebabCase(section.name)]
  const filteredComponents = components
    ? components.filter(c => !c.parent)
    : null
  const route = {
    path: section.path ? section.path : createUrl(section.name),
    component: createPageWrapper(section, filteredComponents),
    children: [
      {
        path: '',
        name: section.name,
        component: createSectionPage(section, filteredComponents)
      }
    ]
  }
  if (filteredComponents) {
    route.children = route.children.concat(
      filteredComponents.map(createComponentRoute)
    )
  }
  return route
 }
 function createPageWrapper(section, components) {
  return {
    render: h =>
      h(PageWrapper, {
        props: {
          section: section,
          components: components
        }
      })
  }
 }
 function createSectionPage(section, components) {
  return {
    render: h =>
      h(SectionPage, {
        props: {
          section: section,
          components: components
        }
      })
  }
 }
 function createComponentRoute(component) {
  return {
    path: createUrl(component.name, false),
    name: component.name,
    component: createComponentPage(component)
  }
 }
 function createComponentPage(component) {
  return {
    // Necessary to keep reactivity (hot-reload)
    data() {
      return {
        component
      }
    },
    render: h =>
      h(ComponentPage, {
        props: {
          component
        }
      })
  }
 }
 function createUrl(name, root = true) {
  const parts = Array.isArray(name) ? name : [name]
  const url = root ? '/' : ''
  return url + parts.map(sanitize).join('/')
 }
 function sanitize(name) {
  const sanitized = name.toLowerCase().replace(' ', '-')
  return encodeURIComponent(sanitized)
 }
 const routes = config.sections.map(createRoute)
 const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash
      }
    }
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
 })
 // Redirect for github pages
 router.beforeEach((to, from, next) => {
  if (to.query && to.query.p) {
    next({ path: to.query.p, query: null })
  }
  next()
 })
 export default router
--- a/src/system/assets/fonts/gentium-basic/GentiumBasic-Italic.woff2
+++ b/src/system/assets/fonts/gentium-basic/GentiumBasic-Italic.woff2
--- a/Show More
+++ b/Show More
		`@ -0,0 +1 @@`
							<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script src=/babel-standalone.js></script><title>CION - Vue Design System</title><link href=/css/app.e38d5069.css rel=preload as=style><link href=/css/chunk-vendors.7a428b56.css rel=preload as=style><link href=/js/app.f428b946.js rel=preload as=script><link href=/js/chunk-vendors.0a7f54fd.js rel=preload as=script><link href=/css/chunk-vendors.7a428b56.css rel=stylesheet><link href=/css/app.e38d5069.css rel=stylesheet></head><body><noscript><strong>We're sorry but this CION doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.0a7f54fd.js></script><script src=/js/app.f428b946.js></script></body></html>
		`@ -0,0 +1 @@`
							`Data Display components are used to present data in an approachable way.`
		`@ -0,0 +1 @@`
							`Layout components are used to group related content together. The also provide consistent spacing for blocks of content.`
		`@ -0,0 +1 @@`
							`Navigation components allow the user to navigate through the application.`
		`@ -0,0 +1 @@`
							`Typographic components are used to give text a semantic meaning. They also create hierarchy and provide styling through size and color.`