Draft: porting over https://github.com/just-the-docs/just-the-docs/pull/1086/

.babelrc.json

@@ -1,15 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100
-        }
-      }
-    ],
-    "@babel/preset-typescript"
-  ],
-  "plugins": []
-}

.github/workflows/chromatic.yml

@@ -1,51 +0,0 @@
-on:
-  push:
-    branches:
-      - main
-  pull_request:
-    branches:
-      - main
-
-name: 'Chromatic'
-
-jobs:
-  chromatic:
-    name: "Chromatic"
-    strategy:
-      matrix:
-        jekyll-version: [4.3]
-        os: [ ubuntu-latest ]
-        ruby-version: [3.1]
-        node-version: [18.x]
-    runs-on: ${{ matrix.os }}
-    steps:
-
-    # Ruby setup
-    - uses: actions/checkout@v3
-      with:
-        fetch-depth: 0
-    - name: Setup Ruby ${{ matrix.ruby-version }}
-      uses: ruby/setup-ruby@v1
-      with:
-        ruby-version: ${{ matrix.ruby-version }}
-        bundler-cache: false
-    - name: Bundle Install
-      run: bundle install
-    - name: Install Jekyll ${{ matrix.jekyll-version }}
-      run: gem install jekyll -v ${{ matrix.jekyll-version }}
-    - name: Init Search
-      run: bundle exec rake search:init
-    - name: Build Site
-      run: bundle exec jekyll build
-
-    # Node setup
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm run build-storybook
-    - name: Publish to Chromatic
-      uses: chromaui/action@v1
-      env:
-        CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/publish-gem.yml

@@ -10,8 +10,8 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
-    - name: Setup Ruby 3.2
-      uses: ruby/setup-ruby@v1
+    - name: Set up Ruby 3.2
+      uses: actions/setup-ruby@v1
       with:
         ruby-version: "3.2"
 

.gitignore

@@ -1,33 +1,8 @@
-# Not sure what a .gitignore is?
-# See: https://git-scm.com/docs/gitignore
-
-# The first files are directly copied from Jekyll's first-party docs on `.gitignore` files:
-# https://jekyllrb.com/tutorials/using-jekyll-with-bundler/#commit-to-source-control
-
-# Ignore the default location of the built site, and caches and metadata generated by Jekyll
-_site/
-.sass-cache/
-.jekyll-cache/
-.jekyll-metadata
-
-# Ignore folders generated by Bundler
-.bundle/
-vendor/
-
-# These next files are used by Just the Docs developers. They are not necessary for end users of the theme, only developers.
-
-# We use Stylelint and Prettier, JavaScript tools, to lint and format our own code,
-# We use Node.js as our runtime, so we ignore node_modules
-node_modules
-
-# We also use Storybook to test regressions in changes; we ignore the build output.
-storybook-static
-
-# .DS_Store is a macOS-only metadata file about directories. Convention is to not commit them.
-# See: https://en.wikipedia.org/wiki/.DS_Store
-.DS_Store
-
-# These are legacy globs that typically target Ruby theme developers. We may change these at a later date.
 *.gem
 .bundle
 .ruby-version
+.jekyll-cache
+.sass-cache
+_site
+node_modules
+.DS_Store

.storybook/main.js

@@ -1,17 +0,0 @@
-/** @type { import('@storybook/html-webpack5').StorybookConfig } */
-const config = {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: {
-    name: "@storybook/html-webpack5",
-    options: {},
-  },
-  docs: {
-    autodocs: "tag",
-  },
-}
-export default config

.storybook/preview.js

@@ -1,14 +0,0 @@
-/** @type { import('@storybook/html').Preview } */
-const preview = {
-  parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-  },
-}
-
-export default preview

CHANGELOG.md

@@ -17,25 +17,7 @@ This website is built from the `HEAD` of the `main` branch of the theme reposito
 
 Code changes to `main` that are *not* in the latest release:
 
-- Fixed: Windows emoji font fallback by [@flanakin] in [#1337]
-
-[#1337]: https://github.com/just-the-docs/just-the-docs/pull/1337
-
-### New Contributors
-
-- [@flanakin] made their first contribution in [#1337]
-
-[@flanakin]: https://github.com/flanakin
-
-## Release v0.6.1
-
-Hi all, this is a small patch release that only includes one change: resolving a bug introduced in 0.6.0 that causes a JS error for pages excluded from navigation.
-
-### Bugfixes
-
-- Fixed: JS error for pages excluded from navigation by [@pdmosses] in [#1332]
-
-[#1332]: https://github.com/just-the-docs/just-the-docs/pull/1332
+- N/A
 
 ## Release v0.6.0
 

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    just-the-docs (0.6.1)
+    just-the-docs (0.6.0)
       jekyll (>= 3.8.5)
       jekyll-include-cache
       jekyll-seo-tag (>= 2.0)

_config.yml

@@ -48,7 +48,6 @@ exclude:
    - Dockerfile
  # theme test code
    - fixtures/
-   - stories/
 
 # Set a path/url to a logo that will be displayed instead of the title
 #logo: "/assets/images/just-the-docs.png"
@@ -141,7 +140,11 @@ gh_edit_branch: "main" # the branch that your docs is served from
 gh_edit_view_mode: "tree" # "tree" or "edit" if you want the user to jump into the editor immediately
 
 # Color scheme currently only supports "dark", "light"/nil (default), or a custom scheme that you define
-color_scheme: nil
+color_scheme: auto
+color_scheme_options:
+  enable_localstorage: true
+  enable_switch: true
+  switch_options: ["auto", "light", "dark"]
 
 callouts_level: quiet # or loud
 callouts:

_includes/components/aux_nav.html

@@ -11,5 +11,12 @@
         </a>
       </li>
     {% endfor %}
+    {% if site.color_scheme_options and site.color_scheme_options.switch_options %}
+    <li class="aux-nav-list-item">
+      <button class="site-button color-scheme-switch-theme-button" aria-label="Switch color scheme">
+        <svg aria-hidden="true" class="site-button-icon"><use href="#svg-{{ site.color_scheme | default: 'light' }}"></use></svg>
+      </button>
+    </li>
+    {% endif %}
   </ul>
 </nav>

_includes/components/header.html

@@ -5,7 +5,7 @@
     <div></div>
   {% endif %}
   {% include header_custom.html %}
-  {% if site.aux_links %}
+  {% if site.aux_links or site.color_scheme_options and site.color_scheme_options.switch_options %}
     {% include components/aux_nav.html %}
   {% endif %}
 </div>

_includes/head.html

@@ -5,7 +5,7 @@
   Results in: HTML for the head element.
   Includes:
     head_nav.html, head_custom.html.
-  Overwrites: 
+  Overwrites:
     ga_tracking_ids, ga_property, file, favicon.
   Should not be cached, because included files depend on page.
 {%- endcomment -%}
@@ -14,8 +14,49 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
-  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
-  
+  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage %}
+  <script>
+    (function(){
+      function createThemeStylesheet(theme, media) {
+        var link  = document.createElement('link');
+        link.rel  = 'stylesheet';
+        link.type = 'text/css';
+        link.href = "{{ '/assets/css/just-the-docs-*.css' | relative_url }}".replace("*",theme);
+        if(media) link.media = media;
+        return link;
+      }
+
+      var theme = window.localStorage.getItem('theme');
+      var head = document.getElementsByTagName('head')[0];
+
+      if (theme === null) {
+        theme = "{{ site.color_scheme }}";
+      }
+
+      if (theme === "nil") {
+        theme = "default";
+      }
+
+      if (theme === "auto") {
+        head.appendChild(createThemeStylesheet('light', '(prefers-color-scheme: light)'));
+        head.appendChild(createThemeStylesheet('dark', '(prefers-color-scheme: dark)'));
+      } else {
+        head.appendChild(createThemeStylesheet(theme || "default"));
+      }
+    })();
+  </script>
+  {% else %}
+    {% case site.color_scheme %}
+    {% when "auto" %}
+      <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-light.css' | relative_url }}" type="text/css" media="(prefers-color-scheme: light)">
+      <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-dark.css' | relative_url }}" type="text/css" media="(prefers-color-scheme: dark)">
+    {% when nil %}
+      <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}" type="text/css">
+    {% else %}
+      <link rel="stylesheet" href="{{ site.color_scheme | prepend: '/assets/css/just-the-docs-' | append: '.css' | relative_url }}" type="text/css">
+    {% endcase %}
+  {% endif %}
+
   {% include head_nav.html %}
 
   {% if site.ga_tracking != nil %}

_includes/head_nav.html

@@ -4,7 +4,7 @@
   Results in: HTML for a page-specific style element.
   Includes:
     css/activation.scss.liquid.
-  Overwrites: 
+  Overwrites:
     activation, test_scss, scss, css, index, count.
   Should not be cached, because css/activation.scss.liquid depends on page.
 {%- endcomment -%}
@@ -28,7 +28,7 @@
     {%- assign color_scheme = "light" -%}
   {%- endif %}
   @import "./color_schemes/light";
-  {% unless color_scheme == "light" %}
+  {% unless color_scheme == "light" or color_scheme == "auto" %}
   @import "./color_schemes/{{ color_scheme }}";
   {% endunless %}
   {{ activation }}

_includes/icons/icons.html

@@ -10,4 +10,7 @@
   {% if site.enable_copy_code_button != false %}
     {% include icons/code_copy.html %}
   {% endif %}
+  {% if site.color_scheme_options and site.color_scheme_options.enable_switch %}
+    {% include icons/switch_color_scheme.html %}
+  {% endif %}
 </svg>

_includes/icons/switch_color_scheme.html

@@ -0,0 +1,29 @@
+<!-- Feather. Public domain or under the CC0-1.0-Universal license: https://github.com/python/peps/blob/ebff37d5e7728377035b1e1ce9c9796ed63940b1/pep_sphinx_extensions/LICENCE.rst -->
+<symbol id="svg-auto" viewBox="0 0 24 24" pointer-events="all">
+  <title>Following system colour scheme</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="9"></circle>
+    <path d="M12 3v18m0-12l4.65-4.65M12 14.3l7.37-7.37M12 19.6l8.85-8.85"></path>
+  </svg>
+</symbol>
+<symbol id="svg-dark" viewBox="0 0 24 24" pointer-events="all">
+  <title>Selected dark colour scheme</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>
+  </svg>
+</symbol>
+<symbol id="svg-light" viewBox="0 0 24 24" pointer-events="all">
+  <title>Selected light colour scheme</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+</symbol>

_sass/buttons.scss

@@ -105,7 +105,7 @@
 }
 
 .btn-purple {
-  @include btn-color($white, $purple-300);
+  @include btn-color($white, $purple-100);
 }
 
 .btn-blue {

_sass/layout.scss

@@ -140,11 +140,32 @@
   }
 }
 
+button.site-button {
+  background: none;
+  border: none;
+}
+
 .site-button {
   display: flex;
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
+
+  .site-button-icon {
+    width: #{$sp-4 * 1.2};
+    height: #{$sp-4 * 1.2};
+    align-self: center;
+    color: $grey-dk-000;
+    cursor: pointer;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    .site-button-icon {
+      color: $link-color;
+    }
+  }
 }
 
 @include mq(md) {

_sass/support/_variables.scss

@@ -2,7 +2,7 @@
 
 // prettier-ignore
 $body-font-family: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI",
-  roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !default;
+  roboto, "Helvetica Neue", arial, sans-serif !default;
 $mono-font-family: "SFMono-Regular", menlo, consolas, monospace !default;
 $root-font-size: 16px !default; // DEPRECATED: previously base font-size for rems
 $body-line-height: 1.4 !default;

assets/css/just-the-docs-default.scss

@@ -1,6 +1,6 @@
 ---
 ---
-{% if site.color_scheme and site.color_scheme != "nil" %}
+{% if site.color_scheme and site.color_scheme != "nil" and site.color_scheme != "auto" %}
   {% assign color_scheme = site.color_scheme %}
 {% else %}
   {% assign color_scheme = "light" %}

assets/js/just-the-docs.js

@@ -41,7 +41,7 @@ function initNav() {
   const siteNav = document.getElementById('site-nav');
   const mainHeader = document.getElementById('main-header');
   const menuButton = document.getElementById('menu-button');
-  
+
   disableHeadStyleSheet();
 
   jtd.addEvent(menuButton, 'click', function(e){
@@ -72,13 +72,11 @@ function initNav() {
 }
 
 // The page-specific <style> in the <head> is needed only when JS is disabled.
-// Moreover, it incorrectly overrides dynamic stylesheets set by setTheme(theme). 
+// Moreover, it incorrectly overrides dynamic stylesheets set by setTheme(theme).
 // The page-specific stylesheet is assumed to have index 1 in the list of stylesheets.
 
 function disableHeadStyleSheet() {
-  if (document.styleSheets[1]) {
-    document.styleSheets[1].disabled = true;
-  }
+  document.styleSheets[1].disabled = true;
 }
 
 {%- if site.search_enabled != false %}
@@ -467,13 +465,56 @@ function searchLoaded(index, docs) {
 // Switch theme
 
 jtd.getTheme = function() {
-  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
+  var cssFile = document.querySelector('[rel="stylesheet"]');
+  if(cssFile.hasAttribute('media')) return 'auto';
+
+  var cssFileHref = cssFile.getAttribute('href');
   return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
 }
 
 jtd.setTheme = function(theme) {
-  var cssFile = document.querySelector('[rel="stylesheet"]');
-  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
+  function createThemeStylesheet(theme, media) {
+    var link  = document.createElement('link');
+    link.rel  = 'stylesheet';
+    link.type = 'text/css';
+    link.href = "{{ '/assets/css/just-the-docs-*.css' | relative_url }}".replace("*",theme);
+    if(media) link.media = media;
+    return link;
+  }
+  var cssFiles = [...document.querySelectorAll('[rel="stylesheet"]')];
+  if(theme === "auto") {
+    cssFiles.at(-1).insertAdjacentElement('afterend', createThemeStylesheet('light', '(prefers-color-scheme: light)'));
+    cssFiles.at(-1).insertAdjacentElement('afterend', createThemeStylesheet('dark', '(prefers-color-scheme: dark)'));
+  } else {
+    cssFiles.at(-1).insertAdjacentElement('afterend', createThemeStylesheet(theme || "default"));
+  }
+  setTimeout(() => cssFiles.forEach(it => it.remove()), 100);
+}
+
+jtd.switchThemeButton = function(button, event) {
+  {% if site.color_scheme_options and site.color_scheme_options.switch_options %}
+  const themes = {{ site.color_scheme_options.switch_options | jsonify }};
+  {% else %}
+  const themes = ["auto", "light", "dark"];
+  {% endif %}
+  var currentTheme = jtd.getTheme();
+  var nextTheme = themes[(themes.indexOf(currentTheme)+1)%themes.length];
+  jtd.setTheme(nextTheme);
+  button.getElementsByTagName('svg')[0].getElementsByTagName('use')[0].setAttribute('href',`#svg-${nextTheme}`);
+  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage  %}
+  window.localStorage.setItem('theme', nextTheme);
+  {% endif %}
+}
+
+function initSwitchThemeButton() {
+  var buttons = [...document.getElementsByClassName("color-scheme-switch-theme-button")];
+  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage  != false %}
+  theme = window.localStorage.getItem('theme');
+  if(theme != null){
+    buttons.forEach(button => button.getElementsByTagName('svg')[0].getElementsByTagName('use')[0].setAttribute('href',`#svg-${theme}`));
+  }
+  {% endif %}
+  buttons.forEach(button => jtd.addEvent(button, 'click', event => jtd.switchThemeButton(button, event)));
 }
 
 // Note: pathname can have a trailing slash on a local jekyll server
@@ -535,6 +576,9 @@ jtd.onReady(function(){
   {%- if site.search_enabled != false %}
   initSearch();
   {%- endif %}
+  {%- if site.enable_switch_color_scheme != false %}
+  initSwitchThemeButton();
+  {%- endif %}
   activateNav();
   scrollNav();
 });

docs/ui-components/typography.md

@@ -21,7 +21,7 @@ nav_order: 1
 By default, Just the Docs uses a native system font stack for sans-serif fonts:
 
 ```scss
-system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji"
+system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
 ```
 
 ABCDEFGHIJKLMNOPQRSTUVWXYZ

just-the-docs.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "just-the-docs"
-  spec.version       = "0.6.1"
+  spec.version       = "0.6.0"
   spec.authors       = ["Patrick Marsceill", "Matthew Wang"]
   spec.email         = ["patrick.marsceill@gmail.com", "matt@matthewwang.me"]
 

package.json

@@ -1,31 +1,13 @@
 {
   "name": "just-the-docs",
-  "version": "0.5.0",
+  "version": "0.3.3",
   "description": "A modern Jekyll theme for documentation",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/just-the-docs/just-the-docs.git"
-  },
+  "repository": "just-the-docs/just-the-docs",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/just-the-docs/just-the-docs/issues"
-  },
+  "bugs": "https://github.com/just-the-docs/just-the-docs/issues",
   "devDependencies": {
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-essentials": "^7.0.7",
-    "@storybook/addon-interactions": "^7.0.7",
-    "@storybook/addon-links": "^7.0.7",
-    "@storybook/blocks": "^7.0.7",
-    "@storybook/html": "^7.0.7",
-    "@storybook/html-webpack5": "^7.0.7",
-    "@storybook/testing-library": "^0.0.14-next.2",
-    "chromatic": "^6.17.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^7.0.7",
+    "prettier": "^3.0.2",
     "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^10.0.0"
   },
@@ -34,10 +16,7 @@
     "lint:css": "stylelint '**/*.scss'",
     "lint:formatting": "prettier --check '**/*.{scss,js,json}'",
     "format": "prettier --write '**/*.{scss,js,json}'",
-    "test": "npm run lint",
-    "storybook": "bundle exec jekyll build && storybook dev -p 6006",
-    "build-storybook": "bundle exec jekyll build && storybook build",
-    "chromatic": "npx chromatic --project-token=9355f489c51b -d storybook-static"
+    "test": "npm run lint"
   },
   "stylelint": {
     "ignoreFiles": [
@@ -64,7 +43,5 @@
     "singleQuote": false,
     "tabWidth": 2,
     "trailingComma": "es5"
-  },
-  "homepage": "https://just-the-docs.com",
-  "_id": "just-the-docs@0.5.0"
+  }
 }

stories/Introduction.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Example/Introduction" />
-
-# Storybook for Just the Docs
-
-A WIP [Storybook](https://storybook.js.org/) for Just the Docs.

stories/ui-components/Button.js

@@ -1,11 +0,0 @@
-import "../../_site/assets/css/just-the-docs-default.css"
-
-export const createButton = ({ variant = "default", label, size = "4" }) => {
-  const btn = document.createElement("button")
-  btn.type = "button"
-  btn.innerText = label
-
-  btn.className = ["btn", `btn-${variant}`, `fs-${size}`].join(" ")
-
-  return btn
-}

stories/ui-components/Button.stories.js

@@ -1,68 +0,0 @@
-import { createButton } from "./Button"
-
-export default {
-  title: "UI Components/Button",
-  tags: ["autodocs"],
-  render: ({ label, ...args }) => {
-    return createButton({ label, ...args })
-  },
-  argTypes: {
-    label: { control: "text" },
-    size: {
-      control: { type: "select" },
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["default", "primary", "purple", "blue", "green", "outline"],
-    },
-  },
-}
-
-export const Default = {
-  args: {
-    variant: "default",
-    label: "Button",
-    size: 4,
-  },
-}
-
-export const Primary = {
-  args: {
-    variant: "primary",
-    label: "Button",
-    size: 4,
-  },
-}
-
-export const Purple = {
-  args: {
-    variant: "purple",
-    label: "Button",
-    size: 4,
-  },
-}
-
-export const Blue = {
-  args: {
-    variant: "blue",
-    label: "Button",
-    size: 4,
-  },
-}
-
-export const Green = {
-  args: {
-    variant: "green",
-    label: "Button",
-    size: 4,
-  },
-}
-
-export const Outline = {
-  args: {
-    variant: "outline",
-    label: "Button",
-    size: 4,
-  },
-}

stories/ui-components/Label.js

@@ -1,10 +0,0 @@
-import "../../_site/assets/css/just-the-docs-default.css"
-
-export const createLabel = ({ variant = "default", label, size = "4" }) => {
-  const btn = document.createElement("span")
-  btn.innerText = label
-
-  btn.className = ["label", `label-${variant}`, `fs-${size}`].join(" ")
-
-  return btn
-}

stories/ui-components/Label.stories.js

@@ -1,68 +0,0 @@
-import { createLabel } from "./Label"
-
-export default {
-  title: "UI Components/Label",
-  tags: ["autodocs"],
-  render: ({ label, ...args }) => {
-    return createLabel({ label, ...args })
-  },
-  argTypes: {
-    label: { control: "text" },
-    size: {
-      control: { type: "select" },
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["default", "purple", "blue", "green", "red", "yellow"],
-    },
-  },
-}
-
-export const Default = {
-  args: {
-    variant: "default",
-    label: "Label",
-    size: 4,
-  },
-}
-
-export const Purple = {
-  args: {
-    variant: "purple",
-    label: "Label",
-    size: 4,
-  },
-}
-
-export const Blue = {
-  args: {
-    variant: "blue",
-    label: "Label",
-    size: 4,
-  },
-}
-
-export const Green = {
-  args: {
-    variant: "green",
-    label: "Label",
-    size: 4,
-  },
-}
-
-export const Red = {
-  args: {
-    variant: "red",
-    label: "Label",
-    size: 4,
-  },
-}
-
-export const Yellow = {
-  args: {
-    variant: "yellow",
-    label: "Label",
-    size: 4,
-  },
-}