diff --git a/src/components/CvTextInput/CvTextInput.stories.js b/src/components/CvTextInput/CvTextInput.stories.js
index f8a26fa7c..02d8a2343 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,26 @@ Password.parameters = storyParametersObject(
template,
Password.args
);
+
+const templateSkeleton = ``;
+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
+);
diff --git a/src/components/CvTextInput/CvTextInputSkeleton.vue b/src/components/CvTextInput/CvTextInputSkeleton.vue
new file mode 100644
index 000000000..a29ae8bd2
--- /dev/null
+++ b/src/components/CvTextInput/CvTextInputSkeleton.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
index f84649e37..2037146b7 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,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);
+});
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;