@gitlab/ui 66.18.0 → 66.20.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 16:04:33 GMT
+ * Generated on Mon, 02 Oct 2023 07:10:15 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 16:04:33 GMT
+ * Generated on Mon, 02 Oct 2023 07:10:15 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 27 Sep 2023 16:04:33 GMT
+ * Generated on Mon, 02 Oct 2023 07:10:15 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 16:04:33 GMT
+ * Generated on Mon, 02 Oct 2023 07:10:15 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 16:04:33 GMT
+// Generated on Mon, 02 Oct 2023 07:10:15 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 16:04:33 GMT
+// Generated on Mon, 02 Oct 2023 07:10:15 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.18.0",
+  "version": "66.20.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -88,7 +88,7 @@
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
-    "@babel/core": "^7.22.20",
+    "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@gitlab/eslint-plugin": "19.0.0",

package/src/components/base/banner/banner.scss

@@ -1,19 +1,3 @@
-.gl-banner {
-  @include gl-border-1;
-  @include gl-border-gray-100;
-  @include gl-border-solid;
-  @include gl-display-flex;
-  @include gl-font-base;
-  @include gl-px-8;
-  @include gl-py-6;
-  @include gl-rounded-base;
-  @include gl-relative;
-
-  p {
-    @include gl-line-height-20;
-  }
-}
-
 .gl-banner-illustration {
   @include gl-flex-shrink-0;
   @include gl-mr-6;
@@ -28,26 +12,18 @@
 }
 
 .gl-banner-title {
-  @include gl-font-base;
-  @include gl-font-weight-bold;
-  @include gl-mt-0;
+  @include gl-heading-scale-500;
   @include gl-mb-3;
-  @include gl-line-height-20;
 }
 
 .gl-banner-close {
   @include gl-absolute;
-  @include gl-top-4;
-  @include gl-right-4;
+  @include gl-top-3;
+  @include gl-right-3;
 }
 
 // Introduction variant
 .gl-banner-introduction {
   @include gl-bg-blue-50;
   @include gl-border-blue-300;
-
-  .gl-banner-title {
-    @include gl-font-size-h-display;
-    @include gl-line-height-28;
-  }
 }

package/src/components/base/banner/banner.vue

@@ -108,7 +108,7 @@ export default {
 
 <template>
   <gl-card
-    class="gl-px-8 gl-py-6 gl-line-height-20"
+    class="gl-pl-6 gl-pr-8 gl-py-6"
     :class="{ 'gl-banner-introduction': isIntroducing, 'gl-border-none!': embedded }"
     body-class="gl-display-flex gl-p-0!"
   >

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 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-duo-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-duo-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-duo-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,47 @@
+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,
+      },
+    },
+  },
+};

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/index.js

@@ -98,6 +98,7 @@ export { default as GlCarouselSlide } from './components/base/carousel/carousel_
 
 // Experimental
 export { default as GlExperimentBadge } from './components/experimental/experiment_badge/experiment_badge.vue';
+export { default as GlDuoUserFeedback } from './components/experimental/duo/user_feedback/user_feedback.vue';
 
 // Utilities
 export { default as GlAnimatedNumber } from './components/utilities/animated_number/animated_number.vue';