feat: add AccordionSkeleton and SkeletonText components

[sabov]

Issue #167

Adds CvAccordionSkeleton and CvSkeletonText components. Updates CvAccordion story.

Changelog

New

• AccordionSkeleton
• SkeletonText

Changed

• CvAccordion story

Preview

[lee-chase]

Can we make the skeletons 'functional' components?

https://vuejs.org/v2/guide/render-function.html#Functional-Components

If CvSeketonText is for public use it needs a story and markdown file. If it is only for internal consumption then please prefix the filename with an _ otherwise it is picked up by components/index.js

[sabov]

Hey @lee-chase, I was able to turn CvAccordionItemSkeleton to a functional component but it doesn't work for CvAccordionSkeleton. I'm getting this error when I add functional keyword to the template:

vue.esm.js:628 [Vue warn]: Unknown custom element: <cv-accordion-item-skeleton> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in
---> <Anonymous>
       <Root>

Do you have any idea why?

[lee-chase]

Looks to be a known issue @sabov

vuejs/vue#7492

This works or we can use render functions. Not sure it's worth the benefit. What do you think?

<template functional>
  <ul class="bx--accordion bx--skeleton">
    <component :is="injections.components.CvAccordionItemSkeleton" open>
      <component :is="injections.components.CvSkeletonText"/>
      <component :is="injections.components.CvSkeletonText"/>
      <component :is="injections.components.CvSkeletonText"/>
    </component>

    <component :is="injections.components.CvAccordionItemSkeleton"/>
    <component :is="injections.components.CvAccordionItemSkeleton"/>
    <component :is="injections.components.CvAccordionItemSkeleton"/>
  </ul>
</template>

<script>
import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';

export default {
  name: 'CvAccordionSkeleton',
  inject: {
    components: {
      default: {
        CvSkeletonText,
        CvAccordionItemSkeleton,
      },
    },
  },
};
</script>

[lee-chase]

Could make a version soon
vuejs/vue#8143

[sabov]

Hey @lee-chase, I'm not sure about the benefit as well. I would vote for using functional only in dead simple components without any dependencies.

[lee-chase]

OK @sabov we can return to functional if the above issue gets fixed.

Is this ready to merge, or do you need to undo any changes made for functional components?

[sabov]

It's good to go. I've used functional only in _cv-accordion-item-skeleton.vue and it works well.

[lee-chase]

It's good to go. I've used functional only in _cv-accordion-item-skeleton.vue and it works well.

Revert functional for now in case of other issues.