@gitlab/ui 66.24.0 → 66.25.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [66.25.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.24.0...v66.25.0) (2023-10-05)
+
+
+### Features
+
+* **GlDuoUserFeedback:** introduced new slots ([d771a0f](https://gitlab.com/gitlab-org/gitlab-ui/commit/d771a0f3466e1391f106650eb08130b7853717d9))
+
 # [66.24.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.23.1...v66.24.0) (2023-10-05)
 
 

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

@@ -58,7 +58,7 @@ var 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,"button-text-classes":"gl-white-space-normal! gl-text-left"},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_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,"button-text-classes":"gl-white-space-normal! gl-text-left"},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},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_vm._t("feedback-extra-fields")]},proxy:true}],null,true)}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -85,7 +85,7 @@ var 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_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(" "),_vm._t("feedback-extra-fields",function(){return [_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)]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

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

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

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

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

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

package/dist/tokens/js/tokens.js

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

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

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

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Oct 2023 10:12:46 GMT
+// Generated on Thu, 05 Oct 2023 10:55:11 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.24.0",
+  "version": "66.25.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -5,7 +5,7 @@ the form data on submission.
 
 ## Custom button text
 
-The component allows to customize the button text, presented to the user.
+The component allows to customize the button text presented to the user.
 
 ```html
 <gl-duo-user-feedback feedback-link-text="Leave your custom feedback" />
@@ -13,9 +13,9 @@ The component allows to customize the button text, presented to the user.
 
 ## 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.
+The main goal of this component is to provide an advanced feedback form. However, it might only
+be necessary for some consumers. In such a case, the component bypasses the default
+form and links to an external feedback page/form.
 
 ```html
 <gl-duo-user-feedback feedback-link-url="https://gitlab.com" />
@@ -29,8 +29,8 @@ This component emits the `feedback` event with all the options selected in the f
 <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:
+The returned event contains two props (`feedbackChoices` and `extendedTextFeedback`) from
+the underlying `FeedbackModal` component. Here's an example of a possible event:
 
 ```json
 {
@@ -38,3 +38,49 @@ the underlying `FeedbackModal` component. Here's the example of a possible event
   "extendedTextFeedback": "The answer was too long to understand"
 }
 ```
+
+## Using the `feedback-extra-fields` slot
+
+By default, the component renders one extra textarea field to gather additional feedback
+information from users. However, it may not be enough sometimes, and different use cases of
+this component might need to fine-tune the form to gather information most suitable for that
+or another use case. For this purpose, the component provides the `feedback-extra-fields`
+slot, which can override the default textarea with different fields/information.
+
+Note, however, that the content put into this slot will override the default textarea. So,
+if you want to append additional fields, instead of completely overriding the default textarea,
+you must copy the textarea field from the `DuoChatFeedbackModal` component into the slot.
+
+```html
+<gl-duo-user-feedback
+  :feedback-link-text="feedbackLinkText"
+  :feedback-link-url="feedbackLinkUrl"
+  @feedback="logEvent"
+>
+  <template #feedback-extra-fields>
+    <div class="gl-mb-5">
+      <gl-alert variant="info" :dismissible="false">
+        GitLab team members can not see your conversation. Please be as descriptive as possible.
+      </gl-alert>
+    </div>
+    <gl-form-group label="What were you doing?" optional>
+      <gl-form-textarea
+        placeholder="The situation in which you interacted with GitLab Duo Chat."
+        v-model="didWhat"
+      />
+    </gl-form-group>
+    <gl-form-group label="What were you expecting from the response?" optional>
+      <gl-form-textarea
+        placeholder="What kind of information or assistance were you hoping to receive?"
+        v-model="expectedWhat"
+      />
+    </gl-form-group>
+    <gl-form-group label="How could the response be improved?" optional>
+      <gl-form-textarea
+        placeholder="How the response might better meet your needs."
+        v-model="improveWhat"
+      />
+    </gl-form-group>
+  </template>
+</gl-duo-user-feedback>
+```

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

@@ -1,14 +1,18 @@
 import { nextTick } from 'vue';
 import { shallowMount } from '@vue/test-utils';
 import { GlButton } from '../../../../index';
-import DuoChatFeedbackModal from './user_feedback_modal.vue';
+import FeedbackModal from './user_feedback_modal.vue';
 import UserFeedback, { i18n } from './user_feedback.vue';
 
+const DummyComponent = {
+  template: '<p>dummy</p>',
+};
+
 describe('UserFeedback', () => {
   let wrapper;
   const eventName = 'test_event_name';
 
-  const createComponent = ({ props, data = {} } = {}) => {
+  const createComponent = ({ props, data = {}, slots = {} } = {}) => {
     wrapper = shallowMount(UserFeedback, {
       data() {
         return data;
@@ -17,11 +21,15 @@ describe('UserFeedback', () => {
         eventName,
         ...props,
       },
+      stubs: {
+        FeedbackModal,
+      },
+      slots,
     });
   };
 
   const findButton = () => wrapper.findComponent(GlButton);
-  const findModal = () => wrapper.findComponent(DuoChatFeedbackModal);
+  const findModal = () => wrapper.findComponent(FeedbackModal);
 
   beforeEach(() => {
     createComponent();
@@ -77,4 +85,13 @@ describe('UserFeedback', () => {
       expect(findModal().exists()).toBe(false);
     });
   });
+
+  describe('slots', () => {
+    it('renders the `feedback-extra-fields` slot', () => {
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
+      wrapper.destroy();
+      createComponent({ slots: { 'feedback-extra-fields': DummyComponent } });
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(true);
+    });
+  });
 });

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

@@ -1,4 +1,5 @@
-import GlUserFeedback from './user_feedback.vue';
+import { GlAlert, GlFormGroup, GlFormTextarea } from '../../../../index';
+import GlDuoUserFeedback from './user_feedback.vue';
 import readme from './user_feedback.md';
 
 const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
@@ -6,8 +7,13 @@ const generateProps = ({ feedbackLinkText, feedbackLinkUrl } = {}) => ({
   feedbackLinkUrl,
 });
 
-const Template = (args, { argTypes }) => ({
-  components: { GlUserFeedback },
+export const Default = (args, { argTypes }) => ({
+  components: {
+    GlDuoUserFeedback,
+    GlAlert,
+    GlFormGroup,
+    GlFormTextarea,
+  },
   props: Object.keys(argTypes),
   data() {
     return {
@@ -21,7 +27,7 @@ const Template = (args, { argTypes }) => ({
   },
   template: `
     <div>
-      <gl-user-feedback
+      <gl-duo-user-feedback
         :feedback-link-text="feedbackLinkText"
         :feedback-link-url="feedbackLinkUrl"
         @feedback="logEvent"/>
@@ -29,13 +35,67 @@ const Template = (args, { argTypes }) => ({
     </div>
     `,
 });
-
-export const Default = Template.bind({});
 Default.args = generateProps();
 
+export const Slots = (args, { argTypes }) => ({
+  components: {
+    GlDuoUserFeedback,
+    GlAlert,
+    GlFormGroup,
+    GlFormTextarea,
+  },
+  props: Object.keys(argTypes),
+  data() {
+    return {
+      eventOutput: '',
+      didWhat: '',
+      expectedWhat: '',
+      improveWhat: '',
+    };
+  },
+  methods: {
+    logEvent(event) {
+      const { feedbackChoices } = event;
+      this.eventOutput = JSON.stringify({
+        feedbackChoices,
+        didWhat: this.didWhat,
+        expectedWhat: this.expectedWhat,
+        improveWhat: this.improveWhat,
+      });
+    },
+  },
+  template: `
+    <div>
+      <gl-duo-user-feedback
+        :feedback-link-text="feedbackLinkText"
+        :feedback-link-url="feedbackLinkUrl"
+        @feedback="logEvent">
+        <template #feedback-extra-fields>
+          <div class="gl-mb-5">
+            <gl-alert variant="info" :dismissible="false">
+              GitLab team members can not see your conversation. Please be as descriptive as possible.
+            </gl-alert>
+          </div>
+          <gl-form-group label="What were you doing?" optional>
+            <gl-form-textarea placeholder="The situation in which you interacted with GitLab Duo Chat." v-model="didWhat" />
+          </gl-form-group>
+          <gl-form-group label="What were you expecting from the response?" optional>
+            <gl-form-textarea placeholder="What kind of information or assistance were you hoping to receive?" v-model="expectedWhat" />
+          </gl-form-group>
+          <gl-form-group label="How could the response be improved?" optional>
+            <gl-form-textarea placeholder="How the response might better meet your needs."v-model="improveWhat" />
+          </gl-form-group>
+        </template>
+      </gl-duo-user-feedback>
+      <p v-if="eventOutput"><code>{{ eventOutput }}</code></p>
+    </div>
+    `,
+});
+Slots.parameters = { controls: { disable: true } };
+
 export default {
-  title: 'experimental/duo/user-feedback',
-  component: GlUserFeedback,
+  title: 'experimental/duo/duo-user-feedback',
+  component: GlDuoUserFeedback,
   parameters: {
     storyshots: { disable: true },
     docs: {

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

@@ -72,6 +72,11 @@ export default {
         {{ $options.i18n.FEEDBACK_THANKS }}
       </span>
     </div>
-    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify" />
+    <feedback-modal v-if="shouldRenderModal" ref="feedbackModal" @feedback-submitted="notify">
+      <template #feedback-extra-fields>
+        <!-- @slot The addition Feedback form fields. -->
+        <slot name="feedback-extra-fields"></slot>
+      </template>
+    </feedback-modal>
   </div>
 </template>

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

@@ -2,6 +2,10 @@ import { shallowMount } from '@vue/test-utils';
 import { GlModal, GlFormCheckboxGroup, GlFormCheckbox, GlFormTextarea } from '../../../../index';
 import FeedbackModal, { feedbackOptions } from './user_feedback_modal.vue';
 
+const DummyComponent = {
+  template: '<p>dummy</p>',
+};
+
 describe('FeedbackModal', () => {
   let wrapper;
 
@@ -15,8 +19,9 @@ describe('FeedbackModal', () => {
       .at(index)
       .vm.$emit('input', [feedbackOptions[index].value]);
   };
-  const createComponent = () => {
+  const createComponent = (options = {}) => {
     wrapper = shallowMount(FeedbackModal, {
+      ...options,
       stubs: {
         GlModal,
         GlFormCheckboxGroup,
@@ -58,4 +63,16 @@ describe('FeedbackModal', () => {
       expect(wrapper.emitted('feedback-submitted')).toBeUndefined();
     });
   });
+
+  describe('slots', () => {
+    it('renders the `feedback-extra-fields` slot with default content', () => {
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(false);
+      expect(findTextarea().exists()).toBe(true);
+      wrapper.destroy();
+
+      createComponent({ slots: { 'feedback-extra-fields': DummyComponent } });
+      expect(wrapper.findComponent(DummyComponent).exists()).toBe(true);
+      expect(findTextarea().exists()).toBe(false);
+    });
+  });
 });

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

@@ -114,11 +114,15 @@ export default {
         :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>
+
+    <!-- @slot The addition Feedback form fields. -->
+    <slot name="feedback-extra-fields">
+      <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>
+    </slot>
   </gl-modal>
 </template>