@gitlab/ui 72.11.0 → 72.12.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [72.12.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.11.1...v72.12.0) (2024-01-24)
+
+
+### Features
+
+* **DesignTokens:** create GlColorContrast component ([17dfa56](https://gitlab.com/gitlab-org/gitlab-ui/commit/17dfa56d0839681a741195910a86debeaede491b))
+
+## [72.11.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.11.0...v72.11.1) (2024-01-23)
+
+
+### Performance Improvements
+
+* **SafeHtml:** Add unbind hook to the directive ([2b428b1](https://gitlab.com/gitlab-org/gitlab-ui/commit/2b428b1d19c57a8ebd4d92d318a3abb2461745f7))
+
 # [72.11.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v72.10.0...v72.11.0) (2024-01-23)
 
 

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 16:37:57 GMT
+ * Generated on Wed, 24 Jan 2024 01:06:27 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 16:37:57 GMT
+ * Generated on Wed, 24 Jan 2024 01:06:27 GMT
  */
 
 :root.gl-dark {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 23 Jan 2024 16:37:57 GMT
+ * Generated on Wed, 24 Jan 2024 01:06:27 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, 23 Jan 2024 16:37:57 GMT
+ * Generated on Wed, 24 Jan 2024 01:06:27 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, 23 Jan 2024 16:37:57 GMT
+// Generated on Wed, 24 Jan 2024 01:06:27 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 23 Jan 2024 16:37:57 GMT
+// Generated on Wed, 24 Jan 2024 01:06:27 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.11.0",
+  "version": "72.12.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/directives/safe_html/safe_html.js

@@ -24,7 +24,12 @@ const transform = (el, binding) => {
   }
 };
 
+const clear = (el) => {
+  el.textContent = '';
+};
+
 export const SafeHtmlDirective = {
   bind: transform,
   update: transform,
+  unbind: clear,
 };

package/src/directives/safe_html/safe_html.spec.js

@@ -129,4 +129,21 @@ describe('safe html directive', () => {
       expect(wrapper.html()).toEqual('<div>click here</div>');
     });
   });
+
+  describe('unbind', () => {
+    it('should clear the text content during unbind', () => {
+      createComponent();
+      wrapper.destroy();
+
+      expect(wrapper.element.textContent).toEqual('');
+    });
+
+    it('should clear the text content with custom HTML during unbind', () => {
+      const customHtml = '<div>custom html</div>';
+      createComponent({ html: customHtml });
+      wrapper.destroy();
+
+      expect(wrapper.element.textContent).toEqual('');
+    });
+  });
 });

package/src/internal/color_contrast/color_contrast.md

@@ -0,0 +1,8 @@
+## Usage
+
+`GlColorContrast` is an **internal** component to display color contrast
+scores and levels for design token stories.
+
+`GlColorContrast` accepts `foreground` and `background` color props to
+calculate a contrast score (e.g. `4.5`) and level (e.g. `AA`) consistent
+with [WCAG 2.1 1.4.3: Contrast (Minimum) level](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).

package/src/internal/color_contrast/color_contrast.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import ColorContrast from './color_contrast.vue';
+
+describe('color contrast component', () => {
+  let wrapper;
+
+  const createComponent = (props) => {
+    wrapper = shallowMount(ColorContrast, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  it('renders AAA level and score', () => {
+    createComponent({ foreground: '#000', background: '#fff' });
+    expect(wrapper.text()).toBe('AAA 21.0');
+  });
+
+  it('renders AA level and score', () => {
+    createComponent({ foreground: '#666', background: '#fff' });
+    expect(wrapper.text()).toBe('AA 5.7');
+  });
+
+  it('renders AA+ level and score', () => {
+    createComponent({ foreground: '#888', background: '#fff' });
+    expect(wrapper.text()).toBe('AA+ 3.5');
+  });
+
+  it('renders F level and score', () => {
+    createComponent({ foreground: '#999', background: '#fff' });
+    expect(wrapper.text()).toBe('F 2.8');
+  });
+});

package/src/internal/color_contrast/color_contrast.stories.js

@@ -0,0 +1,41 @@
+import GlColorContrast from './color_contrast.vue';
+import readme from './color_contrast.md';
+
+const components = { GlColorContrast };
+
+const generateProps = ({ foreground = '#ffffff', background = '#1f75cb' } = {}) => ({
+  foreground,
+  background,
+});
+
+export const Default = (args, { argTypes }) => ({
+  components,
+  props: Object.keys(argTypes),
+  template: `
+    <gl-color-contrast
+      :foreground="foreground"
+      :background="background"
+    />
+  `,
+});
+Default.args = generateProps();
+
+export default {
+  title: 'internal/color_contrast',
+  component: GlColorContrast,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    foreground: {
+      control: 'color',
+    },
+    background: {
+      control: 'color',
+    },
+  },
+};

package/src/internal/color_contrast/color_contrast.vue

@@ -0,0 +1,52 @@
+<script>
+import { HEX_REGEX } from '../../utils/constants';
+import { getColorContrast } from '../../utils/utils';
+
+export default {
+  name: 'GlColorContrast',
+  props: {
+    foreground: {
+      type: String,
+      required: true,
+      validator: (value) => HEX_REGEX.test(value),
+    },
+    background: {
+      type: String,
+      required: true,
+      validator: (value) => HEX_REGEX.test(value),
+    },
+  },
+  computed: {
+    isValidColorCombination() {
+      return HEX_REGEX.test(this.foreground) && HEX_REGEX.test(this.background);
+    },
+    classes() {
+      if (!this.isValidColorCombination) return 'gl-text-gray-950';
+      const { grade } = this.contrast.level;
+      const isFail = grade === 'F';
+      const contrastScore = getColorContrast('#fff', this.background).score > 4.5;
+      const textClass = contrastScore ? 'gl-text-white' : 'gl-text-gray-950';
+      const failClasses = contrastScore
+        ? 'gl-inset-border-1-red-300 gl-text-red-300'
+        : 'gl-inset-border-1-red-500 gl-text-red-500';
+      return [textClass, isFail ? failClasses : ''];
+    },
+    contrast() {
+      return getColorContrast(this.foreground, this.background);
+    },
+  },
+};
+</script>
+
+<template>
+  <code
+    class="gl-w-10 gl-text-center gl-rounded-base gl-font-xs gl-p-2"
+    :class="classes"
+    :style="{ backgroundColor: background }"
+  >
+    <template v-if="isValidColorCombination">
+      {{ contrast.level.grade }} {{ contrast.score }}
+    </template>
+    <template v-else>???</template>
+  </code>
+</template>

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

@@ -1,40 +1,54 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.dark.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.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.data_viz.dark.tokens.stories.js

@@ -1,54 +1,37 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.data_viz.dark.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const DataVizGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizGreen.args = generateProps({
-  name: 'data-viz.green',
-  tokens: colorTokens['data-viz'].green,
+  ...colorTokenStoryOptions,
 });
+DataVizGreen.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].green });
 
 export const DataVizAqua = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizAqua.args = generateProps({ name: 'data-viz.aqua', tokens: colorTokens['data-viz'].aqua });
+DataVizAqua.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].aqua });
 
 export const DataVizBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizBlue.args = generateProps({ name: 'data-viz.blue', tokens: colorTokens['data-viz'].blue });
+DataVizBlue.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
 export const DataVizMagenta = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizMagenta.args = generateProps({
-  name: 'data-viz.magenta',
-  tokens: colorTokens['data-viz'].magenta,
+  ...colorTokenStoryOptions,
 });
+DataVizMagenta.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].magenta });
 
 export const DataVizOrange = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizOrange.args = generateProps({
-  name: 'data-viz.orange',
-  tokens: colorTokens['data-viz'].orange,
+  ...colorTokenStoryOptions,
 });
+DataVizOrange.args = generateProps({ 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,54 +1,37 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.data_viz.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 DataVizGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizGreen.args = generateProps({
-  name: 'data-viz.green',
-  tokens: colorTokens['data-viz'].green,
+  ...colorTokenStoryOptions,
 });
+DataVizGreen.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].green });
 
 export const DataVizAqua = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizAqua.args = generateProps({ name: 'data-viz.aqua', tokens: colorTokens['data-viz'].aqua });
+DataVizAqua.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].aqua });
 
 export const DataVizBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-DataVizBlue.args = generateProps({ name: 'data-viz.blue', tokens: colorTokens['data-viz'].blue });
+DataVizBlue.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].blue });
 
 export const DataVizMagenta = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizMagenta.args = generateProps({
-  name: 'data-viz.magenta',
-  tokens: colorTokens['data-viz'].magenta,
+  ...colorTokenStoryOptions,
 });
+DataVizMagenta.args = generateProps({ tokens: COMPILED_TOKENS['data-viz'].magenta });
 
 export const DataVizOrange = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-DataVizOrange.args = generateProps({
-  name: 'data-viz.orange',
-  tokens: colorTokens['data-viz'].orange,
+  ...colorTokenStoryOptions,
 });
+DataVizOrange.args = generateProps({ 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,58 +1,43 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.theme.dark.tokens.json';
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.dark.json';
+import { colorTokenStoryOptions } from './common_story_options';
 
-const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
-  name,
-  tokens,
-});
+const generateProps = ({ tokens = {} } = {}) => ({ tokens });
 
 export const ThemeIndigo = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeIndigo.args = generateProps({ name: 'theme.indigo', tokens: colorTokens.theme.indigo });
+ThemeIndigo.args = generateProps({ tokens: COMPILED_TOKENS.theme.indigo });
 
 export const ThemeBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeBlue.args = generateProps({ name: 'theme.blue', tokens: colorTokens.theme.blue });
+ThemeBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme.blue });
 
 export const ThemeLightBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightBlue.args = generateProps({
-  name: 'theme.light-blue',
-  tokens: colorTokens.theme['light-blue'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-blue'] });
 
 export const ThemeGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeGreen.args = generateProps({ name: 'theme.green', tokens: colorTokens.theme.green });
+ThemeGreen.args = generateProps({ tokens: COMPILED_TOKENS.theme.green });
 
 export const ThemeRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeRed.args = generateProps({ name: 'theme.red', tokens: colorTokens.theme.red });
+ThemeRed.args = generateProps({ tokens: COMPILED_TOKENS.theme.red });
 
 export const ThemeLightRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightRed.args = generateProps({
-  name: 'theme.light-red',
-  tokens: colorTokens.theme['light-red'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightRed.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-red'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {

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

@@ -1,58 +1,43 @@
-import { methods, template } from './common_story_options';
-import colorTokens from './color.theme.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 ThemeIndigo = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeIndigo.args = generateProps({ name: 'theme.indigo', tokens: colorTokens.theme.indigo });
+ThemeIndigo.args = generateProps({ tokens: COMPILED_TOKENS.theme.indigo });
 
 export const ThemeBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeBlue.args = generateProps({ name: 'theme.blue', tokens: colorTokens.theme.blue });
+ThemeBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme.blue });
 
 export const ThemeLightBlue = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightBlue.args = generateProps({
-  name: 'theme.light-blue',
-  tokens: colorTokens.theme['light-blue'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightBlue.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-blue'] });
 
 export const ThemeGreen = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeGreen.args = generateProps({ name: 'theme.green', tokens: colorTokens.theme.green });
+ThemeGreen.args = generateProps({ tokens: COMPILED_TOKENS.theme.green });
 
 export const ThemeRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
+  ...colorTokenStoryOptions,
 });
-ThemeRed.args = generateProps({ name: 'theme.red', tokens: colorTokens.theme.red });
+ThemeRed.args = generateProps({ tokens: COMPILED_TOKENS.theme.red });
 
 export const ThemeLightRed = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  methods,
-  template,
-});
-ThemeLightRed.args = generateProps({
-  name: 'theme.light-red',
-  tokens: colorTokens.theme['light-red'],
+  ...colorTokenStoryOptions,
 });
+ThemeLightRed.args = generateProps({ tokens: COMPILED_TOKENS.theme['light-red'] });
 
 // eslint-disable-next-line storybook/csf-component
 export default {