From 037ab83418ad2c57425db228c7292a464567c6bc Mon Sep 17 00:00:00 2001
From: Aleksandr Sabov <alexsabov@gmail.com>
Date: Mon, 18 Feb 2019 16:23:18 +0100
Subject: [PATCH] feat: add CvButtonSkeleton component (#213)

* feat: add CvButtonSkeleton component

* docs: add a story for CvButtonSkeleton component
---
 .../cv-button/cv-button-skeleton.vue          | 19 +++++++
 src/components/cv-button/cv-button-story.js   | 57 ++++++++++++++++++-
 2 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 src/components/cv-button/cv-button-skeleton.vue

diff --git a/src/components/cv-button/cv-button-skeleton.vue b/src/components/cv-button/cv-button-skeleton.vue
new file mode 100644
index 000000000..6b35d9675
--- /dev/null
+++ b/src/components/cv-button/cv-button-skeleton.vue
@@ -0,0 +1,19 @@
+<template>
+  <button
+    disabled
+    class="bx--btn bx--skeleton"
+    :class="{ 'bx--btn--sm': small }"
+    type="button"
+  ></button>
+</template>
+
+<script>
+export default {
+  name: 'CvButtonSkeleton',
+  props: {
+    small: { type: Boolean, default: false },
+  },
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/components/cv-button/cv-button-story.js b/src/components/cv-button/cv-button-story.js
index 3d54765a0..7d6c0c44b 100644
--- a/src/components/cv-button/cv-button-story.js
+++ b/src/components/cv-button/cv-button-story.js
@@ -9,6 +9,7 @@ import knobsHelper from '../../_storybook/utils/knobs-helper';
 
 import CvButtonNotesMD from './cv-button-notes.md';
 import CvButton from './cv-button';
+import CvButtonSkeleton from './cv-button-skeleton';
 
 const stories = storiesOf('CvButton', module);
 stories.addDecorator(withKnobs);
@@ -16,7 +17,7 @@ stories.addDecorator(withNotes);
 
 const exampleIconPath = require('../../assets/images/example-icons.svg');
 
-const preKnobs = {
+let preKnobs = {
   small: {
     group: 'attr',
     type: boolean,
@@ -58,7 +59,7 @@ const preKnobs = {
   },
 };
 
-const variants = [
+let variants = [
   { name: 'default' },
   { name: 'minimal', excludes: ['small', 'disabled', 'iconHref'] },
   {
@@ -87,7 +88,7 @@ const variants = [
   },
 ];
 
-const storySet = knobsHelper.getStorySet(variants, preKnobs);
+let storySet = knobsHelper.getStorySet(variants, preKnobs);
 
 for (const story of storySet) {
   stories.add(
@@ -126,3 +127,53 @@ for (const story of storySet) {
     }
   );
 }
+
+// cv-button-skeleton
+
+preKnobs = {
+  small: {
+    group: 'attr',
+    type: boolean,
+    config: ['small', false], // consts.CONFIG], // fails when used with number in storybook 4.1.4
+    prop: {
+      name: 'small',
+      type: Boolean,
+    },
+  },
+};
+
+variants = [{ name: 'skeleton' }];
+
+storySet = knobsHelper.getStorySet(variants, preKnobs);
+
+for (const story of storySet) {
+  stories.add(
+    story.name,
+    () => {
+      const settings = story.knobs();
+
+      const templateString = `
+        <cv-button-skeleton${settings.group.attr}></cv-button-skeleton>
+      `;
+
+      // ----------------------------------------------------------------
+
+      const templateViewString = `
+      <sv-template-view
+        sv-margin
+        sv-source='${templateString.trim()}'>
+        <template slot="component">${templateString}</template>
+      </sv-template-view>
+    `;
+
+      return {
+        components: { CvButtonSkeleton, SvTemplateView },
+        template: templateViewString,
+        props: settings.props,
+      };
+    },
+    {
+      notes: { markdown: CvButtonNotesMD },
+    }
+  );
+}