@gitlab/ui 56.1.2 → 56.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [56.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.1.2...v56.2.0) (2023-02-25)
+
+
+### Features
+
+* **GlSingleStat:** add titleIconClass prop ([df18efb](https://gitlab.com/gitlab-org/gitlab-ui/commit/df18efb2e22bb2bcb03edd1e8442e3eb1fcdca76))
+
 ## [56.1.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v56.1.1...v56.1.2) (2023-02-23)
 
 

package/dist/components/charts/single_stat/single_stat.js

@@ -35,6 +35,14 @@ var script = {
       required: false,
       default: null
     },
+    /**
+     * Additional CSS class(es) to be applied to the title icon.
+     */
+    titleIconClass: {
+      type: [Array, Object, String],
+      required: false,
+      default: ''
+    },
     metaIcon: {
       type: String,
       required: false,
@@ -89,7 +97,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',_vm._g(_vm._b({staticClass:"gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.value))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mx-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-display-flex gl-flex-direction-column gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-font-base gl-font-weight-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900"},[_c('span',{staticClass:"gl-font-size-h-display",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.value))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-font-sm gl-mx-2 gl-transition-medium gl-opacity-10",class:{ 'gl-opacity-0!': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{class:_vm.textColor,attrs:{"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "56.1.2",
+  "version": "56.2.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/charts/single_stat/single_stat.spec.js

@@ -7,6 +7,7 @@ const title = 'Singe stat title';
 const value = '100';
 const unit = '%';
 const titleIcon = 'hourglass';
+const titleIconClass = 'title-icon-class';
 const metaIcon = 'heart';
 const metaText = 'Success';
 const variant = 'info';
@@ -145,5 +146,26 @@ describe('GlSingleStat', () => {
         expect(el.exists()).toBe(true);
       });
     });
+
+    describe('`titleIconClass` Prop', () => {
+      it.each`
+        classes
+        ${titleIconClass}
+        ${[titleIconClass]}
+        ${{ [titleIconClass]: true }}
+      `(
+        'correctly adds classes to title icon when `titleIconClass` prop is $classes',
+        ({ classes }) => {
+          createWrapper({
+            titleIcon,
+            titleIconClass: classes,
+          });
+
+          expect(findIemByTestId('title-icon').classes()).toEqual(
+            expect.arrayContaining(['title-icon-class'])
+          );
+        }
+      );
+    });
   });
 });

package/src/components/charts/single_stat/single_stat.stories.js

@@ -13,6 +13,7 @@ const generateProps = ({
   titleIcon = null,
   shouldAnimate = false,
   animationDecimalPlaces = 0,
+  titleIconClass = '',
 } = {}) => ({
   variant,
   title,
@@ -23,6 +24,7 @@ const generateProps = ({
   titleIcon,
   shouldAnimate,
   animationDecimalPlaces,
+  titleIconClass,
 });
 
 const metaText = 'Super fast';
@@ -45,6 +47,7 @@ const Template = (args, { argTypes }) => ({
       :title-icon="titleIcon"
       :should-animate="shouldAnimate"
       :animation-decimal-places="animationDecimalPlaces"
+      :title-icon-class="titleIconClass"
     />`,
 });
 

package/src/components/charts/single_stat/single_stat.vue

@@ -35,6 +35,14 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Additional CSS class(es) to be applied to the title icon.
+     */
+    titleIconClass: {
+      type: [Array, Object, String],
+      required: false,
+      default: '',
+    },
     metaIcon: {
       type: String,
       required: false,
@@ -93,7 +101,12 @@ export default {
     v-on="$listeners"
   >
     <div class="gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2">
-      <gl-icon v-if="showTitleIcon" :name="titleIcon" class="gl-mr-2" data-testid="title-icon" />
+      <gl-icon
+        v-if="showTitleIcon"
+        :name="titleIcon"
+        :class="['gl-mr-2', titleIconClass]"
+        data-testid="title-icon"
+      />
       <span class="gl-font-base gl-font-weight-normal" data-testid="title-text">{{ title }}</span>
     </div>
     <div class="gl-display-flex gl-align-items-baseline gl-font-weight-bold gl-text-gray-900">