@gitlab/ui 66.18.0 → 66.20.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [66.20.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.19.0...v66.20.0) (2023-10-02)
+
+
+### Bug Fixes
+
+* **Banner:** Make banner match design spec ([3e73557](https://gitlab.com/gitlab-org/gitlab-ui/commit/3e73557aba7cdcf3bbf21a3a92f100c66762b3b6))
+
+
+### Features
+
+* **Banner:** Update heading to use heading scale ([4757149](https://gitlab.com/gitlab-org/gitlab-ui/commit/47571493f27b7fda9566a84f1b16a7b7c8335914))
+
+# [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/base/banner/banner.js

@@ -109,7 +109,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-card',{staticClass:"gl-px-8 gl-py-6 gl-line-height-20",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',_vm._b({attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},'gl-button',_vm.buttonAttributes,false),[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-card',{staticClass:"gl-pl-6 gl-pr-8 gl-py-6",class:{ 'gl-banner-introduction': _vm.isIntroducing, 'gl-border-none!': _vm.embedded },attrs:{"body-class":"gl-display-flex gl-p-0!"}},[(_vm.svgPath)?_c('div',{staticClass:"gl-banner-illustration"},[_c('img',{attrs:{"src":_vm.svgPath,"alt":""}})]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-banner-content"},[_c('h2',{staticClass:"gl-banner-title"},[_vm._v(_vm._s(_vm.title))]),_vm._v(" "),_vm._t("default"),_vm._v(" "),_c('gl-button',_vm._b({attrs:{"variant":"confirm","category":"primary","data-testid":"gl-banner-primary-button","href":_vm.buttonLink},on:{"click":_vm.primaryButtonClicked}},'gl-button',_vm.buttonAttributes,false),[_vm._v(_vm._s(_vm.buttonText))]),_vm._v(" "),_vm._t("actions")],2),_vm._v(" "),_c('close-button',{staticClass:"gl-banner-close",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.handleClose}})],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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 };