feat: port CvCheckboxSkeleton to Vue3

src/components/CvCheckbox/CvCheckbox.stories.js

@@ -4,7 +4,7 @@ import {
   storyParametersObject,
 } from '../../global/storybook-utils';
 
-import { CvCheckbox } from '.';
+import { CvCheckbox, CvCheckboxSkeleton } from '.';
 import { action } from '@storybook/addon-actions';
 import { props as propsCvCheck } from '../../use/cvCheck';
 import { ref } from 'vue';
@@ -109,3 +109,15 @@ vModel.parameters = storyParametersObject(
   templateVModel,
   vModel.args
 );
+
+const templateSkeleton = `<cv-checkbox-skeleton></cv-checkbox-skeleton>`;
+
+const TemplateSkeleton = args => {
+  return {
+    components: { CvCheckboxSkeleton },
+    setup: () => {},
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});

src/components/CvCheckbox/CvCheckboxSkeleton.vue

@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="cv-checkbox"
+    :class="`${carbonPrefix}--form-item ${carbonPrefix}--checkbox-wrapper`"
+  >
+    <label :class="`${carbonPrefix}--checkbox-label ${carbonPrefix}--skeleton`">
+      <span
+        :class="`${carbonPrefix}--checkbox-label-text ${carbonPrefix}--skeleton`"
+      ></span>
+    </label>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

src/components/CvCheckbox/__tests__/CvCheckboxSkeleton.spec.js

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import { carbonPrefix } from '../../../global/settings';
+import CvCheckboxSkeleton from '../CvCheckboxSkeleton.vue';
+
+describe('CvCheckboxSkeleton', () => {
+  it('renders checkbox skeleton', async () => {
+    const wrapper = shallowMount(CvCheckboxSkeleton);
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('renders checkbox skeleton with required visual elements', () => {
+    const wrapper = shallowMount(CvCheckboxSkeleton);
+
+    const skeletonWrapper = wrapper.find('.cv-checkbox');
+    const skeletonLabel = skeletonWrapper.find(
+      `.${carbonPrefix}--checkbox-label`
+    );
+    const skeletonText = skeletonWrapper.find(
+      `.${carbonPrefix}--checkbox-label-text`
+    );
+    const expectedSkeletonClass = `${carbonPrefix}--skeleton`;
+
+    expect(skeletonLabel.classes()).toContain(expectedSkeletonClass);
+    expect(skeletonText.classes()).toContain(expectedSkeletonClass);
+  });
+});

src/components/CvCheckbox/__tests__/__snapshots__/CvCheckboxSkeleton.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvCheckboxSkeleton renders checkbox skeleton 1`] = `<div class="cv-checkbox bx--form-item bx--checkbox-wrapper"><label class="bx--checkbox-label bx--skeleton"><span class="bx--checkbox-label-text bx--skeleton"></span></label></div>`;

src/components/CvCheckbox/index.js

@@ -1,3 +1,4 @@
 import CvCheckbox from './CvCheckbox.vue';
-export { CvCheckbox };
+import CvCheckboxSkeleton from './CvCheckboxSkeleton.vue';
+export { CvCheckbox, CvCheckboxSkeleton };
 export default CvCheckbox;