From f6a202738b10c247fdf4f9a3a5b3964ca0a271c8 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Mon, 14 Oct 2024 16:25:21 +0100 Subject: [PATCH 01/13] add dialog header to lab --- packages/lab/src/dialog/DialogHeader.css | 63 +++ packages/lab/src/dialog/DialogHeader.tsx | 106 +++++ packages/lab/src/dialog/index.ts | 1 + packages/lab/src/index.ts | 1 + .../lab/stories/dialog/dialog.stories.tsx | 433 ++++++++++++++++++ 5 files changed, 604 insertions(+) create mode 100644 packages/lab/src/dialog/DialogHeader.css create mode 100644 packages/lab/src/dialog/DialogHeader.tsx create mode 100644 packages/lab/src/dialog/index.ts create mode 100644 packages/lab/stories/dialog/dialog.stories.tsx diff --git a/packages/lab/src/dialog/DialogHeader.css b/packages/lab/src/dialog/DialogHeader.css new file mode 100644 index 00000000000..9c3483ba002 --- /dev/null +++ b/packages/lab/src/dialog/DialogHeader.css @@ -0,0 +1,63 @@ +/* Styles applied to the root element */ +.saltDialogHeader { + padding-bottom: var(--salt-spacing-300); + padding-left: var(--salt-spacing-300); + padding-right: var(--salt-spacing-300); + align-items: center; + display: flex; + flex-direction: row; + gap: var(--salt-spacing-100); + box-sizing: border-box; +} + +.saltDialogHeader-container { + flex-grow: 1; + margin: 0; + display: flex; + flex-direction: column; + gap: var(--salt-spacing-50); +} + +.saltDialogHeader-header { + margin: 0; +} + +.saltDialogHeader-endAdornmentContainer { + align-self: flex-start; +} + +/* Styles applied to the status indicator icon overriding its default size */ +.saltDialogHeader .saltStatusIndicator.saltIcon { + --icon-size: var(--salt-text-h2-lineHeight); +} + +/* Styles applied to DialogHeader when accent={true} */ +.saltDialogHeader-withAccent { + position: relative; +} + +.saltDialogHeader-withAccent::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: var(--salt-spacing-300); + width: var(--salt-size-bar); + background: var(--salt-accent-background); +} + +.saltDialogHeader-error::before { + background: var(--salt-status-error-borderColor); +} + +.saltDialogHeader-info::before { + background: var(--salt-status-info-borderColor); +} + +.saltDialogHeader-success::before { + background: var(--salt-status-success-borderColor); +} + +.saltDialogHeader-warning::before { + background: var(--salt-status-warning-borderColor); +} diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx new file mode 100644 index 00000000000..650e2412d0f --- /dev/null +++ b/packages/lab/src/dialog/DialogHeader.tsx @@ -0,0 +1,106 @@ +import { + H2, + StatusIndicator, + Text, + type ValidationStatus, + makePrefixer, + useDialogContext, +} from "@salt-ds/core"; +import { useComponentCssInjection } from "@salt-ds/styles"; +import { useWindow } from "@salt-ds/window"; +import { clsx } from "clsx"; +import { + type ComponentPropsWithoutRef, + type ReactNode, + forwardRef, +} from "react"; +import dialogHeaderCss from "./DialogHeader.css"; + +const withBaseName = makePrefixer("saltDialogHeader"); + +export interface DialogHeaderProps extends ComponentPropsWithoutRef<"div"> { + /** + * The status of the Dialog + */ + status?: ValidationStatus | undefined; + /** + * Displays the accent bar in the Dialog Title */ + disableAccent?: boolean; + /** + * Displays the header at the top of the Dialog + */ + header: ReactNode; + /** + * Displays the preheader just above the header + **/ + preheader?: ReactNode; + /** + * Description text is displayed just below the header + **/ + description?: ReactNode; + /** + * End adornment component + */ + endAdornment?: ReactNode; +} + +export const DialogHeader = forwardRef( + function DialogHeader(props, ref) { + const { + className, + description, + disableAccent, + endAdornment, + header, + preheader, + status: statusProp, + ...rest + } = props; + const { status: statusContext, id } = useDialogContext(); + + const targetWindow = useWindow(); + useComponentCssInjection({ + testId: "salt-dialog-header", + css: dialogHeaderCss, + window: targetWindow, + }); + + const status = statusProp ?? statusContext; + + return ( +
+ {status && } +
+
+ {preheader && ( + {preheader} + )} +

{header}

+
+ {description && ( + + {description} + + )} +
+ {endAdornment && ( +
+ {endAdornment} +
+ )} +
+ ); + }, +); diff --git a/packages/lab/src/dialog/index.ts b/packages/lab/src/dialog/index.ts new file mode 100644 index 00000000000..c988696668c --- /dev/null +++ b/packages/lab/src/dialog/index.ts @@ -0,0 +1 @@ +export * from "./DialogHeader"; diff --git a/packages/lab/src/index.ts b/packages/lab/src/index.ts index 0b511f8a3c1..27bf2aebe03 100644 --- a/packages/lab/src/index.ts +++ b/packages/lab/src/index.ts @@ -29,6 +29,7 @@ export * from "./date-input"; export * from "./date-picker"; export * from "./deck-item"; export * from "./deck-layout"; +export * from "./dialog"; export * from "./dropdown"; export * from "./editable-label"; export { diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx new file mode 100644 index 00000000000..51034df9fbf --- /dev/null +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -0,0 +1,433 @@ +import { + Button, + Dialog, + DialogActions, + DialogContent, + type DialogContentProps, + type DialogProps, + SplitLayout, + StackLayout, +} from "@salt-ds/core"; +import { CloseIcon } from "@salt-ds/icons"; +import { DialogHeader } from "@salt-ds/lab"; +import type { Meta, StoryFn } from "@storybook/react"; +import { + type ComponentProps, + type PropsWithChildren, + type ReactNode, + useEffect, + useState, +} from "react"; + +export default { + title: "Lab /Dialog Header", + component: Dialog, + args: { + preheader: "Settlements", + header: "Terms and conditions", + description: "Effective date: August 29, 2024", + content: + "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", + }, +} as Meta; + +const UnmountLogger = () => { + useEffect(() => { + return () => { + console.log(new Date().getTime(), "Dummy unmount"); + }; + }, []); + return null; +}; + +const DialogTemplate: StoryFn< + Omit & + Pick< + ComponentProps, + "header" | "preheader" | "description" + > & { + content: DialogContentProps["children"]; + } +> = ({ + header, + preheader, + description, + content, + id, + size, + open: openProp = false, + ...args +}) => { + const [open, setOpen] = useState(openProp); + + const handleRequestOpen = () => { + setOpen(true); + }; + + const onOpenChange = (value: boolean) => { + setOpen(value); + }; + + const handleClose = () => { + setOpen(false); + }; + + const CloseButton = () => ( + + ); + + return ( + <> + + + } + /> + + {content} + + + + + My privacy settings + + } + endItem={ + + + + + } + /> + + + + ); +}; + +export const Default = DialogTemplate.bind({}); +Default.args = { + id: "Default", +}; + +export const LongContent = DialogTemplate.bind({}); + +LongContent.args = { + header: "Congratulations! You have created a Dialog.", + content: ( + <> + +
+ Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. +
+
+ It has survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It was + popularised in the 1960s with the release of Letraset sheets + containing Lorem Ipsum passages, and more recently with desktop + publishing software like Aldus PageMaker including versions of Lorem + Ipsum. +
+
+ It is a long established fact that a reader will be distracted by the + readable content of a page when looking at its layout. The point of + using Lorem Ipsum is that it has a more-or-less normal distribution of + letters, as opposed to using 'Content here, content here', making it + look like readable English. +
+
+ Many desktop publishing packages and web page editors now use Lorem + Ipsum as their default model text, and a search for 'lorem ipsum' will + uncover many web sites still in their infancy. Various versions have + evolved over the years, sometimes by accident, sometimes on purpose + (injected humour and the like). +
+
+ Contrary to popular belief, Lorem Ipsum is not simply random text. It + has roots in a piece of classical Latin literature from 45 BC, making + it over 2000 years old. Richard McClintock, a Latin professor at + Hampden-Sydney College in Virginia, looked up one of the more obscure + Latin words, consectetur, from a Lorem Ipsum passage, and going + through the cites of the word in classical literature, discovered the + undoubtable source. +
+
+ Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus + Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written + in 45 BC. This book is a treatise on the theory of ethics, very + popular during the Renaissance. The first line of Lorem Ipsum, "Lorem + ipsum dolor sit amet..", comes from a line in section 1.10.32. +
+ + + ), +}; + +export const Preheader = DialogTemplate.bind({}); + +Preheader.args = { + header: "Congratulations! You have created a Dialog.", + preheader: "I am a preheader", +}; + +const AlertDialogTemplate: StoryFn< + DialogProps & { header: string; content: ReactNode } +> = ({ + open: openProp = false, + status, + header, + size = "small", + content, + ...args +}) => { + const [open, setOpen] = useState(openProp); + + const handleRequestOpen = () => { + setOpen(true); + }; + + const onOpenChange = (value: boolean) => { + setOpen(value); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + <> + + + + {content} + + + + + + + ); +}; + +export const InfoStatus = AlertDialogTemplate.bind({}); +InfoStatus.args = { + status: "info", + header: "Info", +}; + +export const SuccessStatus = AlertDialogTemplate.bind({}); +SuccessStatus.args = { + status: "success", + header: "Success", +}; + +export const WarningStatus = AlertDialogTemplate.bind({}); +WarningStatus.args = { + status: "warning", + header: "Warning", +}; + +export const ErrorStatus = AlertDialogTemplate.bind({}); +ErrorStatus.args = { + status: "error", + header: "Error", +}; + +export const MandatoryAction: StoryFn = ({ + open: openProp = false, +}) => { + const [open, setOpen] = useState(openProp); + + const handleRequestOpen = () => { + setOpen(true); + }; + + const onOpenChange = (value: boolean) => { + setOpen(value); + }; + + const handleClose = () => { + setOpen(false); + }; + + return ( + <> + + + + + + Are you sure you want to permanently delete this transaction + + + + + + + + ); +}; + +function FakeWindow({ children }: PropsWithChildren) { + return ( +
+
+ {children} +
+ ); +} + +export const DesktopDialog = () => { + return ( + + + + Hello world! + + + + + + + + + Accent world! + + + + + + + + + Potential issues abound! + + + + + + + ); +}; + +export const StickyFooter: StoryFn = ({ + open: openProp = false, +}) => { + const [open, setOpen] = useState(openProp); + + const handleRequestOpen = () => { + setOpen(true); + }; + + const onOpenChange = (value: boolean) => { + setOpen(value); + }; + + const handleClose = () => { + setOpen(false); + }; + + const CloseButton = () => ( + + ); + + return ( + <> + + + } + /> + + Lorem Ipsum is simply dummy text of the printing and typesetting + industry. Lorem Ipsum has been the industry's standard dummy text ever + since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. + + + + + + + + + ); +}; From 84017399339fd30e9467f9221c78c1dc3734ceac Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Tue, 15 Oct 2024 10:16:01 +0100 Subject: [PATCH 02/13] update actions --- .changeset/plenty-monkeys-give.md | 16 ++++++++++++++++ packages/lab/src/dialog/DialogHeader.css | 2 +- packages/lab/src/dialog/DialogHeader.tsx | 12 +++++------- packages/lab/stories/dialog/dialog.stories.tsx | 4 ++-- 4 files changed, 24 insertions(+), 10 deletions(-) create mode 100644 .changeset/plenty-monkeys-give.md diff --git a/.changeset/plenty-monkeys-give.md b/.changeset/plenty-monkeys-give.md new file mode 100644 index 00000000000..45b442aeb20 --- /dev/null +++ b/.changeset/plenty-monkeys-give.md @@ -0,0 +1,16 @@ +--- +"@salt-ds/lab": minor +--- + +Added `DialogHeader` component to lab. + +```typescript + + }/> + +
+ Only Chase Cards that we determine are eligible can be added to the Wallet. +
+ + +``` diff --git a/packages/lab/src/dialog/DialogHeader.css b/packages/lab/src/dialog/DialogHeader.css index 9c3483ba002..c04137939d3 100644 --- a/packages/lab/src/dialog/DialogHeader.css +++ b/packages/lab/src/dialog/DialogHeader.css @@ -22,7 +22,7 @@ margin: 0; } -.saltDialogHeader-endAdornmentContainer { +.saltDialogHeader-actionsContainer { align-self: flex-start; } diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx index 650e2412d0f..15526c63e99 100644 --- a/packages/lab/src/dialog/DialogHeader.tsx +++ b/packages/lab/src/dialog/DialogHeader.tsx @@ -39,9 +39,9 @@ export interface DialogHeaderProps extends ComponentPropsWithoutRef<"div"> { **/ description?: ReactNode; /** - * End adornment component + * Actions to be displayed in header */ - endAdornment?: ReactNode; + actions?: ReactNode; } export const DialogHeader = forwardRef( @@ -50,7 +50,7 @@ export const DialogHeader = forwardRef( className, description, disableAccent, - endAdornment, + actions, header, preheader, status: statusProp, @@ -95,10 +95,8 @@ export const DialogHeader = forwardRef( )}
- {endAdornment && ( -
- {endAdornment} -
+ {actions && ( +
{actions}
)} ); diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 51034df9fbf..540f34173a7 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -98,7 +98,7 @@ const DialogTemplate: StoryFn< header={header} preheader={preheader} description={description} - endAdornment={} + actions={} /> {content} @@ -410,7 +410,7 @@ export const StickyFooter: StoryFn = ({ } + actions={} /> Lorem Ipsum is simply dummy text of the printing and typesetting From f6b9716e12736c25e15398818fb57ac39c9967d2 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Wed, 16 Oct 2024 10:14:32 +0100 Subject: [PATCH 03/13] updates to dialog --- .changeset/plenty-monkeys-give.md | 8 +- packages/lab/src/dialog/DialogHeader.css | 18 +- packages/lab/src/dialog/DialogHeader.tsx | 4 +- .../lab/stories/dialog/dialog.qa.stories.tsx | 59 +++++ .../lab/stories/dialog/dialog.stories.tsx | 211 ------------------ 5 files changed, 69 insertions(+), 231 deletions(-) create mode 100644 packages/lab/stories/dialog/dialog.qa.stories.tsx diff --git a/.changeset/plenty-monkeys-give.md b/.changeset/plenty-monkeys-give.md index 45b442aeb20..2b452faa961 100644 --- a/.changeset/plenty-monkeys-give.md +++ b/.changeset/plenty-monkeys-give.md @@ -6,7 +6,13 @@ Added `DialogHeader` component to lab. ```typescript - }/> + + + }/>
Only Chase Cards that we determine are eligible can be added to the Wallet. diff --git a/packages/lab/src/dialog/DialogHeader.css b/packages/lab/src/dialog/DialogHeader.css index c04137939d3..17aeb97d312 100644 --- a/packages/lab/src/dialog/DialogHeader.css +++ b/packages/lab/src/dialog/DialogHeader.css @@ -18,7 +18,7 @@ gap: var(--salt-spacing-50); } -.saltDialogHeader-header { +.saltDialogHeader-header > .saltText { margin: 0; } @@ -45,19 +45,3 @@ width: var(--salt-size-bar); background: var(--salt-accent-background); } - -.saltDialogHeader-error::before { - background: var(--salt-status-error-borderColor); -} - -.saltDialogHeader-info::before { - background: var(--salt-status-info-borderColor); -} - -.saltDialogHeader-success::before { - background: var(--salt-status-success-borderColor); -} - -.saltDialogHeader-warning::before { - background: var(--salt-status-warning-borderColor); -} diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx index 15526c63e99..0497b76e107 100644 --- a/packages/lab/src/dialog/DialogHeader.tsx +++ b/packages/lab/src/dialog/DialogHeader.tsx @@ -83,11 +83,11 @@ export const DialogHeader = forwardRef( > {status && }
-
+
{preheader && ( {preheader} )} -

{header}

+ {header}
{description && ( diff --git a/packages/lab/stories/dialog/dialog.qa.stories.tsx b/packages/lab/stories/dialog/dialog.qa.stories.tsx new file mode 100644 index 00000000000..9002657fa88 --- /dev/null +++ b/packages/lab/stories/dialog/dialog.qa.stories.tsx @@ -0,0 +1,59 @@ +import { Dialog } from "@salt-ds/core"; +import { DialogHeader } from "@salt-ds/lab"; +import type { Meta, StoryFn } from "@storybook/react"; +import { QAContainer, type QAContainerProps } from "docs/components"; +import "./dialog.stories.css"; + +export default { + title: "Lab /Dialog Header/Dialog Header QA", + component: Dialog, +} as Meta; + +export const DialogHeaders: StoryFn = () => ( + + + + + + +); +DialogHeaders.parameters = { + chromatic: { + disableSnapshot: false, + modes: { + theme: { + themeNext: "disable", + }, + themeNext: { + themeNext: "enable", + corner: "rounded", + accent: "teal", + // Ignore headingFont given font is not loaded + }, + }, + }, +}; diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 540f34173a7..80bdf804e9c 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -13,7 +13,6 @@ import { DialogHeader } from "@salt-ds/lab"; import type { Meta, StoryFn } from "@storybook/react"; import { type ComponentProps, - type PropsWithChildren, type ReactNode, useEffect, useState, @@ -146,69 +145,6 @@ Default.args = { id: "Default", }; -export const LongContent = DialogTemplate.bind({}); - -LongContent.args = { - header: "Congratulations! You have created a Dialog.", - content: ( - <> - -
- Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy text ever - since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. -
-
- It has survived not only five centuries, but also the leap into - electronic typesetting, remaining essentially unchanged. It was - popularised in the 1960s with the release of Letraset sheets - containing Lorem Ipsum passages, and more recently with desktop - publishing software like Aldus PageMaker including versions of Lorem - Ipsum. -
-
- It is a long established fact that a reader will be distracted by the - readable content of a page when looking at its layout. The point of - using Lorem Ipsum is that it has a more-or-less normal distribution of - letters, as opposed to using 'Content here, content here', making it - look like readable English. -
-
- Many desktop publishing packages and web page editors now use Lorem - Ipsum as their default model text, and a search for 'lorem ipsum' will - uncover many web sites still in their infancy. Various versions have - evolved over the years, sometimes by accident, sometimes on purpose - (injected humour and the like). -
-
- Contrary to popular belief, Lorem Ipsum is not simply random text. It - has roots in a piece of classical Latin literature from 45 BC, making - it over 2000 years old. Richard McClintock, a Latin professor at - Hampden-Sydney College in Virginia, looked up one of the more obscure - Latin words, consectetur, from a Lorem Ipsum passage, and going - through the cites of the word in classical literature, discovered the - undoubtable source. -
-
- Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus - Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written - in 45 BC. This book is a treatise on the theory of ethics, very - popular during the Renaissance. The first line of Lorem Ipsum, "Lorem - ipsum dolor sit amet..", comes from a line in section 1.10.32. -
- - - ), -}; - -export const Preheader = DialogTemplate.bind({}); - -Preheader.args = { - header: "Congratulations! You have created a Dialog.", - preheader: "I am a preheader", -}; - const AlertDialogTemplate: StoryFn< DialogProps & { header: string; content: ReactNode } > = ({ @@ -284,150 +220,3 @@ ErrorStatus.args = { status: "error", header: "Error", }; - -export const MandatoryAction: StoryFn = ({ - open: openProp = false, -}) => { - const [open, setOpen] = useState(openProp); - - const handleRequestOpen = () => { - setOpen(true); - }; - - const onOpenChange = (value: boolean) => { - setOpen(value); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - <> - - - - - - Are you sure you want to permanently delete this transaction - - - - - - - - ); -}; - -function FakeWindow({ children }: PropsWithChildren) { - return ( -
-
- {children} -
- ); -} - -export const DesktopDialog = () => { - return ( - - - - Hello world! - - - - - - - - - Accent world! - - - - - - - - - Potential issues abound! - - - - - - - ); -}; - -export const StickyFooter: StoryFn = ({ - open: openProp = false, -}) => { - const [open, setOpen] = useState(openProp); - - const handleRequestOpen = () => { - setOpen(true); - }; - - const onOpenChange = (value: boolean) => { - setOpen(value); - }; - - const handleClose = () => { - setOpen(false); - }; - - const CloseButton = () => ( - - ); - - return ( - <> - - - } - /> - - Lorem Ipsum is simply dummy text of the printing and typesetting - industry. Lorem Ipsum has been the industry's standard dummy text ever - since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. - - - - - - - - - ); -}; From 25b3f92c2dd3d8e11a513973cee9b145d5785bd2 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Wed, 16 Oct 2024 10:23:23 +0100 Subject: [PATCH 04/13] update stories --- packages/lab/stories/dialog/dialog.stories.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 80bdf804e9c..24fe14bcbf3 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -22,8 +22,8 @@ export default { title: "Lab /Dialog Header", component: Dialog, args: { - preheader: "Settlements", - header: "Terms and conditions", + preheader:

Settlements

, + header:

Terms and conditions

, description: "Effective date: August 29, 2024", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", @@ -146,7 +146,7 @@ Default.args = { }; const AlertDialogTemplate: StoryFn< - DialogProps & { header: string; content: ReactNode } + DialogProps & { header: ReactNode; content: ReactNode } > = ({ open: openProp = false, status, @@ -200,23 +200,23 @@ const AlertDialogTemplate: StoryFn< export const InfoStatus = AlertDialogTemplate.bind({}); InfoStatus.args = { status: "info", - header: "Info", + header:

Info

, }; export const SuccessStatus = AlertDialogTemplate.bind({}); SuccessStatus.args = { status: "success", - header: "Success", + header:

Success

, }; export const WarningStatus = AlertDialogTemplate.bind({}); WarningStatus.args = { status: "warning", - header: "Warning", + header:

Warning

, }; export const ErrorStatus = AlertDialogTemplate.bind({}); ErrorStatus.args = { status: "error", - header: "Error", + header:

Error

, }; From 600a5bba956a5d1d9b59e6a994baffaf36cebd62 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Wed, 16 Oct 2024 10:28:30 +0100 Subject: [PATCH 05/13] Update packages/lab/stories/dialog/dialog.qa.stories.tsx --- packages/lab/stories/dialog/dialog.qa.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lab/stories/dialog/dialog.qa.stories.tsx b/packages/lab/stories/dialog/dialog.qa.stories.tsx index 9002657fa88..d99be5a5877 100644 --- a/packages/lab/stories/dialog/dialog.qa.stories.tsx +++ b/packages/lab/stories/dialog/dialog.qa.stories.tsx @@ -2,7 +2,6 @@ import { Dialog } from "@salt-ds/core"; import { DialogHeader } from "@salt-ds/lab"; import type { Meta, StoryFn } from "@storybook/react"; import { QAContainer, type QAContainerProps } from "docs/components"; -import "./dialog.stories.css"; export default { title: "Lab /Dialog Header/Dialog Header QA", From 182f1202da9ffe46e9885046ef61396254f0452c Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Thu, 17 Oct 2024 13:06:44 +0100 Subject: [PATCH 06/13] Update packages/lab/stories/dialog/dialog.stories.tsx --- packages/lab/stories/dialog/dialog.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 24fe14bcbf3..7cfe77e3aa6 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -22,7 +22,7 @@ export default { title: "Lab /Dialog Header", component: Dialog, args: { - preheader:

Settlements

, + preheader: "Settlements", header:

Terms and conditions

, description: "Effective date: August 29, 2024", content: From 66e1f62cb20abee0e4a430e758b3a41b8f55604f Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Thu, 17 Oct 2024 13:11:06 +0100 Subject: [PATCH 07/13] updates example title --- packages/lab/stories/dialog/dialog.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 7cfe77e3aa6..15711538dd1 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -5,6 +5,7 @@ import { DialogContent, type DialogContentProps, type DialogProps, + H2, SplitLayout, StackLayout, } from "@salt-ds/core"; @@ -23,7 +24,7 @@ export default { component: Dialog, args: { preheader: "Settlements", - header:

Terms and conditions

, + header:

Terms and conditions

, description: "Effective date: August 29, 2024", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.", From 44183a378a78fffe5c875b55729efef12c8f9814 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Fri, 18 Oct 2024 13:49:53 +0100 Subject: [PATCH 08/13] update changeset --- .changeset/plenty-monkeys-give.md | 34 ++++++++++++++++++------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/.changeset/plenty-monkeys-give.md b/.changeset/plenty-monkeys-give.md index 2b452faa961..64884fb0607 100644 --- a/.changeset/plenty-monkeys-give.md +++ b/.changeset/plenty-monkeys-give.md @@ -5,18 +5,24 @@ Added `DialogHeader` component to lab. ```typescript - - - - }/> - -
- Only Chase Cards that we determine are eligible can be added to the Wallet. -
- - + + Terms and conditions} + actions={ + + } + /> + +
+ Only Chase Cards that we determine are eligible can be added to the + Wallet. +
+ +; ``` From dbbec3fefbc5f9e7d3df150ecc2e06e952fd0f75 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Fri, 18 Oct 2024 14:06:05 +0100 Subject: [PATCH 09/13] stories updates --- .../lab/stories/dialog/dialog.qa.stories.tsx | 27 +++++++++++++++---- .../lab/stories/dialog/dialog.stories.tsx | 2 +- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/packages/lab/stories/dialog/dialog.qa.stories.tsx b/packages/lab/stories/dialog/dialog.qa.stories.tsx index d99be5a5877..a3a355afe7e 100644 --- a/packages/lab/stories/dialog/dialog.qa.stories.tsx +++ b/packages/lab/stories/dialog/dialog.qa.stories.tsx @@ -1,4 +1,4 @@ -import { Dialog } from "@salt-ds/core"; +import { Dialog, H2 } from "@salt-ds/core"; import { DialogHeader } from "@salt-ds/lab"; import type { Meta, StoryFn } from "@storybook/react"; import { QAContainer, type QAContainerProps } from "docs/components"; @@ -11,7 +11,7 @@ export default { export const DialogHeaders: StoryFn = () => ( Terms and conditions} style={{ width: 600, }} @@ -20,12 +20,20 @@ export const DialogHeaders: StoryFn = () => ( style={{ width: 600, }} - header="Terms and conditions" + header={

Terms and conditions

} preheader="Ensure you read and agree to these Terms" /> + Terms and conditions} + preheader="Ensure you read and agree to these Terms" + description="Effective date: August 29, 2024" + /> Terms and conditions} style={{ width: 600, }} @@ -35,8 +43,17 @@ export const DialogHeaders: StoryFn = () => ( style={{ width: 600, }} - header="Terms and conditions" + header={

Terms and conditions

} + preheader="Ensure you read and agree to these Terms" + /> + Terms and conditions} preheader="Ensure you read and agree to these Terms" + description="Effective date: August 29, 2024" /> ); diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 15711538dd1..44cd7ac08ae 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -117,7 +117,7 @@ const DialogTemplate: StoryFn< } endItem={ - + + ); + + return ( + <> + + + Terms and conditions} + actions={closeButton} + /> + + +
+ When you add a Chase Card to a Wallet, you agree to these Terms: +
+

Adding Your Chase Card

+
+ You can add an eligible Chase Card to a Wallet by either following + our instructions as they appear on a Chase proprietary platform + (e.g., Chase Mobile® app or chase.com) or by following the + instructions of the Wallet provider. Only Chase Cards that we + determine are eligible can be added to the Wallet. +
+
+ If your Chase Card or underlying account is not in good standing, + that Chase Card will not be eligible to be added to or enrolled in + the Wallet. We may determine other eligibility criteria in our + sole discretion. +
+ When you add a Chase Card to a Wallet, the Wallet may allow you to + (a) use the Chase Card to (i) enable transfers of money between you + and others who are enrolled with the Wallet provider or a partner of + such Wallet provider, and/or (ii) enter into transactions where the + Wallet is accepted, including the ability to use the Chase Card to + complete transactions at participating merchants' physical + locations, e-commerce locations, and at ATMs; and (b) use other + services that are described in the Wallet provider's agreement or + that they may offer from time to time. The Wallet may not be + accepted at all places where your Chase Card is accepted. +
+ We reserve the right to terminate our participation in a Wallet or + with a Wallet provider at any time and the right to designate a + maximum number of Chase Cards that may be added to a Wallet. +
+ + + + + + + + + ); +}; diff --git a/site/src/examples/dialog/index.ts b/site/src/examples/dialog/index.ts index 54ffad4954a..7525c7a36c9 100644 --- a/site/src/examples/dialog/index.ts +++ b/site/src/examples/dialog/index.ts @@ -4,6 +4,7 @@ export * from "./Error"; export * from "./Warning"; export * from "./Success"; export * from "./WithoutAccent"; +export * from "./WithHeader"; export * from "./CloseButton"; export * from "./MandatoryAction"; export * from "./Sizes"; From b5bef67fd0335e3dc6f5274a103a04534cb6a699 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Mon, 21 Oct 2024 13:15:40 +0100 Subject: [PATCH 11/13] updates to docs --- .changeset/plenty-monkeys-give.md | 2 +- site/docs/components/dialog/examples.mdx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.changeset/plenty-monkeys-give.md b/.changeset/plenty-monkeys-give.md index 64884fb0607..08b72f18284 100644 --- a/.changeset/plenty-monkeys-give.md +++ b/.changeset/plenty-monkeys-give.md @@ -2,7 +2,7 @@ "@salt-ds/lab": minor --- -Added `DialogHeader` component to lab. +Added `DialogHeader` component to lab. `DialogHeader`'s update follows our standardized header for container components and app regions, and it can be added to provide a structured header for dialog. The header includes a title and actions that follows our Header Block pattern. ```typescript diff --git a/site/docs/components/dialog/examples.mdx b/site/docs/components/dialog/examples.mdx index 38f86f7905d..3194caac460 100644 --- a/site/docs/components/dialog/examples.mdx +++ b/site/docs/components/dialog/examples.mdx @@ -136,9 +136,11 @@ Use the `disableScrim` prop to prevent the scrim from rendering. - ## 🚧 With header + ## 🚧 Header updates -`DialogHeader` can be added to provide a structured header for dialog. The header includes a title and actions that follows our Header Block pattern. +`DialogHeader`'s update follows our standardized header for container components and app regions, and it can be added to provide a structured header for dialog. The header includes a title and actions that follows our Header Block pattern. + +**Note:** This change is currently in Lab. From 015e1a2770628e943170cf2f433f30e0731029e1 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Fri, 8 Nov 2024 10:25:30 +0000 Subject: [PATCH 12/13] update to imports --- packages/lab/src/dialog/DialogHeader.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lab/src/dialog/DialogHeader.tsx b/packages/lab/src/dialog/DialogHeader.tsx index 0497b76e107..6ea6463beff 100644 --- a/packages/lab/src/dialog/DialogHeader.tsx +++ b/packages/lab/src/dialog/DialogHeader.tsx @@ -1,5 +1,4 @@ import { - H2, StatusIndicator, Text, type ValidationStatus, From 144a35d1006d2b409d581d6d171b00350b228a02 Mon Sep 17 00:00:00 2001 From: Fernanda Castillo Date: Fri, 8 Nov 2024 13:30:09 +0000 Subject: [PATCH 13/13] update examples to use text component --- packages/lab/stories/dialog/dialog.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx index 44cd7ac08ae..f1aaa1e77be 100644 --- a/packages/lab/stories/dialog/dialog.stories.tsx +++ b/packages/lab/stories/dialog/dialog.stories.tsx @@ -201,23 +201,23 @@ const AlertDialogTemplate: StoryFn< export const InfoStatus = AlertDialogTemplate.bind({}); InfoStatus.args = { status: "info", - header:

Info

, + header:

Info

, }; export const SuccessStatus = AlertDialogTemplate.bind({}); SuccessStatus.args = { status: "success", - header:

Success

, + header:

Success

, }; export const WarningStatus = AlertDialogTemplate.bind({}); WarningStatus.args = { status: "warning", - header:

Warning

, + header:

Warning

, }; export const ErrorStatus = AlertDialogTemplate.bind({}); ErrorStatus.args = { status: "error", - header:

Error

, + header:

Error

, };