From 54e26115e51f8161836613f2a6a2f4fd7c57560d Mon Sep 17 00:00:00 2001 From: Rodrigo De la Rivera Date: Fri, 27 Oct 2023 15:07:19 +0200 Subject: [PATCH] feat: remove the default footer from the dialog component --- src/components/dialog/dialog.stories.tsx | 122 ++++++++++++++++++++++- src/components/dialog/dialog.tsx | 46 +++------ 2 files changed, 133 insertions(+), 35 deletions(-) diff --git a/src/components/dialog/dialog.stories.tsx b/src/components/dialog/dialog.stories.tsx index 5428cbde..5e0f17fa 100644 --- a/src/components/dialog/dialog.stories.tsx +++ b/src/components/dialog/dialog.stories.tsx @@ -3,9 +3,27 @@ import type { Meta, StoryObj } from "@storybook/react"; import React, { useState } from "react"; import { getStoryDescription, hiddenArgControl } from "../../util/storybook-utils"; import { Dialog } from "./dialog"; +import { Button } from "../button/button"; +import { TickIcon } from "../../icons"; +import { FormField } from "../form-field/form-field"; +import { Toggle } from "../toggle"; +import { Alert } from "../alert/alert"; + +const noop = () => undefined; const SpanFooter = () => test footer 🍭; -const footerOptions = { undefined, SpanFooter: }; +const IconFooters = ({ onClose }: Pick, "onClose">) => ( + <> + + + + +); +const footerOptions = { undefined, SpanFooter: , buttons: }; const footerArgs = { options: Object.keys(footerOptions), mapping: footerOptions, @@ -55,4 +73,104 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Base: Story = {}; +export const Default: Story = {}; + +export const WithFooterButtons: Story = { + argTypes: { + footer: hiddenArgControl, + }, + render: ({ children, ...args }) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const [isShown, setIsShown] = useState(false); + const toggleBtn = () => setIsShown((val) => !val); + + return ( +
+ + + setIsShown(false)} />} + isShown={isShown} + onClose={toggleBtn} + > + {children} + +
+ ); + }, +}; + +export const WithLongContent: Story = { + args: { + children: ( + <> + +

Paragraph Content

+ + + Label + + Description + + + + + Value 1 + + + Value 2 + + + Value 3 + + + +

+ {` + "Oh, hush, hush, my child!" said Van Helsing. "God does not purchase souls in + this wise; and the Devil, though he may purchase, does not keep faith. But God + is merciful and just, and knows your pain and your devotion to that dear Madam + Mina. Think you, how her pain would be doubled, did she but hear your wild + words. Do not fear any of us, we are all devoted to this cause, and to-day shall + see the end. The time is coming for action; to-day this Vampire is limit to the + powers of man, and till sunset he may not change. It will take him time to + arrive here--see, it is twenty minutes past one--and there are yet some times + before he can hither come, be he never so quick. What we must hope for is that + my Lord Arthur and Quincey arrive first." + `} +

+ +

+ {` + "He will be here before long now," said Van Helsing, who had been consulting his + pocket-book. "Nota bene, in Madam's telegram he went south from Carfax, that + means he went to cross the river, and he could only do so at slack of tide, + which should be something before one o'clock. That he went south has a meaning + for us. He is as yet only suspicious; and he went from Carfax first to the place + where he would suspect interference least. You must have been at Bermondsey only + a short time before him. That he is not here already shows that he went to Mile + End next. This took him some time; for he would then have to be carried over the + river in some way. Believe me, my friends, we shall not have long to wait now. + We should have ready some plan of attack, so that we may throw away no chance. + Hush, there is no time now. Have all your arms! Be ready!" He held up a warning + hand as he spoke, for we all could hear a key softly inserted in the lock of the + hall door. + `} +

+ litipsum.com + + + + ), + }, + argTypes: { + children: hiddenArgControl, + }, +}; diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index 77b59d59..62210946 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -1,9 +1,8 @@ import { Dialog as HeadlessDialog, Transition } from "@headlessui/react"; import React, { Fragment } from "react"; -import { Button } from "../button/button"; import { IconButton } from "../icon-button/icon-button"; import { classNames } from "../../util/class-names"; -import { CrossIcon, TickIcon } from "../../icons"; +import { CrossIcon } from "../../icons"; export interface DialogProps { isShown?: boolean; @@ -86,6 +85,7 @@ export const Dialog = ({ "flex transform flex-col overflow-y-auto rounded-md bg-neutral-0 shadow-lg transition-all", height ? `h-[${height}px]` : "max-h-full", width ? `w-[${width}px]` : "w-[592px]", + !footer && "pb-8", className )} > @@ -106,37 +106,17 @@ export const Dialog = ({ {children} - - + {!!footer && ( + + )}