feat(cv-text-input-skeleton): add CvTextInputSkeleton

src/components/CvTextInput/CvTextInput.stories.js

@@ -3,7 +3,7 @@ import {
   storyParametersObject,
 } from '../../global/storybook-utils';
 
-import CvTextInput from '.';
+import { CvTextInput, CvTextInputSkeleton } from '.';
 import { ref } from 'vue';
 
 export default {
@@ -243,3 +243,26 @@ Password.parameters = storyParametersObject(
   template,
   Password.args
 );
+
+const templateSkeleton = `<cv-text-input-skeleton v-bind='args'/>`;
+const TemplateSkeleton = args => {
+  return {
+    components: { CvTextInputSkeleton },
+    setup: () => ({ args }),
+    template: templateSkeleton,
+  };
+};
+
+export const Skeleton = TemplateSkeleton.bind({});
+
+Skeleton.parameters = {
+  controls: {
+    include: ['hideLabel'],
+  },
+};
+
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  templateSkeleton,
+  Skeleton.args
+);

src/components/CvTextInput/CvTextInputSkeleton.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="[`${carbonPrefix}--form-item`]">
+    <span
+      v-if="!hideLabel"
+      :class="[`${carbonPrefix}--label`, `${carbonPrefix}--skeleton`]"
+    ></span>
+    <div
+      :class="[`${carbonPrefix}--text-input`, `${carbonPrefix}--skeleton`]"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+
+defineProps({ hideLabel: { type: Boolean, default: false } });
+</script>

src/components/CvTextInput/__tests__/CvTextInput.spec.js

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import CvTextInput from '..';
+import { CvTextInput, CvTextInputSkeleton } from '..';
 
 describe('CvTextInput', () => {
   it("renders label when 'label' prop is passed", () => {
@@ -459,3 +459,45 @@ describe('CvTextInput', () => {
     });
   });
 });
+
+describe('CvTextInputSkeleton', () => {
+  it("renders label when 'hideLabel' prop is omitted", async () => {
+    const skeleton = render(CvTextInputSkeleton);
+    const label = skeleton.container.querySelector(
+      'span.bx--label.bx--skeleton'
+    );
+    expect(label).toBeTruthy();
+  });
+  it("renders label when 'hideLabel' prop is false", async () => {
+    const skeleton = render(CvTextInputSkeleton, {
+      props: { hideLabel: false },
+    });
+    const label = skeleton.container.querySelector(
+      'span.bx--label.bx--skeleton'
+    );
+    expect(label).toBeTruthy();
+  });
+  it("does not render label when 'hideLabel' prop is true", async () => {
+    const skeleton = render(CvTextInputSkeleton, {
+      props: { hideLabel: true },
+    });
+    const label = skeleton.container.querySelector(
+      'span.bx--label.bx--skeleton'
+    );
+    expect(label).toBeFalsy();
+  });
+  it('renders div with correct class', async () => {
+    const skeleton = render(CvTextInputSkeleton);
+    const div = skeleton.container.querySelector(
+      'div.bx--text-input.bx--skeleton'
+    );
+    expect(div).toBeTruthy();
+  });
+  it('is accessible', async () => {
+    const main = document.createElement('main');
+    const skeleton = render(CvTextInputSkeleton, {
+      container: document.body.appendChild(main),
+    });
+    await expect(skeleton.container).toBeAccessible('cv-text-input-skeleton');
+  }, 10000);
+});

src/components/CvTextInput/index.js

@@ -1,4 +1,5 @@
 import CvTextInput from './CvTextInput.vue';
+import CvTextInputSkeleton from './CvTextInputSkeleton.vue';
 
-export { CvTextInput };
+export { CvTextInput, CvTextInputSkeleton };
 export default CvTextInput;