@gitlab/ui/src/components/utilities/intersperse/intersperse.stories.js

GitLab UI Components

import { array, text, withKnobs } from '@storybook/addon-knobs';
import { documentedStoriesOf } from '../../../../documentation/documented_stories';
import { GlIntersperse } from '../../../../index';
import readme from './intersperse.md';

const template = `
  <div>
    <gl-intersperse :separator="separator" :lastSeparator="lastSeparator">
      <span v-for="item in items">{{ item }}</span>
    </gl-intersperse>
  </div>
  `;

function generateProps({
  separator = ', ',
  lastSeparator = '',
  items = ['Foo', 'Bar', 'Baz', 'Qaz'],
} = {}) {
  return {
    items: {
      default: array('items', items),
    },
    separator: {
      default: text('separator', separator),
    },
    lastSeparator: {
      default: text('lastSeparator', lastSeparator),
    },
  };
}

documentedStoriesOf('utilities/intersperse', readme)
  .addDecorator(withKnobs)
  .add('default', () => ({
    props: generateProps(),
    components: {
      GlIntersperse,
    },
    template,
  }))
  .add('custom seperator', () => ({
    props: generateProps({ separator: '-' }),
    components: {
      GlIntersperse,
    },
    template,
  }))
  .add('custom last separator', () => ({
    props: generateProps({ lastSeparator: ' and ' }),
    components: {
      GlIntersperse,
    },
    template,
  }));