@gitlab/ui 42.7.0 → 42.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [42.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.7.0...v42.8.0) (2022-06-22)
+
+
+### Features
+
+* **GlAccordionItem:** expose header-class prop ([5f91275](https://gitlab.com/gitlab-org/gitlab-ui/commit/5f912753f027abd2036332ee583f518f7d369fdc))
+
 # [42.7.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v42.6.0...v42.7.0) (2022-06-22)
 
 

package/dist/components/base/accordion/accordion_item.js

@@ -58,6 +58,15 @@ var script = {
         return value > 0 && value <= 6;
       }
 
+    },
+
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: ''
     }
   },
 
@@ -103,7 +112,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-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header"},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-display-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-font-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "42.7.0",
+  "version": "42.8.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -105,7 +105,7 @@
     "bootstrap": "4.5.3",
     "cypress": "^6.6.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.17.0",
+    "eslint": "8.18.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-storybook": "0.5.12",

package/src/components/base/accordion/accordion_item.spec.js

@@ -32,6 +32,7 @@ describe('GlAccordionItem', () => {
 
   const findButton = () => wrapper.findComponent(GlButton);
   const findCollapse = () => wrapper.findComponent(BCollapse);
+  const findHeader = () => wrapper.find('.gl-accordion-item-header');
 
   it('renders button text', () => {
     createComponent();
@@ -64,6 +65,15 @@ describe('GlAccordionItem', () => {
     expect(wrapper.find('h4.gl-accordion-item-header').exists()).toBeTruthy();
   });
 
+  it.each(['custom-header-class', ['custom-header-class'], { 'custom-header-class': true }])(
+    'applies custom classes to the header',
+    (customClassProp) => {
+      createComponent({ headerClass: customClassProp }, { defaultHeaderLevel: 3 });
+
+      expect(findHeader().classes()).toContain('custom-header-class');
+    }
+  );
+
   it('renders slot text', () => {
     createComponent();
 

package/src/components/base/accordion/accordion_item.vue

@@ -54,6 +54,14 @@ When set, it will ensure the accordion item is initially visible
         return value > 0 && value <= 6;
       },
     },
+    /**
+     * Additional CSS class(es) to be applied to the header.
+     */
+    headerClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -89,7 +97,7 @@ When set, it will ensure the accordion item is initially visible
 
 <template>
   <div class="gl-accordion-item">
-    <component :is="headerComponent" class="gl-accordion-item-header">
+    <component :is="headerComponent" class="gl-accordion-item-header" :class="headerClass">
       <gl-button
         v-gl-collapse-toggle="accordionItemId"
         variant="link"