RoleModel · Jeremy-Walton · Aug 11, 2022 · Jul 21, 2022 · Jul 22, 2022 · Jul 22, 2022
diff --git a/.github/workflows/publish-storybook.yml b/.github/workflows/publish-storybook.yml
@@ -0,0 +1,26 @@
+name: Build and Deploy Storybook Documentation
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+      - name: Install and Build 🔧
+        run: | # Install npm packages and build the Storybook files
+          npm install
+          npm run build-storybook
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@3.6.2
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages # The branch the action should deploy to.
+          FOLDER: docs-build # The folder that the build-storybook script generates files.
+          CLEAN: true # Automatically remove deleted files from the deploy branch
+          TARGET_FOLDER: docs # The folder that we serve our Storybook files from
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,13 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-scss"
+  ],
+  "framework": "@storybook/html"
+}
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import rolemodelTheme from './rolemodelTheme';
+
+addons.setConfig({
+  theme: rolemodelTheme,
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,11 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
+
+import '!style-loader!css-loader!sass-loader!../src/rolemodel-design-system.scss';
diff --git a/.storybook/rolemodelTheme.js b/.storybook/rolemodelTheme.js
@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'RoleModel Design System',
+  brandUrl: 'https://rolemodel.github.io/rolemodel-design-system/',
+  brandImage: 'https://rolemodelsoftware.com/packs/media/images/rolemodel-logo--blue-4eb2301367b75bba352fe6ca9155b154.svg',
+  brandTarget: '_self',
+});
diff --git a/README.md b/README.md
@@ -26,6 +26,12 @@ If you are using a different compiler such as Dart Sass, you may need to referen
 @import '@rolemodel/rolemodel-design-system/dist/scss/rolemodel-design-system'
 ```
 
+## Documentation
+
+We use [Storybook](https://storybook.js.org/docs/html/get-started/introduction) as a way to provide informative and interactive documentation.
+
+It can be found here [RoleModel Design System Documentation](https://rolemodel.github.io/rolemodel-design-system)
+
 ## Tokens
 
 Tokens are defined in `src/core/tokens`
@@ -87,62 +93,3 @@ If you do not want all the styles RoleModel Design System provides, you can impo
 
 @import '@rolemodel/rolemodel-design-system/scss/components/button.scss';
 ```
-
-## Documentation
-
-### Base Layout
-
-The basic layout that this design system expects looks like the following:
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Sample Layout</title>
-    <meta content='width=device-width, initial-scale=1' name='viewport' />
-  </head>
-  <body>
-    <!-- Flash message here -->
-    <!-- Confirm here -->
-    <!-- Modal here -->
-    <!-- Panel here -->
-    <div class='container'>
-      <!-- Page Contents -->
-    </div>
-  </body>
-</html>
-```
-
-### Dark Mode
-
-Dark mode is enabled by default and will dynamically flip your semantic tokens to a dark version of it based on your system setting.
-If your application does not use or need dark mode, it can be disabled by adding a data attribute to your root `html` tag.
-
-```html
-<!DOCTYPE html>
-<html data-allow-dark-mode-preference='false'>
-  ...
-</html>
-```
-
-### Scale Overriding
-
-If you want to change the font or spacing scale within the context of a specific component, you can't just set the `--rm-space-scale-unit` because the css variables for the scale are already computed and won't be re-computed when you set the scale unit. You can force it to re-compute by redefining the scale. This is why each set of tokens is defined in a scss mixin. `card--condensed` is a great example of how to do this.
-
-```scss
-.card--condensed {
-  @include spacing-scales;
-  --rm-space-scale-unit: 0.5rem;
-}
-```
-
-### Utilities
-
-[Shadows](./docs/components/shadow/shadow.md)
-
-### Components
-
-[Buttons](./docs/components/button/button.md)
-
-[Card](./docs/components/card/card.md)
-
-[Forms](./docs/components/form/form.md)
diff --git a/docs/components/button/button-variations.png b/docs/components/button/button-variations.png
diff --git a/docs/components/button/button.md b/docs/components/button/button.md
diff --git a/docs/components/card/card-variations.png b/docs/components/card/card-variations.png
diff --git a/docs/components/card/card.md b/docs/components/card/card.md
diff --git a/docs/components/form/form-inputs.png b/docs/components/form/form-inputs.png
diff --git a/docs/components/form/form.md b/docs/components/form/form.md