@gitlab/ui 66.29.0 → 66.31.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [66.31.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.30.0...v66.31.0) (2023-10-13)
+
+
+### Features
+
+* **InfiniteScroll:** Add support for scrolling behavior ([ca91a07](https://gitlab.com/gitlab-org/gitlab-ui/commit/ca91a07706107652d4b659e8bece8b5bfea31d89))
+
+# [66.30.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.29.0...v66.30.0) (2023-10-12)
+
+
+### Features
+
+* **GlDuoChatConversation:** added component ([68017ef](https://gitlab.com/gitlab-org/gitlab-ui/commit/68017ef7707a5984e41fb93d2fd25cd53ab5e323))
+
 # [66.29.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.28.0...v66.29.0) (2023-10-12)
 
 

package/dist/components/base/infinite_scroll/infinite_scroll.js

@@ -115,13 +115,18 @@ var script = {
      *
      * @param params.top - Number of pixels along Y axis to
      * scroll the list container.
+     * @param params.behavior - Determines whether scrolling
+     * is instant or animates smoothly. Can be 'auto', 'instant', or 'smooth'
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
      */
     scrollTo(_ref) {
       let {
-        top
+        top,
+        behavior
       } = _ref;
       this.$refs.infiniteContainer.scrollTo({
-        top
+        top,
+        behavior
       });
     },
     topReached: throttle(function topReachedThrottled() {

package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -0,0 +1,81 @@
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  CONVERSATION_NEW_CHAT: 'New chat'
+};
+const isMessage = item => Boolean(item) && (item === null || item === void 0 ? void 0 : item.role);
+const itemsValidator = items => items.every(isMessage);
+var script = {
+  name: 'GlDuoChatConversation',
+  components: {
+    GlDuoChatMessage
+  },
+  props: {
+    /**
+     * Messages to display
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator
+    },
+    /**
+     * Whether to show the delimiter before this conversation
+     */
+    showDelimiter: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  methods: {
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    }
+  },
+  i18n
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-display-flex gl-flex-direction-column gl-justify-content-end"},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-display-flex gl-align-items-center gl-text-gray-500 gl-gap-4",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-flex-grow-1"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-flex-grow-1"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg},on:{"track-feedback":_vm.onTrackFeedback}})})],2)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -1,4 +1,4 @@
-import { GlDuoUserFeedback } from '../../../../../../index';
+import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';

package/dist/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.js

@@ -1,4 +1,5 @@
-import { GlIcon, GlLink } from '../../../../../../index';
+import GlIcon from '../../../../../base/icon/icon';
+import GlLink from '../../../../../base/link/link';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../../../index';
+import GlButton from '../../../../../base/button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {

package/dist/components/experimental/duo/user_feedback/user_feedback.js

@@ -1,4 +1,4 @@
-import { GlButton } from '../../../../index';
+import GlButton from '../../../base/button/button';
 import FeedbackModal from './user_feedback_modal';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/components/experimental/duo/user_feedback/user_feedback_modal.js

@@ -1,4 +1,7 @@
-import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlModal from '../../../base/modal/modal';
+import GlFormGroup from '../../../base/form/form_group/form_group';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea';
+import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const i18n = {

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -1,5 +1,7 @@
 import uniqueId from 'lodash/uniqueId';
-import { GlBadge, GlPopover, GlLink } from '../../../index';
+import GlBadge from '../../base/badge/badge';
+import GlLink from '../../base/link/link';
+import GlPopover from '../../base/popover/popover';
 import GlSprintf from '../../utilities/sprintf/sprintf';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:44 GMT
+ * Generated on Fri, 13 Oct 2023 10:34:59 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:44 GMT
+ * Generated on Fri, 13 Oct 2023 10:34:59 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:45 GMT
+ * Generated on Fri, 13 Oct 2023 10:34:59 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 12 Oct 2023 07:48:44 GMT
+ * Generated on Fri, 13 Oct 2023 10:34:59 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 12 Oct 2023 07:48:45 GMT
+// Generated on Fri, 13 Oct 2023 10:34:59 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 12 Oct 2023 07:48:44 GMT
+// Generated on Fri, 13 Oct 2023 10:34:59 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.29.0",
+  "version": "66.31.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.65.0",
+    "@gitlab/svgs": "3.66.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/dropdown/dropdown.md

@@ -1,15 +1,15 @@
 The dropdown component offers a user multiple items or actions to choose from which are initially
 collapsed behind a button.
 
-> **NOTE**: This component will eventually be deprecated in favor of components
+> **NOTE**: This component has been deprecated in favor of components
 > more suited to the various use cases for dropdowns. Consider using a more
 > appropriate component instead:
 >
 > - For single or multiselect options, use `GlCollapsibleListbox`.
 > - For displaying a list of actions like "Edit user", "Delete user", use `GlDisclosureDropdown`.
 >
-> See [this epic](https://gitlab.com/groups/gitlab-org/-/epics/1059) for the
-> most up-to-date information about what to use and when.
+> See [Which component should you use?](https://design.gitlab.com/components/dropdown-overview#which-component-should-you-use)
+> for what to use and when.
 
 ### Icon-only dropdown
 

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

@@ -536,7 +536,7 @@ export const OnRightEdge = (args, { argTypes }) => ({
 OnRightEdge.args = generateProps({ text: 'Some dropdown' });
 
 export default {
-  title: 'base/dropdown',
+  title: 'base/dropdown/deprecated',
   component: GlDropdown,
   subcomponents: {
     GlDropdownDivider,

package/src/components/base/dropdown/dropdown_item.stories.js

@@ -90,7 +90,7 @@ CheckedWithSecondaryText.args = generateProps({
 });
 
 export default {
-  title: 'base/dropdown/dropdown-item',
+  title: 'base/dropdown/deprecated/dropdown-item',
   component: GlDropdownItem,
   parameters: {
     bootstrapComponent: 'b-dropdown-item',

package/src/components/base/infinite_scroll/infinite_scroll.md

@@ -15,7 +15,9 @@ Useful public methods you can call via `$refs`:
 
 - `.scrollUp()`: Scrolls to the top of the container.
 - `.scrollDown()`: Scrolls to the bottom of the container.
-- `.scrollTo({ top })`: Scrolls to a number of pixels along the Y axis of the container.
+- `.scrollTo({ top, behavior })`: Scrolls to a number of pixels
+  along the Y axis of the container. The scrolling behavior can also be specified,
+  as per MDN spec (<https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo>)
 
 ## Implementation Example
 

package/src/components/base/infinite_scroll/infinite_scroll.spec.js

@@ -174,9 +174,9 @@ describe('Infinite Scroll component', () => {
 
     it('scrollTo', () => {
       createComponent();
-      wrapper.vm.scrollTo({ top: 250 });
+      wrapper.vm.scrollTo({ top: 250, behavior: 'instant' });
 
-      expect(mockScrollTo).toHaveBeenCalledWith({ top: 250 });
+      expect(mockScrollTo).toHaveBeenCalledWith({ top: 250, behavior: 'instant' });
     });
   });
 });

package/src/components/base/infinite_scroll/infinite_scroll.vue

@@ -107,9 +107,12 @@ export default {
      *
      * @param params.top - Number of pixels along Y axis to
      * scroll the list container.
+     * @param params.behavior - Determines whether scrolling
+     * is instant or animates smoothly. Can be 'auto', 'instant', or 'smooth'
+     * See [MDN spec](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo)
      */
-    scrollTo({ top }) {
-      this.$refs.infiniteContainer.scrollTo({ top });
+    scrollTo({ top, behavior }) {
+      this.$refs.infiniteContainer.scrollTo({ top, behavior });
     },
 
     topReached: throttle(function topReachedThrottled() {

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js

@@ -333,7 +333,7 @@ MiscellaneousContent.args = {
 MiscellaneousContent.decorators = [makeContainer({ height: '200px' })];
 
 export default {
-  title: 'base/new-dropdowns/disclosure',
+  title: 'base/dropdown/disclosure-dropdown',
   component: GlDisclosureDropdown,
   parameters: {
     docs: {

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

@@ -450,7 +450,7 @@ GroupWithoutLabel.args = generateProps({
 });
 
 export default {
-  title: 'base/new-dropdowns/listbox',
+  title: 'base/dropdown/collapsible-listbox',
   component: GlCollapsibleListbox,
   parameters: {
     docs: {

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

@@ -0,0 +1,8 @@
+A component that lists messages in a conversation, and presents an optional delimiter to
+mark the beginning of the conversation.
+
+## Usage
+
+```html
+<gl-duo-chat-conversation :messages="messages" :show-delimeter="showDelimiter" />
+```

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

@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+import GlDuoChatConversation from './duo_chat_conversation.vue';
+
+describe('GlDuoChatConversation', () => {
+  let wrapper;
+
+  const findChatMessages = () => wrapper.findAllComponents(GlDuoChatMessage);
+  const findDelimiter = () => wrapper.find('[data-testid="conversation-delimiter"]');
+  const createComponent = ({ propsData = {} } = {}) => {
+    wrapper = shallowMount(GlDuoChatConversation, {
+      propsData,
+    });
+  };
+
+  describe('rendering', () => {
+    const messages = [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE];
+
+    describe('default state', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('does not render messages by default', () => {
+        expect(findChatMessages().length).toBe(0);
+      });
+
+      it('does render the delimiter', () => {
+        expect(findDelimiter().exists()).toBe(true);
+      });
+    });
+
+    it('renders messages when messages are passed', () => {
+      createComponent({
+        propsData: { messages },
+      });
+      expect(findChatMessages().length).toBe(2);
+    });
+
+    it('does not render delimiter when showDelimiter = false', () => {
+      createComponent({ propsData: { messages, showDelimiter: false } });
+      expect(findDelimiter().exists()).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,59 @@
+import { MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE } from '../../mock_data';
+import GlDuoChatConversation from './duo_chat_conversation.vue';
+import readme from './duo_chat_conversation.md';
+
+const defaultValue = (prop) => GlDuoChatConversation.props[prop].default;
+const renderMarkdown = (content) => content;
+const renderGFM = () => {};
+
+const generateProps = ({ messages = [], showDelimiter = defaultValue('showDelimiter') } = {}) => ({
+  messages,
+  showDelimiter,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatConversation },
+  props: Object.keys(argTypes),
+  provide: {
+    renderGFM,
+    renderMarkdown,
+  },
+  template: `
+    <gl-duo-chat-conversation :messages="messages" :show-delimiter="showDelimiter" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({
+  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
+});
+
+export const MultipleConversations = (args, { argTypes }) => ({
+  components: { GlDuoChatConversation },
+  props: Object.keys(argTypes),
+  provide: {
+    renderGFM,
+    renderMarkdown,
+  },
+  template: `
+    <div>
+      <gl-duo-chat-conversation :messages="messages" :show-delimiter="false" />
+      <gl-duo-chat-conversation :messages="messages" :show-delimiter="true" />
+    </div>
+  `,
+});
+MultipleConversations.args = generateProps({
+  messages: [MOCK_USER_PROMPT_MESSAGE, MOCK_RESPONSE_MESSAGE],
+});
+
+export default {
+  title: 'experimental/duo/chat/duo-chat-conversation',
+  component: GlDuoChatConversation,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,67 @@
+<script>
+import GlDuoChatMessage from '../duo_chat_message/duo_chat_message.vue';
+
+const i18n = {
+  CONVERSATION_NEW_CHAT: 'New chat',
+};
+
+const isMessage = (item) => Boolean(item) && item?.role;
+
+const itemsValidator = (items) => items.every(isMessage);
+
+export default {
+  name: 'GlDuoChatConversation',
+  components: {
+    GlDuoChatMessage,
+  },
+  props: {
+    /**
+     * Messages to display
+     */
+    messages: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator: itemsValidator,
+    },
+    /**
+     * Whether to show the delimiter before this conversation
+     */
+    showDelimiter: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  methods: {
+    onTrackFeedback(event) {
+      /**
+       * Notify listeners about the feedback form submission on a response message.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('track-feedback', event);
+    },
+  },
+  i18n,
+};
+</script>
+<template>
+  <div class="gl-display-flex gl-flex-direction-column gl-justify-content-end">
+    <div
+      v-if="showDelimiter"
+      class="gl-my-5 gl-display-flex gl-align-items-center gl-text-gray-500 gl-gap-4"
+      data-testid="conversation-delimiter"
+    >
+      <hr class="gl-flex-grow-1" />
+      <span>{{ $options.i18n.CONVERSATION_NEW_CHAT }}</span>
+      <hr class="gl-flex-grow-1" />
+    </div>
+
+    <gl-duo-chat-message
+      v-for="(msg, index) in messages"
+      :key="`${msg.role}-${index}`"
+      :message="msg"
+      @track-feedback="onTrackFeedback"
+    />
+  </div>
+</template>

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

@@ -1,5 +1,5 @@
 <script>
-import { GlDuoUserFeedback } from '../../../../../../index';
+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';

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

@@ -1,5 +1,6 @@
 <script>
-import { GlIcon, GlLink } from '../../../../../../index';
+import GlIcon from '../../../../../base/icon/icon.vue';
+import GlLink from '../../../../../base/link/link.vue';
 import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
 
 export const i18n = {

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

@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '../../../../../../index';
+import GlButton from '../../../../../base/button/button.vue';
 
 export default {
   name: 'GlDuoChatPredefinedPrompts',

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

@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '../../../../index';
+import GlButton from '../../../base/button/button.vue';
 import FeedbackModal from './user_feedback_modal.vue';
 
 export const i18n = {

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

@@ -1,5 +1,8 @@
 <script>
-import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlModal from '../../../base/modal/modal.vue';
+import GlFormGroup from '../../../base/form/form_group/form_group.vue';
+import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
+import GlFormCheckboxGroup from '../../../base/form/form_checkbox/form_checkbox_group.vue';
 
 export const i18n = {
   MODAL_TITLE: 'Give feedback on AI content',

package/src/components/experimental/experiment_badge/experiment_badge.vue

@@ -1,6 +1,8 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { GlBadge, GlLink, GlPopover } from '../../../index';
+import GlBadge from '../../base/badge/badge.vue';
+import GlLink from '../../base/link/link.vue';
+import GlPopover from '../../base/popover/popover.vue';
 import GlSprintf from '../../utilities/sprintf/sprintf.vue';
 
 export const i18n = {