Merge branch 'main' into add-chromatic

This PR moves over the changes from https://github.com/just-the-docs/just-the-docs/pull/1112, namely making the `.gitignore` more descriptive and bringing it to parity with the recommendations from Jekyll.

---------

Co-authored-by: Peter Mosses <18308236+pdmosses@users.noreply.github.com>

.babelrc.json

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

.github/workflows/chromatic.yml

@@ -0,0 +1,51 @@
+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: Set up Ruby 3.2
+    - name: Setup Ruby 3.2
-      uses: actions/setup-ruby@v1
+      uses: ruby/setup-ruby@v1
       with:
         ruby-version: "3.2"
 

.gitignore

@@ -1,8 +1,33 @@
+# 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

@@ -0,0 +1,17 @@
+/** @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

@@ -0,0 +1,14 @@
+/** @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,7 +17,25 @@ 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:
 
-- N/A
+- 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
 
 ## Release v0.6.0
 

Gemfile.lock

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

_config.yml

@@ -48,6 +48,7 @@ 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"
@@ -140,11 +141,7 @@ 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: auto
+color_scheme: nil
-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,12 +11,5 @@
         </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 or site.color_scheme_options and site.color_scheme_options.switch_options %}
+  {% if site.aux_links %}
     {% include components/aux_nav.html %}
   {% endif %}
 </div>

_includes/head.html

@@ -14,48 +14,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 
-  {% if site.color_scheme_options and site.color_scheme_options.enable_localstorage %}
+  <link rel="stylesheet" href="{{ '/assets/css/just-the-docs-default.css' | relative_url }}">
-  <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 %}
 

_includes/head_nav.html

@@ -28,7 +28,7 @@
     {%- assign color_scheme = "light" -%}
   {%- endif %}
   @import "./color_schemes/light";
-  {% unless color_scheme == "light" or color_scheme == "auto" %}
+  {% unless color_scheme == "light" %}
   @import "./color_schemes/{{ color_scheme }}";
   {% endunless %}
   {{ activation }}

_includes/icons/icons.html

@@ -10,7 +10,4 @@
   {% 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

@@ -1,29 +0,0 @@
-<!-- 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-100);
+  @include btn-color($white, $purple-300);
 }
 
 .btn-blue {

_sass/layout.scss

@@ -140,32 +140,11 @@
   }
 }
 
-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 !default;
+  roboto, "Helvetica Neue", arial, sans-serif, "Segoe UI Emoji" !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" and site.color_scheme != "auto" %}
+{% if site.color_scheme and site.color_scheme != "nil" %}
   {% assign color_scheme = site.color_scheme %}
 {% else %}
   {% assign color_scheme = "light" %}

assets/js/just-the-docs.js

@@ -76,7 +76,9 @@ function initNav() {
 // 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;
+  }
 }
 
 {%- if site.search_enabled != false %}
@@ -465,56 +467,13 @@ function searchLoaded(index, docs) {
 // Switch theme
 
 jtd.getTheme = function() {
-  var cssFile = document.querySelector('[rel="stylesheet"]');
+  var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href');
-  if(cssFile.hasAttribute('media')) return 'auto';
-
-  var cssFileHref = cssFile.getAttribute('href');
   return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4);
 }
 
 jtd.setTheme = function(theme) {
-  function createThemeStylesheet(theme, media) {
+  var cssFile = document.querySelector('[rel="stylesheet"]');
-    var link  = document.createElement('link');
+  cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | relative_url }}' + theme + '.css');
-    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
@@ -576,9 +535,6 @@ 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
+system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Segoe UI Emoji"
 ```
 
 ABCDEFGHIJKLMNOPQRSTUVWXYZ

just-the-docs.gemspec

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

package.json

@@ -1,13 +1,31 @@
 {
   "name": "just-the-docs",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "description": "A modern Jekyll theme for documentation",
-  "repository": "just-the-docs/just-the-docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/just-the-docs/just-the-docs.git"
+  },
   "license": "MIT",
-  "bugs": "https://github.com/just-the-docs/just-the-docs/issues",
+  "bugs": {
+    "url": "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.2",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.7",
     "stylelint": "^15.10.3",
     "stylelint-config-standard-scss": "^10.0.0"
   },
@@ -16,7 +34,10 @@
     "lint:css": "stylelint '**/*.scss'",
     "lint:formatting": "prettier --check '**/*.{scss,js,json}'",
     "format": "prettier --write '**/*.{scss,js,json}'",
-    "test": "npm run lint"
+    "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"
   },
   "stylelint": {
     "ignoreFiles": [
@@ -43,5 +64,7 @@
     "singleQuote": false,
     "tabWidth": 2,
     "trailingComma": "es5"
-  }
+  },
+  "homepage": "https://just-the-docs.com",
+  "_id": "just-the-docs@0.5.0"
 }

stories/Introduction.mdx

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,68 @@
+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,
+  },
+}