@gitlab/ui 66.22.0 → 66.23.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [66.23.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.23.0...v66.23.1) (2023-10-04)
+
+
+### Bug Fixes
+
+* **GlCollapsibleListbox, GlDisclosureDropdown:** Update group border color ([6dc4bf2](https://gitlab.com/gitlab-org/gitlab-ui/commit/6dc4bf25af9fcd85f7de70f3919e5152b0979de0))
+
+# [66.23.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.22.0...v66.23.0) (2023-10-03)
+
+
+### Features
+
+* **GlDuoChatPredefinedPrompts:** new component ([c3e2347](https://gitlab.com/gitlab-org/gitlab-ui/commit/c3e234717b9c33ab8bb3d3f66e13387efe235fd7))
+
 # [66.22.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v66.21.0...v66.22.0) (2023-10-03)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.js

@@ -5,8 +5,8 @@ import { DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS, DISCLOSURE_DROPDOWN_GROUP_N
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const BORDER_CLASSES = {
-  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-pt-2 gl-mt-2',
-  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-pb-2 gl-mb-2'
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.top]: 'gl-border-t gl-border-t-gray-200 gl-pt-2 gl-mt-2',
+  [DISCLOSURE_DROPDOWN_GROUP_BORDER_POSITIONS.bottom]: 'gl-border-b gl-border-b-gray-200 gl-pb-2 gl-mb-2'
 };
 var script = {
   name: DISCLOSURE_DROPDOWN_GROUP_NAME,

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -18,7 +18,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 //
 const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-gray-200', 'gl-pt-1', 'gl-mt-2'];
 const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 var script = {
   name: 'GlCollapsibleListbox',

package/dist/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.js

@@ -0,0 +1,64 @@
+import { GlButton } from '../../../../../../index';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatPredefinedPrompts',
+  components: {
+    GlButton
+  },
+  props: {
+    /**
+     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
+     */
+    prompts: {
+      type: Array,
+      required: true
+    }
+  },
+  methods: {
+    handleClick(prompt) {
+      /**
+       * Emits the prompt string that was clicked.
+       */
+      this.$emit('click', prompt);
+    }
+  }
+};
+
+/* 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-text-right"},_vm._l((_vm.prompts),function(prompt,index){return _c('div',{key:("question-" + index),staticClass:"gl-mt-3"},[_c('gl-button',{attrs:{"category":"secondary","variant":"confirm"},on:{"click":function($event){return _vm.handleClick(prompt)}}},[_c('span',{staticClass:"gl-white-space-normal"},[_vm._v(_vm._s(prompt))])])],1)}),0)};
+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__;

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 10:22:26 GMT
+ * Generated on Wed, 04 Oct 2023 09:48:50 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 10:22:26 GMT
+ * Generated on Wed, 04 Oct 2023 09:48:50 GMT
  */
 
 :root {

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 10:22:26 GMT
+ * Generated on Wed, 04 Oct 2023 09:48:50 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 03 Oct 2023 10:22:26 GMT
+ * Generated on Wed, 04 Oct 2023 09:48:50 GMT
  */
 
 export const BLACK = "#000";

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 03 Oct 2023 10:22:26 GMT
+// Generated on Wed, 04 Oct 2023 09:48:50 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 03 Oct 2023 10:22:26 GMT
+// Generated on Wed, 04 Oct 2023 09:48:50 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.22.0",
+  "version": "66.23.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -94,7 +94,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "5.0.0",
-    "@gitlab/svgs": "3.63.0",
+    "@gitlab/svgs": "3.65.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_group.vue

@@ -8,8 +8,8 @@ import {
 } from './constants';
 
 export const BORDER_CLASSES = {
-  [borderPositions.top]: 'gl-border-t gl-pt-2 gl-mt-2',
-  [borderPositions.bottom]: 'gl-border-b gl-pb-2 gl-mb-2',
+  [borderPositions.top]: 'gl-border-t gl-border-t-gray-200 gl-pt-2 gl-mt-2',
+  [borderPositions.bottom]: 'gl-border-b gl-border-b-gray-200 gl-pb-2 gl-mb-2',
 };
 
 export default {

package/src/components/base/new_dropdowns/listbox/listbox.stories.js

@@ -199,7 +199,7 @@ export const HeaderAndFooter = (args, { argTypes }) => ({
   template: template(
     `
     <template #footer>
-       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-100 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
+       <div class="gl-border-t-solid gl-border-t-1 gl-border-t-gray-200 gl-display-flex gl-flex-direction-column gl-p-2! gl-pt-0!">
         <gl-button @click="selectAllItems" category="tertiary" block class="gl-justify-content-start! gl-mt-2!">
           Select all
         </gl-button>

package/src/components/base/new_dropdowns/listbox/listbox.vue

@@ -33,7 +33,7 @@ import { isOption, itemsValidator, flattenedOptions } from './utils';
 
 export const ITEM_SELECTOR = '[role="option"]';
 const HEADER_ITEMS_BORDER_CLASSES = ['gl-border-b-1', 'gl-border-b-solid', 'gl-border-b-gray-200'];
-const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-pt-1', 'gl-mt-2'];
+const GROUP_TOP_BORDER_CLASSES = ['gl-border-t', 'gl-border-t-gray-200', 'gl-pt-1', 'gl-mt-2'];
 export const SEARCH_INPUT_SELECTOR = '.gl-listbox-search-input';
 
 export default {

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.md

@@ -0,0 +1 @@
+The component is a simple list of strings representing possible prompts to AI.

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '../../../../../../index';
+import GlDuoChatPredefinedPrompts from './duo_chat_predefined_prompts.vue';
+
+describe('GlDuoChatPredefinedPrompts', () => {
+  let wrapper;
+  const predefinedPrompt1 = 'foo';
+  const predefinedPrompt2 = 'bar';
+
+  const createComponent = () => {
+    wrapper = shallowMount(GlDuoChatPredefinedPrompts, {
+      propsData: {
+        prompts: [predefinedPrompt1, predefinedPrompt2],
+      },
+    });
+  };
+
+  const findButtons = () => wrapper.findAllComponents(GlButton);
+
+  it('renders a button for each predefined prompt', () => {
+    createComponent();
+
+    expect(findButtons()).toHaveLength(2);
+  });
+
+  it('emits the click event when a button is clicked', () => {
+    createComponent();
+
+    findButtons().at(0).vm.$emit('click');
+    expect(wrapper.emitted('click')).toEqual([[predefinedPrompt1]]);
+
+    findButtons().at(1).vm.$emit('click');
+    expect(wrapper.emitted('click')).toEqual([[predefinedPrompt1], [predefinedPrompt2]]);
+  });
+});

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.stories.js

@@ -0,0 +1,36 @@
+import GlDuoChatPredefinedPrompts from './duo_chat_predefined_prompts.vue';
+import readme from './duo_chat_predefined_prompts.md';
+
+const generateProps = ({ prompts = [] } = {}) => ({
+  prompts,
+});
+
+const Template = (args, { argTypes }) => ({
+  components: { GlDuoChatPredefinedPrompts },
+  props: Object.keys(argTypes),
+  template: `
+    <gl-duo-chat-predefined-prompts :prompts="prompts" />
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = generateProps({
+  prompts: [
+    'How do I change my password in GitLab?',
+    'How do I fork a project?',
+    'How do I clone a repository?',
+    'How do I create a template?',
+  ],
+});
+
+export default {
+  title: 'experimental/duo/chat/duo_chat_predefined_prompts',
+  component: GlDuoChatPredefinedPrompts,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+};

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue

@@ -0,0 +1,36 @@
+<script>
+import { GlButton } from '../../../../../../index';
+
+export default {
+  name: 'GlDuoChatPredefinedPrompts',
+  components: {
+    GlButton,
+  },
+  props: {
+    /**
+     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
+     */
+    prompts: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    handleClick(prompt) {
+      /**
+       * Emits the prompt string that was clicked.
+       */
+      this.$emit('click', prompt);
+    },
+  },
+};
+</script>
+<template>
+  <div class="gl-text-right">
+    <div v-for="(prompt, index) in prompts" :key="`question-${index}`" class="gl-mt-3">
+      <gl-button category="secondary" variant="confirm" @click="handleClick(prompt)"
+        ><span class="gl-white-space-normal">{{ prompt }}</span></gl-button
+      >
+    </div>
+  </div>
+</template>