@gitlab/ui 72.11.0 → 72.12.0

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

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

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

@@ -1,24 +1,21 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.transparency.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const Gray = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-Gray.args = generateProps({ name: 't-gray-a', tokens: colorTokens['t-gray-a'] });
+Gray.args = generateProps({ tokens: COMPILED_TOKENS['t-gray-a'] });
 
 export const White = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template: `<div class="gl-bg-gray-900 gl-text-white">${template}</div>`,
+  components: colorTokenStoryOptions.components,
+  methods: colorTokenStoryOptions.methods,
+  template: `<div class="gl-bg-gray-900 gl-text-white">${colorTokenStoryOptions.template}</div>`,
 });
-White.args = generateProps({ name: 't-white-a', tokens: colorTokens['t-white-a'] });
+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,35 +1,17 @@
-import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
 import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+import { colorFromBackground } from '../utils/utils';
+import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 
-const CONTRAST_LEVELS = [
-  {
-    grade: 'F',
-    min: 0,
-    max: 3,
-  },
-  {
-    grade: 'AA+',
-    min: 3,
-    max: 4.5,
-  },
-  {
-    grade: 'AA',
-    min: 4.5,
-    max: 7,
-  },
-  {
-    grade: 'AAA',
-    min: 7,
-    max: 22,
-  },
-];
+export const components = {
+  GlColorContrast,
+};
 
 export const methods = {
   isAlpha(value) {
     return value.startsWith('rgba(');
   },
-  getTokenName(name, key) {
-    return [name, key].filter(Boolean).join('.');
+  getTokenName(token) {
+    return token.path.filter(Boolean).join('.');
   },
   getTextColorClass(value) {
     if (this.isAlpha(value)) return '';
@@ -39,71 +21,31 @@ export const methods = {
       'gl-text-white': textColorVariant === 'light',
     };
   },
-  getColorContrast(foreground = 'light', background) {
-    const foregroundColor = {
-      light: WHITE,
-      dark: GRAY_950,
-    };
-    // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
-    const foregroundLuminance = relativeLuminance(rgbFromHex(foregroundColor[foreground])) + 0.05;
-    const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
-
-    let score = foregroundLuminance / backgroundLuminance;
-    if (backgroundLuminance > foregroundLuminance) {
-      score = 1 / score;
-    }
-
-    const level = CONTRAST_LEVELS.find(({ min, max }) => {
-      return score >= min && score < max;
-    });
-
-    return {
-      score: (Math.round(score * 10) / 10).toFixed(1),
-      level,
-    };
-  },
-  getColorContrastClass(foreground, background) {
-    const { grade } = this.getColorContrast(foreground, background).level;
-    const isFail = grade === 'F';
-    const classes = {
-      light: isFail ? 'gl-inset-border-1-red-500 gl-text-red-500' : 'gl-text-gray-950',
-      dark: isFail ? 'gl-inset-border-1-red-300 gl-text-red-300' : 'gl-text-white',
-    };
-    return classes[foreground];
-  },
 };
 
-export const template = `
+export const template = (lightBackground = WHITE, darkBackground = GRAY_950) => `
   <ul
     class="gl-list-style-none gl-m-0 gl-p-0"
   >
     <li
-      v-for="(token, key) in tokens"
-      :key="key"
+      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="getTextColorClass(token.$value)"
-      :style="{ backgroundColor: token.$value }"
+      :class="getTextColorClass(token.value)"
+      :style="{ backgroundColor: token.value }"
     >
-      <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
+      <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>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-gray-950"
-          :class="getColorContrastClass('dark', token.$value)"
-        >
-          {{ getColorContrast('dark', token.$value).level.grade }}
-          {{ getColorContrast('dark', token.$value).score }}
-        </code>
-        <code
-          v-if="!isAlpha(token.$value)"
-          class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2 gl-bg-white"
-          :class="getColorContrastClass('light', token.$value)"
-        >
-          {{ getColorContrast('light', token.$value).level.grade }}
-          {{ getColorContrast('light', token.$value).score }}
-        </code>
+        <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: template(),
+};

package/src/utils/constants.js

@@ -6,6 +6,31 @@ function appendDefaultOption(options) {
 
 export const COMMA = ',';
 
+export const CONTRAST_LEVELS = [
+  {
+    grade: 'F',
+    min: 0,
+    max: 3,
+  },
+  {
+    grade: 'AA+',
+    min: 3,
+    max: 4.5,
+  },
+  {
+    grade: 'AA',
+    min: 4.5,
+    max: 7,
+  },
+  {
+    grade: 'AAA',
+    min: 7,
+    max: 22,
+  },
+];
+
+export const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
 export const LEFT_MOUSE_BUTTON = 0;
 
 export const glThemes = ['indigo', 'blue', 'light-blue', 'green', 'red', 'light-red'];

package/src/utils/utils.js

@@ -1,5 +1,5 @@
 import { isVisible } from 'bootstrap-vue/src/utils/dom';
-import { COMMA, labelColorOptions, focusableTags } from './constants';
+import { COMMA, CONTRAST_LEVELS, labelColorOptions, focusableTags } from './constants';
 
 export function debounceByAnimationFrame(fn) {
   let requestId;
@@ -90,6 +90,26 @@ export function colorFromBackground(backgroundColor, contrastRatio = 2.4) {
     : labelColorOptions.dark;
 }
 
+export function getColorContrast(foreground, background) {
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+  const backgroundLuminance = relativeLuminance(rgbFromHex(background)) + 0.05;
+  const foregroundLuminance = relativeLuminance(rgbFromHex(foreground)) + 0.05;
+
+  let score = backgroundLuminance / foregroundLuminance;
+  if (foregroundLuminance > backgroundLuminance) {
+    score = 1 / score;
+  }
+
+  const level = CONTRAST_LEVELS.find(({ min, max }) => {
+    return score >= min && score < max;
+  });
+
+  return {
+    score: (Math.round(score * 10) / 10).toFixed(1),
+    level,
+  };
+}
+
 export function uid() {
   return Math.random().toString(36).substring(2);
 }

package/dist/charts.js

@@ -1,14 +0,0 @@
-export { default as GlChart } from './components/charts/chart/chart';
-export { default as GlAreaChart } from './components/charts/area/area';
-export { default as GlBarChart } from './components/charts/bar/bar';
-export { default as GlGaugeChart } from './components/charts/gauge/gauge';
-export { default as GlLineChart } from './components/charts/line/line';
-export { default as GlChartLegend } from './components/charts/legend/legend';
-export { default as GlChartSeriesLabel } from './components/charts/series_label/series_label';
-export { default as GlChartTooltip } from './components/charts/tooltip/tooltip';
-export { default as GlHeatmap } from './components/charts/heatmap';
-export { default as GlColumnChart } from './components/charts/column/column';
-export { default as GlStackedColumnChart } from './components/charts/stacked_column/stacked_column';
-export { default as GlDiscreteScatterChart } from './components/charts/discrete_scatter/discrete_scatter';
-export { default as GlSingleStat } from './components/charts/single_stat/single_stat';
-export { default as GlSparklineChart } from './components/charts/sparkline/sparkline';

package/dist/components/base/accordion/accordion.js

@@ -1,73 +0,0 @@
-import uniqueId from 'lodash/uniqueId';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAccordion',
-  provide() {
-    const accordionId = uniqueId('accordion-set-');
-    // temporary fix for this issue: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2019#note_514671251
-    // MR for the upstream pending: https://github.com/vuejs/apollo/pull/1153
-    return {
-      defaultHeaderLevel: () => this.headerLevel,
-      accordionSetId: () => this.autoCollapse && accordionId
-    };
-  },
-  props: {
-    /*
-    When true, will have the effect of closing other accordion items when one accordion item is visible.
-     */
-    autoCollapse: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    /*
-    The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
-     */
-    headerLevel: {
-      type: Number,
-      required: true,
-      validator(value) {
-        return value > 0 && value <= 6;
-      }
-    }
-  }
-};
-
-/* 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',[_vm._t("default")],2)};
-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__;

package/dist/components/base/accordion/accordion_item.js

@@ -1,133 +0,0 @@
-import { BCollapse } from 'bootstrap-vue/esm/index.js';
-import uniqueId from 'lodash/uniqueId';
-import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
-import GlButton from '../button/button';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlAccordionItem',
-  components: {
-    BCollapse,
-    GlButton
-  },
-  directives: {
-    GlCollapseToggle: GlCollapseToggleDirective
-  },
-  inject: ['accordionSetId', 'defaultHeaderLevel'],
-  inheritAttrs: false,
-  model: {
-    prop: 'visible',
-    event: 'input'
-  },
-  props: {
-    /**
-     * Used to set the title of accordion link
-     */
-    title: {
-      type: String,
-      required: true
-    },
-    /**
-     * Used to set the title of accordion link when the content is visible
-     * */
-    titleVisible: {
-      type: String,
-      default: null,
-      required: false
-    },
-    /**
-     * When set, it will ensure the accordion item is initially visible
-     */
-    visible: {
-      type: Boolean,
-      default: false,
-      required: false
-    },
-    /**
-     * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.,
-     */
-    headerLevel: {
-      type: Number,
-      required: false,
-      default: null,
-      validator(value) {
-        return value > 0 && value <= 6;
-      }
-    },
-    /**
-     * Additional CSS class(es) to be applied to the header
-     */
-    headerClass: {
-      type: [String, Object, Array],
-      required: false,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      accordionItemId: uniqueId('accordion-item-'),
-      isVisible: this.visible
-    };
-  },
-  computed: {
-    headerComponent() {
-      const level = this.headerLevel || this.defaultHeaderLevel();
-      return `h${level}`;
-    },
-    accordion() {
-      return this.accordionSetId() || undefined;
-    },
-    icon() {
-      return this.isVisible ? 'chevron-down' : 'chevron-right';
-    },
-    buttonTitle() {
-      return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
-    }
-  },
-  watch: {
-    isVisible: {
-      immediate: true,
-      handler(isVisible) {
-        this.$emit('input', isVisible);
-      }
-    }
-  }
-};
-
-/* 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',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
-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__;