Add markdown support

.storybook/Story.scss

@@ -0,0 +1,273 @@
+@import './styles/modules';
+
+.story--example {
+  max-width: 100%;
+  border: $cf-border solid $g4-onyx;
+  border-radius: $cf-radius;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+}
+
+/*
+  Markdown Styles
+  ------------------------------------------------------------------------------
+*/
+
+$docs-text-base: 14px;
+$docs-text-scale: 1.19;
+$docs-text-base-1: (ceil($docs-text-base * $docs-text-scale));
+$docs-text-base-2: (
+  ceil($docs-text-base * $docs-text-scale * $docs-text-scale)
+);
+$docs-text-base-3: (
+  ceil($docs-text-base * $docs-text-scale * $docs-text-scale * $docs-text-scale)
+);
+$docs-text-base-4: (
+  ceil(
+    $docs-text-base * $docs-text-scale * $docs-text-scale * $docs-text-scale *
+      $docs-text-scale
+  )
+);
+$docs-text-base-5: (
+  ceil(
+    $docs-text-base * $docs-text-scale * $docs-text-scale * $docs-text-scale *
+      $docs-text-scale * $docs-text-scale
+  )
+);
+
+body.sb-show-main {
+  padding: 52px;
+}
+
+.storybook-readme-story div.markdown-body {
+  font-size: $docs-text-base;
+  font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ol,
+  ul {
+    color: $g13-mist;
+    margin: 0.25em 0 0.75em 0;
+  }
+
+  h1,
+  h2 {
+    border-bottom: 2px solid $g2-kevlar;
+  }
+
+  h1 {
+    line-height: 1.25em;
+    font-size: ceil($docs-text-base-5 * $docs-text-scale);
+    font-weight: 300;
+    letter-spacing: 0.01em;
+  }
+  h2 {
+    line-height: 1.25em;
+    font-size: $docs-text-base-4;
+    font-weight: 300;
+  }
+  h3 {
+    line-height: 1.25em;
+    font-size: $docs-text-base-3;
+    font-weight: 500;
+    small {
+      font-weight: 500;
+    }
+  }
+  h4 {
+    line-height: 1.25em;
+    font-size: $docs-text-base-2;
+    font-weight: 400;
+    small {
+      font-weight: 400;
+    }
+  }
+  h5 {
+    line-height: 1.25em;
+    font-size: $docs-text-base-1;
+    font-weight: 600;
+    small {
+      font-weight: 500;
+    }
+  }
+  h6 {
+    line-height: 1.25em;
+    font-size: $docs-text-base;
+    font-weight: 900;
+    small {
+      font-weight: 500;
+    }
+  }
+  p {
+    color: $g11-sidewalk;
+    font-size: $docs-text-base;
+    line-height: 1.55em;
+    font-weight: 500;
+
+    b,
+    strong {
+      font-weight: 900;
+    }
+
+    small {
+      font-weight: 500;
+    }
+  }
+
+  ol,
+  ul {
+    font-size: $docs-text-base;
+  }
+
+  li {
+    line-height: 1.55em;
+    font-weight: 500;
+  }
+
+  hr {
+    margin: $cf-marg-d 0;
+    height: $cf-border;
+    border-radius: $cf-border / 2;
+    background-color: $g2-kevlar;
+  }
+
+  code {
+    font-family: 'RobotoMono', monospace;
+    text-shadow: none;
+    font-weight: 500;
+    color: $c-potassium;
+    background-color: $g2-kevlar;
+    font-size: inherit;
+  }
+
+  code.language-js span.token {
+    &.punctuation {
+      color: $g10-wolf;
+    }
+    &.keyword {
+      color: $c-hydrogen;
+    }
+    &.string {
+      color: $c-krypton;
+    }
+    &.function {
+      color: $c-pool;
+    }
+    &.operator {
+      color: $c-tungsten;
+    }
+    &.comment {
+      color: $g8-storm;
+      font-style: italic;
+    }
+  }
+
+  pre {
+    font-size: $docs-text-base;
+    background-color: $g2-kevlar;
+    margin: 0.5em 0 1.25em 0;
+
+    p {
+      margin: 0;
+      background-color: transparent;
+    }
+  }
+}
+
+.storybook-readme-story div.markdown-body table {
+  border: 0;
+
+  thead th,
+  tbody td {
+    border: 0;
+    padding: $cf-marg-b;
+    font-size: 13px;
+  }
+
+  thead tr {
+    border: 0;
+    border-bottom: $cf-border solid $g4-onyx;
+    background-color: transparent;
+  }
+
+  thead th {
+    color: $g17-whisper;
+  }
+
+  tbody tr {
+    border: 0;
+    border-top: $cf-border solid $g2-kevlar;
+    background-color: transparent;
+  }
+
+  tbody td {
+    color: $g13-mist;
+  }
+}
+
+.storybook-readme-story div.markdown-body.markdown-props-table {
+  h3 {
+    margin-top: 0.75em !important;
+    margin-bottom: 0.25em;
+  }
+
+  table {
+    display: table;
+    width: 100%;
+
+    thead th,
+    tbody td {
+      text-align: left;
+      border: 0;
+      padding: $cf-marg-b;
+      font-size: 13px;
+    }
+
+    tbody tr {
+      background-color: $g0-obsidian;
+      border: $cf-border solid $g3-castle;
+
+      &:nth-child(even) {
+        background-color: $g1-raven;
+      }
+
+      &:nth-child(odd) {
+        background-color: $g2-kevlar;
+      }
+    }
+  }
+}
+
+table.two-axis-table {
+  thead tr,
+  tbody tr {
+    border: 0;
+  }
+
+  tbody tr td {
+    border: $cf-border solid $g2-kevlar;
+    border-left: 0;
+    text-align: center;
+    vertical-align: center;
+
+    &:first-child {
+      text-align: left;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  tbody tr:first-child td {
+    border-top: 0;
+  }
+}

.storybook/config.js

@@ -1,6 +1,10 @@
-import {configure, addParameters} from '@storybook/react'
+import {configure, addParameters, addDecorator} from '@storybook/react'
 import {create} from '@storybook/theming'
+import {addReadme} from 'storybook-readme'
 import 'storybook-chromatic'
+import './Story.scss'
+
+addDecorator(addReadme)
 
 addParameters({
   options: {

.storybook/styles/_influx-colors.scss

@@ -0,0 +1,77 @@
+/*
+   Influx Color Palette
+   -----------------------------------------------------------------------------
+*/
+
+// Nuetrals (Dark to Light)
+$g0-obsidian: #0f0e15;
+$g1-raven: #1c1c21;
+$g2-kevlar: #202028;
+$g3-castle: #292933;
+$g4-onyx: #31313d;
+$g5-pepper: #383846;
+$g6-smoke: #434453;
+$g7-graphite: #545667;
+$g8-storm: #676978;
+$g9-mountain: #757888;
+$g10-wolf: #8e91a1;
+$g11-sidewalk: #999dab;
+$g12-forge: #a4a8b6;
+$g13-mist: #bec2cc;
+$g14-chromium: #c6cad3;
+$g15-platinum: #d4d7dd;
+$g16-pearl: #e7e8eb;
+$g17-whisper: #eeeff2;
+$g18-cloud: #f6f6f8;
+$g19-ghost: #fafafc;
+$g20-white: #ffffff;
+
+// Telegraf (Dark to Light)
+$c-basalt: #2F1F29;
+$c-ruby: #BF3D5E;
+$c-fire: #DC4E58;
+$c-curacao: #F95F53;
+$c-dreamsicle: #FF8564;
+$c-tungsten: #FFB6A0;
+$c-marmelade: #FFDCCF;
+$c-flan: #FFF7F4;
+
+// InfluxDB (Dark to Light)
+$c-abyss: #182838;
+$c-sapphire: #326BBA;
+$c-ocean: #4591ED;
+$c-pool: #22ADF6;
+$c-laser: #00C9FF;
+$c-hydrogen: #6BDFFF;
+$c-neutrino: #BEF0FF;
+$c-yeti: #F0FCFF;
+
+// Chronograf (Dark to Light)
+$c-shadow: #1F2039;
+$c-void: #311F94;
+$c-amethyst: #513CC6;
+$c-star: #7A65F2;
+$c-comet: #9394FF;
+$c-potassium: #B1B6FF;
+$c-moonstone: #C9D0FF;
+$c-twilight: #F2F4FF;
+
+// Kapacitor (Dark to Light)
+$c-gypsy: #152B2D;
+$c-emerald: #108174;
+$c-viridian: #32B08C;
+$c-rainforest: #4ED8A0;
+$c-honeydew: #7CE490;
+$c-krypton: #A5F3B4;
+$c-wasabi: #C6FFD0;
+$c-mint: #F2FFF4;
+
+// Warnings (Dark to Light)
+$c-oak: #3F241F;
+$c-topaz: #E85B1C;
+$c-tiger: #F48D38;
+$c-pineapple: #FFB94A;
+$c-thunder: #FFD255;
+$c-sulfur: #FFE480;
+$c-daisy: #FFF6B8;
+$c-banana: #FFFDDE;