Rebeka DekanyandCopybot
d751b88e6b
* Remove icons folder * Create folders for badge, button, and dropdown components * Remove Bootstrap 5 from test * Rename `getBootstrap5Breakpoint` to `getBootstrapBreakpoint` * Cleanup and update BS 5 comments * Move components to the shared folder * Rename `tooltips-bs5` to `tooltip` * Remove `-bs5` suffix * Fix path * Delete BS3 version file * Rename `_form_marketing-bootstrap-5` to `_form_marketing` * Delete BS3 version file * Rename `_contact_general_modal-marketing-bootstrap-5` to `_contact_general_modal-marketing` * Delete BS3 version file * Rename `_contact_modal-marketing-bootstrap-5` to `_contact_modal-marketing` * Delete BS3 version file * Rename `thin-footer-bootstrap-5` to `thin-footer` * Delete BS3 version file * Rename `language-picker-bootstrap-5` to `language-picker` * Rename `fat-footer-react-bootstrap-5` to `fat-footer-react` * Delete BS3 version file * Rename `navbar-marketing-bootstrap-5` to `navbar-marketing` * Rename `navbar-marketing-react-bootstrap-5` to `navbar-marketing-react` * Delete BS3 version file * Rename `layout-website-redesign-cms-bootstrap-5` to `layout-website-redesign-cms` * Source format * Fix path GitOrigin-RevId: cf0f5db7c84cf545c69213dcc271d9ff17fe5db7
60 lines
1.7 KiB
TypeScript
60 lines
1.7 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'
|
|
|
|
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' },
|
|
},
|
|
}
|
|
|
|
export default meta
|