@gitlab/ui 66.16.0 → 66.19.0

package/dist/index.js

@@ -87,6 +87,7 @@ export { default as GlAccordionItem } from './components/base/accordion/accordio
 export { default as GlCarousel } from './components/base/carousel/carousel';
 export { default as GlCarouselSlide } from './components/base/carousel/carousel_slide';
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge';
+export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback';
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number';
 export { default as GlFriendlyWrap } from './components/utilities/friendly_wrap/friendly_wrap';
 export { default as GlIntersperse } from './components/utilities/intersperse/intersperse';

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 08:51:14 GMT
+ * Generated on Fri, 29 Sep 2023 10:00:16 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 08:51:14 GMT
+ * Generated on Fri, 29 Sep 2023 10:00:16 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 08:51:14 GMT
+ * Generated on Fri, 29 Sep 2023 10:00:16 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 08:51:14 GMT
+ * Generated on Fri, 29 Sep 2023 10:00:16 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 27 Sep 2023 08:51:14 GMT
+// Generated on Fri, 29 Sep 2023 10:00:16 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 27 Sep 2023 08:51:14 GMT
+// Generated on Fri, 29 Sep 2023 10:00:16 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.16.0",
+  "version": "66.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -98,18 +98,18 @@
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@storybook/addon-a11y": "7.4.3",
-    "@storybook/addon-docs": "7.4.3",
-    "@storybook/addon-essentials": "7.4.3",
-    "@storybook/addon-storyshots": "7.4.3",
-    "@storybook/addon-storyshots-puppeteer": "7.4.3",
-    "@storybook/addon-viewport": "7.4.3",
-    "@storybook/builder-webpack5": "7.4.3",
-    "@storybook/theming": "7.4.3",
-    "@storybook/vue": "7.4.3",
-    "@storybook/vue-webpack5": "7.4.3",
-    "@storybook/vue3": "7.4.3",
-    "@storybook/vue3-webpack5": "7.4.3",
+    "@storybook/addon-a11y": "7.4.5",
+    "@storybook/addon-docs": "7.4.5",
+    "@storybook/addon-essentials": "7.4.5",
+    "@storybook/addon-storyshots": "7.4.5",
+    "@storybook/addon-storyshots-puppeteer": "7.4.5",
+    "@storybook/addon-viewport": "7.4.5",
+    "@storybook/builder-webpack5": "7.4.5",
+    "@storybook/theming": "7.4.5",
+    "@storybook/vue": "7.4.5",
+    "@storybook/vue-webpack5": "7.4.5",
+    "@storybook/vue3": "7.4.5",
+    "@storybook/vue3-webpack5": "7.4.5",
     "@vue/compat": "^3.2.40",
     "@vue/compiler-sfc": "^3.2.40",
     "@vue/test-utils": "1.3.0",
@@ -160,7 +160,7 @@
     "sass-loader": "^10.2.0",
     "sass-true": "^6.1.0",
     "start-server-and-test": "^1.10.6",
-    "storybook": "7.4.3",
+    "storybook": "7.4.5",
     "storybook-dark-mode": "3.0.1",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",

package/src/components/base/modal/modal.scss

@@ -57,9 +57,7 @@ body.modal-open {
     @include gl-border-none;
 
     .modal-title {
-      @include gl-font-lg;
-      @include gl-font-weight-bold;
-      @include gl-line-height-24;
+      @include gl-heading-scale-500;
     }
   }
 

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

@@ -85,7 +85,7 @@ describe('Modal component', () => {
       createComponent({
         slots: { 'modal-header': slot },
       });
-      const defaultHeader = wrapper.find('h4.modal-title');
+      const defaultHeader = wrapper.find('h2.modal-title');
       const customHeader = wrapper.find('h4.custom-title');
 
       expect(defaultHeader.exists()).toBe(false);
@@ -98,7 +98,7 @@ describe('Modal component', () => {
       createComponent({
         slots: { 'modal-title': slot },
       });
-      const defaultHeader = wrapper.find('h4.modal-title');
+      const defaultHeader = wrapper.find('h2.modal-title');
       const customTitle = defaultHeader.find('h4.custom-title');
 
       expect(defaultHeader.exists()).toBe(true);

package/src/components/base/modal/modal.vue

@@ -206,10 +206,10 @@ export default {
     <template #modal-header>
       <!-- @slot Entire modal header container contents (including the close button on the top right corner) -->
       <slot name="modal-header">
-        <h4 class="modal-title">
+        <h2 class="modal-title">
           <!-- @slot Modal title. If modal-header slot is used, this slot will not be shown. -->
           <slot name="modal-title">{{ title }}</slot>
-        </h4>
+        </h2>
       </slot>
       <!-- @slot Content of Modal header close button. If modal-header slot is used, this slot will not be shown. -->
       <close-button ref="close-button" :label="dismissLabel" @click="close" />

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

@@ -0,0 +1,40 @@
+The main entry point component for gathering the user feedback for the AI features.
+
+The component consists of a textual button and a connected modal with the actual form, emitting
+the form data on submission.
+
+## Custom button text
+
+The component allows to customize the button text, presented to the user.
+
+```html
+<gl-user-feedback feedback-link-text="Leave your custom feedback" />
+```
+
+## Linking to a separate feedback form
+
+The main goal of this component is to provide the advanced feedback form. However, it might not
+be necessary for all consumers. In such a case, the component allows to bypass the default
+form and link to an external feedback page/form.
+
+```html
+<gl-user-feedback feedback-link-url="https://gitlab.com" />
+```
+
+## Listening to the feedback form submission
+
+This component emits the `feedback` event with all the options selected in the feedback form.
+
+```html
+<gl-user-feedback @feedback="myEventTracker" />
+```
+
+The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) coming from
+the underlying `FeedbackModal` component. Here's the example of a possible event:
+
+```json
+{
+  "feedbackChoices": ["unhelpful", "long"],
+  "extendedTextFeedback": "The answer was too long to understand"
+}
+```

package/src/components/experimental/duo/user_feedback/user_feedback.spec.js

@@ -0,0 +1,80 @@
+import { nextTick } from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '../../../../index';
+import DuoChatFeedbackModal from './user_feedback_modal.vue';
+import UserFeedback, { i18n } from './user_feedback.vue';
+
+describe('UserFeedback', () => {
+  let wrapper;
+  const eventName = 'test_event_name';
+
+  const createComponent = ({ props, data = {} } = {}) => {
+    wrapper = shallowMount(UserFeedback, {
+      data() {
+        return data;
+      },
+      propsData: {
+        eventName,
+        ...props,
+      },
+    });
+  };
+
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findModal = () => wrapper.findComponent(DuoChatFeedbackModal);
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('rendering with no feedback registered', () => {
+    it('renders a button to provide feedback', () => {
+      expect(findButton().exists()).toBe(true);
+    });
+
+    it('renders the feedback modal', () => {
+      expect(findModal().exists()).toBe(true);
+    });
+  });
+
+  it.each`
+    feedbackLinkText | expectedButtonText
+    ${'Foo'}         | ${'Foo'}
+    ${undefined}     | ${i18n.FEEDBACK_LINK_TEXT}
+  `(
+    'renders "$expectedButtonText" as button text when "$feedbackLinkText" is passed as the feedback link text',
+    ({ feedbackLinkText, expectedButtonText } = {}) => {
+      createComponent({ props: { feedbackLinkText } });
+      expect(findButton().text()).toBe(expectedButtonText);
+    }
+  );
+
+  it('does not render the modal if custom URL is passed for the feedback link', () => {
+    const feedbackLinkUrl = 'https://example.com';
+    createComponent({ props: { feedbackLinkUrl } });
+    expect(findButton().attributes('href')).toBe(feedbackLinkUrl);
+    expect(findModal().exists()).toBe(false);
+  });
+
+  describe('event handling', () => {
+    const passedFeedback = { feedbackOptions: ['helpful'], extendedFeedback: 'Foo bar' };
+
+    it('emits the event, containing the form data, when modal emits', () => {
+      findModal().vm.$emit('feedback-submitted', passedFeedback);
+      expect(wrapper.emitted('feedback')).toHaveLength(1);
+    });
+
+    it('renders the thank you text instead of a button', async () => {
+      findModal().vm.$emit('feedback-submitted', passedFeedback);
+      await nextTick();
+      expect(findButton().exists()).toBe(false);
+      expect(wrapper.text()).toContain(i18n.FEEDBACK_THANKS);
+    });
+
+    it('does not render the modal after feedback submitted', async () => {
+      findModal().vm.$emit('feedback-submitted', passedFeedback);
+      await nextTick();
+      expect(findModal().exists()).toBe(false);
+    });
+  });
+});

package/src/components/experimental/duo/user_feedback/user_feedback.stories.js

@@ -0,0 +1,48 @@
+import GlUserFeedback from './user_feedback.vue';
+import readme from './user_feedback.md';
+
+const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
+  feedbackLinkText,
+  feedbackLinkUrl,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlUserFeedback },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      eventOutput: '',
+    };
+  },
+  methods: {
+    logEvent(event) {
+      this.eventOutput = JSON.stringify(event);
+    },
+  },
+  template: `
+    <div>
+      <gl-user-feedback
+        :feedback-link-text="feedbackLinkText"
+        :feedback-link-url="feedbackLinkUrl"
+        @feedback="logEvent"/>
+      <p v-if="eventOutput"><code>{{ eventOutput }}</code></p>
+    </div>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps();
+
+export default {
+  title: 'experimental/duo/user-feedback',
+  component: GlUserFeedback,
+  parameters: {
+    storyshots: { disable: true },
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {},
+};

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

@@ -0,0 +1,76 @@
+<script>
+import { GlButton } from '../../../../index';
+import FeedbackModal from './user_feedback_modal.vue';
+
+export const i18n = {
+  FEEDBACK_LINK_TEXT: 'Give feedback to improve this answer.',
+  FEEDBACK_THANKS: 'Thank you for your feedback.',
+};
+
+export default {
+  name: 'GlDuoUserFeedback',
+  components: {
+    GlButton,
+    FeedbackModal,
+  },
+  props: {
+    /**
+     * The text to be displayed as the feedback link/button.
+     */
+    feedbackLinkText: {
+      type: String,
+      required: false,
+      default: i18n.FEEDBACK_LINK_TEXT,
+    },
+    /**
+     * The URL of a page to provide more explanations on the experiment. If provided, clicking
+     * the feedback link will open a new tab with the URL instead of showing the feedback modal.
+     */
+    feedbackLinkUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      feedbackReceived: false,
+    };
+  },
+  computed: {
+    shouldRenderModal() {
+      return !this.feedbackReceived && !this.feedbackLinkUrl;
+    },
+  },
+  methods: {
+    notify(event) {
+      /**
+       * Notify listeners about the feedback form submission.
+       * @param {*} event An event, containing the feedback choices and the extended feedback text.
+       */
+      this.$emit('feedback', event);
+      this.feedbackReceived = true;
+    },
+  },
+  i18n,
+};
+</script>
+
+<template>
+  <div class="gl-pt-4">
+    <div>
+      <gl-button
+        v-if="!feedbackReceived"
+        variant="link"
+        target="_blank"
+        :href="feedbackLinkUrl"
+        @click="shouldRenderModal && $refs.feedbackModal.show()"
+        >{{ feedbackLinkText }}</gl-button
+      >
+      <span v-else class="gl-text-gray-500">
+        {{ $options.i18n.FEEDBACK_THANKS }}
+      </span>
+    </div>
+    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify" />
+  </div>
+</template>

package/src/components/experimental/duo/user_feedback/user_feedback_modal.spec.js

@@ -0,0 +1,61 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlModal, GlFormCheckboxGroup, GlFormCheckbox, GlFormTextarea } from '../../../../index';
+import FeedbackModal, { feedbackOptions } from './user_feedback_modal.vue';
+
+describe('FeedbackModal', () => {
+  let wrapper;
+
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findOptions = () => wrapper.findComponent('[data-testid="feedback-options"]');
+  const findOptionsCheckboxes = () => findOptions().findAllComponents(GlFormCheckbox);
+  const findTextarea = () => wrapper.findComponent(GlFormTextarea);
+  const selectOption = (index = 0) => {
+    wrapper
+      .findAllComponents(GlFormCheckboxGroup)
+      .at(index)
+      .vm.$emit('input', [feedbackOptions[index].value]);
+  };
+  const createComponent = () => {
+    wrapper = shallowMount(FeedbackModal, {
+      stubs: {
+        GlModal,
+        GlFormCheckboxGroup,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('renders the feedback options', () => {
+    const checkboxes = findOptionsCheckboxes();
+    feedbackOptions.forEach((option, index) => {
+      expect(checkboxes.at(index).text()).toBe(option.text);
+      expect(checkboxes.at(index).attributes('value')).toBe(option.value);
+    });
+  });
+
+  it('renders the textarea field for additional feedback', () => {
+    expect(findTextarea().exists()).toBe(true);
+  });
+
+  describe('interaction', () => {
+    it('emits the feedback event when the submit button is clicked', () => {
+      selectOption();
+      findModal().vm.$emit('primary');
+      expect(wrapper.emitted('feedback-submitted')).toEqual([
+        [
+          {
+            feedbackChoices: [feedbackOptions[0].value],
+            extendedTextFeedback: '',
+          },
+        ],
+      ]);
+    });
+    it('does not emit event if there is no option selected', () => {
+      findModal().vm.$emit('primary');
+      expect(wrapper.emitted('feedback-submitted')).toBeUndefined();
+    });
+  });
+});

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

@@ -0,0 +1,124 @@
+<script>
+import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+
+export const i18n = {
+  MODAL_TITLE: 'Give feedback on AI content',
+  MODAL_DESCRIPTION:
+    'To help improve the quality of the content, send your feedback to GitLab team members.',
+  MODAL_OPTIONS_LABEL: 'How was the AI content?',
+  MODAL_MORE_LABEL: 'More information',
+  MODAL_MORE_PLACEHOLDER: 'How could the content be improved?',
+  MODAL_FEEDBACK_OPTIONS: {
+    helpful: 'Helpful',
+    unhelpful: 'Unhelpful or irrelevant',
+    incorrect: 'Factually incorrect',
+    long: 'Too long',
+    abuse: 'Abusive or offensive',
+    other: 'Something else',
+  },
+  MODAL_ACTIONS: {
+    submit: 'Submit',
+    cancel: 'Cancel',
+  },
+};
+
+export const feedbackOptions = [
+  {
+    text: i18n.MODAL_FEEDBACK_OPTIONS.helpful,
+    value: 'helpful',
+  },
+  {
+    text: i18n.MODAL_FEEDBACK_OPTIONS.unhelpful,
+    value: 'unhelpful',
+  },
+  {
+    text: i18n.MODAL_FEEDBACK_OPTIONS.incorrect,
+    value: 'incorrect',
+  },
+  {
+    text: i18n.MODAL_FEEDBACK_OPTIONS.long,
+    value: 'long',
+  },
+  {
+    text: i18n.MODAL_FEEDBACK_OPTIONS.abuse,
+    value: 'abuse',
+  },
+  {
+    text: i18n.MODAL_FEEDBACK_OPTIONS.other,
+    value: 'other',
+  },
+];
+
+export default {
+  name: 'DuoChatFeedbackModal',
+  components: {
+    GlModal,
+    GlFormCheckboxGroup,
+    GlFormGroup,
+    GlFormTextarea,
+  },
+  data() {
+    return {
+      selectedFeedbackOptions: [],
+      extendedFeedback: '',
+    };
+  },
+  methods: {
+    show() {
+      this.$refs.feedbackModal.show();
+    },
+    onFeedbackSubmit() {
+      if (this.selectedFeedbackOptions.length) {
+        this.$emit('feedback-submitted', {
+          feedbackChoices: this.selectedFeedbackOptions,
+          extendedTextFeedback: this.extendedFeedback,
+        });
+      }
+    },
+    onFeedbackCanceled() {
+      this.$refs.feedbackModal.hide();
+    },
+  },
+  actions: {
+    primary: {
+      text: i18n.MODAL_ACTIONS.submit,
+    },
+    cancel: {
+      text: i18n.MODAL_ACTIONS.cancel,
+    },
+  },
+  feedbackOptions,
+  i18n,
+};
+</script>
+<template>
+  <gl-modal
+    ref="feedbackModal"
+    modal-id="feedbackModal"
+    :title="$options.i18n.MODAL_TITLE"
+    :action-primary="$options.actions.primary"
+    :action-cancel="$options.actions.cancel"
+    :visible="false"
+    size="sm"
+    @primary="onFeedbackSubmit"
+    @canceled="onFeedbackCanceled"
+  >
+    <p>{{ $options.i18n.MODAL_DESCRIPTION }}</p>
+    <gl-form-group
+      :label="$options.i18n.MODAL_OPTIONS_LABEL"
+      :optional="false"
+      data-testid="feedback-options"
+    >
+      <gl-form-checkbox-group
+        v-model="selectedFeedbackOptions"
+        :options="$options.feedbackOptions"
+      />
+    </gl-form-group>
+    <gl-form-group :label="$options.i18n.MODAL_MORE_LABEL" optional>
+      <gl-form-textarea
+        v-model="extendedFeedback"
+        :placeholder="$options.i18n.MODAL_MORE_PLACEHOLDER"
+      />
+    </gl-form-group>
+  </gl-modal>
+</template>

package/src/components/regions/empty_state/empty_state.scss

@@ -0,0 +1,3 @@
+.gl-empty-state-content {
+    max-width: 65ch;
+}

package/src/components/regions/empty_state/empty_state.spec.js

@@ -249,8 +249,18 @@ describe('empty state component', () => {
   describe('with custom content class', () => {
     const findContentContainer = () => component.find('[data-testid="gl-empty-state-content"]');
     const customContentClass = 'gl-p-0';
-    const expectedDefaultContentClasses = ['gl-max-w-88', 'gl-m-auto', customContentClass];
+    const expectedDefaultContentClasses = [
+      'gl-empty-state-content',
+      'gl-mx-auto',
+      'gl-my-0',
+      'gl-m-auto',
+      'gl-p-5',
+      customContentClass,
+    ];
     const expectedCompactContentClasses = [
+      'gl-empty-state-content',
+      'gl-mx-auto',
+      'gl-my-0',
       'gl-flex-grow-1',
       'gl-flex-basis-0',
       'gl-px-4',