@gitlab/ui 92.3.1 → 92.4.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [92.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.3.1...v92.4.0) (2024-09-16)
+
+
+### Features
+
+* **DuoWorkflowPanel:** Add Duo panel isExpanded prop ([5916cd1](https://gitlab.com/gitlab-org/gitlab-ui/commit/5916cd18ac361baab554b2b2a64cbdbb62cb59a6))
+
 ## [92.3.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v92.3.0...v92.3.1) (2024-09-13)
 
 

package/dist/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.js

@@ -39,13 +39,16 @@ var script = {
       type: String,
       required: false,
       default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse')
+    },
+    /**
+     * Whether the panel is expanded or not
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
-  data() {
-    return {
-      expanded: true
-    };
-  },
   computed: {
     buttonIcon() {
       return this.expanded ? 'chevron-up' : 'chevron-down';
@@ -53,11 +56,6 @@ var script = {
     buttonTitle() {
       return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
     }
-  },
-  methods: {
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    }
   }
 };
 
@@ -65,7 +63,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',[_c('div',{staticClass:"gl-flex gl-flex-nowrap gl-items-center"},[(_vm.headerIcon)?_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":_vm.headerIcon,"size":24}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-grow gl-items-baseline"},[_c('h2',{staticClass:"gl-mb-0"},[_vm._t("title")],2),_vm._v(" "),_c('small',{staticClass:"gl-ml-3"},[_vm._t("subtitle")],2)]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"category":"tertiary","icon":_vm.buttonIcon,"title":_vm.buttonTitle,"aria-label":_vm.buttonTitle},on:{"click":_vm.toggleExpanded}})],1),_vm._v(" "),_c('gl-collapse',{attrs:{"visible":_vm.expanded}},[_c('div',{staticClass:"gl-ml-7 gl-mt-4 gl-flex-grow"},[_vm._t("content")],2)])],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"gl-flex gl-flex-nowrap gl-items-center"},[(_vm.headerIcon)?_c('gl-icon',{staticClass:"gl-mr-3",attrs:{"name":_vm.headerIcon,"size":24}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-grow gl-items-baseline"},[_c('h2',{staticClass:"gl-mb-0"},[_vm._t("title")],2),_vm._v(" "),_c('small',{staticClass:"gl-ml-3"},[_vm._t("subtitle")],2)]),_vm._v(" "),_c('gl-button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"category":"tertiary","icon":_vm.buttonIcon,"title":_vm.buttonTitle,"aria-label":_vm.buttonTitle},on:{"click":function($event){return _vm.$emit('toggle-panel')}}})],1),_vm._v(" "),_c('gl-collapse',{attrs:{"visible":_vm.expanded}},[_c('div',{staticClass:"gl-ml-7 gl-mt-4 gl-flex-grow"},[_vm._t("content")],2)])],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "92.3.1",
+  "version": "92.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -113,8 +113,8 @@
     "@cypress/grep": "^4.0.1",
     "@gitlab/eslint-plugin": "20.2.1",
     "@gitlab/fonts": "^1.3.0",
-    "@gitlab/stylelint-config": "6.2.1",
-    "@gitlab/svgs": "3.114.0",
+    "@gitlab/stylelint-config": "6.2.2",
+    "@gitlab/svgs": "3.115.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.md

@@ -5,13 +5,17 @@ and WebUI.
 
 To use this component, import it and fill out the available slots:
 
-* `title`: the main title for the panel
-* `subtitle`: the small text adjacent to the title
-* `content`: the content of the panel, hidden away when the collapse is toggled
+- `title`: the main title for the panel
+- `subtitle`: the small text adjacent to the title
+- `content`: the content of the panel, hidden away when the collapse is toggled
 
 Also provide an icon via the `headerIcon` prop. This icon is displayed adjacent
 to the title.
 
+You can pass `expanded` prop set to `false` if you need a section to be
+collapsed by default. You can also listen to `toggle-panel` event to know
+when the expanded state changed.
+
 Translations for the title of the single button can be provided either via the
 props `expandButtonTitle` and `collapseTitleButton` or via the translation
 configuration:

package/src/components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue

@@ -34,9 +34,14 @@ export default {
       required: false,
       default: translate('GlDuoWorkflowPanel.collapseButtonTitle', 'Collapse'),
     },
-  },
-  data() {
-    return { expanded: true };
+    /**
+     * Whether the panel is expanded or not
+     */
+    expanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     buttonIcon() {
@@ -46,11 +51,6 @@ export default {
       return this.expanded ? this.collapsePanelButtonTitle : this.expandPanelButtonTitle;
     },
   },
-  methods: {
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
-  },
 };
 </script>
 <template>
@@ -74,7 +74,7 @@ export default {
         :icon="buttonIcon"
         :title="buttonTitle"
         :aria-label="buttonTitle"
-        @click="toggleExpanded"
+        @click="$emit('toggle-panel')"
       />
     </div>
     <gl-collapse :visible="expanded">