mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-25 02:00:10 +02:00
cc49eeacbd
* Rename ui to shared * Delete unused Switch component * Update stories with Figma links * Update Tag story naming for clarity * Update Toggle button story naming for clarity * Move shared components to the shared folder * Remove file as part of TS migration * Migrate jsx to tsx * Remove file as part of TS migration * Migrate jsx to tsx * Include necessary controls only * Auto SF GitOrigin-RevId: d2458eeffa7a6b67ce522c3ccb6b4f71e5e76d62
64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { Fragment } from 'react'
|
|
import type { Meta } from '@storybook/react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
Dropdown,
|
|
DropdownHeader,
|
|
DropdownItem,
|
|
DropdownMenu,
|
|
DropdownToggle,
|
|
} from '@/shared/components/dropdown/dropdown-menu'
|
|
import Button from '@/shared/components/button/button'
|
|
import { ButtonGroup } from 'react-bootstrap'
|
|
import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url'
|
|
|
|
export const Sizes = () => {
|
|
const { t } = useTranslation()
|
|
const sizes = {
|
|
Large: 'lg',
|
|
Regular: undefined,
|
|
Small: 'sm',
|
|
} as const
|
|
const variants = ['primary', 'secondary', 'danger'] as const
|
|
|
|
return Object.entries(sizes).map(([label, size]) => (
|
|
<Fragment key={`${label}-${size}`}>
|
|
<h4>{label}</h4>
|
|
<div style={{ display: 'inline-flex', gap: '10px' }}>
|
|
{variants.map(variant => (
|
|
<Dropdown key={variant} as={ButtonGroup}>
|
|
<Button variant={variant} size={size}>
|
|
Split Button
|
|
</Button>
|
|
<DropdownToggle
|
|
split
|
|
variant={variant}
|
|
id={`split-btn-${variant}-${size}`}
|
|
size={size}
|
|
aria-label={t('expand')}
|
|
/>
|
|
<DropdownMenu>
|
|
<DropdownHeader>Header</DropdownHeader>
|
|
<DropdownItem as="button">Action 1</DropdownItem>
|
|
<DropdownItem as="button">Action 2</DropdownItem>
|
|
<DropdownItem as="button">Action 3</DropdownItem>
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
))}
|
|
</div>
|
|
</Fragment>
|
|
))
|
|
}
|
|
const meta: Meta<typeof Dropdown> = {
|
|
title: 'Shared/Components/SplitButton',
|
|
component: Dropdown,
|
|
args: {
|
|
align: { sm: 'start' },
|
|
},
|
|
parameters: figmaDesignUrl(
|
|
'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-194077&m=dev'
|
|
),
|
|
}
|
|
|
|
export default meta
|