npm - @ongov/ontario-design-system-component-library - Versions diffs - 4.2.0-alpha.1 - Mend

@ongov/ontario-design-system-component-library 4.2.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2806) hide show

package/www/index.html ADDED Viewed

@@ -0,0 +1,1163 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+	<head>
+		<link rel="stylesheet" href="/build/p-12d6190c.css" />
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+		<title>Ontario Design System - component samples</title>
+		<link rel="modulepreload" href="/build/p-1d439e32.js" />
+		<link rel="modulepreload" href="/build/p-14fa9399.js" />
+		<link rel="modulepreload" href="/build/p-314395de.js" />
+		<link rel="modulepreload" href="/build/p-55c48d50.js" />
+		<script
+			type="module"
+			src="/build/p-1d439e32.js"
+			data-stencil
+			data-resources-url="/build/"
+			data-stencil-namespace="ontario-design-system-components"
+		></script>
+		<script nomodule="" src="/build/ontario-design-system-components.js" data-stencil></script>
+	</head>
+	<body>
+		<ontario-critical-alert>
+			<a href="https://designsystem.ontario.ca/">Ontario Design System</a> web components now available!!!
+		</ontario-critical-alert>
+		<ontario-header
+			type="serviceOntario"
+			application-header-info='{
+				"title": "Application name",
+				"href": "/application-homepage",
+				"maxSubheaderDesktopLinks": "3",
+				"maxSubheaderTabletLinks": "2",
+				"maxSubheaderMobileLinks": "1"
+			}'
+		></ontario-header>
+		<main>
+			<div class="ontario-row">
+				<div class="ontario-columns ontario-small-12">
+					<h1>Ontario Design System Web Components</h1>
+					<p class="ontario-lead-statement">
+						Web components are a set of web platform APIs that enable the creation of custom, reusable, encapsulated
+						HTML tags to use in web pages and web apps. They allow for all logic, styles and component-specific layout
+						to be handled in one place.
+					</p>
+					<p></p>
+					<h2>On this page</h2>
+					<ol>
+						<li><a href="#accordion">Accordion</a></li>
+						<li><a href="#blockquotes">Blockquotes</a></li>
+						<li><a href="#buttons">Buttons</a></li>
+						<li><a href="#callout-aside">Callouts and Asides</a></li>
+						<li><a href="#card">Card Collection and Card</a></li>
+						<li><a href="#checkboxes">Checkboxes</a></li>
+						<li><a href="#dropdown-lists">Dropdown lists</a></li>
+						<li><a href="#fieldsets">Fieldsets</a></li>
+						<li><a href="#header">Header</a></li>
+						<li><a href="#icons">Icons</a></li>
+						<li><a href="#loading-indicator">Loading indicator</a></li>
+						<li><a href="#page-alerts">Page alerts</a></li>
+						<li><a href="#radio-buttons">Radio buttons</a></li>
+						<li><a href="#tables">Tables</a></li>
+						<li><a href="#textareas">Textareas</a></li>
+						<li><a href="#text-inputs">Text inputs</a></li>
+						<li><a href="#date-input">Date input</a></li>
+						<li><a href="#step-indicator">Step indicator</a></li>
+						<li><a href="#form">Form example</a></li>
+					</ol>
+					<hr />
+					<!-- Accordion -->
+					<div>
+						<h2 id="accordion">Accordion</h2>
+						<ontario-accordion
+							name="My Accordion"
+							expand-collapse-button='{
+								"expandAllSectionsLabel": "Expand All",
+								"collapseAllSectionsLabel": "Collapse All"
+							}'
+							accordion-data='[
+								{"label": "Accordion 1", "content": "This is a string"},
+								{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"},
+								{"label": "Accordion 3", "accordionContentType": "html", "content": "<p>Some <em>sample</em> <strong>text</strong> <s>with</s> <u>lots </u><span style=\"font-size:24px\">of</span> <strong><em><u><s>formating</s></u></em></strong>!</p>"}
+							]'
+						></ontario-accordion>
+						<hr />
+					</div>
+					<!-- Blockquotes -->
+					<div>
+						<h2 id="blockquotes">Blockquotes</h2>
+						<ontario-blockquote attribution="Academic partners" byline="Ontario’s Pedagogy for the Early Years"
+							>In the past few years, Ontario has gained a high level of respect for its visionary work in early
+							education. The changes have been profound, and thoughtfully introduced. The views that guide the work are
+							articulated clearly, and express great respect for children, families, and educators. We now have a solid
+							foundation upon which to build a more coherent system.</ontario-blockquote
+						>
+						<hr />
+					</div>
+					<!-- Buttons -->
+					<div>
+						<h2 id="buttons">Buttons</h2>
+						<div>
+							<h3 class="ontario-h4">Primary button</h3>
+							<ontario-button label="Primary" aria-label-text="Primary Button" type="primary" onclick="testFunction()">
+								Content here will be overwritten by the value of the label property
+							</ontario-button>
+						</div>
+						<div>
+							<h3 class="ontario-h4">Secondary button</h3>
+							<ontario-button
+								label="Secondary"
+								aria-label-text="Secondary Button"
+								htmltype="reset"
+								id="secondaryButton"
+							>
+								Content here will be overwritten by the value of the label property
+							</ontario-button>
+						</div>
+						<div>
+							<h3 class="ontario-h4">Tertiary button</h3>
+							<ontario-button label="Tertiary" aria-label-text="Tertiary Button" type="tertiary">
+								Content here will be overwritten by the value of the label property
+							</ontario-button>
+						</div>
+						<hr />
+					</div>
+					<!-- Callouts & Asides -->
+					<div>
+						<h2 id="callout-aside">Callouts and Asides</h2>
+						<div>
+							<h3 class="ontario-h4">Callouts</h3>
+							<ontario-callout
+								heading-type="h3"
+								heading-content-type="string"
+								heading-content="Get notified"
+								highlight-colour="purple"
+							>
+								<p>
+									<a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence
+									expires.
+								</p>
+							</ontario-callout>
+						</div>
+						<div>
+							<h3 class="ontario-h4">Asides</h3>
+							<ontario-aside
+								heading-type="h2"
+								heading-content-type="string"
+								heading-content="Quick fact:"
+								highlight-colour="gold"
+								content="As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions."
+							></ontario-aside>
+						</div>
+						<hr />
+					</div>
+					<!-- Card -->
+					<div>
+						<h2 id="card">Card Collection &amp; Card</h2>
+						<div>
+							<ontario-card-collection cards-per-row="4">
+								<ontario-card-collection cards-per-row="2">
+									<ontario-card
+										card-type="horizonal"
+										label="Card Title 1"
+										image="https://picsum.photos/200/300"
+										card-link="https://google.ca"
+										horizontal-image-position-type="left"
+										horizontal-image-size-type="one-fourth"
+										description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									></ontario-card>
+									<ontario-card
+										card-type="horizonal"
+										label="Card Title 2"
+										image="https://picsum.photos/200/300"
+										horizontal-image-position-type="left"
+										horizontal-image-size-type="one-fourth"
+										description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+									></ontario-card>
+								</ontario-card-collection>
+								<ontario-card
+									card-type="basic"
+									label="Card Title 3"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								></ontario-card>
+								<ontario-card
+									card-type="basic"
+									label="Card Title 4"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								></ontario-card>
+								<ontario-card
+									card-type="basic"
+									label="Card Title 5"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								></ontario-card>
+								<ontario-card
+									card-type="basic"
+									label="Card Title 6"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								></ontario-card>
+								<ontario-card
+									card-type="basic"
+									label="Card Title 7"
+									image="https://picsum.photos/200/300"
+									horizontal-image-position-type="left"
+									horizontal-image-size-type="one-fourth"
+									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+								></ontario-card>
+							</ontario-card-collection>
+						</div>
+					</div>
+					<!-- Checkboxes -->
+					<div>
+						<h2 id="checkboxes">Checkboxes</h2>
+						<ontario-checkboxes
+							name="ontario-checkbox-group"
+							caption='{
+								"captionText": "Checkbox legend",
+								"captionType": "large"
+							}'
+							hint-text="Hint text for the checkbox group."
+							required=""
+							options='[
+								{
+									"value": "checkbox-option-1",
+									"label": "Checkbox option 1 label",
+									"elementId": "checkbox-1"
+								},
+								{
+									"value": "checkbox-option-2",
+									"label": "Checkbox option 2 label",
+									"elementId": "checkbox-2",
+									"hintExpander": {
+										"hint": "Hint expander for checkbox option 2",
+										"content": "Example hint expander content for checkbox option 2."
+									}
+								},
+								{
+									"value": "checkbox-option-3",
+									"label": "Checkbox option 3 label",
+									"elementId": "checkbox-3",
+									"hintExpander": {
+										"hint": "Hint expander for checkbox option 3",
+										"content": "Example hint expander content for checkbox option 3."
+									}
+								},
+								{
+									"value": "checkbox-option-4",
+									"label": "Checkbox option 4 label",
+									"elementId": "checkbox-4"
+								}
+							]'
+							hint-expander='{
+								"hint": "Hint expander for the checkbox group",
+								"content": "<p>Example hint expander content for the checkbox group.</p><p>It has multiple lines.</p>",
+								"hintContentType": "html"
+							}'
+						></ontario-checkboxes>
+						<hr />
+					</div>
+					<!-- Dropdown lists -->
+					<div>
+						<h2 id="dropdown-lists">Dropdown lists</h2>
+						<ontario-dropdown-list
+							name="dropdown"
+							caption='{
+								"captionText": "Label",
+								"captionType": "large"
+							}'
+							required=""
+							options='[
+								{
+									"value": "dropdown-option-1",
+									"label": "Option 1",
+									"selected": true
+								},
+								{
+									"value": "dropdown-option-2",
+									"label": "Option 2"
+								},
+								{
+									"value": "dropdown-option-3",
+									"label": "Option 3"
+								}
+							]'
+						></ontario-dropdown-list>
+						<hr />
+					</div>
+					<!-- Fieldsets -->
+					<script>
+						window.addEventListener('load', () => {
+							console.log('Loaded Address Event Listener');
+							const addressLine1 = document.getElementById('address-line-1');
+							addressLine1.inputValidator = async (value) => {
+								if (value === 'error') return { errorMessage: "You entered 'error'" };
+							};
+							addressLine1.addEventListener('inputErrorOccurred', (event) => {
+								console.log('errorOccurred:', event);
+							});
+						});
+					</script>
+					<div>
+						<h2 id="fieldsets">Fieldsets</h2>
+						<ontario-fieldset legend-size="large" legend="What is your delivery address?">
+							<ontario-input
+								id="address-line-1"
+								caption="Address line 1"
+								required=""
+								name="address-line-1"
+								hint-text="Street and number or P.O. box."
+								enable-live-validation=""
+							></ontario-input>
+							<ontario-input
+								caption="Address line 2"
+								name="address-line-2"
+								hint-text="Apartment, suite, unit, building, etc."
+							></ontario-input>
+							<ontario-dropdown-list
+								caption="Province/territory"
+								name="province-selection"
+								element-id="province-territory"
+								required=""
+								is-empty-start-option="true"
+								options='[
+									{
+										"value": "AB",
+										"label": "Alberta"
+									},
+									{
+										"value": "BC",
+										"label": "British Columbia"
+									},
+									{
+										"value": "MB",
+										"label": "Manitoba"
+									},
+									{
+										"value": "NB",
+										"label": "New Brunswick"
+									},
+									{
+										"value": "NL",
+										"label": "Newfoundland and Labrador"
+									},
+									{
+										"value": "NS",
+										"label": "Nova Scotia"
+									},
+									{
+										"value": "ON",
+										"label": "Ontario"
+									},
+									{
+										"value": "QC",
+										"label": "Quebec"
+									},
+									{
+										"value": "SK",
+										"label": "Saskatchewan"
+									},
+									{
+										"value": "NT",
+										"label": "Northwest Territories"
+									},
+									{
+										"value": "NU",
+										"label": "Nunavut"
+									},
+									{
+										"value": "YT",
+										"label": "Yukon"
+									}
+								]'
+							></ontario-dropdown-list>
+							<ontario-input
+								id="post-code"
+								caption="Postal code"
+								required=""
+								name="postal-code"
+								input-width="7-char-width"
+								enable-live-validation=""
+							></ontario-input>
+						</ontario-fieldset>
+						<hr />
+					</div>
+					<!-- Buttons -->
+					<div>
+						<h2 id="header">Header</h2>
+						<div>
+							<h3 class="ontario-h4">Change the page header</h3>
+							<ontario-button onclick="activateHeaderType('ontario')">Activate the Ontario.ca Header</ontario-button>
+							<ontario-button onclick="activateHeaderType('application')">
+								Activate the Application Header
+							</ontario-button>
+							<ontario-button onclick="activateHeaderType('serviceOntario')">
+								Activate the ServiceOntario Header
+							</ontario-button>
+						</div>
+						<hr />
+					</div>
+					<!-- Icons -->
+					<div>
+						<h2 id="icons">Icons</h2>
+						<div>
+							<h3 class="ontario-h4">Primary Icons</h3>
+							<ontario-icon-accessibility icon-width="32" colour="blue"></ontario-icon-accessibility>
+							<ontario-icon-help icon-width="32"></ontario-icon-help>
+							<ontario-icon-email icon-width="32" colour="grey"></ontario-icon-email>
+						</div>
+						<div class="ontario-margin-top-24-!">
+							<h3 class="ontario-h4">Secondary Icons</h3>
+							<ontario-icon-notification icon-width="32" colour="blue"></ontario-icon-notification>
+							<ontario-icon-print icon-width="32"></ontario-icon-print>
+							<ontario-icon-camera icon-width="32" colour="grey"></ontario-icon-camera>
+							<ontario-icon-text-message icon-width="32" colour="blue"></ontario-icon-text-message>
+							<ontario-icon-mastercard icon-width="32"></ontario-icon-mastercard>
+							<ontario-icon-transport-bus icon-width="32" colour="grey"></ontario-icon-transport-bus>
+							<ontario-icon-sentiment-5 icon-width="32"></ontario-icon-sentiment-5>
+						</div>
+						<hr />
+					</div>
+					<!-- Loading Indicator -->
+					<div>
+						<h2 id="loading-indicator">Loading Indicator</h2>
+						<div style="position: relative; height: 25vh">
+							<ontario-loading-indicator is-loading="true" full-screen-overlay="false"></ontario-loading-indicator>
+						</div>
+						<hr />
+					</div>
+					<!-- Page alerts -->
+					<div>
+						<h2 id="page-alerts">Page alerts</h2>
+						<div>
+							<h3 class="ontario-h4">Informational</h3>
+							<ontario-page-alert type="informational" heading="Licence plates">
+								ServiceOntario centres may issue either a blue licence plate or a white embossed ‘Yours to Discover’
+								licence plate depending on availability. <a href="#">Learn more about replacing a licence plate</a>.
+							</ontario-page-alert>
+						</div>
+						<div>
+							<h3 class="ontario-h4">Warning</h3>
+							<ontario-page-alert type="warning" heading="Service wait times">
+								We are experiencing longer than normal wait times at this ServiceOntario centre. You can
+								<a href="#">check out our Service Finder</a> to see if the service you need is offered online or at a
+								different centre nearby.
+							</ontario-page-alert>
+						</div>
+						<div>
+							<h3 class="ontario-h4">Success</h3>
+							<ontario-page-alert
+								type="success"
+								heading="Your payment was successful and your order is now complete."
+								content="Please look out for an email confirmation with your receipt and order number. Your licence plate sticker should arrive in 2-4 weeks."
+							></ontario-page-alert>
+						</div>
+						<div>
+							<h3 class="ontario-h4">Error</h3>
+							<ontario-page-alert type="error" heading="There is a problem">
+								Errors were found on this page:
+								<ul>
+									<li><a href="#">Your licence plate number must be a valid plate number</a></li>
+									<li><a href="#">The odometer reading must be a valid number</a></li>
+									<li><a href="#">The name field must not be empty</a></li>
+								</ul>
+							</ontario-page-alert>
+						</div>
+						<hr />
+					</div>
+					<!-- Radio buttons -->
+					<div>
+						<h2 id="radio-buttons">Radio buttons</h2>
+						<ontario-radio-buttons
+							name="radios"
+							hint-text="Hint text for the radio button group."
+							caption='{
+								"captionText": "Radio legend",
+								"captionType": "large"
+							}'
+							required="false"
+							options='[
+								{
+									"value": "radio-option-1",
+									"elementId": "radio-1",
+									"label": "Radio option 1 label"
+								},
+								{
+									"value": "radio-option-2",
+									"elementId": "radio-2",
+									"label": "Radio option 2 label",
+									"hintExpander": {
+										"hint": "Hint expander for radio option 2",
+										"content": "Example hint expander content for radio option 2."
+									}
+								},
+								{
+									"value": "radio-option-3",
+									"elementId": "radio-3",
+									"label": "Radio option 3 label"
+								},
+								{
+									"value": "radio-option-4",
+									"elementId": "radio-4",
+									"label": "Radio option 4 label"
+								}
+							]'
+							hint-expander='{
+								"hint": "Hint expander for the radio button group",
+								"content": "Example hint expander content for the radio button group."
+							}'
+						></ontario-radio-buttons>
+						<hr />
+					</div>
+					<!-- Tables -->
+					<div>
+						<h2 id="tables">Tables</h2>
+						<h3>3 columns (non-numeric)</h3>
+						<ontario-table
+							caption="Marriage certificate: cost and delivery"
+							table-columns='[
+								{ "title": "Type of service", "key": "service" },
+								{ "title": "Processing and delivery", "key": "processing" },
+								{ "title": "Cost", "key": "cost", "type": "numeric" }
+							]'
+							table-data='[
+								{
+									"data" : {
+										"service": "Regular service (online)",
+										"processing": "15 business days plus delivery by Canada Post",
+										"cost": "$15"
+									}
+								},
+								{
+									"data" : {
+										"service": "Premium service (online)",
+										"cost": "$45",
+										"processing": "5 business days including delivery by courier"
+									}
+								},
+								{
+									"data" : {
+										"processing": "5 business days including delivery by courier (proof of urgency is required)",
+										"service": "Emergency service (in-person)",
+										"cost": "$45"
+									}
+								}
+							]'
+						></ontario-table>
+						<h3>5 columns (numeric)</h3>
+						<ontario-table
+							caption="Number of engagement sessions by business area from 2016–2020"
+							zebra-stripes="enabled"
+							table-columns='[
+								{ "title": "Business area", "key": "business" },
+								{ "title": "April 2016 – March 2017", "key": "date1", "type": "numeric" },
+								{ "title": "April 2017 - March 2018", "key": "date2", "type": "numeric" },
+								{ "title": "April 2018 - March 2019", "key": "date3", "type": "numeric" },
+								{ "title": "April 2019 - March 2020", "key": "date4", "type": "numeric" }
+							]'
+							table-data='[
+								{
+									"data" : {
+										"business": "Aggregates and petroleum",
+										"date1": "35",
+										"date2": "32",
+										"date3": "45",
+										"date4": "71"
+									}
+								},
+								{
+									"data" : {
+										"business": "Fish and wildlife",
+										"date1": "162",
+										"date2": "240",
+										"date3": "178",
+										"date4": "162"
+									}
+								},
+								{
+									"data": {
+										"business": "Forestry",
+										"date1": "182",
+										"date2": "170",
+										"date3": "235",
+										"date4": "242"
+									},
+									"highlight": "true"
+								},
+								{
+									"data": {
+										"business": "Lands and water",
+										"date1": "79",
+										"date2": "101",
+										"date3": "42",
+										"date4": "70"
+									}
+								},
+								{
+									"data": {
+										"business": "General",
+										"date1": "56",
+										"date2": "37",
+										"date3": "64",
+										"date4": "46"
+									}
+								},
+								{
+									"data": {
+										"business": "Total row",
+										"date1": "514",
+										"date2": "580",
+										"date3": "564",
+										"date4": "591"
+									},
+									"footer": true
+								}
+							]'
+						></ontario-table>
+						<h3>7 columns (numeric and condensed)</h3>
+						<ontario-table
+							caption="Operating expense"
+							condensed="true"
+							table-columns='[
+								{ "title": "Votes/Programs", "key": "program", "colSpan": 2 },
+								{ "title": "Estimates 2020-21 $", "key": "column1", "type": "numeric" },
+								{ "title": "Change from estimates 2019-20 $", "key": "column2", "type": "numeric" },
+								{ "title": "Change from estimates 2019-20 %", "key": "column3", "type": "numeric" },
+								{ "title": "Estimates 2019-20 $", "key": "column4", "type": "numeric" },
+								{ "title": "Interim actuals 2019-20 $", "key": "column5", "type": "numeric" },
+								{ "title": "Actuals 2018-19 $", "key": "column6", "type": "numeric"}
+							]'
+							table-data='[
+								{
+									"data" : {
+										"program": "Ministry administration",
+										"column1": "16,147,000",
+										"column6": "20,683,313",
+										"column2": "1,388,600",
+										"column3": "9.4",
+										"column4": "14,758,400",
+										"column5": "17,470,200"
+									}
+								},
+								{
+									"data" : {
+										"program": "Postsecondary education",
+										"column1": "6,455,038,100",
+										"column4": "6,586,779,600",
+										"column2": "(131,741,500)",
+										"column3": "(2.0)",
+										"column5": "6,491,779,600",
+										"column6": "7,398,858,795"
+									}
+								},
+								{
+									"data" : {
+										"program": "Research program",
+										"column1": "187,399,200",
+										"column2": "(1,290,400)",
+										"column3": "(0.7)",
+										"column4": "188,689,600",
+										"column5": "188,689,600",
+										"column6": "174,629,399"
+									}
+								},
+								{
+									"data" : {
+										"program": "Total operating expense to be voted",
+										"column1": "6,658,584,300",
+										"column2": "(131,643,300)",
+										"column3": "(1.9)",
+										"column4": "6,790,227,600",
+										"column5": "6,697,939,400",
+										"column6": "7,594,171,507"
+									}
+								},
+								{
+									"data" : {
+										"program": "Statutory appropriations",
+										"column1": "55,106,014",
+										"column2": "0",
+										"column3": "0",
+										"column4": "55,106,014",
+										"column5": "55,106,014",
+										"column6": "36,264,081"
+									}
+								},
+								{
+									"data" : {
+										"program": "Ministry total operating expense",
+										"column1": "6,713,690,314",
+										"column2": "(131,643,300)",
+										"column3": "(1.9)",
+										"column4": "6,845,333,614",
+										"column5": "6,753,045,414",
+										"column6": "7,630,435,588"
+									},
+									"subtotal": "true"
+								},
+								{
+									"data" : {
+										"program": "Consolidation &amp; other Adjustments - Colleges",
+										"column1": "3,504,321,700",
+										"column2": "210,997,500",
+										"column3": "6.4",
+										"column4": "3,293,324,200",
+										"column5": "3,269,671,700",
+										"column6": "2,961,027,351"
+									}
+								},
+								{
+									"data" : {
+										"program": "Operating expense adjustment - Student assistance interest expense reclassification",
+										"column1": "(48,979,900)",
+										"column2": "0",
+										"column3": "0",
+										"column4": "(48,979,900)",
+										"column5": "(48,979,900)",
+										"column6": "(33,055,246)"
+									}
+								},
+								{
+									"data" : {
+										"program": "Consolidation &amp; other adjustments - Hospitals",
+										"column1": "(9,886,600)",
+										"column2": "5,107,400",
+										"column3": "123",
+										"column4": "(14,994,000)",
+										"column5": "(15,005,000)",
+										"column6": "(15,193,844)"
+									}
+								},
+								{
+									"data" : {
+										"program": "Consolidation &amp; other adjustments - Hospitals",
+										"column1": "(9,886,600)",
+										"column2": "5,107,400",
+										"column3": "<abbr title=\"not available\">N/A</abbr>",
+										"column4": "(14,994,000)",
+										"column5": "(15,005,000)",
+										"column6": "(15,193,844)"
+									}
+								},
+								{
+									"data" : {
+										"program": "Consolidation &amp; other adjustments - General real estate portfolio",
+										"column1": "(5,904,600)",
+										"column2": "(5,686,900)",
+										"column3": "<abbr title=\"not available\">N/A</abbr>",
+										"column4": "(217,700)",
+										"column5": "<abbr title=\"not available\">N/A</abbr>",
+										"column6": "(189,337)"
+									}
+								},
+								{
+									"data" : {
+										"program": "Total including consolidation &amp; other adjustments",
+										"column1": "10,153,240,914",
+										"column2": "78,774,700",
+										"column3": "0.80",
+										"column4": "10,074,466,214",
+										"column5": "9,958,732,214",
+										"column6": "10,543,024,512"
+									},
+									"footer": true
+								}
+							]'
+						></ontario-table>
+						<hr />
+					</div>
+					<!-- Textareas -->
+					<div>
+						<h2 id="textareas">Textareas</h2>
+						<ontario-textarea
+							name="comments"
+							caption='{
+								"captionText": "Comments",
+								"captionType": "large"
+							}'
+							required="true"
+							hint-expander='{
+								"hint": "Hint expander",
+								"content": "A comment can be constructive or positive!"
+							}'
+						></ontario-textarea>
+						<ontario-textarea
+							name="feedback"
+							caption='{
+								"captionText": "Feedback",
+								"captionType": "large"
+							}'
+							element-id="feedback"
+							hint-text='{
+								"hint": "<p>Please provide any additional information you think would be useful for us to improve our services.</p><p>We welcome all feedback, both constructive or otherwise.</p>",
+								"hintContentType": "html"
+							}'
+						></ontario-textarea>
+						<ontario-textarea
+							name="response"
+							caption='{
+								"captionText": "What do you like about ODS?",
+								"captionType": "default"
+							}'
+							element-id="response"
+						></ontario-textarea>
+						<hr />
+					</div>
+					<!-- Text inputs -->
+					<div>
+						<h2 id="text-inputs">Text inputs</h2>
+						<ontario-input
+							name="email"
+							input-width="20-char-width"
+							caption='{
+								"captionText": "Email",
+								"captionType": "large"
+							}'
+							required="true"
+						></ontario-input>
+						<ontario-input
+							name="postal"
+							input-width="7-char-width"
+							caption='{
+								"captionText": "Postal Code",
+								"captionType": "default"
+							}'
+							hint-text="For example, A1A 1A1"
+						></ontario-input>
+						<ontario-input
+							name="address"
+							caption="Address"
+							hint-expander='{
+								"hint": "Hint expander",
+								"content": "This is the content, yup this is the content"
+							}'
+						></ontario-input>
+					</div>
+					<hr />
+					<!-- Date Input -->
+					<div>
+						<h2 id="date-input">Date Input</h2>
+						<ontario-date-input
+							element-id="date-input-example-id"
+							placeholder='{
+								"day": "DD",
+								"month": "MM",
+								"year": "YYYY"
+							}'
+							min-year="999"
+							max-year="9999"
+							required="true"
+							date-options='["day", "month", "year"]'
+							hint-text="For example 2000 03 01"
+							caption='{
+								"captionText": "Exact Date",
+								"captionType": "default"
+							}'
+						></ontario-date-input>
+					</div>
+					<hr />
+					<!-- Step Indicator -->
+					<div>
+						<h2 id="step-indicator">Step Indicator</h2>
+						<h3>Percentage</h3>
+						<ontario-step-indicator
+							show-back-button="true"
+							back-button-url="https://designsystem.ontario.ca/"
+							percentage-complete="70"
+						></ontario-step-indicator>
+						<h3>Steps</h3>
+						<ontario-step-indicator
+							show-back-button="true"
+							back-button-url="https://designsystem.ontario.ca/"
+							current-step="4"
+							number-of-steps="5"
+						></ontario-step-indicator>
+						<h3>No back button</h3>
+						<ontario-step-indicator
+							show-back-button="false"
+							current-step="4"
+							number-of-steps="5"
+						></ontario-step-indicator>
+					</div>
+					<div>
+						<!-- Form -->
+						<form id="sample-form">
+							<h2 id="form">Form example</h2>
+							<ontario-fieldset legend-size="large" legend="What is your delivery address?">
+								<ontario-input
+									id="delivery-address-form-line-1"
+									caption="Address line 1"
+									required=""
+									name="delivery-address-form-line-1"
+									hint-text="Street and number or P.O. box."
+									enable-live-validation=""
+									required-validation-message="Please enter your address"
+								></ontario-input>
+								<ontario-input
+									caption="Address line 2"
+									name="delivery-address-form-line-2"
+									hint-text="Apartment, suite, unit, building, etc."
+								></ontario-input>
+								<ontario-dropdown-list
+									caption="Province/territory"
+									name="delivery-address-form-province-selection-form"
+									element-id="delivery-address-form-province-territory"
+									required=""
+									is-empty-start-option="true"
+									options='[
+									{
+										"value": "ON",
+										"label": "Ontario"
+									},
+									{
+										"value": "QC",
+										"label": "Quebec"
+									},
+									{
+										"value": "SK",
+										"label": "Saskatchewan"
+									}
+								]'
+								></ontario-dropdown-list>
+								<ontario-checkboxes
+									name="delivery-address-form-options"
+									caption="Options"
+									hint-text="Select all delivery options that apply"
+									options='[
+										{
+											"value": "signature",
+											"label": "Signature",
+											"elementId": "checkbox-1"
+										},
+										{
+											"value": "gift-wrap",
+											"label": "Gift Wrap",
+											"elementId": "checkbox-2",
+											"hintExpander": {
+												"hint": "What is gift wrapping?",
+												"content": "Have your package wrapped in pretty paper."
+											}
+										},
+										{
+											"value": "high-5",
+											"label": "High Five",
+											"elementId": "checkbox-3",
+											"hintExpander": {
+												"hint": "What is a high five",
+												"content": "Life is short, show both your and the driver some appreciation with a high five."
+											}
+										}
+									]'
+								></ontario-checkboxes>
+								<ontario-radio-buttons
+									name="delivery-address-form-notification"
+									hint-text="Let the driver know how to notify you."
+									caption="Notification"
+									required="false"
+									options='[
+											{
+												"value": "knock",
+												"elementId": "radio-1",
+												"label": "Knock on door",
+												"hintExpander": {
+													"hint": "What is this option?",
+													"content": "The driver will knock on your door to let you know the delivery has arrived."
+												}
+											},
+											{
+												"value": "text",
+												"elementId": "radio-2",
+												"label": "Text message"
+											},
+											{
+												"value": "phone",
+												"elementId": "radio-3",
+												"label": "Phone call"
+											}
+										]'
+									hint-expander='{
+										"hint": "What is a notification?",
+										"content": "Let our driver know how best to notify you of your package being delivered."
+									}'
+								></ontario-radio-buttons>
+								<ontario-date-input
+									element-id="delivery-address-form-delivery-date"
+									name="delivery-address-form-delivery-date"
+									placeholder='{
+										"day": "DD",
+										"month": "MM",
+										"year": "YYYY"
+									}'
+									min-year="999"
+									max-year="9999"
+									required="true"
+									date-options='["day", "month", "year"]'
+									hint-text="For example 2000 03 01"
+									caption="Delivery date"
+								></ontario-date-input>
+								<ontario-textarea
+									name="delivery-address-form-delivery-notes"
+									caption="Delivery notes"
+									hint-expander='{
+										"hint": "What are delivery notes?",
+										"content": "Delivery notes can include things like door codes, etc."
+									}'
+								></ontario-textarea>
+							</ontario-fieldset>
+							<ontario-button type="primary" html-type="submit">Submit</ontario-button>
+						</form>
+						<h2 id="form-results" style="display: none">Form Results</h2>
+						<div id="form-results-data"></div>
+						<script>
+							window.addEventListener('load', () => {
+								console.log('Loaded Form Event Listener');
+								const form = document.getElementById('sample-form');
+								const formResults = document.getElementById('form-results');
+								const formResultsDataDisplay = document.getElementById('form-results-data');
+								form.addEventListener('submit', (event) => {
+									// Avoid an actual submission
+									event.preventDefault();
+									// Get the data from the form to be submitted
+									const formData = new FormData(event.target);
+									const formResultsArray = [...formData.entries()];
+									if (validateForm()) return;
+									// Display the form data
+									formResults.style.display = 'block';
+									console.log('Form Content:', formResultsArray);
+									const formResultsHtml = formResultsArray.map((x) => `<li><strong>${x[0]}</strong>: ${x[1]}</li>`);
+									formResultsDataDisplay.innerHTML = `<p class="ontario-columns ontario-small-12"><ul>\n${formResultsHtml.join(
+										'\n',
+									)}\n</ul></p>`;
+								});
+								const validateForm = () => {
+									let error = false;
+									const address1 = document.getElementById('delivery-address-form-line-1');
+									if (address1.value == undefined || address1.value == '') {
+										address1.errorMessage = 'Please enter your address';
+										address1.scrollIntoView();
+										error = true;
+									}
+									return error;
+								};
+							});
+						</script>
+					</div>
+				</div>
+			</div>
+		</main>
+		<ontario-footer
+			type="threeColumn"
+			footer-links='{
+				"accessibilityLink": {
+					"text": "Accessibility",
+					"href": "https://www.ontario.ca/page/accessibility"
+				},
+				"privacyLink": {
+					"href": "https://www.ontario.ca/page/privacy-statement"
+				},
+				"contactLink": {
+					"text": "Contact us",
+					"href": "https://www.ontario.ca/feedback/contact-us"
+				},
+				"printerLink": {
+					"href": "https://www.ontario.ca/page/copyright-information"
+				}
+			}'
+			social-links='{
+				"facebook": "https://www.facebook.com/ONgov",
+				"instagram": "https://www.instagram.com/ongov",
+				"twitter": "https://twitter.com/ONgov",
+				"youtube": "https://www.youtube.com/ongov"
+			}'
+			two-column-options='{
+				"column1": {
+					"title": "Ontario Design System",
+					"content": [
+						{
+							"type": "text",
+							"text": "The Ontario Design System provides principles, guidance and code to help teams design and build accessible, mobile-friendly government websites and digital services."
+						},
+						{
+							"type": "list",
+							"heading": "Latest release",
+							"list": ["Built on: June 3, 2022", "Distribution package version 0.12.10"]
+						}
+					]
+				},
+				"column2": {
+					"title": "Help us improve the design system",
+					"content": [
+						{
+							"type": "html",
+							"html": "You can check our <a href=#>help and feedback page</a> if you don’t see the component you need."
+						}
+					],
+					"button": {
+						"text": "Send us an email",
+						"link": "#"
+					}
+				}
+			}'
+			three-column-options='{
+				"column1": {
+					"title": "Ontario Design System",
+					"content": [
+						{
+							"type": "text",
+							"text": "The Ontario Design System provides principles, guidance and code to help teams design and build accessible, mobile-friendly government websites and digital services."
+						}
+					]
+				},
+				"column2": {
+					"title": "Latest release",
+					"content": [
+						{
+							"type": "list",
+							"list": ["Built on: June 3, 2022", "Distribution package version 0.12.10"]
+						}
+					]
+				},
+				"column3": {
+					"title": "Help us improve the design system",
+					"content": [
+						{
+							"type": "html",
+							"html": "You can check our <a href=#>help and feedback page</a> if you don’t see the component you need."
+						}
+					],
+					"button": {
+						"text": "Send us an email",
+						"link": "#"
+					}
+				}
+			}'
+		></ontario-footer>
+		<ontario-back-to-top>
+			<script>
+				function testFunction() {
+					alert('HELLO WORLD!');
+				}
+				function activateHeaderType(headerType) {
+					const ontarioHeaderElement = document.querySelector('ontario-header');
+					ontarioHeaderElement.type = headerType;
+				}
+			</script>
+		</ontario-back-to-top>
+	</body>
+</html>