From 78d01d47234f112c0f8cc741ccc483e2504703b8 Mon Sep 17 00:00:00 2001
From: Thomas Jeffery <thomaswjeffery@gmail.com>
Date: Thu, 1 May 2025 09:26:09 -0600
Subject: [PATCH 1/2] feat: style of sandbox note

---
 src/components/sandbox/Sandbox.css            |  3 +++
 src/components/sandbox/Sandbox.tsx            | 19 +++++++++++++++++--
 .../modal/ModalWarnUserDeadlineExample.tsx    |  7 ++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/sandbox/Sandbox.css b/src/components/sandbox/Sandbox.css
index 017ba6f83..6b0dc6444 100644
--- a/src/components/sandbox/Sandbox.css
+++ b/src/components/sandbox/Sandbox.css
@@ -1,5 +1,8 @@
 .sandbox-note {
   color: #666;
+  margin-top: var(--goa-space-m);
+  margin-bottom: var(--goa-space-2xl);
+  font: var(--goa-typography-body-s);
 }
 
 .sandbox-render {
diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx
index 59e7902b6..380e85c6c 100644
--- a/src/components/sandbox/Sandbox.tsx
+++ b/src/components/sandbox/Sandbox.tsx
@@ -1,4 +1,5 @@
 import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import { GoabCallout } from "@abgov/react-components";
 
 import SandboxProperties from "./SandboxProperties";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
@@ -22,7 +23,7 @@ type Serializer = (el: any, properties: ComponentBinding[]) => string;
 interface SandboxProps {
   properties?: ComponentBinding[];
   formItemProperties?: ComponentBinding[];
-  note?: string;
+  note?: string | { type?: "important" | "success" | "information" | "emergency"; heading?: string; content: string };
   fullWidth?: boolean;
   onChange?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
   onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
@@ -140,7 +141,21 @@ export const Sandbox = (props: SandboxProps) => {
         </GoabAccordion>
       )}
       <SandboxCode props={props} formatLang={formatLang} lang={lang} serializers={serializers} version={version} />
-      {props.note && (<div className="sandbox-note">{props.note}</div>)}
+      {props.note &&
+        (typeof props.note === "string" ? (
+          <p className="sandbox-note">{props.note}</p>
+        ) : (
+          <GoabCallout
+            type={props.note.type || "important"}
+            size="medium"
+            heading={props.note.heading}
+            maxWidth="596px"
+            mt="m"
+            mb="2xl"
+          >
+            {props.note.content}
+          </GoabCallout>
+        ))}
     </>
   );
 };
diff --git a/src/examples/modal/ModalWarnUserDeadlineExample.tsx b/src/examples/modal/ModalWarnUserDeadlineExample.tsx
index a911b3966..ffb42a4a3 100644
--- a/src/examples/modal/ModalWarnUserDeadlineExample.tsx
+++ b/src/examples/modal/ModalWarnUserDeadlineExample.tsx
@@ -8,7 +8,12 @@ export const ModalWarnUserDeadlineExample = () => {
   const {version} = useContext(LanguageVersionContext);
   const [warnCalloutModalOpen, setWarnCalloutModalOpen] = useState<boolean>();
   return (
-    <Sandbox skipRender>
+    <Sandbox skipRender
+             note={{
+               type: "important",
+               heading: "AlertDialog Accessibility",
+               content: "Do not make the modal closeable or add any focusable elements before the action button when using an AlertDialog. This ensures that the screen reader will announce the full content."
+             }}>
       <GoabButton type="secondary" onClick={() => setWarnCalloutModalOpen(true)}>
         Save for later
       </GoabButton>

From 4777287dc7b00ff11f9b288ae383669903c0cb45 Mon Sep 17 00:00:00 2001
From: Thomas Jeffery <thomaswjeffery@gmail.com>
Date: Wed, 7 May 2025 15:02:59 -0600
Subject: [PATCH 2/2] update from review

---
 src/components/sandbox/Sandbox.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx
index 380e85c6c..afe38e897 100644
--- a/src/components/sandbox/Sandbox.tsx
+++ b/src/components/sandbox/Sandbox.tsx
@@ -1,5 +1,6 @@
 import { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
 import { GoabCallout } from "@abgov/react-components";
+import { GoabCalloutType } from "@abgov/ui-components-common";
 
 import SandboxProperties from "./SandboxProperties";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet";
@@ -23,7 +24,7 @@ type Serializer = (el: any, properties: ComponentBinding[]) => string;
 interface SandboxProps {
   properties?: ComponentBinding[];
   formItemProperties?: ComponentBinding[];
-  note?: string | { type?: "important" | "success" | "information" | "emergency"; heading?: string; content: string };
+  note?: string | { type?: GoabCalloutType; heading?: string; content: string };
   fullWidth?: boolean;
   onChange?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;
   onChangeFormItemBindings?: (bindings: ComponentBinding[], props: Record<string, unknown>) => void;