@gitlab/ui 77.2.0 → 77.4.0

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 {

package/src/tokens/tokens_story.vue

@@ -0,0 +1,73 @@
+<script>
+import { colorFromBackground } from '../utils/utils';
+import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
+
+export default {
+  name: 'TokensStory',
+  components: {
+    GlColorContrast,
+  },
+  inject: ['isBackgroundColorStory', 'lightBackground', 'darkBackground', 'containerClass'],
+  props: {
+    tokens: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  methods: {
+    isAlpha(value) {
+      return value.startsWith('rgba(');
+    },
+    getTokenName(token) {
+      return token.path.filter(Boolean).join('.');
+    },
+    getClasses(value) {
+      if (this.isAlpha(value)) return '';
+      if (!this.isBackgroundColorStory) return '';
+
+      const textColorVariant = colorFromBackground(value, 4.5);
+      return {
+        'gl-text-gray-950': textColorVariant === 'dark',
+        'gl-text-white': textColorVariant === 'light',
+      };
+    },
+    getStyle(value) {
+      if (this.isBackgroundColorStory) {
+        return { backgroundColor: value };
+      }
+
+      return { color: value };
+    },
+  },
+};
+</script>
+
+<template>
+  <div :class="containerClass">
+    <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(token.value)"
+        :style="getStyle(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>
+  </div>
+</template>