@gitlab/ui 77.2.0 → 77.3.0

package/src/components/base/new_dropdowns/dropdown.scss

@@ -64,7 +64,6 @@
     &.gl-new-dropdown-toggle-no-caret .gl-new-dropdown-chevron {
       @include gl-display-none;
     }
-
   }
 
   .gl-new-dropdown-toggle {
@@ -110,7 +109,15 @@
     &.btn-sm .gl-new-dropdown-chevron {
       @include gl-mx-0;
     }
-    
+  }
+
+  .gl-new-dropdown-caret-only {
+    // optically center the caret
+    @include gl-pl-2;
+
+    &.btn-sm {
+      @include gl-pl-0;
+    }
   }
 
   $dropdown-content-padding: 0.25rem;
@@ -178,3 +185,52 @@
     }
   }
 }
+
+.btn-group {
+  .gl-new-dropdown:not(:last-child) {
+    .gl-new-dropdown-toggle {
+      @include gl-rounded-top-right-none;
+      @include gl-rounded-bottom-right-none;
+    }
+  }
+
+  .gl-new-dropdown:not(:first-child) {
+    .gl-new-dropdown-toggle {
+      @include gl-rounded-top-left-none;
+      @include gl-rounded-bottom-left-none;
+
+      // Prevent double borders when buttons are next to each other
+      margin-left: -1px;
+    }
+  }
+
+  // The dropdown toggle of a "split" is by design supposed to be the last
+  // child of a button group, so only apply styles for that.
+  .gl-new-dropdown:last-child {
+    .gl-new-dropdown-caret-only {
+      &.btn-confirm,
+      &.btn-danger {
+        margin-left: 1px;
+      }
+
+      &:disabled,
+      &.disabled,
+      &[class*='-secondary'] {
+        margin-left: -1px;
+      }
+    }
+  }
+
+  .gl-new-dropdown:hover {
+    .gl-new-dropdown-toggle {
+      @include gl-z-index-1;
+    }
+  }
+
+  .gl-new-dropdown {
+    .gl-new-dropdown-toggle:focus,
+    .gl-new-dropdown-toggle:active {
+      @include gl-z-index-1;
+    }
+  }
+}

package/src/components/base/new_dropdowns/listbox/listbox.md

@@ -8,7 +8,7 @@ When option is selected, the dropdown will be closed and focus set on the toggle
 **Multi-select:** Selecting an option will not update the toggle, but it can be customized
 providing `toggleText` property. Also, selecting or deselecting an item won't close the dropdown.
 
-### Icon-only listbox
+## Icon-only listbox
 
 Icon-only listboxes must have an accessible name.
 You can provide this with the combination of `toggleText` and `textSrOnly` props.
@@ -27,12 +27,12 @@ Optionally, you can use `no-caret` to remove the caret and `category="tertiary"`
 >
 ```
 
-### Opening the listbox
+## Opening the listbox
 
 Listbox will open on toggle button click (if it was previously closed).
 On open, `GlCollapsibleListbox` will emit the `shown` event.
 
-### Closing the listbox
+## Closing the listbox
 
 The listbox is closed by any of the following:
 
@@ -42,21 +42,21 @@ The listbox is closed by any of the following:
 
 After closing, `GlCollapsibleListbox` emits a `hidden` event.
 
-### Selecting items
+## Selecting items
 
 Set the `v-model` on the listbox to have 2-way data binding for the selected items in the listbox.
 Alternatively, you can set `selected` property to the array of selected items
 `value` properties (for multi-select) or to the selected item `value` property for a single-select.
 On selection the listbox will emit the `select` event with the selected values.
 
-### Resetting the selection
+## Resetting the selection
 
 `GlCollapsibleListbox` can render a reset button if the `headerText` and
 `resetButtonLabel` props are provided.
 When clicking on the reset button, a `reset` event is emitted. It is the consumer's responsibility
 to listen to that event and to update the model as needed.
 
-### Setting listbox options
+## Setting listbox options
 
 Use the `items` prop to provide options to the listbox. Each item can be
 either an option or a group. Below are the expected shapes of these
@@ -77,7 +77,7 @@ type Group = {
 type ItemsProp = Array<Option> | Array<Group>
 ```
 
-#### Options
+### Options
 
 The `value` property of options must be unique across all options
 provided to the listbox, as it's used as a primary key.
@@ -100,7 +100,7 @@ template. If you want to render a custom template for items, use the
 </gl-collapsible-listbox>
 ```
 
-#### Groups
+### Groups
 
 Options can be contained within groups. A group has a required `text`
 property, which must be unique across all groups within the listbox, as
@@ -123,7 +123,15 @@ To render custom group labels, use the `group-label` scoped slot:
 </gl-collapsible-listbox>
 ```
 
-#### Search
+### Dealing with long option texts
+
+- Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
+such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
+`GlTruncate`.
+- If the toggle text reflects the selected option text, it might be necessary to truncate
+it too by overriding the `#toggle` slot.
+
+## Search
 
 To filter out items by  search query set `searchable` property to `true`.
 Listbox will render the search field and will emit `search` event with the `searchQuery` value.
@@ -146,10 +154,6 @@ Screen reader will announce this text when the list is updated.
 </gl-collapsible-listbox>
 ```
 
-#### Dealing with long option texts
+## Split dropdown
 
-- Some options might have long non-wrapping text that would overflow the dropdown maximum width. In
-such cases, it's recommended to override the `#list-item` slot and to truncate the option text using
-`GlTruncate`.
-- If the toggle text reflects the selected option text, it might be necessary to truncate
-it too by overriding the `#toggle` slot.
+See [button group documentation](/docs/base-button-group--docs#split-dropdowns).

package/src/components/base/sorting/sorting.vue

@@ -105,14 +105,6 @@ export default {
         ? translate('GlSorting.sortAscending', 'Sort direction: ascending')
         : translate('GlSorting.sortDescending', 'Sort direction: descending');
     },
-    listboxToggleClass() {
-      return [
-        this.dropdownToggleClass,
-        'gl-rounded-top-right-none!',
-        'gl-rounded-bottom-right-none!',
-        'gl-focus-z-index-1',
-      ];
-    },
   },
   methods: {
     toggleSortDirection() {
@@ -150,7 +142,7 @@ export default {
       :toggle-text="text"
       :items="sortOptions"
       :selected="sortBy"
-      :toggle-class="listboxToggleClass"
+      :toggle-class="dropdownToggleClass"
       :class="dropdownClass"
       placement="right"
       :block="block"

package/src/tokens/color.dark.tokens.stories.js

@@ -1,54 +1,24 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
-
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Default.args = generateProps({
+export const Default = createDesignTokenStory({
   tokens: {
     white: COMPILED_TOKENS.white,
     black: COMPILED_TOKENS.black,
   },
 });
 
-export const Gray = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Gray.args = generateProps({ tokens: COMPILED_TOKENS.gray });
+export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS.gray });
 
-export const Blue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Blue.args = generateProps({ tokens: COMPILED_TOKENS.blue });
+export const Blue = createDesignTokenStory({ tokens: COMPILED_TOKENS.blue });
 
-export const Green = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Green.args = generateProps({ tokens: COMPILED_TOKENS.green });
+export const Green = createDesignTokenStory({ tokens: COMPILED_TOKENS.green });
 
-export const Orange = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Orange.args = generateProps({ tokens: COMPILED_TOKENS.orange });
+export const Orange = createDesignTokenStory({ tokens: COMPILED_TOKENS.orange });
 
-export const Red = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Red.args = generateProps({ tokens: COMPILED_TOKENS.red });
+export const Red = createDesignTokenStory({ tokens: COMPILED_TOKENS.red });
 
-export const Purple = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Purple.args = generateProps({ tokens: COMPILED_TOKENS.purple });
+export const Purple = createDesignTokenStory({ tokens: COMPILED_TOKENS.purple });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/color.data_viz.dark.tokens.stories.js

@@ -1,37 +1,17 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });
 
-export const DataVizGreen = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizGreen.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].green });
+export const DataVizAqua = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].aqua });
 
-export const DataVizAqua = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizAqua.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].aqua });
+export const DataVizBlue = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
-export const DataVizBlue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
+export const DataVizMagenta = createDesignTokenStory({
+  tokens: COMPILED_TOKENS['data-viz'].magenta,
 });
-DataVizBlue.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
-export const DataVizMagenta = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizMagenta.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].magenta });
-
-export const DataVizOrange = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizOrange.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].orange });
+export const DataVizOrange = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].orange });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/color.data_viz.tokens.stories.js

@@ -1,37 +1,17 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+export const DataVizGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].green });
 
-export const DataVizGreen = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizGreen.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].green });
+export const DataVizAqua = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].aqua });
 
-export const DataVizAqua = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizAqua.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].aqua });
+export const DataVizBlue = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
-export const DataVizBlue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
+export const DataVizMagenta = createDesignTokenStory({
+  tokens: COMPILED_TOKENS['data-viz'].magenta,
 });
-DataVizBlue.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
-export const DataVizMagenta = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizMagenta.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].magenta });
-
-export const DataVizOrange = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-DataVizOrange.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].orange });
+export const DataVizOrange = createDesignTokenStory({ tokens: COMPILED_TOKENS['data-viz'].orange });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/color.theme.dark.tokens.stories.js

@@ -1,43 +1,19 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });
 
-export const ThemeIndigo = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeIndigo.args = generateProps({ tokens: COMPILED_TOKENS.theme.indigo });
-
-export const ThemeBlue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme.blue });
+export const ThemeBlue = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.blue });
 
-export const ThemeLightBlue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
+export const ThemeLightBlue = createDesignTokenStory({
+  tokens: COMPILED_TOKENS.theme['light-blue'],
 });
-ThemeLightBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-blue'] });
 
-export const ThemeGreen = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeGreen.args = generateProps({ tokens: COMPILED_TOKENS.theme.green });
+export const ThemeGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.green });
 
-export const ThemeRed = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeRed.args = generateProps({ tokens: COMPILED_TOKENS.theme.red });
+export const ThemeRed = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.red });
 
-export const ThemeLightRed = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeLightRed.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-red'] });
+export const ThemeLightRed = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme['light-red'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/color.theme.tokens.stories.js

@@ -1,43 +1,19 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+export const ThemeIndigo = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.indigo });
 
-export const ThemeIndigo = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeIndigo.args = generateProps({ tokens: COMPILED_TOKENS.theme.indigo });
-
-export const ThemeBlue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme.blue });
+export const ThemeBlue = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.blue });
 
-export const ThemeLightBlue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
+export const ThemeLightBlue = createDesignTokenStory({
+  tokens: COMPILED_TOKENS.theme['light-blue'],
 });
-ThemeLightBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-blue'] });
 
-export const ThemeGreen = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeGreen.args = generateProps({ tokens: COMPILED_TOKENS.theme.green });
+export const ThemeGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.green });
 
-export const ThemeRed = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeRed.args = generateProps({ tokens: COMPILED_TOKENS.theme.red });
+export const ThemeRed = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme.red });
 
-export const ThemeLightRed = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-ThemeLightRed.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-red'] });
+export const ThemeLightRed = createDesignTokenStory({ tokens: COMPILED_TOKENS.theme['light-red'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/color.tokens.stories.js

@@ -1,54 +1,24 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
-
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Default.args = generateProps({
+export const Default = createDesignTokenStory({
   tokens: {
     white: COMPILED_TOKENS.white,
     black: COMPILED_TOKENS.black,
   },
 });
 
-export const Gray = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Gray.args = generateProps({ tokens: COMPILED_TOKENS.gray });
+export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS.gray });
 
-export const Blue = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Blue.args = generateProps({ tokens: COMPILED_TOKENS.blue });
+export const Blue = createDesignTokenStory({ tokens: COMPILED_TOKENS.blue });
 
-export const Green = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Green.args = generateProps({ tokens: COMPILED_TOKENS.green });
+export const Green = createDesignTokenStory({ tokens: COMPILED_TOKENS.green });
 
-export const Orange = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Orange.args = generateProps({ tokens: COMPILED_TOKENS.orange });
+export const Orange = createDesignTokenStory({ tokens: COMPILED_TOKENS.orange });
 
-export const Red = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Red.args = generateProps({ tokens: COMPILED_TOKENS.red });
+export const Red = createDesignTokenStory({ tokens: COMPILED_TOKENS.red });
 
-export const Purple = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
-});
-Purple.args = generateProps({ tokens: COMPILED_TOKENS.purple });
+export const Purple = createDesignTokenStory({ tokens: COMPILED_TOKENS.purple });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/color.transparency.tokens.stories.js

@@ -1,21 +1,12 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
-import { colorTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
+export const Gray = createDesignTokenStory({ tokens: COMPILED_TOKENS['t-gray-a'] });
 
-export const Gray = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTokenStoryOptions,
+export const White = createDesignTokenStory({
+  tokens: COMPILED_TOKENS['t-white-a'],
+  containerClass: 'gl-bg-gray-900 gl-text-white',
 });
-Gray.args = generateProps({ tokens: COMPILED_TOKENS['t-gray-a'] });
-
-export const White = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: colorTokenStoryOptions.components,
-  methods: colorTokenStoryOptions.methods,
-  template: `<div class="gl-bg-gray-900 gl-text-white">${colorTokenStoryOptions.template}</div>`,
-});
-White.args = generateProps({ tokens: COMPILED_TOKENS['t-white-a'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

package/src/tokens/common_story_options.js

@@ -1,71 +1,25 @@
 import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
-import { colorFromBackground } from '../utils/utils';
-import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
+import TokensStory from './tokens_story.vue';
 
-export const components = {
-  GlColorContrast,
-};
-
-export const methods = {
-  isAlpha(value) {
-    return value.startsWith('rgba(');
-  },
-  isBackgroundColor(property) {
-    return property === 'backgroundColor';
-  },
-  getTokenName(token) {
-    return token.path.filter(Boolean).join('.');
-  },
-  getClasses(property, value) {
-    if (this.isAlpha(value)) return '';
-    if (!this.isBackgroundColor(property)) return '';
-    const textColorVariant = colorFromBackground(value, 4.5);
-    return {
-      'gl-text-gray-950': textColorVariant === 'dark',
-      'gl-text-white': textColorVariant === 'light',
-    };
-  },
-  getStyle(property, value) {
-    if (this.isBackgroundColor(property)) {
-      return { backgroundColor: value };
-    }
-    return { color: value };
-  },
-};
-
-const colorTemplate = (
-  property = 'backgroundColor',
-  lightBackground = WHITE,
-  darkBackground = GRAY_950
-) => `
-  <ul
-    class="gl-list-style-none gl-m-0 gl-p-0"
-  >
-    <li
-      v-for="token in tokens"
-      :key="token.name"
-      class="gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3"
-      :class="getClasses('${property}', token.value)"
-      :style="getStyle('${property}', token.value)"
-    >
-      <code class="gl-reset-color">{{ getTokenName(token) }}</code>
-      <div class="gl-display-flex gl-align-items-center gl-gap-3">
-        <code class="gl-reset-color">{{ token.value }}</code>
-        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${darkBackground}" />
-        <gl-color-contrast v-if="!isAlpha(token.value)" :foreground="token.value" background="${lightBackground}" />
-      </div>
-    </li>
-  </ul>
-`;
-
-export const colorTokenStoryOptions = {
-  components,
-  methods,
-  template: colorTemplate('backgroundColor'),
-};
+export const createDesignTokenStory = ({
+  tokens = {},
+  isBackgroundColorStory = true,
+  containerClass = '',
+} = {}) => {
+  const Story = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: {
+      TokensStory,
+    },
+    provide: {
+      containerClass,
+      isBackgroundColorStory,
+      lightBackground: WHITE,
+      darkBackground: GRAY_950,
+    },
+    template: `<tokens-story v-bind="$props" />`,
+  });
+  Story.args = { tokens };
 
-export const colorTextTokenStoryOptions = {
-  components,
-  methods,
-  template: colorTemplate('color'),
+  return Story;
 };

package/src/tokens/text.tokens.stories.js

@@ -1,13 +1,10 @@
 import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
-import { colorTextTokenStoryOptions } from './common_story_options';
+import { createDesignTokenStory } from './common_story_options';
 
-const generateProps = ({ tokens = {} } = {}) => ({ tokens });
-
-export const Default = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  ...colorTextTokenStoryOptions,
+export const Default = createDesignTokenStory({
+  tokens: COMPILED_TOKENS.text,
+  isBackgroundColorStory: false,
 });
-Default.args = generateProps({ name: 'text', tokens: COMPILED_TOKENS.text });
 
 // eslint-disable-next-line storybook/csf-component
 export default {