agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-11-14 14:13:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

Storybook for the Modal component (#26798)

Browse Source 
GitOrigin-RevId: 679935722a8b8a96c55f60be16c0ac34f6e6fbcc
This commit is contained in:
Rebeka Dekany
2025-07-04 08:05:26 +00:00
committed by Copybot
parent ff1589b1e3
commit 62758d92b0
1 changed files with 152 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stories/modals/modal.stories.tsx
+152
View File
@@ -0,0 +1,152 @@
import Button from '@/features/ui/components/bootstrap-5/button'
import type { Meta, StoryObj } from '@storybook/react'
import OLModal, {
OLModalHeader,
OLModalBody,
OLModalFooter,
OLModalTitle,
} from '@/features/ui/components/ol/ol-modal'
type Story = StoryObj<typeof OLModal>
export const Default: Story = {
render: args => {
return (
<OLModal show {...args}>
<OLModalHeader closeButton>
<OLModalTitle>Heading</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>
Lorem ipsum dolor sit lorem a amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam.
</p>
</OLModalBody>
<OLModalFooter>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Primary</Button>
</OLModalFooter>
</OLModal>
)
},
}
export const ModalWithAcknowledgment: Story = {
render: args => {
return (
<OLModal show {...args}>
<OLModalHeader closeButton>
<OLModalTitle>Acknowledgment</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>
System requires an acknowledgment from the user. Usually contains
only one primary button.
</p>
</OLModalBody>
<OLModalFooter>
<Button variant="primary">Accept</Button>
</OLModalFooter>
</OLModal>
)
},
}
export const ModalWithSecondary: Story = {
render: args => {
return (
<OLModal show {...args}>
<OLModalHeader closeButton>
<OLModalTitle>Heading</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>
Lorem ipsum dolor sit lorem a amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam.
</p>
</OLModalBody>
<OLModalFooter>
<Button variant="secondary">Cancel</Button>
</OLModalFooter>
</OLModal>
)
},
}
export const ModalWithTertiary: Story = {
render: args => {
return (
<OLModal show {...args}>
<OLModalHeader closeButton>
<OLModalTitle>Heading</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>Used for destructive or irreversible actions.</p>
</OLModalBody>
<OLModalFooter>
<Button variant="secondary">Third</Button>
<Button variant="secondary" className="ms-auto">
Cancel
</Button>
<Button variant="primary">Primary</Button>
</OLModalFooter>
</OLModal>
)
},
}
export const ModalInformative: Story = {
render: args => {
return (
<OLModal show {...args}>
<OLModalHeader closeButton>
<OLModalTitle>Informative</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>
Presents information for the user to be aware of and doesn’t require
any action.
</p>
</OLModalBody>
</OLModal>
)
},
}
export const ModalDanger: Story = {
render: args => {
return (
<OLModal show {...args}>
<OLModalHeader closeButton>
<OLModalTitle>Danger</OLModalTitle>
</OLModalHeader>
<OLModalBody>
<p>
Lorem ipsum dolor sit lorem a amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam.
</p>
</OLModalBody>
<OLModalFooter>
<Button variant="secondary">Cancel</Button>
<Button variant="danger">Delete</Button>
</OLModalFooter>
</OLModal>
)
},
}
const meta: Meta<typeof OLModal> = {
title: 'Shared / Components / Modal',
component: OLModal,
argTypes: {
size: {
control: 'radio',
options: ['lg', 'md', 'sm'],
},
},
}
export default meta