overleaf/services/web/frontend/stories/editor/layout-dropdown-button.stories.tsx
Antoine Clausse 43e8467860 [web] Wrap Layout MenuItem description on a new line in BS5 (#21206)
* [storybook] Rerender when switching BS version

* Move comment to related code (bsStyle)

* Wrap the Layout MenuItem "subdued" text, using flex-column

* Create a Story for `LayoutDropdownButton`

* Center `.layout-dropdown .dropdown-item` vertically

* Remove unused classname `layout-dropdown-list`

* [storybook] Allow `detachable` to be passed as a prop

* Migrate `DetachDisabled` to BS5

* [storybook] Set actions for `^handle.*`, rename story

GitOrigin-RevId: 18509d259fad02a8aeb52132f1919e216b092b7e
2024-10-29 09:05:44 +00:00

37 lines
1.1 KiB
TypeScript

import { LayoutDropdownButtonUi } from '@/features/editor-navigation-toolbar/components/layout-dropdown-button'
import { Meta } from '@storybook/react'
import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
import { ComponentProps } from 'react'
export const LayoutDropdown = (
props: ComponentProps<typeof LayoutDropdownButtonUi>
) => (
<div className="toolbar toolbar-header justify-content-end m-4">
<div className="toolbar-right">
<LayoutDropdownButtonUi {...props} />
</div>
</div>
)
const meta: Meta<typeof LayoutDropdownButtonUi> = {
title: 'Editor / Toolbar / Layout Dropdown',
component: LayoutDropdownButtonUi,
argTypes: {
view: {
control: 'select',
options: [null, 'editor', 'file', 'pdf', 'history'],
},
detachRole: {
control: 'select',
options: ['detacher', 'detached'],
},
pdfLayout: {
control: 'select',
options: ['sideBySide', 'flat'],
},
...bsVersionDecorator.argTypes,
},
parameters: { actions: { argTypesRegex: '^handle.*' } },
}
export default meta