Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PLA-764 Remove the default footer from the dialog component #54

Merged
merged 1 commit into from
Oct 27, 2023
Merged

PLA-764 Remove the default footer from the dialog component #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 120 additions & 2 deletions src/components/dialog/dialog.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => <span>test footer 🍭</span>;
const footerOptions = { undefined, SpanFooter: <SpanFooter /> };
const IconFooters = ({ onClose }: Pick<React.ComponentProps<typeof Dialog>, "onClose">) => (
<>
<Button variant="secondary" onClick={() => onClose?.(false)}>
Cancel
</Button>

<Button variant="primary" LeftIcon={TickIcon} onClick={() => onClose?.(true)}>
Confirm
</Button>
</>
);
const footerOptions = { undefined, SpanFooter: <SpanFooter />, buttons: <IconFooters /> };
const footerArgs = {
options: Object.keys(footerOptions),
mapping: footerOptions,
Expand Down Expand Up @@ -55,4 +73,104 @@ const meta: Meta<typeof Dialog> = {
export default meta;
type Story = StoryObj<typeof Dialog>;

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 (
<div className="body-font">
<button
type="button"
onClick={toggleBtn}
className="bg-neutral-100 px-4 py-2 shadow"
>
show Modal
</button>

<Dialog
{...args}
footer={<IconFooters onClose={() => setIsShown(false)} />}
isShown={isShown}
onClose={toggleBtn}
>
{children}
</Dialog>
</div>
);
},
};

export const WithLongContent: Story = {
args: {
children: (
<>
<Toggle checked ariaLabel="test" onChange={noop} />
<p className="py-10">Paragraph Content</p>
<FormField>
<FormField.LabelGroup>
<FormField.Label htmlFor="value">Label</FormField.Label>
<FormField.Description id="value-description">
Description
</FormField.Description>
</FormField.LabelGroup>
<FormField.RadioInput id="value" value="value_1" onChange={noop}>
<FormField.RadioInput.Option value="value_1">
Value 1
</FormField.RadioInput.Option>
<FormField.RadioInput.Option value="value_2">
Value 2
</FormField.RadioInput.Option>
<FormField.RadioInput.Option value="value_3" disabled>
Value 3
</FormField.RadioInput.Option>
</FormField.RadioInput>
</FormField>
<p className="py-5">
{`
"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."
`}
</p>

<p className="py-10">
{`
"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.
`}
</p>
<span>litipsum.com</span>
<Alert title="Some important information" intent="info" />
<Toggle checked={false} ariaLabel="test" onChange={noop} />
</>
),
},
argTypes: {
children: hiddenArgControl,
},
};
46 changes: 13 additions & 33 deletions src/components/dialog/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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
)}
>
Expand All @@ -106,37 +106,17 @@ export const Dialog = ({
{children}
</HeadlessDialog.Description>
</div>

<div
id="dialog-footer"
className={classNames(
"sticky bottom-0 left-0 flex flex-row gap-2 bg-neutral-0 px-10 pb-8 pt-8",
footerPosition === "end" ? "justify-end" : "justify-start"
)}
>
{footer === undefined ? (
<>
<Button
variant="secondary"
onClick={() => handleClose(false)}
disabled={!isCloseable}
>
Cancel
</Button>

<Button
variant="primary"
LeftIcon={TickIcon}
onClick={() => handleClose(true)}
disabled={isCloseable}
>
Confirm
</Button>
</>
) : (
footer
)}
</div>
{!!footer && (
<div
id="dialog-footer"
className={classNames(
"sticky bottom-0 left-0 flex flex-row gap-2 bg-neutral-0 px-10 pb-8 pt-8",
footerPosition === "end" ? "justify-end" : "justify-start"
)}
>
{footer}
</div>
)}
</HeadlessDialog.Panel>
</Transition.Child>
</div>
Expand Down
Loading