overleaf/services/web/frontend/stories/select.stories.tsx
roo hutton 64d9792fe3 Merge pull request #18861 from overleaf/rh-editor-limit-exceeded
[web]: Handle exceeded editor limit in share modal

GitOrigin-RevId: 23a15805ca98327ae4a7fc731bbca3982c90bad5
2024-06-25 08:04:46 +00:00

61 lines
1.3 KiB
TypeScript

import { Select } from '../js/shared/components/select'
const items = [1, 2, 3, 4].map(index => ({
key: index,
value: `Demo item ${index}`,
group: index >= 3 ? 'Large numbers' : undefined,
}))
export const Base = () => {
return (
<Select
items={items}
itemToString={x => String(x?.value)}
itemToKey={x => String(x.key)}
defaultText="Choose an item"
/>
)
}
export const WithSubtitles = () => {
return (
<Select
items={items}
itemToString={x => String(x?.value)}
itemToKey={x => String(x.key)}
itemToSubtitle={x => x?.group ?? ''}
defaultText="Choose an item"
/>
)
}
export const WithSelectedIcon = () => {
return (
<Select
items={items}
itemToString={x => String(x?.value)}
itemToKey={x => String(x.key)}
itemToSubtitle={x => x?.group ?? ''}
defaultText="Choose an item"
selectedIcon
/>
)
}
export const WithDisabledItem = () => {
return (
<Select
items={items}
itemToString={x => String(x?.value)}
itemToKey={x => String(x.key)}
itemToDisabled={x => x?.key === 1}
itemToSubtitle={x => x?.group ?? ''}
defaultText="Choose an item"
/>
)
}
export default {
title: 'Shared / Components / Select',
component: Select,
}