chore(dialog): use getRandomId and renderContent functions

Author: marissahuysentruyt

components/dialog/stories/template.js

@@ -4,7 +4,7 @@ import { Template as CloseButton } from "@spectrum-css/closebutton/stories/templ
 import { Template as Modal } from "@spectrum-css/modal/stories/template.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import { Template as Underlay } from "@spectrum-css/underlay/stories/template.js";
-// import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
+import { getRandomId, renderContent } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -25,7 +25,7 @@ export const Template = ({
 	hasCheckbox = false,
 	content = [],
 	customClasses = [],
-	id,
+	id= getRandomId("dialog"),
 	size = "m",
 	layout,
 	hasHeroImage = false,
@@ -41,19 +41,19 @@ export const Template = ({
 				[rootClass]: true,
 				[`${rootClass}--dismissible`]: isDismissible && ["fullscreen", "fullscreenTakeover"].every(l => layout !== l),
 				[`${rootClass}--${layout}`]: typeof layout !== "undefined",
-				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", 
+				[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			id=${ifDefined(id)}
 			role="dialog"
 			tabindex="-1"
 			aria-modal="true"
 			style=${ifDefined(styleMap(customStyles))}
-		> 
+		>
 			<div class="${rootClass}-grid">
 				${when(hasHeroImage, () =>
 					html`
-						<div 
+						<div
 							class="spectrum-Dialog-hero"
 							style="background-image:url(${heroImageUrl ? heroImageUrl : "example-card-portrait.png"})">
 						</div>
@@ -65,17 +65,18 @@ export const Template = ({
 					`)}
 					${when(header, () => html`
 						<span class="${rootClass}-header-content">
-							${Typography({
+							${renderContent(header)}
+							<!-- ${Typography({
 								semantics: "body",
 								size: "m",
 								// @todo: takeover dialogs can accept other components in their headers. could the renderContent function work here?
 								content: [ header ]
-							})}
+							})} -->
 						</span>
 					`,
 				)}
 				</div>
-				<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
+				<section class="${rootClass}-content">${renderContent(content)}</section>
 				${when(isDismissible, () =>
 					CloseButton({
 						customClasses: [`${rootClass}-closeButton`],
@@ -114,12 +115,13 @@ export const Template = ({
 										label: footer,
 									})}
 								`,
-									() => 
-										Typography({
-											semantics: "body",
-											size: "m",
-											content: [ footer ]
-										})
+									() =>
+										// Typography({
+										// 	semantics: "body",
+										// 	size: "m",
+										// 	content: [ footer ]
+										// })
+										renderContent(footer)
 								)}
 							</div>
 							<div class="${rootClass}-buttonGroup">
@@ -141,7 +143,7 @@ export const Template = ({
 									},
 								}, context)}
 							</div>
-						`, 
+						`,
 						() => html`
 						 	<div class="${rootClass}-noFooter"></div>
 							<div class="${rootClass}-buttonGroup">