feat: add support for tag icons (#1618)

Author: davidnixon

src/components/CvTag/CvTag.stories.js

@@ -5,17 +5,39 @@ import {
   sbCompPrefix,
   storyParametersObject,
 } from '../../global/storybook-utils';
+import {
+  DataDefinition20,
+  Bee20,
+  Carbon20,
+  Watson20,
+  IbmCloud20,
+  EdtLoop20,
+  IbmSecurity20,
+} from '@carbon/icons-vue';
+
+const icons = {
+  DataDefinition20,
+  Bee20,
+  Carbon20,
+  Watson20,
+  IbmCloud20,
+  EdtLoop20,
+  IbmSecurity20,
+  undefined,
+};
 
 export default {
   title: `${sbCompPrefix}/CvTag`,
   component: CvTag,
   argTypes: {
     kind: { control: 'select', options: tagKinds },
+    renderIcon: { control: { type: 'select', options: Object.keys(icons) } },
   },
 };
 
 const template = `<cv-tag @remove="onRemove" v-bind="args" />`;
-const Template = (args, { argTypes }) => {
+const Template = (argsIn, { argTypes }) => {
+  let args = { ...argsIn, renderIcon: icons[argsIn.renderIcon] };
   return {
     props: Object.keys(argTypes),
     components: { CvTag },
@@ -31,9 +53,14 @@ const Template = (args, { argTypes }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  label: 'This is a tag',
+  label: 'Hugo Award winner',
   filter: false,
 };
+Default.parameters = {
+  controls: {
+    exclude: ['remove'],
+  },
+};
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -42,8 +69,14 @@ Default.parameters = storyParametersObject(
 
 export const Filter = Template.bind({});
 Filter.args = {
-  label: 'This is a tag',
+  label: 'Filter House',
   filter: true,
+  kind: 'high-contrast',
+};
+Filter.parameters = {
+  controls: {
+    exclude: ['remove'],
+  },
 };
 Filter.parameters = storyParametersObject(
   Filter.parameters,
@@ -56,8 +89,29 @@ Skeleton.args = {
   skeleton: true,
   label: '',
 };
+Skeleton.parameters = {
+  controls: {
+    include: ['small'],
+  },
+};
 Skeleton.parameters = storyParametersObject(
   Skeleton.parameters,
   template,
   Skeleton.args
 );
+
+export const TagIcon = Template.bind({});
+TagIcon.args = {
+  renderIcon: 'DataDefinition20',
+  label: 'Steampunk',
+};
+TagIcon.parameters = {
+  controls: {
+    include: ['renderIcon'],
+  },
+};
+TagIcon.parameters = storyParametersObject(
+  TagIcon.parameters,
+  template,
+  TagIcon.args
+);

src/components/CvTag/CvTag.vue

@@ -1,6 +1,11 @@
 <template>
   <div v-if="skeleton" :class="tagClasses"></div>
   <div v-else :class="tagClasses" role="listitem" :title="title">
+    <cv-svg
+      v-if="!skeleton && renderIcon"
+      :svg="renderIcon"
+      :class="`${carbonPrefix}--tag__custom-icon`"
+    />
     <span :class="`${carbonPrefix}--tag__label`">
       {{ label }}
     </span>
@@ -21,23 +26,19 @@ import { computed } from 'vue';
 import { carbonPrefix } from '../../global/settings';
 import { tagKinds } from './consts';
 import Close16 from '@carbon/icons-vue/es/close/16';
+import CvSvg from '../CvSvg/_CvSvg.vue';
 
 export default {
   name: 'CvTag',
-  components: { Close16 },
+  components: { CvSvg, Close16 },
   props: {
+    /** aria label to use for the x icon for the filter tag */
     clearAriaLabel: { type: String, default: 'Clear filter' },
-    /**
-     * disabled by property or if skeleton
-     */
+    /** disabled by property or if skeleton */
     disabled: Boolean,
-    /**
-     * label to be used in the CvTag component
-     */
+    /** label to be used in the CvTag component */
     label: { type: String, required: true },
-    /**
-     * kind of the CvTag
-     */
+    /** kind of the CvTag */
     kind: {
       type: String,
       default: undefined,
@@ -46,20 +47,22 @@ export default {
       },
     },
     /**
-     * If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the 'remove' event.
+     * If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the
+     * 'remove' event.
      */
     filter: {
       type: Boolean,
       default: false,
     },
-    /**
-     * skeleton used when loading
-     */
+    /** skeleton used when loading */
     skeleton: Boolean,
-    /**
-     * tag size small
-     */
+    /** tag size small */
     small: Boolean,
+    /** Optional prop to render a custom icon. \@carbon/icons-vue icon, href, svg or symbol */
+    renderIcon: {
+      type: [String, Object],
+      default: undefined,
+    },
   },
   emits: [
     /**