@gitlab/ui/src/components/base/sorting/sorting_item.stories.js

GitLab UI Components

import { withKnobs } from '@storybook/addon-knobs';
import { documentedStoriesOf } from '../../../../documentation/documented_stories';
import { GlSorting, GlSortingItem } from '../../../../index';
import readme from './sorting_item.md';

const components = {
  GlSorting,
  GlSortingItem,
};

const onMount = (component) => {
  component.$nextTick(() => component.$el.querySelector('.dropdown-toggle').click());
};

documentedStoriesOf('base/sorting/sorting-item', readme)
  .addDecorator(withKnobs)
  .add('default', () => ({
    props: {},
    components,
    template: `
      <gl-sorting text="Sorting Dropdown">
        <gl-sorting-item>Some item</gl-sorting-item>
      </gl-sorting>
    `,
    mounted() {
      onMount(this);
    },
  }))
  .add('with href', () => ({
    props: {},
    components,
    template: `
      <gl-sorting text="Sorting Dropdown">
        <gl-sorting-item href="https://about.gitlab.com/">Some link</gl-sorting-item>
      </gl-sorting>
    `,
    mounted() {
      onMount(this);
    },
  }))
  .add('with active', () => ({
    props: {},
    components,
    template: `
      <gl-sorting text="Sorting Dropdown">
        <gl-sorting-item active>Some active item</gl-sorting-item>
      </gl-sorting>
    `,
    mounted() {
      onMount(this);
    },
  }));