v3: experimenting with CvTag component, including stories

packages/v3/package.json

@@ -105,7 +105,10 @@
     "preset": "@vue/cli-plugin-unit-jest",
     "transform": {
       "^.+\\.vue$": "vue-jest"
-    }
+    },
+    "transformIgnorePatterns": [
+      "/node_modules/(?!@carbon)"
+    ]
   },
   "resolutions": {
     "vue": "^3.0.0",

packages/v3/src/components/CvTag/CvTag.stories.js

@@ -0,0 +1,64 @@
+import CvTag from './CvTag';
+import { tagKinds } from './consts.js';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Components/CvTag',
+  component: CvTag,
+  argTypes: {
+    kind: { control: { type: 'select', options: tagKinds } },
+  },
+};
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvTag },
+    template: `<CvTag @remove="onRemove" v-bind="$props" />`,
+    setup(props) {
+      return {
+        onRemove: action('remove'),
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  kind: 'red',
+  label: 'This is a tag',
+  filter: false,
+};
+Default.parameters = {
+  docs: {
+    source: {
+      code: `
+<CvTag
+  kind="red"
+  label="This is a tag"
+  :filter="false"
+/>
+`,
+    },
+  },
+};
+
+export const Filter = Template.bind({});
+Filter.args = {
+  kind: 'teal',
+  label: 'This is a tag',
+  filter: true,
+};
+Filter.parameters = {
+  docs: {
+    source: {
+      code: `
+<CvTag
+  kind="teal"
+  label="This is a tag"
+  :filter="true"
+/>
+`,
+    },
+  },
+};

packages/v3/src/components/CvTag/CvTag.vue

@@ -0,0 +1,96 @@
+<template>
+  <span :class="tagClasses" role="listitem" :title="title">
+    <span :class="`${carbonPrefix}--tag__label`">
+      {{ label }}
+    </span>
+    <button
+      v-if="filter"
+      :class="`${carbonPrefix}--tag__close-icon`"
+      :aria-label="clearAriaLabel"
+      @click="onRemove"
+      :disabled="disabled"
+    >
+      <Close16 />
+    </button>
+  </span>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { tagKinds } from './consts';
+import Close16 from '@carbon/icons-vue/es/close/16';
+
+export default {
+  name: 'CvTag',
+  components: { Close16 },
+  props: {
+    clearAriaLabel: { type: String, default: 'Clear filter' },
+    /**
+     * disabled by property or if skeleton
+     */
+    disabled: Boolean,
+    /**
+     * label to be used in the CvTag component
+     */
+    label: { type: String, required: true },
+    /**
+     * kind of the CvTag
+     */
+    kind: {
+      type: String,
+      default: 'red',
+      validator(val) {
+        return tagKinds.includes(val);
+      },
+    },
+    /**
+     * 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,
+    },
+  },
+  emits: [
+    /**
+     * Triggers when the clear button is pressed on a filter CvTag
+     */
+    'remove',
+  ],
+  setup(props, { emit }) {
+    const title = computed(() => {
+      return props.filter ? props.clearAriaLabel : null;
+    });
+
+    const tagClasses = computed(() => {
+      const classes = [
+        `${carbonPrefix}--tag`,
+        `${carbonPrefix}--tag--${props.kind}`,
+      ];
+
+      if (props.filter) {
+        classes.push(`${carbonPrefix}--tag--filter`);
+      }
+
+      if (props.disabled) {
+        classes.push(`${carbonPrefix}--tag--disabled`);
+      }
+      return classes;
+    });
+
+    const onRemove = () => {
+      if (!props.disabled) {
+        emit('remove');
+      }
+    };
+
+    return {
+      carbonPrefix,
+      title,
+      tagClasses,
+      onRemove,
+    };
+  },
+};
+</script>

packages/v3/src/components/CvTag/__tests__/CvTag.spec.js

@@ -0,0 +1,89 @@
+import { shallowMount } from '@vue/test-utils';
+import { carbonPrefix } from '../../../global/settings';
+
+import { CvTag } from '..';
+
+describe('CvTag', () => {
+  it('CvTag - default', () => {
+    const tagKind = 'red';
+    const tagLabel = 'test tag label';
+    const wrapper = shallowMount(CvTag, {
+      props: {
+        kind: tagKind,
+        label: tagLabel,
+        filter: false,
+      },
+    });
+
+    // check if the root span exists
+    // - verify classes on the root span
+    const tagSpan = wrapper.find('span');
+    expect(tagSpan.classes()).toContain(`${carbonPrefix}--tag`);
+    expect(tagSpan.classes()).toContain(`${carbonPrefix}--tag--${tagKind}`);
+
+    // check if the label exists
+    // - verify the tag label class
+    // - verify if the label's content is equal to the given label text
+    const labelSpan = tagSpan.find('span');
+    expect(labelSpan.classes()).toContain(`${carbonPrefix}--tag__label`);
+    expect(labelSpan.element.innerText).toEqual();
+
+    // check if the remove button exists
+    // - it should not, becuase the filter is set to false
+    expect(tagSpan.find('button').exists()).toBe(false);
+  });
+
+  it('CvTag - filter', () => {
+    const tagKind = 'green';
+    const tagLabel = 'test tag with filter';
+    const wrapper = shallowMount(CvTag, {
+      props: {
+        kind: tagKind,
+        label: tagLabel,
+        filter: true,
+      },
+    });
+
+    // check if the root span exists
+    // - verify classes on the root span
+    const tagSpan = wrapper.find('span');
+    expect(tagSpan.classes()).toContain(`${carbonPrefix}--tag`);
+    expect(tagSpan.classes()).toContain(`${carbonPrefix}--tag--${tagKind}`);
+
+    // check if the label exists
+    // - verify the tag label class
+    // - verify if the label's content is equal to the given label text
+    const labelSpan = tagSpan.find('span');
+    expect(labelSpan.classes()).toContain(`${carbonPrefix}--tag__label`);
+    expect(labelSpan.element.innerText).toEqual();
+
+    // check if the remove button exists
+    // - it should not, becuase the filter is set to false
+    const removeButton = tagSpan.find('button');
+    expect(removeButton.exists()).toBe(true);
+
+    // click on remove button
+    removeButton.element.click();
+
+    // check if it emitted remove
+    expect(wrapper.emitted().remove).toBeTruthy();
+  });
+
+  it('CvTag - disabled', () => {
+    const tagKind = 'red';
+    const tagLabel = 'test tag label';
+    const wrapper = shallowMount(CvTag, {
+      props: {
+        kind: tagKind,
+        label: tagLabel,
+        filter: false,
+        disabled: true,
+      },
+    });
+
+    // check if the root span exists
+    // - verify tag disabled class on span
+    const tagSpan = wrapper.find('span');
+    expect(tagSpan.classes()).toContain(`${carbonPrefix}--tag--disabled`);
+  });
+});

packages/v3/src/components/CvTag/consts.js

@@ -0,0 +1,15 @@
+export const tagKinds = [
+  'red',
+  'magenta',
+  'purple',
+  'blue',
+  'cyan',
+  'teal',
+  'green',
+  'gray',
+  'cool-gray',
+  'warm-gray',
+  'high-contrast',
+];
+const CvTagConsts = { tagKinds };
+export default CvTagConsts;

packages/v3/src/components/CvTag/index.js

@@ -0,0 +1,5 @@
+import CvTag from './CvTag';
+import CvTagConsts from './consts';
+
+export { CvTag, CvTagConsts };
+export default CvTag;