@gitlab/ui 66.18.0 → 66.19.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.19.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.18.0...v66.19.0) (2023-09-29)
+
+
+### Features
+
+* **GlDuoUserFeedback:** Added the component ([f9a6f93](https://gitlab.com/gitlab-org/gitlab-ui/commit/f9a6f93fe0b46ba5638d9ad711e062afb7898636))
+
 # [66.18.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.17.0...v66.18.0) (2023-09-27)
 
 

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

@@ -0,0 +1,94 @@
+import { GlButton } from '../../../../index';
+import FeedbackModal from './user_feedback_modal';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const i18n = {
+  FEEDBACK_LINK_TEXT: 'Give feedback to improve this answer.',
+  FEEDBACK_THANKS: 'Thank you for your feedback.'
+};
+var script = {
+  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 */
+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-pt-4"},[_c('div',[(!_vm.feedbackReceived)?_c('gl-button',{attrs:{"variant":"link","target":"_blank","href":_vm.feedbackLinkUrl},on:{"click":function($event){_vm.shouldRenderModal && _vm.$refs.feedbackModal.show();}}},[_vm._v(_vm._s(_vm.feedbackLinkText))]):_c('span',{staticClass:"gl-text-gray-500"},[_vm._v("\n      "+_vm._s(_vm.$options.i18n.FEEDBACK_THANKS)+"\n    ")])],1),_vm._v(" "),(_vm.shouldRenderModal)?_c('feedback-modal',{ref:"feedbackModal",on:{"feedback-submitted":_vm.notify}}):_vm._e()],1)};
+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__;
+export { i18n };

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

@@ -0,0 +1,121 @@
+import { GlModal, GlFormCheckboxGroup, GlFormGroup, GlFormTextarea } from '../../../../index';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+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'
+  }
+};
+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'
+}];
+var script = {
+  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 */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{ref:"feedbackModal",attrs:{"modal-id":"feedbackModal","title":_vm.$options.i18n.MODAL_TITLE,"action-primary":_vm.$options.actions.primary,"action-cancel":_vm.$options.actions.cancel,"visible":false,"size":"sm"},on:{"primary":_vm.onFeedbackSubmit,"canceled":_vm.onFeedbackCanceled}},[_c('p',[_vm._v(_vm._s(_vm.$options.i18n.MODAL_DESCRIPTION))]),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL_OPTIONS_LABEL,"optional":false,"data-testid":"feedback-options"}},[_c('gl-form-checkbox-group',{attrs:{"options":_vm.$options.feedbackOptions},model:{value:(_vm.selectedFeedbackOptions),callback:function ($$v) {_vm.selectedFeedbackOptions=$$v;},expression:"selectedFeedbackOptions"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL_MORE_LABEL,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL_MORE_PLACEHOLDER},model:{value:(_vm.extendedFeedback),callback:function ($$v) {_vm.extendedFeedback=$$v;},expression:"extendedFeedback"}})],1)],1)};
+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__;
+export { feedbackOptions, i18n };

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 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 16:04:33 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 16:04:33 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 16:04:33 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 16:04:33 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 16:04:33 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.18.0",
+  "version": "66.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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/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';