From 1a341b1993b29dc8d18d24daa7c31090754bc929 Mon Sep 17 00:00:00 2001
From: Mateus Bandeira <bandeira@ibm.com>
Date: Wed, 11 Oct 2023 20:01:59 -0300
Subject: [PATCH 1/6] feat(cv-text-input-skeleton): add initial skeleton
 implementation

---
 .../CvTextInput/CvTextInput.stories.js         | 18 +++++++++++++++++-
 .../CvTextInput/CvTextInputSkeleton.vue        | 14 ++++++++++++++
 src/components/CvTextInput/index.js            |  3 ++-
 3 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CvTextInput/CvTextInputSkeleton.vue

diff --git a/src/components/CvTextInput/CvTextInput.stories.js b/src/components/CvTextInput/CvTextInput.stories.js
index f8a26fa7c..a262e4c78 100644
--- a/src/components/CvTextInput/CvTextInput.stories.js
+++ b/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,19 @@ 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 = storyParametersObject(
+  Skeleton.parameters,
+  templateSkeleton,
+  Skeleton.args
+);
diff --git a/src/components/CvTextInput/CvTextInputSkeleton.vue b/src/components/CvTextInput/CvTextInputSkeleton.vue
new file mode 100644
index 000000000..0198f2a08
--- /dev/null
+++ b/src/components/CvTextInput/CvTextInputSkeleton.vue
@@ -0,0 +1,14 @@
+<template>
+  <div :class="[`${carbonPrefix}--form-item`]">
+    <span
+      :class="[`${carbonPrefix}--label`, `${carbonPrefix}--skeleton`]"
+    ></span>
+    <div
+      :class="[`${carbonPrefix}--text-input`, `${carbonPrefix}--skeleton`]"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>
diff --git a/src/components/CvTextInput/index.js b/src/components/CvTextInput/index.js
index 1a7ec58e3..2cc846e10 100644
--- a/src/components/CvTextInput/index.js
+++ b/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;

From 0d1e1b820b1a1564afbd75a7408e7251430522b6 Mon Sep 17 00:00:00 2001
From: Mateus Bandeira <bandeira@ibm.com>
Date: Thu, 12 Oct 2023 11:02:56 -0300
Subject: [PATCH 2/6] test(cv-text-input-skeleton): add tests

---
 .../CvTextInput/CvTextInputSkeleton.vue       |  7 +++-
 .../CvTextInput/__tests__/CvTextInput.spec.js | 37 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/CvTextInput/CvTextInputSkeleton.vue b/src/components/CvTextInput/CvTextInputSkeleton.vue
index 0198f2a08..716b86e90 100644
--- a/src/components/CvTextInput/CvTextInputSkeleton.vue
+++ b/src/components/CvTextInput/CvTextInputSkeleton.vue
@@ -1,8 +1,9 @@
 <template>
   <div :class="[`${carbonPrefix}--form-item`]">
-    <span
+    <label
+      v-if="!hideLabel"
       :class="[`${carbonPrefix}--label`, `${carbonPrefix}--skeleton`]"
-    ></span>
+    ></label>
     <div
       :class="[`${carbonPrefix}--text-input`, `${carbonPrefix}--skeleton`]"
     ></div>
@@ -11,4 +12,6 @@
 
 <script setup>
 import { carbonPrefix } from '../../global/settings';
+
+defineProps({ hideLabel: { type: Boolean, default: false } });
 </script>
diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
index f84649e37..df2a960b6 100644
--- a/src/components/CvTextInput/__tests__/CvTextInput.spec.js
+++ b/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,38 @@ describe('CvTextInput', () => {
     });
   });
 });
+
+describe('CvTextInputSkeleton', () => {
+  it("renders label when 'hideLabel' prop is omitted", async () => {
+    const skeleton = render(CvTextInputSkeleton);
+    const label = skeleton.container.querySelector(
+      'label.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(
+      'label.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(
+      'label.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();
+  });
+});

From 16f2b9680ca58e75175b3cbc2de73456540b2355 Mon Sep 17 00:00:00 2001
From: Mateus Bandeira <bandeira@ibm.com>
Date: Thu, 12 Oct 2023 11:25:08 -0300
Subject: [PATCH 3/6] fix(cv-text-input-skeleton): use span instead of label

---
 src/components/CvTextInput/CvTextInputSkeleton.vue       | 4 ++--
 src/components/CvTextInput/__tests__/CvTextInput.spec.js | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/CvTextInput/CvTextInputSkeleton.vue b/src/components/CvTextInput/CvTextInputSkeleton.vue
index 716b86e90..a29ae8bd2 100644
--- a/src/components/CvTextInput/CvTextInputSkeleton.vue
+++ b/src/components/CvTextInput/CvTextInputSkeleton.vue
@@ -1,9 +1,9 @@
 <template>
   <div :class="[`${carbonPrefix}--form-item`]">
-    <label
+    <span
       v-if="!hideLabel"
       :class="[`${carbonPrefix}--label`, `${carbonPrefix}--skeleton`]"
-    ></label>
+    ></span>
     <div
       :class="[`${carbonPrefix}--text-input`, `${carbonPrefix}--skeleton`]"
     ></div>
diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
index df2a960b6..c66265ecd 100644
--- a/src/components/CvTextInput/__tests__/CvTextInput.spec.js
+++ b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
@@ -464,7 +464,7 @@ describe('CvTextInputSkeleton', () => {
   it("renders label when 'hideLabel' prop is omitted", async () => {
     const skeleton = render(CvTextInputSkeleton);
     const label = skeleton.container.querySelector(
-      'label.bx--label.bx--skeleton'
+      'span.bx--label.bx--skeleton'
     );
     expect(label).toBeTruthy();
   });
@@ -473,7 +473,7 @@ describe('CvTextInputSkeleton', () => {
       props: { hideLabel: false },
     });
     const label = skeleton.container.querySelector(
-      'label.bx--label.bx--skeleton'
+      'span.bx--label.bx--skeleton'
     );
     expect(label).toBeTruthy();
   });
@@ -482,7 +482,7 @@ describe('CvTextInputSkeleton', () => {
       props: { hideLabel: true },
     });
     const label = skeleton.container.querySelector(
-      'label.bx--label.bx--skeleton'
+      'span.bx--label.bx--skeleton'
     );
     expect(label).toBeFalsy();
   });

From 1634cdd3225ae51239cc6e2838499c6704f83b2a Mon Sep 17 00:00:00 2001
From: Mateus Bandeira <bandeira@ibm.com>
Date: Sat, 14 Oct 2023 22:00:18 -0300
Subject: [PATCH 4/6] fix(cv-text-input-skeleton): close tag correctly

---
 src/components/CvTextInput/CvTextInput.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CvTextInput/CvTextInput.stories.js b/src/components/CvTextInput/CvTextInput.stories.js
index a262e4c78..f0b88d2c7 100644
--- a/src/components/CvTextInput/CvTextInput.stories.js
+++ b/src/components/CvTextInput/CvTextInput.stories.js
@@ -244,7 +244,7 @@ Password.parameters = storyParametersObject(
   Password.args
 );
 
-const templateSkeleton = `<cv-text-input-skeleton v-bind='args'>`;
+const templateSkeleton = `<cv-text-input-skeleton v-bind='args'/>`;
 const TemplateSkeleton = args => {
   return {
     components: { CvTextInputSkeleton },

From 656b80e65a084efd3fffeda78bea0a24f42c7623 Mon Sep 17 00:00:00 2001
From: Mateus Bandeira <bandeira@ibm.com>
Date: Sat, 14 Oct 2023 22:01:09 -0300
Subject: [PATCH 5/6] fix(cv-text-input-skeleton): remove unused controls

---
 src/components/CvTextInput/CvTextInput.stories.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/CvTextInput/CvTextInput.stories.js b/src/components/CvTextInput/CvTextInput.stories.js
index f0b88d2c7..02d8a2343 100644
--- a/src/components/CvTextInput/CvTextInput.stories.js
+++ b/src/components/CvTextInput/CvTextInput.stories.js
@@ -254,6 +254,13 @@ const TemplateSkeleton = args => {
 };
 
 export const Skeleton = TemplateSkeleton.bind({});
+
+Skeleton.parameters = {
+  controls: {
+    include: ['hideLabel'],
+  },
+};
+
 Skeleton.parameters = storyParametersObject(
   Skeleton.parameters,
   templateSkeleton,

From 8dc6d12d802c1b59000ce1d63911d678279adca9 Mon Sep 17 00:00:00 2001
From: Mateus Bandeira <bandeira@ibm.com>
Date: Wed, 18 Oct 2023 20:28:54 -0300
Subject: [PATCH 6/6] test(cv-text-input-skeleton): add accessibility test

---
 src/components/CvTextInput/__tests__/CvTextInput.spec.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
index c66265ecd..2037146b7 100644
--- a/src/components/CvTextInput/__tests__/CvTextInput.spec.js
+++ b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
@@ -493,4 +493,11 @@ describe('CvTextInputSkeleton', () => {
     );
     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);
 });