From 1f66b97021a68297ad6620ec05daeed1f6059fff Mon Sep 17 00:00:00 2001
From: Stacey Van Herk <13419300+svanherk@users.noreply.github.com>
Date: Thu, 16 Jul 2026 12:09:46 -0400
Subject: [PATCH] GAUD-10314 - Add dialogs and toasts to show all the current
 problems

---
 components/page/demo/page-component.js | 127 ++++++++++++++++++++++---
 1 file changed, 112 insertions(+), 15 deletions(-)

diff --git a/components/page/demo/page-component.js b/components/page/demo/page-component.js
index f166aee82ff..19527902733 100644
--- a/components/page/demo/page-component.js
+++ b/components/page/demo/page-component.js
@@ -1,3 +1,4 @@
+import '../../alert/alert-toast.js';
 import '../../button/button-icon.js';
 import '../../button/button-subtle.js';
 import '../../button/button.js';
@@ -6,6 +7,7 @@ import '../../collapsible-panel/collapsible-panel-group.js';
 import '../../collapsible-panel/collapsible-panel-summary-item.js';
 import '../../demo/demo-page-settings.js';
 import '../../dialog/dialog.js';
+import '../../dialog/dialog-confirm.js';
 import '../../filter/filter.js';
 import '../../filter/filter-dimension-set.js';
 import '../../filter/filter-dimension-set-value.js';
@@ -51,7 +53,14 @@ class PageDemo extends LitElement {
 		immersiveHeaderTitleType: { type: String, attribute: 'immersive-header-title-type' },
 		layout: { type: String, attribute: 'layout' },
 		widthType: { type: String, attribute: 'width-type' },
-		_demoDialogOpened: { state: true }
+		_mainDialogOpened: { state: true },
+		_mainToastOpened: { state: true },
+		_sideNavDialogOpened: { state: true },
+		_sideNavNativeDialogOpened: { state: true },
+		_sideNavSecondToastOpened: { state: true },
+		_sideNavToastOpened: { state: true },
+		_supportingDialogOpened: { state: true },
+		_supportingToastOpened: { state: true }
 	};
 
 	static styles = [inputLabelStyles, selectStyles, tableStyles, css`
@@ -78,7 +87,14 @@ class PageDemo extends LitElement {
 		this.immersiveHeaderTitleType = urlParams.get('immersiveHeaderTitleType') || 'title-subtitle';
 		this.layout = urlParams.get('layout') || 'main-only';
 		this.widthType = urlParams.get('widthType') || 'normal';
-		this._demoDialogOpened = false;
+		this._mainDialogOpened = false;
+		this._mainToastOpened = false;
+		this._sideNavDialogOpened = false;
+		this._sideNavNativeDialogOpened = false;
+		this._sideNavToastOpened = false;
+		this._sideNavSecondToastOpened = false;
+		this._supportingDialogOpened = false;
+		this._supportingToastOpened = false;
 	}
 
 	render() {
@@ -93,14 +109,6 @@ class PageDemo extends LitElement {
 		`;
 	}
 
-	#handleDialogClose() {
-		this._demoDialogOpened = false;
-	}
-
-	#handleDialogOpen() {
-		this._demoDialogOpened = true;
-	}
-
 	#handleHeaderChange(e) {
 		this.header = e.target.value;
 		this.#updateUrlParam('header', this.header);
@@ -116,6 +124,58 @@ class PageDemo extends LitElement {
 		this.#updateUrlParam('layout', this.layout);
 	}
 
+	#handleMainDialogClose() {
+		this._mainDialogOpened = false;
+		this._mainToastOpened = true;
+	}
+
+	#handleMainDialogOpen() {
+		this._mainDialogOpened = true;
+	}
+
+	#handleMainToastClose() {
+		this._mainToastOpened = false;
+	}
+
+	#handleSideNavDialogClose() {
+		this._sideNavDialogOpened = false;
+		this._sideNavToastOpened = true;
+	}
+
+	#handleSideNavDialogOpen() {
+		this._sideNavDialogOpened = true;
+	}
+
+	#handleSideNavNativeDialogClose() {
+		this._sideNavNativeDialogOpened = false;
+		this._sideNavSecondToastOpened = true;
+	}
+
+	#handleSideNavNativeDialogOpen() {
+		this._sideNavNativeDialogOpened = true;
+	}
+
+	#handleSideNavSecondToastClose() {
+		this._sideNavSecondToastOpened = false;
+	}
+
+	#handleSideNavToastClose() {
+		this._sideNavToastOpened = false;
+	}
+
+	#handleSupportingDialogClose() {
+		this._supportingDialogOpened = false;
+		this._supportingToastOpened = true;
+	}
+
+	#handleSupportingDialogOpen() {
+		this._supportingDialogOpened = true;
+	}
+
+	#handleSupportingToastClose() {
+		this._supportingToastOpened = false;
+	}
+
 	#handleVisibilityChange(e) {
 		const key = e.target.dataset.key;
 		this[key] = e.target.on;
@@ -238,7 +298,7 @@ class PageDemo extends LitElement {
 							<d2l-filter-dimension-set-value key="content" text="Content Topics"></d2l-filter-dimension-set-value>
 						</d2l-filter-dimension-set>
 					</d2l-filter>
-					<d2l-button slot="header-end" primary @click="${this.#handleDialogOpen}">New Assignment</d2l-button>
+					<d2l-button slot="header-end" primary @click="${this.#handleMainDialogOpen}">New Assignment</d2l-button>
 				` : nothing	}
 				
 				${this.#renderDemoMainControls()}
@@ -391,7 +451,7 @@ class PageDemo extends LitElement {
 					</table>
 				</d2l-table-wrapper>
 				<div style="align-items: end; display: flex; height: 500px;">End of Content</div>
-				<d2l-dialog id="demo-dialog" title-text="New Assignment" ?opened="${this._demoDialogOpened}" @d2l-dialog-close="${this.#handleDialogClose}">
+				<d2l-dialog id="main-dialog" title-text="New Assignment" ?opened="${this._mainDialogOpened}" @d2l-dialog-close="${this.#handleMainDialogClose}">
 					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
 						<d2l-input-text label="Assignment Name" value=""></d2l-input-text>
 						<d2l-input-number label="Points" value="100"></d2l-input-number>
@@ -401,6 +461,7 @@ class PageDemo extends LitElement {
 					<d2l-button slot="footer" primary data-dialog-action="create">Create</d2l-button>
 					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 				</d2l-dialog>
+				<d2l-alert-toast type="success" ?open="${this._mainToastOpened}" @d2l-alert-toast-close="${this.#handleMainToastClose}">Assignment saved.</d2l-alert-toast>
 			</d2l-page-main>
 		`;
 	}
@@ -410,8 +471,8 @@ class PageDemo extends LitElement {
 		return html`
 			<d2l-page-side-nav slot="side-nav">
 				${this.hasSideNavHeader ? html`
-					<d2l-button-subtle slot="header-start" text="Add Topic" icon="tier1:plus-default"></d2l-button-subtle>
-					<d2l-button-icon slot="header-end" text="Collapse All" icon="tier1:arrow-collapse"></d2l-button-icon>
+					<d2l-button-subtle slot="header-start" text="Add Topic" icon="tier1:plus-default" @click="${this.#handleSideNavDialogOpen}"></d2l-button-subtle>
+					<d2l-button-icon slot="header-end" text="Collapse All" icon="tier1:arrow-collapse" @click="${this.#handleSideNavNativeDialogOpen}"></d2l-button-icon>
 					<d2l-button-icon slot="header-end" text="Reorder" icon="tier1:dragger"></d2l-button-icon>
 				` : nothing}
 				<d2l-list grid drag-multiple style="width: 100%;">
@@ -506,6 +567,26 @@ class PageDemo extends LitElement {
 					</d2l-list-item-nav>
 				</d2l-list>
 				<div style="align-items: end; display: flex; height: 150px;">End of Content</div>
+				<d2l-dialog id="side-nav-dialog" title-text="Add Topic" ?opened="${this._sideNavDialogOpened}" @d2l-dialog-close="${this.#handleSideNavDialogClose}">
+					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
+						<d2l-input-text label="Topic Name" value=""></d2l-input-text>
+						<select class="d2l-input-select" aria-label="Topic type">
+							<option selected>Content Topic</option>
+							<option>Assignment</option>
+							<option>Quiz</option>
+							<option>Discussion</option>
+						</select>
+						<d2l-input-checkbox checked>Make visible to learners</d2l-input-checkbox>
+					</div>
+					<d2l-button slot="footer" primary data-dialog-action="add">Add</d2l-button>
+					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+				</d2l-dialog>
+				<d2l-dialog-confirm id="side-nav-native-dialog" title-text="Collapse All" text="Are you sure you want to collapse all units? Any unsaved changes to expanded items will remain." ?opened="${this._sideNavNativeDialogOpened}" @d2l-dialog-close="${this.#handleSideNavNativeDialogClose}">
+					<d2l-button slot="footer" primary data-dialog-action="yes">Collapse All</d2l-button>
+					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+				</d2l-dialog-confirm>
+				<d2l-alert-toast type="success" ?open="${this._sideNavToastOpened}" @d2l-alert-toast-close="${this.#handleSideNavToastClose}">Topic added.</d2l-alert-toast>
+				<d2l-alert-toast ?open="${this._sideNavSecondToastOpened}" @d2l-alert-toast-close="${this.#handleSideNavSecondToastClose}">All units collapsed.</d2l-alert-toast>
 			</d2l-page-side-nav>
 		`;
 	}
@@ -527,7 +608,7 @@ class PageDemo extends LitElement {
 							<d2l-input-date label="End Date" value="2026-06-30"></d2l-input-date>
 							<d2l-input-checkbox checked>Has start date</d2l-input-checkbox>
 							<d2l-input-checkbox checked>Has end date</d2l-input-checkbox>
-							<d2l-button-subtle text="Manage Release Conditions"></d2l-button-subtle>
+							<d2l-button-subtle text="Manage Release Conditions" @click="${this.#handleSupportingDialogOpen}"></d2l-button-subtle>
 						</div>
 					</d2l-collapsible-panel>
 					<d2l-collapsible-panel panel-title="Grading and Assessment">
@@ -566,6 +647,22 @@ class PageDemo extends LitElement {
 					</d2l-collapsible-panel>
 				</d2l-collapsible-panel-group>
 				<div style="align-items: end; display: flex; height: 150px;">End of Content</div>
+				<d2l-dialog id="supporting-dialog" title-text="Manage Release Conditions" ?opened="${this._supportingDialogOpened}" @d2l-dialog-close="${this.#handleSupportingDialogClose}">
+					<div style="display: flex; flex-direction: column; gap: 0.75rem;">
+						<select class="d2l-input-select" aria-label="Condition type">
+							<option selected>Grade received on an item</option>
+							<option>Assignment submission</option>
+							<option>Quiz completion</option>
+							<option>Content topic visited</option>
+						</select>
+						<d2l-input-text label="Item" value="Assignment 1: Research Proposal"></d2l-input-text>
+						<d2l-input-number label="Minimum grade (%)" value="60"></d2l-input-number>
+						<d2l-input-checkbox checked>All conditions must be met</d2l-input-checkbox>
+					</div>
+					<d2l-button slot="footer" primary data-dialog-action="create">Create</d2l-button>
+					<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+				</d2l-dialog>
+				<d2l-alert-toast type="success" ?open="${this._supportingToastOpened}" @d2l-alert-toast-close="${this.#handleSupportingToastClose}">Release conditions updated.</d2l-alert-toast>
 			</d2l-page-supporting>
 		`;
 	}