@gitlab/ui 71.2.0 → 71.4.0

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 30 Nov 2023 19:25:01 GMT
+// Generated on Mon, 04 Dec 2023 16:16:35 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
@@ -71,3 +71,124 @@ $blue-100: #064787;
 $blue-50: #033464;
 $white: #333238;
 $black: #fff;
+$theme-light-red-950: #faf2f1;
+$theme-light-red-900: #f6d9d5;
+$theme-light-red-800: #ebada2;
+$theme-light-red-700: #e07f6f;
+$theme-light-red-600: #d36250;
+$theme-light-red-500: #c24b38;
+$theme-light-red-400: #b53a26;
+$theme-light-red-300: #a02e1c;
+$theme-light-red-200: #8b2212;
+$theme-light-red-100: #751709;
+$theme-light-red-50: #5c1105;
+$theme-red-950: #f4e9e7;
+$theme-red-900: #ecd3d0;
+$theme-red-800: #e3bab5;
+$theme-red-700: #d59086;
+$theme-red-600: #c66e60;
+$theme-red-500: #ad4a3b;
+$theme-red-400: #a13322;
+$theme-red-300: #8f2110;
+$theme-red-200: #761405;
+$theme-red-100: #580d02;
+$theme-red-50: #380700;
+$theme-green-950: #dde9de;
+$theme-green-900: #b1d6b5;
+$theme-green-800: #8cc497;
+$theme-green-700: #69af7d;
+$theme-green-600: #499767;
+$theme-green-500: #308258;
+$theme-green-400: #25744c;
+$theme-green-300: #1b653f;
+$theme-green-200: #155635;
+$theme-green-100: #0e4328;
+$theme-green-50: #052e19;
+$theme-light-blue-950: #dde6ee;
+$theme-light-blue-900: #c1d4e6;
+$theme-light-blue-800: #a0bedc;
+$theme-light-blue-700: #74a3d3;
+$theme-light-blue-600: #4f8bc7;
+$theme-light-blue-500: #3476b9;
+$theme-light-blue-400: #2268ae;
+$theme-light-blue-300: #145aa1;
+$theme-light-blue-200: #0e4d8d;
+$theme-light-blue-100: #0c4277;
+$theme-light-blue-50: #0a3764;
+$theme-blue-950: #cdd8e3;
+$theme-blue-900: #b9cadc;
+$theme-blue-800: #a6bdd5;
+$theme-blue-700: #81a5c9;
+$theme-blue-600: #628eb9;
+$theme-blue-500: #4977a5;
+$theme-blue-400: #346596;
+$theme-blue-300: #235180;
+$theme-blue-200: #153c63;
+$theme-blue-100: #0b2640;
+$theme-blue-50: #04101c;
+$theme-indigo-950: #f1f1ff;
+$theme-indigo-900: #dbdbf8;
+$theme-indigo-800: #c7c7f2;
+$theme-indigo-700: #a2a2e6;
+$theme-indigo-600: #8181d7;
+$theme-indigo-500: #6666c4;
+$theme-indigo-400: #5252b5;
+$theme-indigo-300: #41419f;
+$theme-indigo-200: #303083;
+$theme-indigo-100: #222261;
+$theme-indigo-50: #14143d;
+$data-viz-orange-950: #fae8d1;
+$data-viz-orange-900: #f5d6b3;
+$data-viz-orange-800: #eebd8c;
+$data-viz-orange-700: #e99b60;
+$data-viz-orange-600: #e07e41;
+$data-viz-orange-500: #c95d2e;
+$data-viz-orange-400: #b14f18;
+$data-viz-orange-300: #92430a;
+$data-viz-orange-200: #6f3500;
+$data-viz-orange-100: #5e2f05;
+$data-viz-orange-50: #4b2707;
+$data-viz-magenta-950: #ffe3eb;
+$data-viz-magenta-900: #ffccdb;
+$data-viz-magenta-800: #fcacc5;
+$data-viz-magenta-700: #f88aaf;
+$data-viz-magenta-600: #e86e9a;
+$data-viz-magenta-500: #cf4d81;
+$data-viz-magenta-400: #b93d71;
+$data-viz-magenta-300: #9a2e5d;
+$data-viz-magenta-200: #7c214f;
+$data-viz-magenta-100: #661e3a;
+$data-viz-magenta-50: #541d31;
+$data-viz-blue-950: #e9ebff;
+$data-viz-blue-900: #d2dcff;
+$data-viz-blue-800: #b7c6ff;
+$data-viz-blue-700: #97acff;
+$data-viz-blue-600: #7992f5;
+$data-viz-blue-500: #617ae2;
+$data-viz-blue-400: #4e65cd;
+$data-viz-blue-300: #3f51ae;
+$data-viz-blue-200: #374291;
+$data-viz-blue-100: #303470;
+$data-viz-blue-50: #2a2b59;
+$data-viz-aqua-950: #b5fefd;
+$data-viz-aqua-900: #93f2ef;
+$data-viz-aqua-800: #5edee3;
+$data-viz-aqua-700: #32c5d2;
+$data-viz-aqua-600: #00acc4;
+$data-viz-aqua-500: #0090b1;
+$data-viz-aqua-400: #007b9b;
+$data-viz-aqua-300: #006381;
+$data-viz-aqua-200: #00516c;
+$data-viz-aqua-100: #004059;
+$data-viz-aqua-50: #00344b;
+$data-viz-green-950: #ddfab7;
+$data-viz-green-900: #c6ed94;
+$data-viz-green-800: #b0d97b;
+$data-viz-green-700: #94c25e;
+$data-viz-green-600: #81ac41;
+$data-viz-green-500: #619025;
+$data-viz-green-400: #4e7f0e;
+$data-viz-green-300: #366800;
+$data-viz-green-200: #275600;
+$data-viz-green-100: #1a4500;
+$data-viz-green-50: #133a03;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 30 Nov 2023 19:25:01 GMT
+// Generated on Mon, 04 Dec 2023 16:16:35 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "71.2.0",
+  "version": "71.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -87,8 +87,8 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "19.2.0",

package/src/components/utilities/truncate_text/truncate_text.spec.js

@@ -1,3 +1,4 @@
+import { nextTick } from 'vue';
 import { mount } from '@vue/test-utils';
 import { createMockDirective, getBinding } from '~helpers/vue_mock_directive';
 import GlButton from '../../base/button/button.vue';
@@ -133,4 +134,17 @@ describe('GlTruncateText', () => {
       });
     });
   });
+
+  it('passes `toggleButtonProps` to toggle button', async () => {
+    const buttonTextClasses = 'foo-bar';
+
+    createComponent({ toggleButtonProps: { buttonTextClasses } });
+
+    getBinding(findContentEl(), 'gl-resize-observer').value({
+      target: { scrollHeight: 20, offsetHeight: 10 },
+    });
+    await nextTick();
+
+    expect(findButton().props('buttonTextClasses')).toBe(buttonTextClasses);
+  });
 });

package/src/components/utilities/truncate_text/truncate_text.stories.js

@@ -6,11 +6,13 @@ const generateProps = ({
   showLessText = 'Show less',
   lines = 3,
   mobileLines = 10,
+  toggleButtonProps = {},
 } = {}) => ({
   showMoreText,
   showLessText,
   lines,
   mobileLines,
+  toggleButtonProps,
 });
 
 const content = () => [...Array(15)].map((_, i) => `line ${i + 1}`).join('\n');

package/src/components/utilities/truncate_text/truncate_text.vue

@@ -44,6 +44,16 @@ export default {
       required: false,
       default: 10,
     },
+    /**
+     * Props that are passed to the toggle button
+     */
+    toggleButtonProps: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -103,8 +113,12 @@ export default {
       <!-- @slot Text content -->
       <slot></slot>
     </article>
-    <gl-button v-if="showTruncationToggle" variant="link" @click="toggleTruncation">{{
-      truncationToggleText
-    }}</gl-button>
+    <gl-button
+      v-if="showTruncationToggle"
+      v-bind="toggleButtonProps"
+      variant="link"
+      @click="toggleTruncation"
+      >{{ truncationToggleText }}</gl-button
+    >
   </section>
 </template>

package/src/tokens/color.data_viz.dark.tokens.json

@@ -0,0 +1,344 @@
+{
+  "data-viz": {
+    "green": {
+      "50": {
+        "$value": "#133a03",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "100": {
+        "$value": "#1a4500",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "200": {
+        "$value": "#275600",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "300": {
+        "$value": "#366800",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "400": {
+        "$value": "#4e7f0e",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "500": {
+        "$value": "#619025",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "600": {
+        "$value": "#81ac41",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "700": {
+        "$value": "#94c25e",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "800": {
+        "$value": "#b0d97b",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "900": {
+        "$value": "#c6ed94",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "950": {
+        "$value": "#ddfab7",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      }
+    },
+    "aqua": {
+      "50": {
+        "$value": "#00344b",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "100": {
+        "$value": "#004059",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "200": {
+        "$value": "#00516c",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "300": {
+        "$value": "#006381",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "400": {
+        "$value": "#007b9b",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "500": {
+        "$value": "#0090b1",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "600": {
+        "$value": "#00acc4",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "700": {
+        "$value": "#32c5d2",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "800": {
+        "$value": "#5edee3",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "900": {
+        "$value": "#93f2ef",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "950": {
+        "$value": "#b5fefd",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      }
+    },
+    "blue": {
+      "50": {
+        "$value": "#2a2b59",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "100": {
+        "$value": "#303470",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "200": {
+        "$value": "#374291",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "300": {
+        "$value": "#3f51ae",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "400": {
+        "$value": "#4e65cd",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "500": {
+        "$value": "#617ae2",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "600": {
+        "$value": "#7992f5",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "700": {
+        "$value": "#97acff",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "800": {
+        "$value": "#b7c6ff",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "900": {
+        "$value": "#d2dcff",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "950": {
+        "$value": "#e9ebff",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      }
+    },
+    "magenta": {
+      "50": {
+        "$value": "#541d31",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "100": {
+        "$value": "#661e3a",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "200": {
+        "$value": "#7c214f",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "300": {
+        "$value": "#9a2e5d",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "400": {
+        "$value": "#b93d71",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "500": {
+        "$value": "#cf4d81",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "600": {
+        "$value": "#e86e9a",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "700": {
+        "$value": "#f88aaf",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "800": {
+        "$value": "#fcacc5",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "900": {
+        "$value": "#ffccdb",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "950": {
+        "$value": "#ffe3eb",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      }
+    },
+    "orange": {
+      "50": {
+        "$value": "#4b2707",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "100": {
+        "$value": "#5e2f05",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "200": {
+        "$value": "#6f3500",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "300": {
+        "$value": "#92430a",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "400": {
+        "$value": "#b14f18",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "500": {
+        "$value": "#c95d2e",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "600": {
+        "$value": "#e07e41",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "700": {
+        "$value": "#e99b60",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "800": {
+        "$value": "#eebd8c",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "900": {
+        "$value": "#f5d6b3",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      },
+      "950": {
+        "$value": "#fae8d1",
+        "$type": "color",
+        "themeable": false,
+        "prefix": false
+      }
+    }
+  }
+}

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

@@ -0,0 +1,56 @@
+import { methods, template } from './common_story_options';
+import colorTokens from './color.data_viz.dark.tokens.json';
+
+const generateProps = ({ name = '', tokens = colorTokens } = {}) => ({
+  name,
+  tokens,
+});
+
+export const DataVizGreen = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+DataVizGreen.args = generateProps({
+  name: 'data-viz.green',
+  tokens: colorTokens['data-viz'].green,
+});
+
+export const DataVizAqua = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+DataVizAqua.args = generateProps({ name: 'data-viz.aqua', tokens: colorTokens['data-viz'].aqua });
+
+export const DataVizBlue = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+DataVizBlue.args = generateProps({ name: 'data-viz.blue', tokens: colorTokens['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,
+});
+
+export const DataVizOrange = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  methods,
+  template,
+});
+DataVizOrange.args = generateProps({
+  name: 'data-viz.orange',
+  tokens: colorTokens['data-viz'].orange,
+});
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/color/data-viz/dark',
+};

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

@@ -52,5 +52,5 @@ DataVizOrange.args = generateProps({
 
 // eslint-disable-next-line storybook/csf-component
 export default {
-  title: 'tokens/color/data-viz',
+  title: 'tokens/color/data-viz/light',
 };