feat: add Modal.Footer alignment story (#84)

src/modal/modal.stories.tsx

@@ -3,9 +3,19 @@ import { StoryObj, StoryFn, Meta } from "@storybook/react";
 
 import { Button } from "../button";
 import { Modal } from "./modal";
-import { type ModalProps, type HeaderProps, type BodyProps } from "./types";
+import {
+	type ModalProps,
+	type HeaderProps,
+	type BodyProps,
+	type FooterProps,
+} from "./types";
+
+type StoryProps = ModalProps &
+	HeaderProps & {
+		bodyAlignment: BodyProps["alignment"];
+		footerAlignment: FooterProps["alignment"];
+	};
 
-type StoryProps = ModalProps & HeaderProps & BodyProps;
 type Story = StoryObj<StoryProps>;
 
 const story = {
@@ -35,7 +45,7 @@ const Spacer = () => <div style={{ height: "5px", width: "100%" }} />;
 
 const DefaultTemplate: StoryFn<StoryProps> = ({
 	showCloseButton,
-	alignment,
+	bodyAlignment,
 	...modalProps
 }: StoryProps) => {
 	const [open, setOpen] = useState(false);
@@ -49,7 +59,7 @@ const DefaultTemplate: StoryFn<StoryProps> = ({
 				<Modal.Header showCloseButton={showCloseButton}>
 					Lorem ipsum
 				</Modal.Header>
-				<Modal.Body alignment={alignment}>
+				<Modal.Body alignment={bodyAlignment}>
 					<p>
 						Laboriosam autem non et nisi. Ut voluptatem sit beatae assumenda
 						amet aliquam corporis.
@@ -129,6 +139,47 @@ const DangerTemplate: StoryFn<ModalProps> = (args) => {
 	);
 };
 
+const EndAlignedFooterTemplate: StoryFn<StoryProps> = ({
+	footerAlignment,
+}: StoryProps) => {
+	const [open, setOpen] = useState(false);
+
+	const handleClose = () => setOpen(false);
+
+	return (
+		<div>
+			<Button onClick={() => setOpen(true)}>Open modal</Button>
+			<Modal open={open} onClose={handleClose}>
+				<Modal.Header>Lorem ipsum</Modal.Header>
+				<Modal.Body>
+					<p>
+						Laboriosam autem non et nisi. Ut voluptatem sit beatae assumenda
+						amet aliquam corporis.
+					</p>
+					<p>
+						Dolores voluptas omnis et cupiditate ducimus delectus vel. Voluptas
+						atque cumque incidunt quia. A praesentium neque quis odit totam
+						praesentium illum est. Ut doloribus quisquam ut. Incidunt vel
+						suscipit accusamus consequuntur repellendus dolor sunt. Vel
+						accusamus nesciunt perspiciatis sunt est.
+					</p>
+					<p>
+						Tempore quis voluptas aut voluptatem praesentium nisi. Qui et quo ut
+						et vel dolores facilis dignissimos. Omnis facere quisquam recusandae
+						accusantium. Sit ut consectetur non id velit est odio. Laboriosam
+						soluta tenetur asperiores. Excepturi reprehenderit rerum sint
+						tempore molestiae vitae aliquid. Ea est sunt at atque ducimus
+						doloribus quas sit.
+					</p>
+				</Modal.Body>
+				<Modal.Footer alignment={footerAlignment}>
+					<Button>Close</Button>
+				</Modal.Footer>
+			</Modal>
+		</div>
+	);
+};
+
 export const Default: Story = {
 	render: DefaultTemplate,
 };
@@ -164,14 +215,21 @@ export const WithoutCloseButton: Story = {
 export const LeftAlignedBody: Story = {
 	render: DefaultTemplate,
 	args: {
-		alignment: "left",
+		bodyAlignment: "left",
 	},
 };
 
 export const StartAlignedBody: Story = {
 	render: DefaultTemplate,
 	args: {
-		alignment: "start",
+		bodyAlignment: "start",
+	},
+};
+
+export const EndAlignedFooter: Story = {
+	render: EndAlignedFooterTemplate,
+	args: {
+		footerAlignment: "end",
 	},
 };