diff --git a/src/atoms/label/Label.stories.js b/src/atoms/label/Label.stories.js index 6f641f2af..46b33f109 100644 --- a/src/atoms/label/Label.stories.js +++ b/src/atoms/label/Label.stories.js @@ -1,4 +1,3 @@ -import { storiesOf } from '@storybook/vue' import { select, text } from '@storybook/addon-knobs' import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js' @@ -14,43 +13,48 @@ const info = ` const classKnobsConfig = getClassKnobsConfig(selectorsConfig) -storiesOf('Atoms/Label', module) - .addParameters({ info }) - .add('Default', () => ({ - components: { ALabel }, - props: { - classKnobs: { - default: select('BEM Modifier', classKnobsConfig) - }, - textKnobs: { - default: text('Text', 'Label') - } +export default { + title: 'Atoms/Label', + component: ALabel, + parameters: { info } +} + +export const Default = () => ({ + components: { ALabel }, + props: { + classKnobs: { + default: select('BEM Modifier', classKnobsConfig) + }, + textKnobs: { + default: text('Text', 'Label') + } + }, + template: ` + + {{ textKnobs }} + + ` +}) + +export const CustomTag = () => ({ + components: { ALabel }, + props: { + classKnobs: { + default: select('BEM Modifier', classKnobsConfig) }, - template: ` - - {{ textKnobs }} - - ` - })) - .add('Custom tag', () => ({ - components: { ALabel }, - props: { - classKnobs: { - default: select('BEM Modifier', classKnobsConfig) - }, - textKnobs: { - default: text('Text', 'Custom tag label') - }, - tagKnob: { - default: text('Html tag', 'span') - } + textKnobs: { + default: text('Text', 'Custom tag label') }, - template: ` - - {{ textKnobs }} - - ` - })) + tagKnob: { + default: text('Html tag', 'span') + } + }, + template: ` + + {{ textKnobs }} + + ` +})