@gitlab/ui 72.1.0 → 72.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "72.1.0",
+  "version": "72.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,22 +94,22 @@
     "@gitlab/eslint-plugin": "19.2.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "5.0.1",
-    "@gitlab/svgs": "3.72.0",
+    "@gitlab/svgs": "3.73.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.5.3",
-    "@storybook/addon-docs": "7.5.3",
-    "@storybook/addon-essentials": "7.5.3",
-    "@storybook/addon-storyshots": "7.5.3",
-    "@storybook/addon-storyshots-puppeteer": "7.5.3",
-    "@storybook/addon-viewport": "7.5.3",
-    "@storybook/builder-webpack5": "7.5.3",
-    "@storybook/theming": "7.5.3",
-    "@storybook/vue": "7.5.3",
-    "@storybook/vue-webpack5": "7.5.3",
-    "@storybook/vue3": "7.5.3",
-    "@storybook/vue3-webpack5": "7.5.3",
+    "@storybook/addon-a11y": "7.6.5",
+    "@storybook/addon-docs": "7.6.5",
+    "@storybook/addon-essentials": "7.6.5",
+    "@storybook/addon-storyshots": "7.6.5",
+    "@storybook/addon-storyshots-puppeteer": "7.6.5",
+    "@storybook/addon-viewport": "7.6.5",
+    "@storybook/builder-webpack5": "7.6.5",
+    "@storybook/theming": "7.6.5",
+    "@storybook/vue": "7.6.5",
+    "@storybook/vue-webpack5": "7.6.5",
+    "@storybook/vue3": "7.6.5",
+    "@storybook/vue3-webpack5": "7.6.5",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -127,7 +127,7 @@
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.55.0",
+    "eslint": "8.56.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.6.15",
@@ -161,8 +161,8 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.5.3",
-    "storybook-dark-mode": "3.0.1",
+    "storybook": "7.6.5",
+    "storybook-dark-mode": "3.0.3",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
     "vue": "2.7.15",

package/src/components/base/alert/alert.stories.js

@@ -77,7 +77,7 @@ export const CustomActions = () => ({
     <gl-alert>
       Lorem ipsum dolor sit amet
       <template #actions>
-        <gl-toggle v-model="toggle" />
+        <gl-toggle v-model="toggle" label="label-name" label-position="hidden" />
       </template>
     </gl-alert>`,
 });

package/src/scss/utilities.scss

@@ -2183,6 +2183,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600 !important
 }
 
+.gl-inset-border-1-red-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300
+}
+
+.gl-inset-border-1-red-300\! {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300 !important
+}
+
 .gl-inset-border-1-red-400 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-400
 }
@@ -2744,6 +2752,14 @@ $gl-animate-skeleton-loader-max-width: 64 * $grid-size;
   color: $orange-900 !important;
 }
 
+.gl-text-red-300 {
+  color: $red-300;
+}
+
+.gl-text-red-300\! {
+  color: $red-300 !important;
+}
+
 .gl-text-red-500 {
   color: $red-500;
 }

package/src/scss/utility-mixins/box-shadow.scss

@@ -113,6 +113,10 @@
   box-shadow: inset 0 0 0 $gl-border-size-1 $orange-600;
 }
 
+@mixin gl-inset-border-1-red-300 {
+  box-shadow: inset 0 0 0 $gl-border-size-1 $red-300;
+}
+
 @mixin gl-inset-border-1-red-400 {
   box-shadow: inset 0 0 0 $gl-border-size-1 $red-400;
 }

package/src/scss/utility-mixins/color.scss

@@ -169,6 +169,10 @@
   color: $orange-900;
 }
 
+@mixin gl-text-red-300 {
+  color: $red-300;
+}
+
 @mixin gl-text-red-500 {
   color: $red-500;
 }

package/src/tokens/common_story_options.js

@@ -1,17 +1,76 @@
-import { colorFromBackground } from '../utils/utils';
+import { colorFromBackground, relativeLuminance, rgbFromHex } from '../utils/utils';
+import { WHITE, GRAY_950 } from '../../dist/tokens/js/tokens';
+
+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 methods = {
+  isAlpha(value) {
+    return value.startsWith('rgba(');
+  },
   getTokenName(name, key) {
     return [name, key].filter(Boolean).join('.');
   },
   getTextColorClass(value) {
-    if (value.startsWith('rgba(')) return '';
+    if (this.isAlpha(value)) return '';
     const textColorVariant = colorFromBackground(value, 4.5);
     return {
       'gl-text-gray-950': textColorVariant === 'dark',
       '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 = `
@@ -21,12 +80,30 @@ export const template = `
     <li
       v-for="(token, key) in tokens"
       :key="key"
-      class="gl-display-flex gl-justify-content-space-between gl-gap-3 gl-p-3"
+      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 }"
     >
       <code class="gl-reset-color">{{ getTokenName(name, key) }}</code>
-      <code class="gl-reset-color">{{ token.$value }}</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-900"
+          :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>
+      </div>
     </li>
   </ul>
 `;