@carbon/vue 3.0.8-alpha.0 → 3.0.9

package/src/components/CvStructuredList/CvStructuredList.stories.js

@@ -0,0 +1,141 @@
+import { action } from '@storybook/addon-actions';
+import { ref } from 'vue';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import {
+  CvStructuredList,
+  CvStructuredListHeading,
+  CvStructuredListData,
+  CvStructuredListItem,
+} from '.';
+
+export default {
+  title: `${sbCompPrefix}/CvStructuredList`,
+  component: CvStructuredList,
+  argTypes: {
+    selectable: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Makes list items selectable (prop on cv-structured-list component)',
+    },
+    condensed: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Condense spacing of the structured list (prop on cv-structured-list component)',
+    },
+    noWrap: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'props',
+      },
+      description:
+        'Prevent text wrapping in list data (prop on cv-structured-list-data component)',
+    },
+  },
+};
+
+const DefaultListItems = [
+  {
+    id: 'item-1',
+    data: [
+      'Item_1',
+      'Item_1',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.',
+    ],
+  },
+  {
+    id: 'item-2',
+    data: [
+      'Item_2',
+      'Item_2',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.',
+    ],
+  },
+];
+
+const template = `
+<div>
+  <cv-structured-list v-bind="args">
+    <template v-slot:headings>
+      <cv-structured-list-heading>
+        Heading 1
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 2
+      </cv-structured-list-heading>
+      <cv-structured-list-heading>
+        Heading 3
+      </cv-structured-list-heading>
+    </template>
+
+    <template v-slot:items>
+      <cv-structured-list-item v-for="({id, data}, index) in DefaultListItems" :key="index" name="group-1" :value="id" v-model="listValue" @change="onChange">
+        <cv-structured-list-data v-for="(itemData, dataIndex) in data" :key="dataIndex" :no-wrap="args.noWrap">{{ itemData }}</cv-structured-list-data>
+      </cv-structured-list-item>
+    </template>
+  </cv-structured-list>
+
+  <div style="margin-top:1rem; background-color: #888888; padding:1rem" v-if="args.withVModel">
+    <div style="font-size: 150%">Sample interaction</div>
+    <template
+      v-for="({id}, vmodelIndex) in DefaultListItems"
+      :key="vmodelIndex"
+    >
+      <input name="listValue" :id="id" type="radio" @change="(ev) => {listValue = ev.target.id}" :checked="id === listValue" />
+      <label :for="id" style="margin-right: 16px;">{{id}}:</label>
+    </template>
+
+    <div style="margin-top: 16px;">Checked: <span style="font-weight: bold;">{{ listValue }}</span></div>
+  </div>
+</div>
+`;
+
+const Template = args => {
+  return {
+    components: {
+      CvStructuredList,
+      CvStructuredListHeading,
+      CvStructuredListData,
+      CvStructuredListItem,
+    },
+    setup: () => ({
+      args,
+      listValue: ref(DefaultListItems[0].id),
+      DefaultListItems,
+      onChange: action('change'),
+    }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  withVModel: false,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const VModel = Template.bind({});
+VModel.args = {
+  selectable: true,
+  withVModel: true,
+};
+VModel.parameters = storyParametersObject(
+  VModel.parameters,
+  template,
+  VModel.args
+);

package/src/components/CvStructuredList/CvStructuredList.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--structured-list`,
+      {
+        [`${carbonPrefix}--structured-list--selection`]: selectable,
+        [`${carbonPrefix}--structured-list--condensed`]: condensed,
+      },
+    ]"
+    :data-structured-list="selectable"
+  >
+    <div :class="`${carbonPrefix}--structured-list-thead`">
+      <div
+        :class="`${carbonPrefix}--structured-list-row ${carbonPrefix}--structured-list-row--header-row`"
+      >
+        <slot name="headings"></slot>
+        <div
+          v-if="selectable"
+          :class="`${carbonPrefix}--structured-list-th`"
+        ></div>
+      </div>
+    </div>
+    <div :class="`${carbonPrefix}--structured-list-tbody`">
+      <slot name="items"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, provide } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+const props = defineProps({
+  selectable: Boolean,
+  condensed: Boolean,
+});
+
+const emit = defineEmits(['change']);
+
+provide('change', val => {
+  emit('change', val);
+});
+provide('selectable', props.selectable);
+</script>

package/src/components/CvStructuredList/CvStructuredListData.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    :class="[
+      `cv-structured-list-data ${carbonPrefix}--structured-list-td`,
+      {
+        [`${carbonPrefix}--structured-list-content--nowrap`]: noWrap,
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  noWrap: Boolean,
+});
+</script>

package/src/components/CvStructuredList/CvStructuredListHeading.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    :class="`cv-structured-list-heading ${carbonPrefix}--structured-list-th`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvStructuredList/CvStructuredListItem.vue

@@ -0,0 +1,47 @@
+<template>
+  <component
+    :is="tagType"
+    v-bind="$attrs"
+    class="cv-structured-list-item"
+    :value="value"
+    :modelValue="modelValue"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+import { computed, inject, provide } from 'vue';
+import CvStructuredListItemStandard from './CvStructuredListItemStandard.vue';
+import CvStructuredListItemSelectable from './CvStructuredListItemSelectable.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const selectable = inject('selectable');
+const change = inject('change');
+const emit = defineEmits(['change']);
+
+provide('onRadioItemChange', clickedItemCvId => {
+  emit('change', clickedItemCvId);
+  change(clickedItemCvId); //emit to parent
+});
+
+const tagType = computed(() => {
+  return selectable
+    ? CvStructuredListItemSelectable
+    : CvStructuredListItemStandard;
+});
+</script>

package/src/components/CvStructuredList/CvStructuredListItemSelectable.vue

@@ -0,0 +1,56 @@
+<template>
+  <label
+    :for="cvId"
+    :aria-label="label"
+    :class="[
+      `cv-structured-list-item--selectable ${carbonPrefix}--structured-list-row`,
+      { ' ${carbonPrefix}--structured-list-row--selected': isChecked },
+    ]"
+    tabindex="0"
+  >
+    <slot></slot>
+    <input
+      v-bind="$attrs"
+      tabindex="-1"
+      :id="cvId"
+      :class="`${carbonPrefix}--structured-list-input`"
+      :checked="isChecked"
+      :value="value"
+      type="radio"
+      @change="onChange"
+    />
+    <div :class="`${carbonPrefix}--structured-list-td`">
+      <CheckmarkFilled16 :class="`${carbonPrefix}--structured-list-svg`" />
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, propsCvId, useRadio } from '../../use';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+const emit = defineEmits(['update:modelValue', 'change']);
+const { isChecked, onChange } = useRadio(props, emit);
+</script>

package/src/components/CvStructuredList/CvStructuredListItemStandard.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    :class="`cv-structured-list-item--standard ${carbonPrefix}--structured-list-row`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredList.spec.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredList should render \`headings\` slot correctly 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="headings-slot-test">Headings slot test</div>
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render \`items\` slot correctly 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody">
+    <ul class="items-slot-test">
+      <li>Test 1.1</li>
+      <li>Test 1.2</li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when condensed 1`] = `
+<div class="bx--structured-list bx--structured-list--condensed" data-structured-list="false" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when not selectable and not condensed 1`] = `
+<div class="bx--structured-list" data-structured-list="false" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when selectable 1`] = `
+<div class="bx--structured-list bx--structured-list--selection" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when selectable and condensed 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListData.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListData should render correctly when not wrapping text 1`] = `<div class="cv-structured-list-data bx--structured-list-td bx--structured-list-content--nowrap" id="test-3"></div>`;
+
+exports[`CvStructuredListData should render correctly when wrapping text 1`] = `<div class="cv-structured-list-data bx--structured-list-td" id="test-3"></div>`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListHeading.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListHeading should render correctly 1`] = `<div class="cv-structured-list-heading bx--structured-list-th"></div>`;
+
+exports[`CvStructuredListHeading should render with slot correctly 1`] = `
+<div class="cv-structured-list-heading bx--structured-list-th">
+  <div class="headings-slot-default-test">Headings slot default test</div>
+</div>
+`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListItem.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+
+exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
+
+exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;

package/src/components/CvStructuredList/index.js

@@ -0,0 +1,12 @@
+import CvStructuredListData from './CvStructuredListData.vue';
+import CvStructuredListHeading from './CvStructuredListHeading.vue';
+import CvStructuredListItem from './CvStructuredListItem.vue';
+import CvStructuredList from './CvStructuredList.vue';
+export {
+  CvStructuredList,
+  CvStructuredListItem,
+  CvStructuredListHeading,
+  CvStructuredListData,
+};
+
+export default CvStructuredList;

package/src/components/CvTabs/CvTabs.stories.mdx

@@ -5,6 +5,7 @@ import CvTab from './CvTab.vue';
 import CvTabsSkeleton from './CvTabsSkeleton.vue';
 import SbContainer from './_SbContainer.vue';
 import { action } from '@storybook/addon-actions';
+import { IbmSecurity20 as SampleIcon } from '@carbon/icons-vue';
 
 <Meta
   title={`${sbCompPrefix}/CvTabs`}
@@ -23,6 +24,7 @@ export const Template = args => ({
     CvTabs,
     CvTab,
     CvTabsSkeleton,
+    SampleIcon,
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
@@ -31,6 +33,7 @@ export const Template = args => ({
       noDefaultToFirst: args.noDefaultToFirst,
       selectedId: args.selectedId,
       disabledIds: args.disabledIds,
+      slottedTabs: args.slottedTabs,
       onTabSelected: action('tab-selected'),
       onTabSelectedId: action('tab-selected-id'),
     };
@@ -46,20 +49,47 @@ const defaultTemplate = `
   @tab-selected-id="onTabSelectedId"
   aria-label="navigation tab label">
     <cv-tab id="tab-1" label="House" :selected="selectedId === 'tab-1'" :disabled="disabledIds.includes('tab-1')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-1</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-1="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;IbmSecurity20 /&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         29 Arlington Avenue is a house in Islington, London. Douglas Adams shared the house for a time
         with Jonny Brock and Clare Gorst. It is mentioned in the dedication of The Hitchhiker's Guide to
         the Galaxy, which is dedicated to the "Arlingtonians for tea, sympathy, and a sofa."
       </p>
     </cv-tab>
     <cv-tab id="tab-2" label="Bar" :selected="selectedId === 'tab-2'" :disabled="disabledIds.includes('tab-2')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-2</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-2="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;strong style="color: red;"&gt;(*)&lt;/strong&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         The Old Pink Dog Bar was the bar in Han Dold City that Ford Prefect was in when he discovered
         that his Guide had his full entry on Earth on it.
       </p>
     </cv-tab>
     <cv-tab id="tab-3" label="Reach" :selected="selectedId === 'tab-3'" :disabled="disabledIds.includes('tab-3')">
-      <p>
+      <p v-if="slottedTabs">
+        To customise tab look, in CvTabs component use scoped slot named with tab's id.
+        Example: current tab has id "<strong>tab-3</strong>", so the code for customising tab looks like:
+        <div style="background-color: lightgrey; padding: 0.5rem;">
+          &lt;template #tab-3="tab"&gt;
+            {&nbsp;{ tab.label }&nbsp;} &lt;strong style="color: orange;"&gt;(!)&lt;/strong&gt;
+          &lt;template&gt;
+        </div>
+      </p>
+      <p v-else>
         The Third Reach of the Unknown is what might be loosely described as a "place" which exists only
         under high improbability conditions and was created on the starship Heart of Gold due to the
         Infinite Improbability Drive. During Arthur Dent and Ford Prefect's first trip on board the Heart
@@ -81,6 +111,15 @@ const defaultTemplate = `
         <a target='_blank' href='https://hitchhikers.fandom.com/wiki/Main_Page'>credits</a>
       </p>
     </cv-tab>
+    <template v-if="slottedTabs" #tab-1="tab">
+      House <SampleIcon/>
+    </template>
+    <template v-if="slottedTabs" #tab-2="tab">
+      {{tab.label}} <strong style="color: red;">(*)</strong>
+    </template>
+    <template v-if="slottedTabs" #tab-3="tab">
+      {{tab.label}} <strong style="color: orange;">(!)</strong>
+    </template>
 </cv-tabs>
 `;
 const skeletonTemplate = `<cv-tabs-skeleton></cv-tabs-skeleton>`;
@@ -173,3 +212,45 @@ screens, and so I suggest using a different component for mobile cases.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+# Tabs slotted
+
+<Canvas>
+  <Story
+    name="tabsSlot"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'template',
+          'leftOverflowIconButtonProps',
+          'rightOverflowIconButtonProps',
+          'scrollIntoView',
+          'tab-selected',
+          'tab-selected-id',
+          'slottedTabs',
+        ],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      selectedId: '',
+      disabledIds: [],
+      slottedTabs: true
+    }}
+    argTypes={{
+      selectedId: {
+        control: 'select',
+        default: '',
+        options: ['', 'tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+      disabledIds: {
+        control: 'multi-select',
+        options: ['tab-1', 'tab-2', 'tab-3', 'tab-4', 'tab-5'],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTabs/CvTabs.vue

@@ -76,7 +76,9 @@
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
           >
-            {{ tab.label }}
+            <slot :name="tab.uid" v-bind="tab">
+              {{ tab.label }}
+            </slot>
           </button>
         </li>
       </ul>

package/src/components/CvTabs/__tests__/__snapshots__/CvTabs.spec.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvTabs CvTabs - test slotted tab buttons to match snapshot 1`] = `
+<div class="cv-tabs ABC-class-123" style="width: 100%;" aria-label="ABC-aria-label-123">
+  <div data-tabs="" class="cv-tab bx--tabs--scrollable ABC-class-123" role="navigation" aria-label="ABC-aria-label-123"><button aria-hidden="true" aria-label="scroll left" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M5 8L10 3 10.7 3.7 6.4 8 10.7 12.3 10 13z"></path>
+      </svg></button>
+    <!--v-if-->
+    <ul class="bx--tabs--scrollable__nav" role="tablist">
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-1" aria-disabled="false" aria-selected="true" id="tab-1-link" tabindex="0" type="button">Hello <strong style="color: red;">(*)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-2" aria-disabled="false" aria-selected="false" id="tab-2-link" tabindex="-1" type="button">Origin<strong style="color: orange;">(!)</strong></button></li>
+      <li class="cv-tabs-button  bx--tabs--scrollable__nav-item" role="presentation"><button class="bx--tabs--scrollable__nav-link" role="tab" aria-controls="tab-3" aria-disabled="false" aria-selected="false" id="tab-3-link" tabindex="-1" type="button">Tab 3 label</button></li>
+    </ul>
+    <!--v-if--><button aria-hidden="true" aria-label="scroll right" class="bx--tab--overflow-nav-button--hidden" tabindex="-1" type="button"><svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
+        <path d="M11 8L6 13 5.3 12.3 9.6 8 5.3 3.7 6 3z"></path>
+      </svg></button>
+  </div>
+  <div class="cv-tabs__panels">
+    <div class="cv-tab bx--tab-content" id="tab-1" role="tabpanel" aria-labelledby="tab-1-link" aria-hidden="false">Tab 1 content</div>
+    <div class="cv-tab bx--tab-content" id="tab-2" role="tabpanel" aria-labelledby="tab-2-link" aria-hidden="true" hidden="">Tab 2 content</div>
+    <div class="cv-tab bx--tab-content" id="tab-3" role="tabpanel" aria-labelledby="tab-3-link" aria-hidden="true" hidden="">Tab 3 content</div>
+  </div>
+</div>
+`;

package/src/components/CvTag/CvTag.stories.js

@@ -14,7 +14,7 @@ export default {
   },
 };
 
-const template = `<CvTag @remove="onRemove" v-bind="args" />`;
+const template = `<cv-tag @remove="onRemove" v-bind="args" />`;
 const Template = (args, { argTypes }) => {
   return {
     props: Object.keys(argTypes),
@@ -56,6 +56,7 @@ Filter.parameters = storyParametersObject(
 export const Skeleton = Template.bind({});
 Skeleton.args = {
   skeleton: true,
+  label: '',
 };
 Skeleton.parameters = storyParametersObject(
   Skeleton.parameters,