From baa7f3d2ff7083ceaf77f9dd95b0f42cb0b0d4f9 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Thu, 7 Feb 2019 11:47:55 +0100
Subject: [PATCH 1/6] feat: add AccordionSkeleton and SkeletonText components

---
 .../_cv-accordion-item-skeleton.vue           | 38 +++++++++++++++++++
 .../cv-accordion/cv-accordion-skeleton.vue    | 27 +++++++++++++
 .../cv-accordion/cv-accordion-story.js        | 23 ++++++++++-
 .../cv-skeleton-text/cv-skeleton-text.vue     | 19 ++++++++++
 4 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 src/components/cv-accordion/_cv-accordion-item-skeleton.vue
 create mode 100644 src/components/cv-accordion/cv-accordion-skeleton.vue
 create mode 100644 src/components/cv-skeleton-text/cv-skeleton-text.vue

diff --git a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
new file mode 100644
index 000000000..b63f3a266
--- /dev/null
+++ b/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>
diff --git a/src/components/cv-accordion/cv-accordion-skeleton.vue b/src/components/cv-accordion/cv-accordion-skeleton.vue
new file mode 100644
index 000000000..96142c5a2
--- /dev/null
+++ b/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>
diff --git a/src/components/cv-accordion/cv-accordion-story.js b/src/components/cv-accordion/cv-accordion-story.js
index f81a6a296..de40b853c 100644
--- a/src/components/cv-accordion/cv-accordion-story.js
+++ b/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 },
+  }
+);
diff --git a/src/components/cv-skeleton-text/cv-skeleton-text.vue b/src/components/cv-skeleton-text/cv-skeleton-text.vue
new file mode 100644
index 000000000..fc4ae20a6
--- /dev/null
+++ b/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>

From 8bf2badf2afc27415e64cf0c43e15d0959fa5d2e Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Mon, 11 Feb 2019 17:32:23 +0100
Subject: [PATCH 2/6] feat: update CvSkeletonText component

---
 .../cv-skeleton-text-notes.md                 | 21 +++++
 .../cv-skeleton-text-story.js                 | 87 +++++++++++++++++++
 .../cv-skeleton-text/cv-skeleton-text.vue     | 56 ++++++++++--
 3 files changed, 159 insertions(+), 5 deletions(-)
 create mode 100644 src/components/cv-skeleton-text/cv-skeleton-text-notes.md
 create mode 100644 src/components/cv-skeleton-text/cv-skeleton-text-story.js

diff --git a/src/components/cv-skeleton-text/cv-skeleton-text-notes.md b/src/components/cv-skeleton-text/cv-skeleton-text-notes.md
new file mode 100644
index 000000000..2d646f9d0
--- /dev/null
+++ b/src/components/cv-skeleton-text/cv-skeleton-text-notes.md
@@ -0,0 +1,21 @@
+# CvSkeletonText
+
+A utility component that used as a progressive loading state while the user waits for content to load.
+
+## Usage
+
+```html
+<cv-skeleton-text
+  :heading="true"
+  :width="90%"
+  :paragraph="true"
+  :lineCount="3"
+></cv-skeleton-text>
+```
+
+## Attributes
+
+- heading: generates skeleton text at a larger size. Optional. Default - false.
+- width: width (in px or %) of single line of text or max-width of paragraph lines. Optional. Default - 100%.
+- paragraph: will generate multiple lines of text. Optional. Default - false.
+- lineCount: the number of lines in a paragraph. Optional. Default - 3.
diff --git a/src/components/cv-skeleton-text/cv-skeleton-text-story.js b/src/components/cv-skeleton-text/cv-skeleton-text-story.js
new file mode 100644
index 000000000..ca7e3f880
--- /dev/null
+++ b/src/components/cv-skeleton-text/cv-skeleton-text-story.js
@@ -0,0 +1,87 @@
+import { storiesOf } from '@storybook/vue';
+import { withKnobs, boolean, text, number } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+
+import SvTemplateView from '../../_storybook/views/sv-template-view/sv-template-view';
+import knobsHelper from '../../_storybook/utils/knobs-helper';
+
+import CvSkeletonTextNotesMD from './cv-skeleton-text-notes.md';
+import CvSkeletonText from './cv-skeleton-text';
+
+const stories = storiesOf('CvSkeletonText', module);
+stories.addDecorator(withKnobs);
+stories.addDecorator(withNotes);
+
+const preKnobs = {
+  heading: {
+    group: 'attr',
+    type: boolean,
+    config: ['heading', false], // consts.CONFIG
+    prop: {
+      name: 'heading',
+      type: Boolean,
+    },
+  },
+  width: {
+    group: 'attr',
+    type: text,
+    config: ['width', '100%'], // consts.CONFIG
+    prop: { name: 'width', type: String },
+  },
+  paragraph: {
+    group: 'attr',
+    type: boolean,
+    config: ['paragraph', false], // consts.CONFIG
+    prop: {
+      name: 'paragraph',
+      type: Boolean,
+    },
+  },
+  lineCount: {
+    group: 'attr',
+    type: number,
+    config: ['Number of lines', 3],
+    prop: { name: 'line-count', type: Number },
+  },
+};
+
+const variants = [
+  { name: 'default' },
+  { name: 'minimal', excludes: ['heading', 'width', 'paragraph', 'lineCount'] },
+];
+
+const storySet = knobsHelper.getStorySet(variants, preKnobs);
+
+for (const story of storySet) {
+  stories.add(
+    story.name,
+    () => {
+      const settings = story.knobs();
+
+      // ----------------------------------------------------------------
+
+      const templateString = `
+        <cv-skeleton-text${settings.group.attr}></cv-skeleton-text>
+      `;
+
+      // ----------------------------------------------------------------
+
+      const templateViewString = `
+        <sv-template-view
+          sv-margin
+          sv-source='${templateString.trim()}'>
+          <template slot="component">${templateString}</template>
+        </sv-template-view>
+      `;
+
+      return {
+        components: { CvSkeletonText, SvTemplateView },
+        template: templateViewString,
+        props: settings.props,
+      };
+    },
+    {
+      notes: { markdown: CvSkeletonTextNotesMD },
+    }
+  );
+}
diff --git a/src/components/cv-skeleton-text/cv-skeleton-text.vue b/src/components/cv-skeleton-text/cv-skeleton-text.vue
index fc4ae20a6..30c4d9277 100644
--- a/src/components/cv-skeleton-text/cv-skeleton-text.vue
+++ b/src/components/cv-skeleton-text/cv-skeleton-text.vue
@@ -1,9 +1,13 @@
 <template>
-  <p
-    class="bx--skeleton__text"
-    :class="{ 'bx--skeleton__heading': heading }"
-    :style="{ width: width }"
-  ></p>
+  <div>
+    <p
+      class="bx--skeleton__text"
+      :class="{ 'bx--skeleton__heading': heading }"
+      :style="{ width: line.width }"
+      :key="index"
+      v-for="(line, index) in lines"
+    ></p>
+  </div>
 </template>
 
 <script>
@@ -12,6 +16,48 @@ export default {
   props: {
     width: { type: String, default: '100%' },
     heading: { type: Boolean, default: false },
+    lineCount: { type: Number, default: 3 },
+    paragraph: { type: Boolean, default: false },
+  },
+  methods: {
+    getRandomInt: function(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    },
+    calcWidth: function() {
+      let width = this.width;
+      if (this.paragraph) {
+        const { num, unit } = this.widthObj;
+        if (unit === '%') {
+          const randomWidth = this.getRandomInt(0, 75) + 'px';
+          width = `calc(${width} - ${randomWidth})`;
+        } else if (unit === 'px') {
+          width = this.getRandomInt(num - 75, num) + 'px';
+        }
+      }
+      return width;
+    },
+  },
+  computed: {
+    widthObj: function() {
+      const widthObj = { num: parseInt(this.width, 10) };
+      if (this.width.includes('px')) {
+        widthObj.unit = 'px';
+      }
+      if (this.width.includes('%')) {
+        widthObj.unit = '%';
+      }
+      return widthObj;
+    },
+    lines: function() {
+      return Array.from(
+        {
+          length: this.paragraph ? this.lineCount : 1,
+        },
+        (el, i) => ({
+          width: this.calcWidth(),
+        })
+      );
+    },
   },
 };
 </script>

From 06f508477d5673e50386618ed9f63a32b9ee63c4 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Tue, 12 Feb 2019 11:02:21 +0100
Subject: [PATCH 3/6] chore: turned CvAccordionSkeleton to a functional
 component

---
 src/components/cv-accordion/cv-accordion-skeleton.vue | 1 +
 src/components/cv-skeleton-text/cv-skeleton-text.vue  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/cv-accordion/cv-accordion-skeleton.vue b/src/components/cv-accordion/cv-accordion-skeleton.vue
index 96142c5a2..463ade180 100644
--- a/src/components/cv-accordion/cv-accordion-skeleton.vue
+++ b/src/components/cv-accordion/cv-accordion-skeleton.vue
@@ -17,6 +17,7 @@ import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';
 
 export default {
   name: 'CvAccordionSkeleton',
+  functional: true,
   components: {
     CvSkeletonText,
     CvAccordionItemSkeleton,
diff --git a/src/components/cv-skeleton-text/cv-skeleton-text.vue b/src/components/cv-skeleton-text/cv-skeleton-text.vue
index 30c4d9277..1f955fdce 100644
--- a/src/components/cv-skeleton-text/cv-skeleton-text.vue
+++ b/src/components/cv-skeleton-text/cv-skeleton-text.vue
@@ -53,7 +53,7 @@ export default {
         {
           length: this.paragraph ? this.lineCount : 1,
         },
-        (el, i) => ({
+        () => ({
           width: this.calcWidth(),
         })
       );

From f6fa19d8d5ec0f900fa29b086df543a78fb67c74 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Tue, 12 Feb 2019 11:07:27 +0100
Subject: [PATCH 4/6] chore: turn CvAccordionItemcSkeleton to a functional
 component

---
 src/components/cv-accordion/_cv-accordion-item-skeleton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
index b63f3a266..f05d36591 100644
--- a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
+++ b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
@@ -26,6 +26,7 @@ import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 
 export default {
   name: 'CvAccordionItemcSkeleton',
+  functional: true,
   components: {
     CvSkeletonText,
   },

From abb93634f5a0a3e5713fb100310bdf8c8a4eb820 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Tue, 12 Feb 2019 13:19:21 +0100
Subject: [PATCH 5/6] chore: use correct notation for functional components

---
 .../_cv-accordion-item-skeleton.vue           |  7 +++----
 .../cv-accordion/cv-accordion-skeleton.vue    |  1 -
 .../cv-skeleton-text-story.js                 | 21 +++++++++++--------
 .../cv-skeleton-text/cv-skeleton-text.vue     |  2 +-
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
index f05d36591..aba8e325d 100644
--- a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
+++ b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
@@ -1,7 +1,7 @@
-<template>
+<template functional>
   <li
     class="bx--accordion__item"
-    :class="{ 'bx--accordion__item--active': open }"
+    :class="{ 'bx--accordion__item--active': props.open }"
   >
     <button type="button" class="bx--accordion__heading">
       <svg
@@ -25,8 +25,7 @@
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
 
 export default {
-  name: 'CvAccordionItemcSkeleton',
-  functional: true,
+  name: 'CvAccordionItemSkeleton',
   components: {
     CvSkeletonText,
   },
diff --git a/src/components/cv-accordion/cv-accordion-skeleton.vue b/src/components/cv-accordion/cv-accordion-skeleton.vue
index 463ade180..96142c5a2 100644
--- a/src/components/cv-accordion/cv-accordion-skeleton.vue
+++ b/src/components/cv-accordion/cv-accordion-skeleton.vue
@@ -17,7 +17,6 @@ import CvAccordionItemSkeleton from './_cv-accordion-item-skeleton';
 
 export default {
   name: 'CvAccordionSkeleton',
-  functional: true,
   components: {
     CvSkeletonText,
     CvAccordionItemSkeleton,
diff --git a/src/components/cv-skeleton-text/cv-skeleton-text-story.js b/src/components/cv-skeleton-text/cv-skeleton-text-story.js
index ca7e3f880..90ac8ae46 100644
--- a/src/components/cv-skeleton-text/cv-skeleton-text-story.js
+++ b/src/components/cv-skeleton-text/cv-skeleton-text-story.js
@@ -16,22 +16,16 @@ const preKnobs = {
   heading: {
     group: 'attr',
     type: boolean,
-    config: ['heading', false], // consts.CONFIG
+    config: ['Skeleton text at a larger size (heading)', false], // consts.CONFIG
     prop: {
       name: 'heading',
       type: Boolean,
     },
   },
-  width: {
-    group: 'attr',
-    type: text,
-    config: ['width', '100%'], // consts.CONFIG
-    prop: { name: 'width', type: String },
-  },
   paragraph: {
     group: 'attr',
     type: boolean,
-    config: ['paragraph', false], // consts.CONFIG
+    config: ['Use multiple lines of text (paragraph)', false], // consts.CONFIG
     prop: {
       name: 'paragraph',
       type: Boolean,
@@ -40,9 +34,18 @@ const preKnobs = {
   lineCount: {
     group: 'attr',
     type: number,
-    config: ['Number of lines', 3],
+    config: ['The number of lines in a paragraph (lineCount)', 3],
     prop: { name: 'line-count', type: Number },
   },
+  width: {
+    group: 'attr',
+    type: text,
+    config: [
+      'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
+      '100%',
+    ], // consts.CONFIG
+    prop: { name: 'width', type: String },
+  },
 };
 
 const variants = [
diff --git a/src/components/cv-skeleton-text/cv-skeleton-text.vue b/src/components/cv-skeleton-text/cv-skeleton-text.vue
index 1f955fdce..6478c758a 100644
--- a/src/components/cv-skeleton-text/cv-skeleton-text.vue
+++ b/src/components/cv-skeleton-text/cv-skeleton-text.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :style="{ width: width }">
     <p
       class="bx--skeleton__text"
       :class="{ 'bx--skeleton__heading': heading }"

From af995ed6ac16245a0babb85c4e7678a186eb79f2 Mon Sep 17 00:00:00 2001
From: Oleksandr Sabov <sabov@de.ibm.com>
Date: Wed, 13 Feb 2019 10:52:05 +0100
Subject: [PATCH 6/6] chore: revert functional in CvAccordionItemSkeleton

---
 src/components/cv-accordion/_cv-accordion-item-skeleton.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
index aba8e325d..3adc92c97 100644
--- a/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
+++ b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue
@@ -1,7 +1,7 @@
-<template functional>
+<template>
   <li
     class="bx--accordion__item"
-    :class="{ 'bx--accordion__item--active': props.open }"
+    :class="{ 'bx--accordion__item--active': open }"
   >
     <button type="button" class="bx--accordion__heading">
       <svg