From b7e8c3741fb5df0debaf01e73bb754d6ad4dddb7 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Wed, 13 Feb 2019 14:25:09 +0100
Subject: [PATCH 1/2] feat: add CvButtonSkeleton component

---
 .../cv-button/cv-button-skeleton.vue          | 18 ++++++++++++++++
 src/components/cv-button/cv-button-story.js   | 21 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 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..214907973
--- /dev/null
+++ b/src/components/cv-button/cv-button-skeleton.vue
@@ -0,0 +1,18 @@
+<template>
+  <button
+    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..709743e44 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);
@@ -126,3 +127,23 @@ for (const story of storySet) {
     }
   );
 }
+
+const templateString = `<cv-button-skeleton></cv-button-skeleton>`;
+stories.add(
+  'skeleton',
+  () => ({
+    components: { SvTemplateView, CvButtonSkeleton },
+    template: `
+      <sv-template-view
+        sv-margin
+        sv-position="center"
+        sv-source='${templateString.trim()}'>
+        <template slot="component">${templateString}</template>
+      </sv-template-view>
+    `,
+    props: {},
+  }),
+  {
+    notes: { markdown: CvButtonNotesMD },
+  }
+);

From 6e5b7608c1fd6a7536776506325a5e1957482d89 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Mon, 18 Feb 2019 10:55:11 +0100
Subject: [PATCH 2/2] docs: add a story for CvButtonSkeleton component

---
 .../cv-button/cv-button-skeleton.vue          |  1 +
 src/components/cv-button/cv-button-story.js   | 64 ++++++++++++++-----
 2 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/src/components/cv-button/cv-button-skeleton.vue b/src/components/cv-button/cv-button-skeleton.vue
index 214907973..6b35d9675 100644
--- a/src/components/cv-button/cv-button-skeleton.vue
+++ b/src/components/cv-button/cv-button-skeleton.vue
@@ -1,5 +1,6 @@
 <template>
   <button
+    disabled
     class="bx--btn bx--skeleton"
     :class="{ 'bx--btn--sm': small }"
     type="button"
diff --git a/src/components/cv-button/cv-button-story.js b/src/components/cv-button/cv-button-story.js
index 709743e44..7d6c0c44b 100644
--- a/src/components/cv-button/cv-button-story.js
+++ b/src/components/cv-button/cv-button-story.js
@@ -17,7 +17,7 @@ stories.addDecorator(withNotes);
 
 const exampleIconPath = require('../../assets/images/example-icons.svg');
 
-const preKnobs = {
+let preKnobs = {
   small: {
     group: 'attr',
     type: boolean,
@@ -59,7 +59,7 @@ const preKnobs = {
   },
 };
 
-const variants = [
+let variants = [
   { name: 'default' },
   { name: 'minimal', excludes: ['small', 'disabled', 'iconHref'] },
   {
@@ -88,7 +88,7 @@ const variants = [
   },
 ];
 
-const storySet = knobsHelper.getStorySet(variants, preKnobs);
+let storySet = knobsHelper.getStorySet(variants, preKnobs);
 
 for (const story of storySet) {
   stories.add(
@@ -128,22 +128,52 @@ for (const story of storySet) {
   );
 }
 
-const templateString = `<cv-button-skeleton></cv-button-skeleton>`;
-stories.add(
-  'skeleton',
-  () => ({
-    components: { SvTemplateView, CvButtonSkeleton },
-    template: `
+// 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-position="center"
         sv-source='${templateString.trim()}'>
         <template slot="component">${templateString}</template>
       </sv-template-view>
-    `,
-    props: {},
-  }),
-  {
-    notes: { markdown: CvButtonNotesMD },
-  }
-);
+    `;
+
+      return {
+        components: { CvButtonSkeleton, SvTemplateView },
+        template: templateViewString,
+        props: settings.props,
+      };
+    },
+    {
+      notes: { markdown: CvButtonNotesMD },
+    }
+  );
+}