@gitlab/ui 77.2.0 → 77.4.0

package/dist/tokens/common_story_options.js

@@ -1,74 +1,34 @@
 import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
-import { colorFromBackground } from '../utils/utils';
-import GlColorContrast from '../internal/color_contrast/color_contrast';
+import TokensStory from './tokens_story';
 
-const components = {
-  GlColorContrast
-};
-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
-      };
-    }
+const createDesignTokenStory = function () {
+  let {
+    tokens = {},
+    isBackgroundColorStory = true,
+    containerClass = ''
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const Story = (args, _ref) => {
+    let {
+      argTypes
+    } = _ref;
     return {
-      color: value
+      props: Object.keys(argTypes),
+      components: {
+        TokensStory
+      },
+      provide: {
+        containerClass,
+        isBackgroundColorStory,
+        lightBackground: WHITE,
+        darkBackground: GRAY_950
+      },
+      template: `<tokens-story v-bind="$props" />`
     };
-  }
-};
-const colorTemplate = function () {
-  let property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'backgroundColor';
-  let lightBackground = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : WHITE;
-  let darkBackground = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : GRAY_950;
-  return `
-  <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>
-`;
-};
-const colorTokenStoryOptions = {
-  components,
-  methods,
-  template: colorTemplate('backgroundColor')
-};
-const colorTextTokenStoryOptions = {
-  components,
-  methods,
-  template: colorTemplate('color')
+  };
+  Story.args = {
+    tokens
+  };
+  return Story;
 };
 
-export { colorTextTokenStoryOptions, colorTokenStoryOptions, components, methods };
+export { createDesignTokenStory };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 13:41:10 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 13:41:11 GMT
  */
 
 :root.gl-dark {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 13:41:11 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 27 Feb 2024 18:50:13 GMT
+ * Generated on Wed, 28 Feb 2024 13:41:10 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 18:50:13 GMT
+// Generated on Wed, 28 Feb 2024 13:41:11 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 27 Feb 2024 18:50:13 GMT
+// Generated on Wed, 28 Feb 2024 13:41:10 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/dist/tokens/tokens_story.js

@@ -0,0 +1,83 @@
+import { colorFromBackground } from '../utils/utils';
+import GlColorContrast from '../internal/color_contrast/color_contrast';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  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 */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(_vm.getTokenName(token)))]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;