refactor(dialog): footer, dismissible and layout fixes

- uses the fullscreen and fullscreenTakeover layouts to determine
whether the buttonGroup should show at the top of the dialog
- set the footer or noFooter class, use a isDismissible check to
determine if the buttonGroup should be rendered (this should take care
of instances for footer or no footer content regardless of the
isDismissible value)

Author: marissahuysentruyt

components/dialog/stories/template.js

@@ -82,51 +82,59 @@ export const Template = ({
 						`
 					])}
 				</div>
-				${when(layout !== "default", () => [
-					html`
-						<div class="${rootClass}-buttonGroup">
-							<div class="${rootClass}-buttonGroup--noFooter">
+
+				${when(isDismissable, () =>
+					CloseButton({
+            customClasses: [`${rootClass}-closeButton`],
+            ...globals,
+            onclick: () => {
+              updateArgs({ isOpen: !isOpen });
+            },
+          }), 
+				)}
+
+				${when(layout === "fullscreen" || layout === "fullscreenTakeover", () => html`
+					<div class="${rootClass}-buttonGroup">
+						${ButtonGroup({
+							items: buttons,
+							onclick: () => {
+								updateArgs({ isOpen: !isOpen });
+							},
+						})}
+					</div>`
+				)}
+
+				<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
+				
+				${when(footer, () => html`
+					<div class="${rootClass}-footer">
+						${Typography({
+							semantics: "body",
+							size: "m",
+							content: footer,
+						})}
+						${when(!isDismissable, () => html`
+							<div class="${rootClass}-buttonGroup">
 								${ButtonGroup({
 									items: buttons,
 									onclick: () => {
 										updateArgs({ isOpen: !isOpen });
 									},
 								})}
-							</div>
-						</div>
-					`
-				])}
-				${when(isDismissable, () => 
-					CloseButton({
-						customClasses: [`${rootClass}-closeButton`],
-						...globals,
-						onclick: () => {
-							updateArgs({ isOpen: !isOpen });
-						},
-					}),
+							</div>`
+						)}
+					</div>`, 
 					() => html`
-					<div class="${rootClass}-buttonGroup">
-							<div class="${rootClass}-buttonGroup--noFooter">
+						${when(!isDismissable, () => html`
+							<div class="${rootClass}-buttonGroup ${rootClass}-buttonGroup--noFooter">
 								${ButtonGroup({
 									items: buttons,
 									onclick: () => {
 										updateArgs({ isOpen: !isOpen });
 									},
 								})}
-							</div>
-						</div>
-					`
-				)}
-				<section class="${rootClass}-content">${content.map((c) => (typeof c === "function" ? c({}) : c))}</section>
-				${when(footer, () => 
-					html`
-						<div class="${rootClass}-footer">
-							${Typography({
-								semantics: "body",
-								size: "m",
-								content: footer,
-							})}
-						</div>
+							</div>`
+						)}
 					`
 				)}
 			</div>