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 @@
+
+
+
+
+
+
+
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 = `
+
+ `;
+
+ // ----------------------------------------------------------------
+
+ const templateViewString = `
+
+ ${templateString}
+
+ `;
+
+ return {
+ components: { CvButtonSkeleton, SvTemplateView },
+ template: templateViewString,
+ props: settings.props,
+ };
+ },
+ {
+ notes: { markdown: CvButtonNotesMD },
+ }
+ );
+}