feat: port CvNumberInputSkeleton to Vue3

main.js

@@ -58,6 +58,8 @@ import CvSwitcherItemLink from './src/components/CvUIShell/CvSwitcherItemLink.vu
 import CvColumn from './src/components/CvGrid/CvColumn.vue';
 import CvGrid from './src/components/CvGrid/CvGrid.vue';
 import CvRow from './src/components/CvGrid/CvRow.vue';
+import CvNumberInput from './src/components/CvNumberInput/CvNumberInput.vue';
+import CvNumberInputSkeleton from './src/components/CvNumberInput/CvNumberInputSkeleton.vue';
 
 const all = {
   CvAspectRatio,
@@ -120,6 +122,8 @@ const all = {
   CvColumn,
   CvGrid,
   CvRow,
+  CvNumberInput,
+  CvNumberInputSkeleton,
 };
 export default {
   install(app, options) {

src/components/CvNumberInput/CvNumberInput.stories.js

@@ -0,0 +1,29 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { StorybookGroupConst } from './StorybookGroupConst';
+import CvNumberInput from './CvNumberInput.vue';
+
+export default {
+  title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInput`,
+  component: CvNumberInput,
+  argTypes: {},
+};
+
+const template = `<cv-number-input v-bind="args"></cv-number-input>`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvNumberInput },
+    template,
+    setup: () => ({ args }),
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

src/components/CvNumberInput/CvNumberInput.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>CvNumberInput</div>
+</template>
+
+<script setup></script>

src/components/CvNumberInput/CvNumberInputSkeleton.stories.js

@@ -0,0 +1,30 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { StorybookGroupConst } from './StorybookGroupConst';
+import CvNumberInputSkeleton from './CvNumberInputSkeleton.vue';
+
+export default {
+  title: `${sbCompPrefix}/${StorybookGroupConst}/CvNumberInputSkeleton`,
+  component: CvNumberInputSkeleton,
+};
+
+const template = `<cv-number-input-skeleton></cv-number-input-skeleton>`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvNumberInputSkeleton },
+    template,
+    setup() {
+      return { args };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

src/components/CvNumberInput/CvNumberInputSkeleton.vue

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

src/components/CvNumberInput/StorybookGroupConst.js

@@ -0,0 +1 @@
+export const StorybookGroupConst = 'CvNumberInput';

src/components/CvNumberInput/__tests__/CvNumberInputSkeleton.spec.js

@@ -0,0 +1,20 @@
+/**
+ * NOTE: This test needs to be converted to use the new library `@testing-library/vue`. See CvCheckbox test for example.
+ */
+import { shallowMount } from '@vue/test-utils';
+import { carbonPrefix } from '../../../global/settings';
+import CvNumberInputSkeleton from '../CvNumberInputSkeleton.vue';
+
+describe('CvNumberInputSkeleton', () => {
+  it('renders number input skeleton', () => {
+    const wrapper = shallowMount(CvNumberInputSkeleton);
+
+    const skeletonWrapper = wrapper.find('.cv-number-input');
+    const skeletonLabel = skeletonWrapper.find(`.${carbonPrefix}--label`);
+    const skeletonInput = skeletonWrapper.find(`.${carbonPrefix}--number`);
+    const expectedSkeletonClass = `${carbonPrefix}--skeleton`;
+
+    expect(skeletonLabel.classes()).toContain(expectedSkeletonClass);
+    expect(skeletonInput.classes()).toContain(expectedSkeletonClass);
+  });
+});