mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-05-29 12:01:32 +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
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import OLToggleButton from '@/shared/components/ol/ol-toggle-button'
|
|
import OLToggleButtonGroup from '@/shared/components/ol/ol-toggle-button-group'
|
|
import { figmaDesignUrl } from '../../../.storybook/utils/figma-design-url'
|
|
|
|
export const Default = () => {
|
|
return (
|
|
<OLToggleButtonGroup
|
|
type="radio"
|
|
name="figure-width"
|
|
defaultValue="0.5"
|
|
aria-label="Image width"
|
|
>
|
|
<OLToggleButton variant="secondary" id="width-25p" value="0.25">
|
|
¼ width
|
|
</OLToggleButton>
|
|
<OLToggleButton variant="secondary" id="width-50p" value="0.5">
|
|
½ width
|
|
</OLToggleButton>
|
|
<OLToggleButton variant="secondary" id="width-75p" value="0.75">
|
|
¾ width
|
|
</OLToggleButton>
|
|
<OLToggleButton variant="secondary" id="width-100p" value="1.0">
|
|
Full width
|
|
</OLToggleButton>
|
|
</OLToggleButtonGroup>
|
|
)
|
|
}
|
|
|
|
export const Disabled = () => {
|
|
return (
|
|
<OLToggleButtonGroup
|
|
type="radio"
|
|
name="figure-width"
|
|
defaultValue="0.5"
|
|
aria-label="Image width"
|
|
>
|
|
<OLToggleButton variant="secondary" id="width-25p" disabled value="0.25">
|
|
¼ width
|
|
</OLToggleButton>
|
|
<OLToggleButton variant="secondary" id="width-50p" disabled value="0.5">
|
|
½ width
|
|
</OLToggleButton>
|
|
<OLToggleButton variant="secondary" id="width-75p" disabled value="0.75">
|
|
¾ width
|
|
</OLToggleButton>
|
|
<OLToggleButton variant="secondary" id="width-100p" disabled value="1.0">
|
|
Full width
|
|
</OLToggleButton>
|
|
</OLToggleButtonGroup>
|
|
)
|
|
}
|
|
|
|
export default {
|
|
title: 'Shared / Components / Toggle Button Group',
|
|
component: OLToggleButtonGroup,
|
|
parameters: figmaDesignUrl(
|
|
'https://www.figma.com/design/V7Ogph1Ocs4ux2A4WMNAh7/Overleaf---Components?node-id=3460-191910&m=dev'
|
|
),
|
|
}
|