94 lines
2.3 KiB
TypeScript
94 lines
2.3 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Meta, StoryObj } from "@storybook/react";
|
|
|
|
import { Button, ButtonSize } from "../button";
|
|
|
|
import { ModalDialog } from "./ModalDialog";
|
|
import { ModalDialogType } from "./ModalDialog.enums";
|
|
import { ModalDialogProps } from "./ModalDialog.types";
|
|
|
|
const meta = {
|
|
title: "Components/ModalDialog",
|
|
component: ModalDialog,
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: "ModalDialog is used for displaying modal dialogs",
|
|
},
|
|
},
|
|
},
|
|
} satisfies Meta<typeof ModalDialog>;
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export default meta;
|
|
|
|
const Template = ({ ...args }: ModalDialogProps) => {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
const openModal = () => setIsVisible(true);
|
|
const closeModal = () => setIsVisible(false);
|
|
|
|
return (
|
|
<>
|
|
<Button
|
|
label="Show"
|
|
primary
|
|
size={ButtonSize.medium}
|
|
onClick={openModal}
|
|
/>
|
|
<ModalDialog {...args} visible={isVisible} onClose={closeModal}>
|
|
<ModalDialog.Header>Change password</ModalDialog.Header>
|
|
|
|
<ModalDialog.Body>
|
|
<span>
|
|
Send the password change instruction to the{" "}
|
|
<a style={{ color: "#5299E0" }} href="mailto:asc@story.book">
|
|
asc@story.book
|
|
</a>{" "}
|
|
email address
|
|
</span>
|
|
</ModalDialog.Body>
|
|
|
|
<ModalDialog.Footer>
|
|
<Button
|
|
key="SendBtn"
|
|
label="Send"
|
|
primary
|
|
scale
|
|
size={ButtonSize.normal}
|
|
onClick={() => {
|
|
closeModal();
|
|
}}
|
|
/>
|
|
<Button
|
|
key="CloseBtn"
|
|
label="Cancel"
|
|
scale
|
|
size={ButtonSize.normal}
|
|
onClick={closeModal}
|
|
/>
|
|
</ModalDialog.Footer>
|
|
|
|
<ModalDialog.Container>
|
|
<div style={{ width: "100%", height: "100%", background: "red" }}>
|
|
123
|
|
</div>
|
|
</ModalDialog.Container>
|
|
</ModalDialog>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Default: Story = {
|
|
render: (args) => <Template {...args} />,
|
|
args: {
|
|
displayType: ModalDialogType.aside,
|
|
displayTypeDetailed: {
|
|
desktop: ModalDialogType.aside,
|
|
tablet: ModalDialogType.aside,
|
|
mobile: ModalDialogType.aside,
|
|
},
|
|
children: <>123</>,
|
|
},
|
|
};
|