@gitlab/ui 68.5.0 → 68.7.0

package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.js

@@ -0,0 +1,44 @@
+import iconsPath from '@gitlab/svgs/dist/icons.svg';
+
+const createButton = () => {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.classList.add(
+    'btn',
+    'btn-default',
+    'btn-md',
+    'gl-button',
+    'btn-default-secondary',
+    'btn-icon'
+  );
+  button.dataset.title = 'Copy to clipboard';
+
+  // Create an SVG element with the correct namespace
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('role', 'img');
+  svg.setAttribute('aria-hidden', 'true');
+  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
+
+  // Create a 'use' element with the correct namespace
+  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `${iconsPath}#copy-to-clipboard`);
+
+  svg.appendChild(use);
+  button.appendChild(svg);
+
+  return button;
+};
+
+export class CopyCodeElement extends HTMLElement {
+  constructor() {
+    super();
+    const btn = createButton();
+    const wrapper = this.parentNode;
+
+    this.appendChild(btn);
+    btn.addEventListener('click', async () => {
+      const textToCopy = wrapper.innerText;
+      await navigator.clipboard.writeText(textToCopy);
+    });
+  }
+}

package/src/components/experimental/duo/chat/components/duo_chat_message/copy_code_element.spec.js

@@ -0,0 +1,64 @@
+import { CopyCodeElement } from './copy_code_element';
+
+describe('copy-code element', () => {
+  customElements.define('copy-code', CopyCodeElement);
+  const code = 'function sum(a, b) {\n  return a + b;\n}';
+  const findCustomElement = () => document.querySelector('copy-code');
+  const findButton = () => document.querySelector('copy-code button');
+  const findButtonIcon = () => document.querySelector('copy-code button svg use');
+
+  beforeEach(() => {
+    document.body.innerHTML = `<div><pre><code>${code}</code></pre><copy-code></copy-code></div>`;
+  });
+
+  it('should create a button', () => {
+    expect(customElements.get('copy-code')).toBeDefined();
+  });
+
+  it('does not setup shadowDom on the custom element', () => {
+    expect(findCustomElement().shadowRoot).toBeNull();
+  });
+
+  it('adds a button to the DOM as a direct child', () => {
+    expect(findButton()).toBeDefined();
+  });
+
+  it('adds the correct icon to the button', () => {
+    expect(findButtonIcon().getAttribute('href')).toContain('#copy-to-clipboard');
+  });
+
+  describe('interaction', () => {
+    let copiedText = '';
+
+    beforeEach(() => {
+      Object.defineProperty(HTMLElement.prototype, 'innerText', {
+        get() {
+          return this.textContent.trim();
+        },
+        configurable: true,
+      });
+
+      global.navigator.clipboard = {
+        writeText: jest.fn().mockImplementation((text) => {
+          copiedText = text;
+          return Promise.resolve();
+        }),
+        readText: jest.fn().mockImplementation(() => Promise.resolve(copiedText)),
+      };
+    });
+
+    afterEach(() => {
+      // In JSDOM, `innerText` doesn't exist on the prototype.
+      // However, we can not set it to `undefined` as the property description should be an object
+      Object.defineProperty(HTMLElement.prototype, 'innerText', {});
+
+      jest.resetAllMocks();
+    });
+
+    it('copies the content of the parentNode to the clipboard when the button is clicked', async () => {
+      findButton().click();
+      const text = await navigator.clipboard.readText();
+      expect(text).toBe(code);
+    });
+  });
+});

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -15,4 +15,19 @@
   p:last-of-type {
     @include gl-mb-0;
   }
+
+  copy-code {
+    @include gl-absolute;
+    @include gl-transition-medium;
+    @include gl-opacity-0;
+    @include gl-right-4;
+    @include gl-top-3;
+  }
+
+  .js-markdown-code.markdown-code-block:hover {
+    copy-code,
+    copy-code:focus-within {
+      @include gl-opacity-10;
+    }
+  }
 }

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js

@@ -47,6 +47,12 @@ describe('DuoChatMessage', () => {
     jest.clearAllMocks();
   });
 
+  it('registers the custom `copy-code` element', () => {
+    expect(customElements.get('copy-code')).toBeUndefined();
+    createComponent();
+    expect(customElements.get('copy-code')).toBeDefined();
+  });
+
   describe('rendering', () => {
     beforeEach(() => {
       renderMarkdown.mockImplementation(() => mockMarkdownContent);
@@ -79,6 +85,10 @@ describe('DuoChatMessage', () => {
       });
     });
 
+    it('renders the `copy-code` button for the code snippet', () => {
+      expect(findCopyCodeButton().exists()).toBe(true);
+    });
+
     it('renders the documentation sources component by default', () => {
       expect(findDocumentSources().exists()).toBe(true);
       expect(findDocumentSources().props('sources')).toEqual(MOCK_RESPONSE_MESSAGE.extras.sources);
@@ -107,10 +117,6 @@ describe('DuoChatMessage', () => {
       findUserFeedback().vm.$emit('feedback', 'foo');
       expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
     });
-
-    it('does not strip out the <copy-code/> element from HTML output', () => {
-      expect(findCopyCodeButton().exists()).toBe(true);
-    });
   });
 
   describe('message output', () => {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -3,6 +3,7 @@ import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
 import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
+import { CopyCodeElement } from './copy_code_element';
 
 const concatIndicesUntilEmpty = (arr) => {
   const start = arr.findIndex((el) => el);
@@ -66,6 +67,9 @@ export default {
      * Is intentionally non-reactive
      */
     this.messageChunks = [];
+    if (!customElements.get('copy-code')) {
+      customElements.define('copy-code', CopyCodeElement);
+    }
   },
   mounted() {
     this.messageContent = this.content;

package/src/scss/variables.scss

@@ -58,80 +58,6 @@ $white-dark: #eaeaea !default;
 $white-transparent: rgba(255, 255, 255, 0.8) !default;
 $transparent-rgba: rgba($white, 0);
 
-// The indigo light and indigo dark use $theme-indigo variables.
-$theme-indigo-50: #f1f1ff !default;
-$theme-indigo-100: #dbdbf8 !default;
-$theme-indigo-200: #c7c7f2 !default;
-$theme-indigo-300: #a2a2e6 !default;
-$theme-indigo-400: #8181d7 !default;
-$theme-indigo-500: #6666c4 !default;
-$theme-indigo-600: #5252b5 !default;
-$theme-indigo-700: #41419f !default;
-$theme-indigo-800: #303083 !default;
-$theme-indigo-900: #222261 !default;
-$theme-indigo-950: #14143d !default;
-
-$theme-blue-50: #cdd8e3 !default;
-$theme-blue-100: #b9cadc !default;
-$theme-blue-200: #a6bdd5 !default;
-$theme-blue-300: #81a5c9 !default;
-$theme-blue-400: #628eb9 !default;
-$theme-blue-500: #4977a5 !default;
-$theme-blue-600: #346596 !default;
-$theme-blue-700: #235180 !default;
-$theme-blue-800: #153c63 !default;
-$theme-blue-900: #0b2640 !default;
-$theme-blue-950: #04101c !default;
-
-$theme-light-blue-50: #dde6ee !default;
-$theme-light-blue-100: #c1d4e6 !default;
-$theme-light-blue-200: #a0bedc !default;
-$theme-light-blue-300: #74a3d3 !default;
-$theme-light-blue-400: #4f8bc7 !default;
-$theme-light-blue-500: #3476b9 !default;
-$theme-light-blue-600: #2268ae !default;
-$theme-light-blue-700: #145aa1 !default;
-$theme-light-blue-800: #0e4d8d !default;
-$theme-light-blue-900: #0c4277 !default;
-$theme-light-blue-950: #0a3764 !default;
-
-// The green light and green dark use $theme-green variables.
-$theme-green-50: #dde9de !default;
-$theme-green-100: #b1d6b5 !default;
-$theme-green-200: #8cc497 !default;
-$theme-green-300: #69af7d !default;
-$theme-green-400: #499767 !default;
-$theme-green-500: #308258 !default;
-$theme-green-600: #25744c !default;
-$theme-green-700: #1b653f !default;
-$theme-green-800: #155635 !default;
-$theme-green-900: #0e4328 !default;
-$theme-green-950: #052e19 !default;
-
-$theme-red-50: #f4e9e7 !default;
-$theme-red-100: #ecd3d0 !default;
-$theme-red-200: #e3bab5 !default;
-$theme-red-300: #d59086 !default;
-$theme-red-400: #c66e60 !default;
-$theme-red-500: #ad4a3b !default;
-$theme-red-600: #a13322 !default;
-$theme-red-700: #8f2110 !default;
-$theme-red-800: #761405 !default;
-$theme-red-900: #580d02 !default;
-$theme-red-950: #380700 !default;
-
-$theme-light-red-50: #faf2f1 !default;
-$theme-light-red-100: #f6d9d5 !default;
-$theme-light-red-200: #ebada2 !default;
-$theme-light-red-300: #e07f6f !default;
-$theme-light-red-400: #d36250 !default;
-$theme-light-red-500: #c24b38 !default;
-$theme-light-red-600: #b53a26 !default;
-$theme-light-red-700: #a02e1c !default;
-$theme-light-red-800: #8b2212 !default;
-$theme-light-red-900: #751709 !default;
-$theme-light-red-950: #5c1105 !default;
-
 $t-gray-a-02: rgba($gray-950, 0.02) !default;
 $t-gray-a-04: rgba($gray-950, 0.04) !default;
 $t-gray-a-06: rgba($gray-950, 0.06) !default;

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

@@ -6,7 +6,7 @@
     "prefix": false
   },
   "white": {
-    "$value": "{gray.50}",
+    "$value": "#333238",
     "$type": "color",
     "themeable": false,
     "prefix": false

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

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

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

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