overleaf/services/web/frontend/stories/dropdown.stories.js
Jakob Ackermann b350843b4e Merge pull request #3957 from overleaf/ae-stories-context-root
Add required attributes for ContextRoot in stories

GitOrigin-RevId: c0cabf4eb03785c6232abe417e34bd7916b97046
2021-04-29 02:09:17 +00:00

101 lines
2.1 KiB
JavaScript

import React from 'react'
import { Dropdown, DropdownButton, MenuItem } from 'react-bootstrap'
import Icon from '../js/shared/components/icon'
const MenuItems = () => (
<>
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3" active>
Active Item
</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</>
)
const defaultArgs = {
bsStyle: 'default',
title: 'Dropdown',
pullRight: false,
noCaret: false,
className: '',
defaultOpen: true,
}
export const Default = args => {
return (
<DropdownButton {...args}>
<MenuItems />
</DropdownButton>
)
}
Default.args = { ...defaultArgs }
export const Primary = args => {
return (
<DropdownButton {...args}>
<MenuItems />
</DropdownButton>
)
}
Primary.args = { ...defaultArgs, bsStyle: 'primary' }
export const RightAligned = args => {
return (
<div style={{ textAlign: 'right' }}>
<DropdownButton {...args}>
<MenuItems />
</DropdownButton>
</div>
)
}
RightAligned.args = { ...defaultArgs, pullRight: true }
export const SingleIconTransparent = args => {
return (
<div style={{ textAlign: 'right' }}>
<DropdownButton {...args}>
<MenuItems />
</DropdownButton>
</div>
)
}
SingleIconTransparent.args = {
...defaultArgs,
pullRight: true,
title: <Icon type="ellipsis-v" />,
noCaret: true,
className: 'dropdown-toggle-no-background',
}
export const Customized = args => {
return (
<Dropdown
pullRight={args.pullRight}
defaultOpen={args.defaultOpen}
id="dropdown-story"
>
<Dropdown.Toggle
noCaret={args.noCaret}
className={args.className}
bsStyle={args.bsStyle}
>
{args.title}
</Dropdown.Toggle>
<Dropdown.Menu>
<MenuItems />
</Dropdown.Menu>
</Dropdown>
)
}
Customized.args = {
...defaultArgs,
component: Dropdown,
title: 'Toggle & Menu used separately',
}
export default {
title: 'Dropdown',
component: DropdownButton,
}