diff --git a/managed/ui/src/stories/YBModal.stories.tsx b/managed/ui/src/stories/YBModal.stories.tsx deleted file mode 100644 index 8d6afd322cb3..000000000000 --- a/managed/ui/src/stories/YBModal.stories.tsx +++ /dev/null @@ -1,200 +0,0 @@ -// storybook stories don't need i18n, so turning off corresponding eslint rule -/* eslint-disable react/jsx-no-literals */ -import { useState } from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; -import { Box } from '@material-ui/core'; -import { YBCheckbox } from '../redesign/components'; -import { YBButton } from '../redesign/components'; -import { - YBModal, - YBSidePanel, - YBModalProps, - YBSidePanelProps -} from '../redesign/components/YBModal/YBModal'; - -export default { - title: 'Components/YBModal', - component: YBModal, - tags: ['autodocs'], - argTypes: { - title: { - control: { type: 'text' } - } - } -} as Meta; -type Story = StoryObj; -type PanelStory = StoryObj; - -export const Basic: Story = (args: YBModalProps) => ( - - -

- YBModal component requires a size - prop to determine the correct height and width. The height and width are fixed and will - scroll on overflow. -

-

- YBModalProps extends Material UI's DialogProps, so most of the props will be exactly - the same. -

-
-
-); - -Basic.args = { - title: 'Simple Modal Title', - size: 'sm', - open: true -}; - -export const Confirmation: Story = (args: YBModalProps) => ( - - -

This modal has a submit and cancel button.

-
-
-); - -Confirmation.args = { - title: 'Confirmation Modal', - size: 'xs', - titleSeparator: true, - submitLabel: 'Submit', - cancelLabel: 'Cancel', - actionsInfo: , - open: true -}; - -export const SidePanel: PanelStory = (args: YBSidePanelProps) => ( - - -

This modal opens from the right side and scrolls on overflow.

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -

-
-
-); - -SidePanel.args = { - title: 'Side Panel Modal', - submitLabel: 'Save', - cancelLabel: 'Cancel', - open: true -}; - -export const SidePanelWithModal: PanelStory = (args: YBSidePanelProps) => { - const [sideOpen, setOpen] = useState(args.open); - const [openSecond, setSecond] = useState(false); - - return ( - - setOpen(true)}> - Open Side Panel - - setOpen(false)} open={sideOpen}> -

This is a side panel

-

As an example, we can even open a modal on top of the side panel.

- setSecond(true)}> - Open Additional Modal - - setSecond(false)} - > - Modal opens on top of existing Side Panel - -
-
- ); -}; - -SidePanelWithModal.args = { - title: 'Side Panel Modal', - submitLabel: 'Save', - cancelLabel: 'Cancel', - open: true -};