From e8814d1cb103822ec4c3fd2c8b99c9b08dfadac6 Mon Sep 17 00:00:00 2001 From: Aleksandr Sabov Date: Wed, 13 Feb 2019 11:06:21 +0100 Subject: [PATCH] feat: add AccordionSkeleton and SkeletonText components (#178) * feat: add AccordionSkeleton and SkeletonText components * feat: update CvSkeletonText component * chore: turned CvAccordionSkeleton to a functional component * chore: turn CvAccordionItemcSkeleton to a functional component * chore: use correct notation for functional components * chore: revert functional in CvAccordionItemSkeleton --- .../_cv-accordion-item-skeleton.vue | 38 ++++++++ .../cv-accordion/cv-accordion-skeleton.vue | 27 ++++++ .../cv-accordion/cv-accordion-story.js | 21 +++++ .../cv-skeleton-text-notes.md | 21 +++++ .../cv-skeleton-text-story.js | 90 +++++++++++++++++++ .../cv-skeleton-text/cv-skeleton-text.vue | 65 ++++++++++++++ 6 files changed, 262 insertions(+) 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-notes.md create mode 100644 src/components/cv-skeleton-text/cv-skeleton-text-story.js 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..3adc92c97 --- /dev/null +++ b/src/components/cv-accordion/_cv-accordion-item-skeleton.vue @@ -0,0 +1,38 @@ + + + + + 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 @@ + + + + + diff --git a/src/components/cv-accordion/cv-accordion-story.js b/src/components/cv-accordion/cv-accordion-story.js index 844ce10d5..de40b853c 100644 --- a/src/components/cv-accordion/cv-accordion-story.js +++ b/src/components/cv-accordion/cv-accordion-story.js @@ -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 = ``; +stories.add( + 'skeleton', + () => ({ + components: { SvTemplateView, CvAccordionSkeleton }, + template: ` + + + + `, + props: {}, + }), + { + notes: { markdown: CvAccordionNotesMD }, + } +); 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 + +``` + +## 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..90ac8ae46 --- /dev/null +++ b/src/components/cv-skeleton-text/cv-skeleton-text-story.js @@ -0,0 +1,90 @@ +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: ['Skeleton text at a larger size (heading)', false], // consts.CONFIG + prop: { + name: 'heading', + type: Boolean, + }, + }, + paragraph: { + group: 'attr', + type: boolean, + config: ['Use multiple lines of text (paragraph)', false], // consts.CONFIG + prop: { + name: 'paragraph', + type: Boolean, + }, + }, + lineCount: { + group: 'attr', + type: number, + 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 = [ + { 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 = ` + + `; + + // ---------------------------------------------------------------- + + const templateViewString = ` + + + + `; + + 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 new file mode 100644 index 000000000..6478c758a --- /dev/null +++ b/src/components/cv-skeleton-text/cv-skeleton-text.vue @@ -0,0 +1,65 @@ + + + + +