feat(cv-progress-skeleton): add initial implementation (#1546)

* feat(cv-progress-skeleton): add initial implementation

* test(cv-progress-skeleton): add unit tests

src/components/CvProgress/CvProgress.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import { CvProgress, CvProgressStep } from '.';
+import { CvProgress, CvProgressStep, CvProgressSkeleton } from '.';
 import { Time20 as TimeIcon } from '@carbon/icons-vue';
 // noinspection ES6PreferShortImport
 import { sbCompPrefix } from '../../global/storybook-utils';
@@ -13,6 +13,7 @@ export const Template = args => ({
     CvProgress,
     CvProgressStep,
     TimeIcon,
+    CvProgressSkeleton
   },
   // The story's `args` need to be mapped into the template through the `setup()` method
   setup() {
@@ -106,6 +107,7 @@ const slotTemplate = `
     </cv-progress-step>
   </cv-progress>
 `;
+const skeletonTemplate = `<cv-progress-skeleton :vertical="vertical" />`;
 
 # CvProgress
 
@@ -200,3 +202,23 @@ Use `cv-progress-step` for more control over the display.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+# Skeleton
+
+<Canvas>
+  <Story
+    name="skeleton"
+    parameters={{
+      controls: {
+        include: ['vertical']
+      },
+      docs: { source: { code: skeletonTemplate } },
+    }}
+    args={{
+      template: skeletonTemplate,
+      vertical: false,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/components/CvProgress/CvProgressSkeleton.vue

@@ -0,0 +1,37 @@
+<template>
+  <ul
+    :class="[
+      `${carbonPrefix}--progress`,
+      `${carbonPrefix}--skeleton`,
+      { [`${carbonPrefix}--progress--vertical`]: vertical },
+    ]"
+  >
+    <li
+      v-for="n in 4"
+      v-bind:key="n"
+      :class="[
+        `${carbonPrefix}--progress-step`,
+        `${carbonPrefix}--progress-step--incomplete`,
+      ]"
+    >
+      <div
+        :class="[
+          `${carbonPrefix}--progress-step-button`,
+          `${carbonPrefix}--progress-step-button--unclickable`,
+        ]"
+      >
+        <CircleDash16 />
+        <p :class="[`${carbonPrefix}--progress-label`]" />
+        <span :class="[`${carbonPrefix}--progress-line`]" />
+      </div>
+    </li>
+  </ul>
+</template>
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { CircleDash16 } from '@carbon/icons-vue';
+
+defineProps({
+  vertical: { type: Boolean, default: false },
+});
+</script>

src/components/CvProgress/__tests__/CvProgress.spec.js

@@ -2,8 +2,7 @@
 
 import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
-import CvProgress from '../CvProgress.vue';
-import CvProgressStep from '../CvProgressStep.vue';
+import { CvProgress, CvProgressStep, CvProgressSkeleton } from '..';
 
 const TestSteps = {
   components: { CvProgressStep },
@@ -156,3 +155,46 @@ describe('CvProgress', () => {
     );
   });
 });
+
+describe('CvProgressSkeleton', () => {
+  it('renders 4 steps', async () => {
+    const result = render(CvProgressSkeleton);
+
+    const steps = result.container.querySelectorAll('ul li');
+    expect(steps.length).toBe(4);
+  });
+
+  it('renders correct classes', async () => {
+    const result = render(CvProgressSkeleton);
+
+    const skeleton = result.container.querySelector(
+      '.bx--progress.bx--skeleton'
+    );
+    expect(skeleton).toBeTruthy();
+    expect(skeleton.classList.contains('bx--progress--vertical')).toBeFalsy(); // CvProgress is horizontal by default
+
+    const steps = skeleton.querySelectorAll(
+      '.bx--progress-step.bx--progress-step--incomplete'
+    );
+    for (const step of steps) {
+      const div = step.querySelector(
+        'div.bx--progress-step-button.bx--progress-step-button--unclickable'
+      );
+      expect(div).toBeTruthy();
+
+      const label = step.querySelector('p.bx--progress-label');
+      expect(label).toBeTruthy();
+
+      const span = step.querySelector('span.bx--progress-line');
+      expect(span).toBeTruthy();
+    }
+  });
+
+  it('is accessible', async () => {
+    const main = document.createElement('main');
+    const skeleton = render(CvProgressSkeleton, {
+      container: document.body.appendChild(main),
+    });
+    await expect(skeleton.container).toBeAccessible('cv--progress');
+  }, 10000);
+});

src/components/CvProgress/index.js

@@ -1,4 +1,6 @@
 import CvProgress from './CvProgress.vue';
 import CvProgressStep from './CvProgressStep.vue';
 
-export { CvProgress, CvProgressStep };
+import CvProgressSkeleton from './CvProgressSkeleton.vue';
+
+export { CvProgress, CvProgressStep, CvProgressSkeleton };