diff --git a/src/atoms/label/Label.stories.js b/src/atoms/label/Label.stories.js index 6f641f2af..80cd4d8d7 100644 --- a/src/atoms/label/Label.stories.js +++ b/src/atoms/label/Label.stories.js @@ -1,56 +1,53 @@ -import { storiesOf } from '@storybook/vue' import { select, text } from '@storybook/addon-knobs' -import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js' import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js' import selectorsConfig from './Label.selectors.json' import ALabel from './Label.vue' -const info = ` -

Check Knobs tab to edit component properties dynamically.


- ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')} -` - 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 +} + +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 }} + + ` +})