@scm-manager/ui-core 3.0.0-20240024-101702

package/.storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@scm-manager/babel-preset"]
+}

package/.storybook/RemoveThemesPlugin.js

@@ -0,0 +1,57 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+class RemoveThemesPlugin {
+  apply (compiler) {
+    compiler.hooks.compilation.tap('RemoveThemesPlugin', (compilation) => {
+
+      HtmlWebpackPlugin.getHooks(compilation).beforeAssetTagGeneration.tapAsync(
+        'RemoveThemesPlugin',
+        (data, cb) => {
+
+          // remove generated style-loader bundles from the page
+          // there should be a better way, which does not generate the bundles at all
+          // but for now it works
+          if (data.assets.js) {
+            data.assets.js = data.assets.js.filter(bundle => !bundle.startsWith("ui-theme-"))
+              .filter(bundle => !bundle.startsWith("runtime~ui-theme-"))
+          }
+
+          // remove css links to avoid conflicts with the themes
+          // so we remove all and add our own via preview-head.html
+          if (data.assets.css) {
+            data.assets.css = data.assets.css.filter(css => !css.startsWith("ui-theme-"))
+          }
+
+          // Tell webpack to move on
+          cb(null, data)
+        }
+      )
+    })
+  }
+}
+
+module.exports = RemoveThemesPlugin

package/.storybook/main.js

@@ -0,0 +1,92 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const path = require("path");
+const fs = require("fs");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemoveThemesPlugin = require("./RemoveThemesPlugin");
+const ReactDOM = require("react-dom");
+
+const root = path.resolve("..");
+
+
+const themedir = path.join(root, "ui-styles", "src");
+
+ReactDOM.createPortal = (node) => node;
+
+const themes = fs
+  .readdirSync(themedir)
+  .map((filename) => path.parse(filename))
+  .filter((p) => p.ext === ".scss")
+  .reduce((entries, current) => ({ ...entries, [`ui-theme-${current.name}`]: path.join(themedir, current.base) }), {});
+
+module.exports = {
+  typescript: { reactDocgen: false },
+  core: {
+    builder: "webpack5",
+  },
+  stories: ["../docs/**/*.stories.mdx", "../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "storybook-addon-i18next",
+    "storybook-addon-themes",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+    "storybook-addon-pseudo-states"
+  ],
+  framework: "@storybook/react",
+  webpackFinal: async (config) => {
+    // add our themes to webpack entry points
+    config.entry = {
+      main: config.entry,
+      ...themes,
+    };
+
+    // create separate css files for our themes
+    config.plugins.push(
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+        ignoreOrder: false,
+      })
+    );
+
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+    });
+
+    // the html-webpack-plugin adds the generated css and js files to the iframe,
+    // which overrides our manually loaded css files.
+    // So we use a custom plugin which uses a hook of html-webpack-plugin
+    // to filter our themes from the output.
+    config.plugins.push(new RemoveThemesPlugin());
+
+    // force cjs instead of esm
+    // https://github.com/tannerlinsley/react-query/issues/3513
+    config.resolve.alias["react-query/devtools"] = require.resolve("react-query/devtools");
+
+    return config;
+  },
+};

package/.storybook/preview-head.html

@@ -0,0 +1,25 @@
+<!--
+    MIT License
+
+    Copyright (c) 2020-present Cloudogu GmbH and Contributors
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+-->
+
+<link id="ui-theme" data-theme="light" rel="stylesheet" type="text/css" href="/ui-theme-light.css">

package/.storybook/preview.js

@@ -0,0 +1,95 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { withI18next } from "storybook-addon-i18next";
+import React, {useEffect} from "react";
+import withApiProvider from "./withApiProvider";
+import { withThemes } from 'storybook-addon-themes/react';
+
+let i18n = i18next;
+
+// only use fetch backend for storybook
+// and not for storyshots
+if (!process.env.JEST_WORKER_ID) {
+  const Backend = require("i18next-fetch-backend");
+  i18n = i18n.use(Backend.default);
+}
+
+i18n.use(initReactI18next).init({
+  whitelist: ["en", "de", "es"],
+  lng: "en",
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false,
+  },
+  react: {
+    useSuspense: false,
+  },
+  backend: {
+    loadPath: "/locales/{{lng}}/{{ns}}.json",
+    init: {
+      credentials: "same-origin",
+    },
+  },
+});
+
+export const decorators = [
+  withI18next({
+    i18n,
+    languages: {
+      en: "English",
+      de: "Deutsch",
+      es: "Spanisch",
+    },
+  }),
+  withApiProvider,
+  withThemes
+];
+
+const Decorator = ({children, themeName}) => {
+  useEffect(() => {
+    const link = document.querySelector("#ui-theme");
+    if (link && link["data-theme"] !== themeName) {
+      link.href = `ui-theme-${themeName}.css`;
+      link["data-theme"] = themeName;
+    }
+  }, [themeName]);
+  return <>{children}</>
+};
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  themes: {
+    Decorator,
+    clearable: false,
+    default: "light",
+    list: [
+      { name: "light", color: "#fff" },
+      { name: "highcontrast", color: "#050514" },
+      { name: "dark", color: "#121212" },
+    ],
+  }
+};

package/.storybook/withApiProvider.js

@@ -0,0 +1,46 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import * as React from "react";
+import { ApiProvider } from "@scm-manager/ui-api";
+
+const withApiProvider = (storyFn) => {
+  return React.createElement(ApiProvider, {
+    index: {
+      version: "x.y.z",
+      _links: {}
+    },
+    me: {
+      name: "trillian",
+      displayName: "Trillian McMillan",
+      mail: "trillian@hitchhiker.com",
+      groups: [],
+      _links: {}
+    },
+    devtools: false,
+    children: storyFn()
+  });
+}
+
+export default withApiProvider;

package/docs/introduction.stories.mdx

@@ -0,0 +1,64 @@
+import { Meta } from "@storybook/addon-docs";
+import { Button } from "../src";
+
+<Meta title="Introduction"/>
+
+# Buttons
+
+The `@scm-manager/ui-buttons` library provides [atoms](https://atomicdesign.bradfrost.com/chapter-2/#atoms) implemented
+as minimal wrappers around native html elements styled to match the general SCM-Manager aesthetic.
+
+## Components
+
+There are three actionable components available. Styling is consistent amongst them and all have the required `variant` property.
+
+1. [Button](?path=/story/components--button)
+2. [Link Button](?path=/story/components--link-button)
+3. [External Link Button](?path=/story/components--external-link-button)
+
+## Usage
+
+Actionable components serve a dedicated purpose. It is therefore important to know when and how to use them.
+
+### Variants
+
+There are four variants available to each of the three button types, varying in importance.
+
+<table>
+  <thead>
+  <tr>
+    <th>Emphasis</th>
+    <th>Button Variant</th>
+    <th>Usage Examples</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>Very High</td>
+    <td><Button variant="signal">Signal</Button></td>
+    <td>Destructive actions</td>
+  </tr>
+  <tr>
+    <td>High</td>
+    <td><Button variant="primary">Primary</Button></td>
+    <td>Form submit</td>
+  </tr>
+  <tr>
+    <td>Normal</td>
+    <td><Button variant="secondary">Secondary</Button></td>
+    <td>Cancel action in dialog</td>
+  </tr>
+  <tr>
+    <td>Low</td>
+    <td><Button variant="tertiary">Tertiary</Button></td>
+    <td>Circumstantially relevant action on page with many actionable elements</td>
+  </tr>
+  </tbody>
+</table>
+
+## Content
+
+Buttons exclusively contain text and no icons. Icons tend to be ambiguous and not always applicable which leads to inconsistent
+and cluttered layouts.
+
+Button text should be short, concise and describe the action performed.

package/docs/usage.stories.mdx

@@ -0,0 +1,22 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { Button } from "../src";
+
+<Meta title="Usage" parameters={{
+  storyshots: { disable: true }
+}} />
+
+In confirmation dialogs, there are two actions.<br/>
+One to cancel the current process and one to confirm it.<br/>
+Aborting is always the secondary action, confirmation always the primary.
+Focus is always on the cancelling action.
+
+<Story name="Confirmation Dialog">
+  <div>
+    <h4>Delete User</h4>
+    <p>Do you really want to delete this user ?</p>
+    <div>
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="primary">Delete</Button>
+    </div>
+  </div>
+</Story>

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@scm-manager/ui-core",
+  "version": "3.0.0-20240024-101702",
+  "main": "./src/index.ts",
+  "license": "MIT",
+  "scripts": {
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-router-dom": "^5.3.1",
+    "classnames": "^2.3.1",
+    "react-hook-form": "7",
+    "react-i18next": "11",
+    "react-query": "3",
+    "styled-components": "5"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.15",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
+    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-dropdown-menu": "2.0.5",
+    "@radix-ui/react-popover": "1.0.6",
+    "@radix-ui/react-tooltip": "1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "mousetrap": "1.6.5"
+  },
+  "devDependencies": {
+    "@scm-manager/prettier-config": "^2.11.1",
+    "@scm-manager/eslint-config": "^2.17.0",
+    "@scm-manager/tsconfig": "^2.12.0",
+    "@scm-manager/babel-preset": "^2.13.1",
+    "@types/mousetrap": "1.6.5",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "12.1.5",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-a11y": "^6.5.10",
+    "storybook-addon-i18next": "^1.3.0",
+    "storybook-addon-pseudo-states": "^1.15.1",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-storyshots-puppeteer": "^6.4.20",
+    "@storybook/addon-storyshots": "^6.4.20",
+    "storybook-addon-mock": "^3.2.0",
+    "storybook-addon-themes": "^6.1.0",
+    "storybook-react-router": "^1.0.8",
+    "mini-css-extract-plugin": "^1.6.2",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "5",
+    "@babel/core": "^7.19.0",
+    "i18next": "^19.9.2",
+    "react-i18next": "11",
+    "i18next-fetch-backend": "^2.3.1",
+    "babel-loader": "^8.2.5",
+    "depcheck": "^1.4.3",
+    "jest-extended": "3.1.0"
+  },
+  "prettier": "@scm-manager/prettier-config",
+  "eslintConfig": {
+    "extends": "@scm-manager/eslint-config"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "jest-extended/all"
+    ]
+  }
+}

package/src/base/buttons/Button.stories.tsx

@@ -0,0 +1,89 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { ComponentProps } from "react";
+
+import {
+  Button as ButtonComponent,
+  ButtonVariantList,
+  ButtonVariants,
+  ExternalLinkButton as ExternalLinkButtonComponent,
+  LinkButton as LinkButtonComponent,
+} from "./Button";
+import StoryRouter from "storybook-react-router";
+import { StoryFn } from "@storybook/react";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: "Components",
+  component: null,
+  subcomponents: {
+    Button: ButtonComponent,
+    LinkButton: LinkButtonComponent,
+    ExternalLinkButton: ExternalLinkButtonComponent,
+  },
+  argTypes: {
+    variant: {
+      options: ButtonVariantList,
+      control: { type: "select" },
+    },
+  },
+  decorators: [StoryRouter()],
+  parameters: {
+    storyshots: { disable: true },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const ButtonTemplate: StoryFn<ComponentProps<typeof ButtonComponent>> = (args) => <ButtonComponent {...args} />;
+const LinkButtonTemplate: StoryFn<ComponentProps<typeof LinkButtonComponent>> = (args) => (
+  <LinkButtonComponent {...args} />
+);
+const ExternalLinkButtonTemplate: StoryFn<ComponentProps<typeof ExternalLinkButtonComponent>> = (args) => (
+  <ExternalLinkButtonComponent {...args} />
+);
+
+export const Button = ButtonTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Button.args = {
+  children: "Button",
+  variant: ButtonVariants.PRIMARY,
+  disabled: false,
+};
+
+export const LinkButton = LinkButtonTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+LinkButton.args = {
+  children: "Link Button",
+  to: "/repos",
+  variant: ButtonVariants.PRIMARY,
+};
+
+export const ExternalLinkButton = ExternalLinkButtonTemplate.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+ExternalLinkButton.args = {
+  children: "External Link Button",
+  href: "https://scm-manager.org",
+  variant: ButtonVariants.PRIMARY,
+};

package/src/base/buttons/Button.test.stories.mdx

@@ -0,0 +1,74 @@
+import { Meta, Story } from "@storybook/addon-docs";
+import { Button, ButtonVariantList } from "./Button";
+
+<Meta title="Tests"/>
+
+<Story name="Light States" parameters={{
+  pseudo: {
+    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
+    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
+    active: ButtonVariantList.map(variant => `#${variant}-Active`),
+  },
+  themes: {
+    default: 'light',
+  },
+}}>
+  <table>
+    <tr>
+      <th>STATE</th>
+      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
+    </tr>
+    {["Normal", "Hover", "Active", "Focus", "Disabled", "Loading"].map(state => <tr>
+      <td>{state}</td>
+      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
+                                                    isLoading={state === "Loading"}
+                                                    variant={variant}>Button</Button></td>)}
+    </tr>)}
+  </table>
+</Story>
+
+<Story name="Dark States" parameters={{
+  pseudo: {
+    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
+    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
+    active: ButtonVariantList.map(variant => `#${variant}-Active`),
+  },
+  themes: {
+    default: 'dark',
+  },
+}}>
+  <table>
+    <tr>
+      <th>STATE</th>
+      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
+    </tr>
+    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
+      <td>{state}</td>
+      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
+                                                    variant={variant}>Button</Button></td>)}
+    </tr>)}
+  </table>
+</Story>
+
+<Story name="High-Contrast States" parameters={{
+  pseudo: {
+    hover: ButtonVariantList.map(variant => `#${variant}-Hover`),
+    focus: ButtonVariantList.map(variant => `#${variant}-Focus`),
+    active: ButtonVariantList.map(variant => `#${variant}-Active`),
+  },
+  themes: {
+    default: 'highcontrast',
+  },
+}}>
+  <table>
+    <tr>
+      <th>STATE</th>
+      {ButtonVariantList.map(variant => <th>{variant.toUpperCase()}</th>)}
+    </tr>
+    {["Normal", "Hover", "Active", "Focus", "Disabled"].map(state => <tr>
+      <td>{state}</td>
+      {ButtonVariantList.map(variant => <td><Button id={`${variant}-${state}`} disabled={state === "Disabled"}
+                                                    variant={variant}>Button</Button></td>)}
+    </tr>)}
+  </table>
+</Story>