UNPKG

@gitlab/ui

Version:
52 lines (49 loc) 1.5 kB
import { withKnobs } from '@storybook/addon-knobs'; import { documentedStoriesOf } from '../../../../documentation/documented_stories'; import { GlNav, GlNavItemDropdown } from '../../../../index'; import readme from './nav_item_dropdown.md'; const components = { GlNav, GlNavItemDropdown, }; documentedStoriesOf('base/nav/nav-item-dropdown', readme) .addDecorator(withKnobs) .add('default', () => ({ components, template: ` <gl-nav> <gl-nav-item-dropdown text="Dropdown"> <gl-dropdown-item>One</gl-dropdown-item> <gl-dropdown-item>Two</gl-dropdown-item> <gl-dropdown-item>Three</gl-dropdown-item> </gl-nav-item-dropdown> </gl-nav> `, })) .add('with divider', () => ({ components, template: ` <gl-nav> <gl-nav-item-dropdown text="Dropdown"> <gl-dropdown-item>Above divider</gl-dropdown-item> <gl-dropdown-divider /> <gl-dropdown-item>Below divider</gl-dropdown-item> </gl-nav-item-dropdown> </gl-nav> `, })) .add('custom button', () => ({ components, template: ` <gl-nav> <gl-nav-item-dropdown text="Dropdown"> <template #button-content> <gl-icon name="question" /> <gl-icon name="angle-down" /> </template> <gl-dropdown-item>One</gl-dropdown-item> <gl-dropdown-item>Two</gl-dropdown-item> </gl-nav-item-dropdown> </gl-nav> `, }));