From f20268c6638a0755e5a8ba0d73d149c843154c46 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Fri, 18 Oct 2024 15:13:34 +0100
Subject: [PATCH] add site example

---
 site/docs/components/dialog/examples.mdx |  6 ++
 site/src/examples/dialog/WithHeader.tsx  | 94 ++++++++++++++++++++++++
 site/src/examples/dialog/index.ts        |  1 +
 3 files changed, 101 insertions(+)
 create mode 100644 site/src/examples/dialog/WithHeader.tsx

diff --git a/site/docs/components/dialog/examples.mdx b/site/docs/components/dialog/examples.mdx
index f49a0d88f32..351cf2a535a 100644
--- a/site/docs/components/dialog/examples.mdx
+++ b/site/docs/components/dialog/examples.mdx
@@ -134,5 +134,11 @@ This forces a user to action something within the dialog.
 
 Use the `disableScrim` prop to prevent the scrim from rendering.
 
+</LivePreview>
+<LivePreview componentName="dialog" exampleName="WithHeader" >
+  ##  🚧 With header
+
+`DialogHeader` can be added to provide a structured header for dialog. The header includes a title and actions that follows our Header Block pattern.
+
 </LivePreview>
 </LivePreviewControls>
diff --git a/site/src/examples/dialog/WithHeader.tsx b/site/src/examples/dialog/WithHeader.tsx
new file mode 100644
index 00000000000..f605e142f76
--- /dev/null
+++ b/site/src/examples/dialog/WithHeader.tsx
@@ -0,0 +1,94 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  H2,
+  H3,
+  StackLayout,
+  useId,
+} from "@salt-ds/core";
+import { CloseIcon } from "@salt-ds/icons";
+import { DialogHeader } from "@salt-ds/lab";
+import { type ReactElement, useState } from "react";
+
+export const WithHeader = (): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const id = useId();
+
+  const handleRequestOpen = () => {
+    setOpen(true);
+  };
+
+  const onOpenChange = (value: boolean) => {
+    setOpen(value);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const closeButton = (
+    <Button
+      aria-label="Close dialog"
+      appearance="transparent"
+      onClick={handleClose}
+    >
+      <CloseIcon aria-hidden />
+    </Button>
+  );
+
+  return (
+    <>
+      <Button onClick={handleRequestOpen}>Open dialog with header</Button>
+      <Dialog open={open} onOpenChange={onOpenChange} id={id}>
+        <DialogHeader
+          header={<H2>Terms and conditions</H2>}
+          actions={closeButton}
+        />
+        <DialogContent>
+          <StackLayout>
+            <div>
+              When you add a Chase Card to a Wallet, you agree to these Terms:
+            </div>
+            <H3>Adding Your Chase Card</H3>
+            <div>
+              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.
+            </div>
+            <div>
+              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.
+            </div>
+            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.
+            <div>
+              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.
+            </div>
+          </StackLayout>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button variant="cta" onClick={handleClose}>
+            Accept
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
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";