From 120c6376a7dad14b92148ef2705fa7a2fb9dea99 Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Wed, 18 Dec 2024 16:49:45 +0000
Subject: [PATCH] updates to examples

---
 .../lab/stories/dialog/dialog.stories.tsx     | 11 ++++---
 .../stories/overlay/overlay.qa.stories.tsx    |  7 +----
 .../lab/stories/overlay/overlay.stories.tsx   | 30 +++----------------
 site/src/examples/dialog/WithHeader.tsx       |  3 +-
 site/src/examples/overlay/WithHeader.tsx      | 14 ++-------
 5 files changed, 13 insertions(+), 52 deletions(-)

diff --git a/packages/lab/stories/dialog/dialog.stories.tsx b/packages/lab/stories/dialog/dialog.stories.tsx
index 2f6f50ec25..0ecb88f20a 100644
--- a/packages/lab/stories/dialog/dialog.stories.tsx
+++ b/packages/lab/stories/dialog/dialog.stories.tsx
@@ -5,7 +5,6 @@ import {
   DialogContent,
   type DialogContentProps,
   type DialogProps,
-  H2,
   SplitLayout,
   StackLayout,
 } from "@salt-ds/core";
@@ -24,7 +23,7 @@ export default {
   component: Dialog,
   args: {
     preheader: "Settlements",
-    header: <H2>Terms and conditions</H2>,
+    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.",
@@ -207,23 +206,23 @@ const AlertDialogTemplate: StoryFn<
 export const InfoStatus = AlertDialogTemplate.bind({});
 InfoStatus.args = {
   status: "info",
-  header: <H2>Info</H2>,
+  header: "Info",
 };
 
 export const SuccessStatus = AlertDialogTemplate.bind({});
 SuccessStatus.args = {
   status: "success",
-  header: <H2>Success</H2>,
+  header: "Success",
 };
 
 export const WarningStatus = AlertDialogTemplate.bind({});
 WarningStatus.args = {
   status: "warning",
-  header: <H2>Warning</H2>,
+  header: "Warning",
 };
 
 export const ErrorStatus = AlertDialogTemplate.bind({});
 ErrorStatus.args = {
   status: "error",
-  header: <H2>Error</H2>,
+  header: "Error",
 };
diff --git a/packages/lab/stories/overlay/overlay.qa.stories.tsx b/packages/lab/stories/overlay/overlay.qa.stories.tsx
index f4f00c1d5c..a0035e0a75 100644
--- a/packages/lab/stories/overlay/overlay.qa.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.qa.stories.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -47,11 +46,7 @@ export const Default: StoryFn<QAContainerProps> = (props) => {
           <OverlayHeader
             preheader="Preheader"
             description="Description"
-            header={
-              <H2 styleAs="h4">
-                Guidelines for optimal use of our application
-              </H2>
-            }
+            header="Guidelines for optimal use of our application"
             actions={<CloseButton />}
           />
           <OverlayPanelContent>
diff --git a/packages/lab/stories/overlay/overlay.stories.tsx b/packages/lab/stories/overlay/overlay.stories.tsx
index 965bda0ec6..228a1f2712 100644
--- a/packages/lab/stories/overlay/overlay.stories.tsx
+++ b/packages/lab/stories/overlay/overlay.stories.tsx
@@ -1,6 +1,5 @@
 import {
   Button,
-  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
@@ -9,7 +8,6 @@ import {
   StackLayout,
   Text,
   Tooltip,
-  useId,
 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { OverlayHeader } from "@salt-ds/lab";
@@ -22,7 +20,6 @@ export default {
 
 const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
   const [open, setOpen] = useState(false);
-  const id = useId();
 
   const onChange = (newOpen: boolean) => {
     setOpen(newOpen);
@@ -35,19 +32,11 @@ const HeaderTemplate: StoryFn = ({ onOpenChange, ...props }: OverlayProps) => {
         <Button>Show Overlay</Button>
       </OverlayTrigger>
       <OverlayPanel
-        aria-labelledby={id}
         style={{
           width: 500,
         }}
       >
-        <OverlayHeader
-          header={
-            <H2 styleAs="h4" id={id}>
-              Header block
-            </H2>
-          }
-          {...props}
-        />
+        <OverlayHeader header="Header block" {...props} />
         <OverlayPanelContent>
           <StackLayout gap={1}>
             <Text>
@@ -74,13 +63,8 @@ Header.args = {};
 
 export const LongHeader = HeaderTemplate.bind({});
 LongHeader.args = {
-  header: (
-    <H2 styleAs="h4">
-      Comprehensive guidelines and detailed instructions for the optimal use and
-      application of our services to ensure maximum efficiency and user
-      satisfaction
-    </H2>
-  ),
+  header:
+    "Comprehensive guidelines and detailed instructions for the optimal use and application of our services to ensure maximum efficiency and user satisfaction",
   actions: (
     <Button
       aria-label="Close overlay"
@@ -94,7 +78,6 @@ LongHeader.args = {
 
 export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
   const [open, setOpen] = useState(false);
-  const id = useId();
 
   const onChange = (newOpen: boolean) => {
     setOpen(newOpen);
@@ -120,7 +103,6 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
         <Button>Show Overlay</Button>
       </OverlayTrigger>
       <OverlayPanel
-        aria-labelledby={id}
         style={{
           width: 500,
         }}
@@ -128,11 +110,7 @@ export const HeaderWithCloseButton = ({ onOpenChange }: OverlayProps) => {
         <OverlayHeader
           preheader="Preheader"
           description="Description"
-          header={
-            <H2 styleAs="h4" id={id}>
-              Header block
-            </H2>
-          }
+          header="Header block"
           actions={<CloseButton />}
         />
         <OverlayPanelContent>
diff --git a/site/src/examples/dialog/WithHeader.tsx b/site/src/examples/dialog/WithHeader.tsx
index 14e2902a46..413511f99d 100644
--- a/site/src/examples/dialog/WithHeader.tsx
+++ b/site/src/examples/dialog/WithHeader.tsx
@@ -3,7 +3,6 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  H2,
   H3,
   StackLayout,
   useId,
@@ -44,7 +43,7 @@ export const WithHeader = (): ReactElement => {
       <Dialog open={open} onOpenChange={onOpenChange} id={id}>
         <DialogHeader
           preheader="Settlements"
-          header={<H2>Terms and conditions</H2>}
+          header="Terms and conditions"
           description="Effective date: August 29, 2024"
           actions={closeButton}
         />
diff --git a/site/src/examples/overlay/WithHeader.tsx b/site/src/examples/overlay/WithHeader.tsx
index ab50d3ba1c..7d0afa0bcb 100644
--- a/site/src/examples/overlay/WithHeader.tsx
+++ b/site/src/examples/overlay/WithHeader.tsx
@@ -1,11 +1,9 @@
 import {
   Button,
-  H2,
   Overlay,
   OverlayPanel,
   OverlayPanelContent,
   OverlayTrigger,
-  useId,
 } from "@salt-ds/core";
 import { CloseIcon } from "@salt-ds/icons";
 import { OverlayHeader } from "@salt-ds/lab";
@@ -13,7 +11,6 @@ import { type ReactElement, useState } from "react";
 
 export const WithHeader = (): ReactElement => {
   const [open, setOpen] = useState(false);
-  const id = useId();
 
   const onOpenChange = (newOpen: boolean) => setOpen(newOpen);
 
@@ -33,15 +30,8 @@ export const WithHeader = (): ReactElement => {
       <OverlayTrigger>
         <Button>Show Overlay</Button>
       </OverlayTrigger>
-      <OverlayPanel aria-labelledby={id}>
-        <OverlayHeader
-          header={
-            <H2 styleAs="h4" id={id}>
-              Title
-            </H2>
-          }
-          actions={headerActions}
-        />
+      <OverlayPanel>
+        <OverlayHeader header="Title" actions={headerActions} />
         <OverlayPanelContent>
           <div>Content of Overlay</div>
         </OverlayPanelContent>