feat: add AccordionSkeleton and SkeletonText components

src/components/cv-accordion/_cv-accordion-item-skeleton.vue

@@ -0,0 +1,38 @@
+<template>
+  <li
+    class="bx--accordion__item"
+    :class="{ 'bx--accordion__item--active': open }"
+  >
+    <button type="button" class="bx--accordion__heading">
+      <svg
+        class="bx--accordion__arrow"
+        width="8"
+        height="12"
+        viewBox="0 0 8 12"
+        fill-rule="evenodd"
+      >
+        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      </svg>
+      <cv-skeleton-text class="bx--accordion__title"></cv-skeleton-text>
+    </button>
+    <div class="bx--accordion__content">
+      <slot></slot>
+    </div>
+  </li>
+</template>
+
+<script>
+import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
+
+export default {
+  name: 'CvAccordionItemcSkeleton',
+  components: {
+    CvSkeletonText,
+  },
+  props: {
+    open: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style lang="scss"></style>

src/components/cv-accordion/cv-accordion-skeleton.vue

@@ -0,0 +1,27 @@
+<template>
+  <ul class="bx--accordion bx--skeleton">
+    <cv-accordion-item-skeleton :open="true">
+      <cv-skeleton-text width="90%"></cv-skeleton-text>
+      <cv-skeleton-text width="80%"></cv-skeleton-text>
+      <cv-skeleton-text width="95%"></cv-skeleton-text>
+    </cv-accordion-item-skeleton>
+    <cv-accordion-item-skeleton></cv-accordion-item-skeleton>
+    <cv-accordion-item-skeleton></cv-accordion-item-skeleton>
+    <cv-accordion-item-skeleton></cv-accordion-item-skeleton>
+  </ul>
+</template>
+
+<script>
+import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
+import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';
+
+export default {
+  name: 'CvAccordionSkeleton',
+  components: {
+    CvSkeletonText,
+    CvAccordionItemSkeleton,
+  },
+};
+</script>
+
+<style lang="scss"></style>

src/components/cv-accordion/cv-accordion-story.js

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue';
-import { withKnobs, text, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { withNotes } from '@storybook/addon-notes';
 
 import SvTemplateView from '../../_storybook/views/sv-template-view/sv-template-view';
@@ -9,6 +9,7 @@ import knobsHelper from '../../_storybook/utils/knobs-helper';
 import CvAccordionNotesMD from './cv-accordion-notes.md';
 import CvAccordion from './cv-accordion';
 import CvAccordionItem from './cv-accordion-item';
+import CvAccordionSkeleton from './cv-accordion-skeleton';
 
 const stories = storiesOf('CvAccordion', module);
 stories.addDecorator(withKnobs).addDecorator(withNotes);
@@ -117,3 +118,23 @@ for (const story of storySet) {
     }
   );
 }
+
+const templateString = `<cv-accordion-skeleton></cv-accordion-skeleton>`;
+stories.add(
+  'skeleton',
+  () => ({
+    components: { SvTemplateView, CvAccordionSkeleton },
+    template: `
+      <sv-template-view
+        sv-margin
+        sv-position="center"
+        sv-source='${templateString.trim()}'>
+        <template slot="component">${templateString}</template>
+      </sv-template-view>
+    `,
+    props: {},
+  }),
+  {
+    notes: { markdown: CvAccordionNotesMD },
+  }
+);

src/components/cv-skeleton-text/cv-skeleton-text.vue

@@ -0,0 +1,19 @@
+<template>
+  <p
+    class="bx--skeleton__text"
+    :class="{ 'bx--skeleton__heading': heading }"
+    :style="{ width: width }"
+  ></p>
+</template>
+
+<script>
+export default {
+  name: 'CvSkeletonText',
+  props: {
+    width: { type: String, default: '100%' },
+    heading: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style lang="scss"></style>