@gitlab/ui 72.11.1 → 72.12.0

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__;

package/dist/components/base/alert/alert.js

@@ -1,222 +0,0 @@
-import { alertVariantOptions, alertVariantIconMap, buttonCategoryOptions } from '../../../utils/constants';
-import CloseButton from '../../shared_components/close_button/close_button';
-import GlButton from '../button/button';
-import GlIcon from '../icon/icon';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-//
-var script = {
-  name: 'GlAlert',
-  components: {
-    GlIcon,
-    CloseButton,
-    GlButton
-  },
-  props: {
-    title: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * Controls the dismiss button's visibility.
-     */
-    dismissible: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Shows icon based on variant.
-     */
-    showIcon: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    /**
-     * Dismiss button's aria-label.
-     */
-    dismissLabel: {
-      type: String,
-      required: false,
-      default: 'Dismiss'
-    },
-    variant: {
-      type: String,
-      required: false,
-      default: alertVariantOptions.info,
-      validator: value => Object.keys(alertVariantOptions).includes(value)
-    },
-    /**
-     * If provided, renders the primary button as a link.
-     */
-    primaryButtonLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders a primary action button.
-     */
-    primaryButtonText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders the secondary button as a link.
-     */
-    secondaryButtonLink: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    /**
-     * If provided, renders a secondary action button.
-     */
-    secondaryButtonText: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    sticky: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-  computed: {
-    ariaLive() {
-      if ([alertVariantOptions.danger, alertVariantOptions.warning].includes(this.variant)) {
-        return 'assertive';
-      }
-      return 'polite';
-    },
-    role() {
-      if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
-        return 'alert';
-      }
-      return 'status';
-    },
-    iconName() {
-      return alertVariantIconMap[this.variant];
-    },
-    shouldRenderActions() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.actions || this.actionButtons.length);
-    },
-    actionButtons() {
-      return [{
-        text: this.primaryButtonText,
-        attrs: {
-          href: this.primaryButtonLink,
-          variant: 'confirm',
-          category: buttonCategoryOptions.primary
-        },
-        listeners: {
-          click: this.primaryButtonClicked
-        }
-      }, {
-        text: this.secondaryButtonText,
-        attrs: {
-          href: this.secondaryButtonLink,
-          variant: 'default',
-          category: buttonCategoryOptions.secondary
-        },
-        listeners: {
-          click: this.secondaryButtonClicked
-        }
-      }].reduce((acc, actionButton) => {
-        if (!actionButton.text) return acc;
-        const attrs = {
-          ...actionButton.attrs
-        };
-        if (!attrs.href) {
-          delete attrs.href;
-        }
-        acc.push({
-          ...actionButton,
-          attrs
-        });
-        return acc;
-      }, []);
-    },
-    variantClass() {
-      return `gl-alert-${this.variant}`;
-    }
-  },
-  methods: {
-    primaryButtonClicked(event) {
-      /**
-       * Emitted when the primary action button is clicked.
-       *
-       * @event primaryAction
-       * @type {object}
-       */
-      this.$emit('primaryAction', event);
-    },
-    secondaryButtonClicked(event) {
-      /**
-       * Emitted when the secondary action button is clicked.
-       *
-       * @event secondaryAction
-       * @type {object}
-       */
-      this.$emit('secondaryAction', event);
-    },
-    onDismiss() {
-      /**
-       * Emitted when the dismiss button is clicked.
-       *
-       * @event dismiss
-       * @type {object}
-       */
-      this.$emit('dismiss');
-    }
-  }
-};
-
-/* 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:[
-    'gl-alert',
-    { 'gl-alert-sticky': _vm.sticky },
-    { 'gl-alert-not-dismissible': !_vm.dismissible },
-    { 'gl-alert-no-icon': !_vm.showIcon },
-    { 'gl-alert-has-title': !!_vm.title },
-    _vm.variantClass ]},[(_vm.showIcon)?_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-content",attrs:{"role":_vm.role,"aria-live":_vm.ariaLive}},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],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__;