@gitlab/ui 66.23.0 → 66.24.0

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 12:19:27 GMT
+ * Generated on Thu, 05 Oct 2023 10:12:46 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 12:19:27 GMT
+ * Generated on Thu, 05 Oct 2023 10:12:46 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 12:19:27 GMT
+ * Generated on Thu, 05 Oct 2023 10:12:46 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 12:19:27 GMT
+ * Generated on Thu, 05 Oct 2023 10:12:46 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 03 Oct 2023 12:19:27 GMT
+// Generated on Thu, 05 Oct 2023 10:12:46 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 03 Oct 2023 12:19:27 GMT
+// Generated on Thu, 05 Oct 2023 10:12:46 GMT
 
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "66.23.0",
+  "version": "66.24.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,7 +94,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.63.0",
+    "@gitlab/svgs": "3.65.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -8,8 +8,8 @@ import {
 } from './constants';
 
 export const BORDER_CLASSES = {
-  [borderPositions.top]: 'gl-border-t gl-pt-2 gl-mt-2',
-  [borderPositions.bottom]: 'gl-border-b gl-pb-2 gl-mb-2',
+  [borderPositions.top]: 'gl-border-t gl-border-t-gray-200 gl-pt-2 gl-mt-2',
+  [borderPositions.bottom]: 'gl-border-b gl-border-b-gray-200 gl-pb-2 gl-mb-2',
 };
 
 export default {

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -199,7 +199,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
   template: template(
     `
     <template #footer>
-       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
+       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
         <gl-button @click="selectAllItems" category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
           Select all
         </gl-button>

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -33,7 +33,7 @@ import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-gray-200', 'gl-pt-1', 'gl-mt-2'];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.md

@@ -0,0 +1 @@
+The Duo Chat loader. Is shown while waiting for the chat response.

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

@@ -0,0 +1,67 @@
+.duo-chat-loader {
+  @include gl-py-3;
+  @include gl-px-4;
+  @include gl-mb-4;
+  @include gl-rounded-lg;
+  @include gl-rounded-bottom-left-none;
+  @include gl-display-flex;
+  @include gl-text-gray-500;
+
+  .transition {
+    transition: width 0.5s ease;
+  }
+
+  .text-enter {
+    @include gl-opacity-0;
+  }
+
+  .text-enter-active {
+    transition: opacity 1s ease-in; // we intentionally overlap this transition with .text-leave-active by 200ms
+  }
+
+  .text-enter-to {
+    @include gl-opacity-10;
+  }
+
+  .text-leave {
+    @include gl-opacity-10;
+  }
+
+  .text-leave-active {
+    transition: opacity 0.7s linear;
+  }
+
+  .text-leave-to {
+    @include gl-opacity-0;
+  }
+
+  &__dot {
+    display: inline-block;
+    width: 0.3rem;
+    height: 0.3rem;
+    background-color: $gray-200;
+    border-radius: 100%;
+    animation: DuoChatLoading 1400ms ease-in-out infinite;
+    animation-fill-mode: both;
+  }
+
+  &__dot--1 {
+    animation-delay: -0.3s;
+  }
+
+  &__dot--2 {
+    animation-delay: -0.15s;
+  }
+}
+
+@keyframes DuoChatLoading {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,70 @@
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+import GlDuoChatLoader from './duo_chat_loader.vue';
+
+jest.useFakeTimers();
+
+describe('GlDuoChatLoader', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = mount(GlDuoChatLoader, {
+      propsData,
+    });
+  };
+
+  const transition = async () => {
+    jest.advanceTimersByTime(LOADING_TRANSITION_DURATION);
+    await nextTick();
+  };
+
+  const findTransitionText = () => wrapper.find('[data-testid="current-transition"]').text();
+  const findToolText = () => wrapper.find('[data-testid="tool"]');
+
+  describe('rendering', () => {
+    const defaultTool = GlDuoChatLoader.props.toolName.default;
+
+    it('displays a default tool', async () => {
+      createComponent();
+      await nextTick();
+
+      expect(findToolText().text()).toBe(defaultTool);
+    });
+
+    it('shows the `toolName` when it is passed', async () => {
+      createComponent({
+        propsData: {
+          toolName: 'foo',
+        },
+      });
+      await nextTick();
+
+      expect(findToolText().text()).toBe('foo');
+      expect(findToolText().text()).not.toBe(defaultTool);
+    });
+
+    it('cycles through transition texts', async () => {
+      createComponent();
+      await nextTick();
+
+      expect(findTransitionText()).toEqual('finding');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('working on');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('generating');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('producing');
+
+      await transition();
+
+      expect(findTransitionText()).toEqual('finding');
+    });
+  });
+});

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.stories.js

@@ -0,0 +1,31 @@
+import GlDuoChatLoader from './duo_chat_loader.vue';
+import readme from './duo_chat_loader.md';
+
+const defaultValue = (prop) => GlDuoChatLoader.props[prop].default;
+
+const generateProps = ({ toolName = defaultValue('toolName') } = {}) => ({
+  toolName,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatLoader },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-duo-chat-loader :tool-name="toolName" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'experimental/duo/chat/duo_chat_loader',
+  component: GlDuoChatLoader,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,94 @@
+<script>
+import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
+import { LOADING_TRANSITION_DURATION } from '../../constants';
+
+export const i18n = {
+  LOADER_LOADING_MESSAGE: '%{tool} is %{transition} an answer',
+  LOADER_LOADING_TRANSITIONS: ['finding', 'working on', 'generating', 'producing'],
+  GITLAB_DUO: 'GitLab Duo',
+};
+
+export default {
+  name: 'GlDuoChatLoader',
+  components: {
+    GlSprintf,
+  },
+  i18n,
+  props: {
+    /**
+     * The message containing the name of the current AI tool working on the answer.
+     */
+    toolName: {
+      type: String,
+      required: false,
+      default: i18n.GITLAB_DUO,
+    },
+  },
+  data() {
+    return {
+      loadingSequence: 0,
+      timeout: null,
+    };
+  },
+  beforeDestroy() {
+    clearTimeout(this.timeout);
+  },
+  mounted() {
+    this.computeTransitionWidth();
+    this.enter();
+  },
+  methods: {
+    computeTransitionWidth() {
+      const container = this.$refs.transition;
+      const active = this.$refs.currentTransition[0]; // There's only one `currentTransition` ref at a time, but refs in v-for loops are always Arrays
+      const { width, height } = active.getBoundingClientRect();
+      container.$el.style.width = `${width}px`;
+      container.$el.style.height = `${height}px`;
+    },
+    enter() {
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(() => {
+        this.loadingSequence =
+          (this.loadingSequence + 1) % this.$options.i18n.LOADER_LOADING_TRANSITIONS.length;
+        this.enter();
+      }, LOADING_TRANSITION_DURATION);
+    },
+    isCurrentTransition(index) {
+      return index === this.loadingSequence;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="duo-chat-loader">
+    <div class="gl-display-flex gl-align-items-center gl-mr-3">
+      <div class="duo-chat-loader__dot duo-chat-loader__dot--1"></div>
+      <div class="duo-chat-loader__dot duo-chat-loader__dot--2"></div>
+      <div class="duo-chat-loader__dot duo-chat-loader__dot--3"></div>
+    </div>
+    <gl-sprintf :message="$options.i18n.LOADER_LOADING_MESSAGE">
+      <template #tool>
+        <strong class="gl-mr-2" data-testid="tool">{{ toolName }}</strong>
+      </template>
+      <template #transition>
+        <transition-group
+          ref="transition"
+          name="text"
+          class="transition gl-display-inline-block gl-mx-2"
+          @after-leave="computeTransitionWidth"
+        >
+          <span
+            v-for="(message, index) in $options.i18n.LOADER_LOADING_TRANSITIONS"
+            v-show="isCurrentTransition(index)"
+            :ref="isCurrentTransition(index) ? 'currentTransition' : ''"
+            :key="message"
+            :data-testid="isCurrentTransition(index) ? 'current-transition' : ''"
+            class="gl-white-space-nowrap"
+            >{{ message }}</span
+          >
+        </transition-group>
+      </template>
+    </gl-sprintf>
+  </div>
+</template>

package/src/components/experimental/duo/chat/constants.js

@@ -1,3 +1,5 @@
+export const LOADING_TRANSITION_DURATION = 7500;
+
 export const DOCUMENTATION_SOURCE_TYPES = {
   HANDBOOK: {
     value: 'handbook',

package/src/components/experimental/duo/user_feedback/user_feedback.vue

@@ -64,6 +64,7 @@ export default {
         variant="link"
         target="_blank"
         :href="feedbackLinkUrl"
+        button-text-classes="gl-white-space-normal! gl-text-left"
         @click="shouldRenderModal && $refs.feedbackModal.show()"
         >{{ feedbackLinkText }}</gl-button
       >

package/src/scss/components.scss

@@ -3,6 +3,7 @@
 // @import '../components/base/dropdown/dropdown'
 //
 // ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
+@import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';
 @import '../components/base/new_dropdowns/disclosure/disclosure_dropdown';
 @import '../components/base/keyset_pagination/keyset_pagination';
 @import '../components/charts/gauge/gauge';