@ongov/ontario-design-system-component-library 5.0.0-alpha.5 → 5.0.0-alpha.6

package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.js

@@ -2,19 +2,44 @@ import { h } from '@stencil/core';
 import { validateLanguage } from '../../utils/validation/validation-functions';
 import translations from '../../translations/global.i18n.json';
 export class OntarioStepIndicator {
-	constructor() {
-		this.handleCustomOnClick = (e) => {
-			this.customOnClick && this.customOnClick(e);
-		};
-		this.showBackButton = false;
-		this.backButtonUrl = undefined;
-		this.currentStep = undefined;
-		this.numberOfSteps = undefined;
-		this.percentageComplete = undefined;
-		this.customOnClick = undefined;
-		this.language = undefined;
-		this.translations = translations;
-	}
+	host;
+	/**
+	 * A boolean value to determine whether or not the back button is displayed for the step indicator.
+	 *
+	 * This is optional. If no prop is passed, it will default to `false`.
+	 */
+	showBackButton = false;
+	/**
+	 * URL for the back element to set a path for where the link will lead.
+	 *
+	 * If a URL is passed in, the back element will display as an anchor tag.
+	 * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.
+	 */
+	backButtonUrl;
+	/**
+	 * A number value to indicate which step the user is currently on.
+	 */
+	currentStep;
+	/**
+	 * A number value to indicate to the user the total number of steps the form has.
+	 */
+	numberOfSteps;
+	/**
+	 * A number value to indicate to the user the percentage of the form that has been completed.
+	 */
+	percentageComplete;
+	/**
+	 * Used to add a custom function to the back button onClick event.
+	 *
+	 * If this function is passed in, the back element will display as a button.
+	 * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.
+	 */
+	customOnClick;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
+	 */
+	language;
 	/**
 	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
 	 */
@@ -26,39 +51,51 @@ export class OntarioStepIndicator {
 	handleHeaderLanguageToggled(event) {
 		this.language = validateLanguage(event);
 	}
+	translations = translations;
+	handleCustomOnClick = (e) => {
+		this.customOnClick && this.customOnClick(e);
+	};
 	componentWillLoad() {
 		this.language = validateLanguage(this.language);
 	}
 	render() {
 		return h(
 			'div',
-			{ key: '83d9f9953680f3e84f11fcb85d6aca4a050932ca', class: 'ontario-step-indicator' },
+			{ key: '4e4bc3d532d200fe27e0ea5153404515d67a50a9', class: 'ontario-step-indicator' },
 			h(
 				'div',
-				{ key: '84b130dd8af2cc708cea2f45799d04161699d703', class: 'ontario-row' },
+				{ key: '08d05bed5c4ba11f4dcf3026429a395b8df34fdd', class: 'ontario-row' },
 				h(
 					'div',
-					{ key: '12457c0b09eede669f39f7d0c9b1ebbc5dbcc6e6', class: 'ontario-columns ontario-small-12' },
+					{ key: 'd5112ae4a7e493f55f2e36698efb8fdeae1094ab', class: 'ontario-columns ontario-small-12' },
 					h(
 						'div',
 						{
-							key: 'a422636fc6c8d666d4e60aacf883d7b45ccddfb6',
+							key: 'e9b994c4056f7f1059e279a426e0c6fc383666bd',
 							class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
 						},
 						this.showBackButton === true &&
 							!this.backButtonUrl &&
 							h(
 								'button',
-								{ class: 'ontario-button ontario-button--tertiary', onClick: (e) => this.handleCustomOnClick(e) },
-								h('ontario-icon-chevron-left', { colour: 'blue' }),
+								{
+									key: 'b6b7863719ff323655307a2a4382ec0c334cbf3c',
+									class: 'ontario-button ontario-button--tertiary',
+									onClick: (e) => this.handleCustomOnClick(e),
+								},
+								h('ontario-icon-chevron-left', { key: '076c150b27302c23abd3f3965d5b0403b23d888e', colour: 'blue' }),
 								this.translations.stepIndicator.back[`${this.language}`],
 							),
 						this.showBackButton === true &&
 							this.backButtonUrl &&
 							h(
 								'a',
-								{ class: 'ontario-button ontario-button--tertiary', href: this.backButtonUrl },
-								h('ontario-icon-chevron-left', { colour: 'blue' }),
+								{
+									key: 'bc3b0099da8f3093c3934dba6647f5fe85e53bf2',
+									class: 'ontario-button ontario-button--tertiary',
+									href: this.backButtonUrl,
+								},
+								h('ontario-icon-chevron-left', { key: '5198d8103499c6062dd73b9fc1a5d2c45b726476', colour: 'blue' }),
 								this.translations.stepIndicator.back[`${this.language}`],
 							),
 						this.percentageComplete
@@ -69,7 +106,7 @@ export class OntarioStepIndicator {
 									this.language === 'en' ? '%' : h('span', null, '\u00A0%'),
 									' ',
 									this.translations.stepIndicator.complete[`${this.language}`],
-							  )
+								)
 							: h(
 									'span',
 									{ class: 'ontario-h4' },
@@ -80,9 +117,9 @@ export class OntarioStepIndicator {
 									this.translations.stepIndicator.of[`${this.language}`],
 									'\u00A0',
 									this.numberOfSteps,
-							  ),
+								),
 					),
-					h('hr', { key: '23f2d86c4d1406d607fd7f5dbb5d54450a6cd5fa' }),
+					h('hr', { key: 'ce73508f420886268f04b9007b8b9930e21ff856' }),
 				),
 			),
 		);
@@ -119,6 +156,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'A boolean value to determine whether or not the back button is displayed for the step indicator.\n\nThis is optional. If no prop is passed, it will default to `false`.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'show-back-button',
 				reflect: false,
 				defaultValue: 'false',
@@ -137,6 +176,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'URL for the back element to set a path for where the link will lead.\n\nIf a URL is passed in, the back element will display as an anchor tag.\nThe back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'back-button-url',
 				reflect: false,
 			},
@@ -154,6 +195,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'A number value to indicate which step the user is currently on.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'current-step',
 				reflect: false,
 			},
@@ -171,6 +214,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'A number value to indicate to the user the total number of steps the form has.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'number-of-steps',
 				reflect: false,
 			},
@@ -188,6 +233,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'A number value to indicate to the user the percentage of the form that has been completed.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'percentage-complete',
 				reflect: false,
 			},
@@ -210,6 +257,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'Used to add a custom function to the back button onClick event.\n\nIf this function is passed in, the back element will display as a button.\nThe back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.',
 				},
+				getter: false,
+				setter: false,
 			},
 			language: {
 				type: 'string',
@@ -231,6 +280,8 @@ export class OntarioStepIndicator {
 					tags: [],
 					text: 'The language of the component.\nThis is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 			},

package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-step-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() showBackButton?: boolean = false;\n\n\t/**\n\t * URL for the back element to set a path for where the link will lead.\n\t *\n\t * If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() backButtonUrl?: string;\n\n\t/**\n\t * A number value to indicate which step the user is currently on.\n\t */\n\t@Prop() currentStep?: number;\n\n\t/**\n\t * A number value to indicate to the user the total number of steps the form has.\n\t */\n\t@Prop() numberOfSteps?: number;\n\n\t/**\n\t * A number value to indicate to the user the percentage of the form that has been completed.\n\t */\n\n\t@Prop() percentageComplete?: number;\n\n\t/**\n\t * Used to add a custom function to the back button onClick event.\n\t *\n\t * If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span>&nbsp;%</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]}&nbsp;{this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]}&nbsp;{this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-step-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() showBackButton?: boolean = false;\n\n\t/**\n\t * URL for the back element to set a path for where the link will lead.\n\t *\n\t * If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() backButtonUrl?: string;\n\n\t/**\n\t * A number value to indicate which step the user is currently on.\n\t */\n\t@Prop() currentStep?: number;\n\n\t/**\n\t * A number value to indicate to the user the total number of steps the form has.\n\t */\n\t@Prop() numberOfSteps?: number;\n\n\t/**\n\t * A number value to indicate to the user the percentage of the form that has been completed.\n\t */\n\n\t@Prop() percentageComplete?: number;\n\n\t/**\n\t * Used to add a custom function to the back button onClick event.\n\t *\n\t * If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span>&nbsp;%</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]}&nbsp;{this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]}&nbsp;{this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-table/ontario-table.css

@@ -31,26 +31,32 @@
     Global line-height variables
 --------------------------------- */
 /* -------------------------------
-    Global letter-spacing variables
+    Global font variables
 --------------------------------- */
 /* Rem calc function */
 /* Pixel to REM Conversion */
-/* -------------------------------
-    Global typography variables
---------------------------------- */
 .ontario-table-container {
 	position: relative;
 	margin: 0.5rem 0 2.5rem;
 }
 
 .ontario-table-div {
-	background: linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),
+	background:
+		linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),
 		linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 70%) 0 100%,
 		linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%),
 		linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%);
 	background-repeat: no-repeat;
-	background-size: 2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;
-	background-position: 0 0, 100%, 0 0, 100%;
+	background-size:
+		2.5rem 100%,
+		2.5rem 100%,
+		0.875rem 100%,
+		0.875rem 100%;
+	background-position:
+		0 0,
+		100%,
+		0 0,
+		100%;
 	background-attachment: local, local, scroll, scroll;
 	overflow-x: auto;
 }

package/dist/collection/components/ontario-table/ontario-table.js

@@ -4,84 +4,78 @@ import { ConsoleMessageClass } from '../../utils/console-message/console-message
 import { ConsoleType } from '../../utils/console-message/console-message.enum';
 import { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';
 export class OntarioTable {
-	constructor() {
-		this.transformTableData = (tableData) => {
-			// get column keys
-			const columns = extractValuesByKey(this.tableColumnsState, 'key').filter((column) => column !== undefined);
-			// organize table data data object according to the order of the column keys
-			const organizedTableData = organizeObjectKeys(tableData, columns);
-			// remove the footer table data into it's own state so that it can be rendered in a `tfoot` element
-			const [updatedTableData, tableFooterData] = removeObjectsBySpecificKey(organizedTableData, 'footer', true);
-			this.tableDataState = updatedTableData;
-			this.tableFooterState = tableFooterData;
-		};
-		this.getZebraStripeClass = () => {
-			return this.zebraStripes === 'disabled'
-				? `ontario-table--no-zebra-stripes`
-				: this.zebraStripes === 'enabled'
-				? `ontario-table--zebra-stripes-enabled`
-				: ``;
-		};
-		this.getTableClasses = () => {
-			let tableClass = '';
-			if (this.condensed && this.fullWidth) {
-				tableClass = `ontario-table--condensed ontario-table--full-container-width`;
-			} else if (this.condensed) {
-				tableClass = `ontario-table--condensed`;
-			} else if (this.fullWidth) {
-				tableClass = `ontario-table--full-container-width`;
-			}
-			const zebraStripesClass = this.getZebraStripeClass();
-			if (tableClass) {
-				tableClass = `${tableClass} ${zebraStripesClass}`;
-			} else {
-				tableClass = zebraStripesClass;
-			}
-			return tableClass;
-		};
-		this.getColumnClasses = (columnData) => {
-			if (columnData.type === 'numeric' && columnData.colSpan) {
-				return `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;
-			} else if (columnData.type === 'numeric') {
-				return `ontario-table-cell--numeric`;
-			} else if (columnData.colSpan) {
-				return `ontario-table-header--column-span-${columnData.colSpan}`;
-			}
-			return;
-		};
-		// A function used to generate the table header and table definitions for the table body and table footer sections.
-		this.generateTableDataHTML = (dataType, rowData, columns, rowClass) => {
-			return h(
-				'tr',
-				{ class: dataType === 'tableData' ? rowClass : '' },
-				this.tableColumnsState.map((column, index) => {
-					const type = column.type;
-					const tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';
-					return index === 0
-						? h(
-								'th',
-								{ scope: 'row', innerHTML: rowData.data[`${columns[0]}`] },
-								dataType === 'tableData' &&
-									rowData.highlight &&
-									h('img', {
-										class: 'ontario-table--highlight-indicator',
-										src: getAssetPath('./assets/highlight-indicator.svg'),
-									}),
-						  )
-						: h('td', { class: tdClass, innerHTML: rowData.data[`${columns[index]}`] });
-				}),
-			);
-		};
-		this.caption = undefined;
-		this.tableColumns = undefined;
-		this.tableData = undefined;
-		this.zebraStripes = 'auto';
-		this.condensed = false;
-		this.fullWidth = false;
-		this.tableColumnsState = undefined;
-		this.tableDataState = undefined;
-		this.tableFooterState = undefined;
-	}
+	element;
+	tableScrollWrapper;
+	tableScrollDiv;
+	table;
+	/**
+	 * Specifies the caption (or title) of the table.
+	 *
+	 * This is optional.
+	 */
+	caption;
+	/**
+	 * Used to define the columns of the table.
+	 *
+	 * @example;
+	 * <ontario-table
+	 *    table-columns='[
+	 *      { "title": "Type of service", "key": "service" },
+	 *      { "title": "Processing and delivery", "key": "processing" },
+	 *      { "title": "Cost", "key": "cost", "type": "numeric" }
+	 *    ]'
+	 * >
+	 * </ontario-table>
+	 */
+	tableColumns;
+	/**
+	 * Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.
+	 *
+	 * @example
+	 * <ontario-table
+	 *  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"
+	 *      }
+	 *    }
+	 *  ]'
+	 * >
+	 * </ontario-table>
+	 */
+	tableData;
+	/**
+	 * Indicates whether or not the table data should have alternate row zebra striping.
+	 *
+	 * This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.
+	 *
+	 * The default will be set to “auto”.
+	 */
+	zebraStripes = 'auto';
+	/**
+	 * Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.
+	 *
+	 * This is optional. By default it will be set to “false”.
+	 */
+	condensed = false;
+	/**
+	 * Used to specify whether or not the table should extend the full width of its container.
+	 *
+	 * This is optional. By default, it will be set to “false”
+	 */
+	fullWidth = false;
+	tableColumnsState;
+	tableDataState;
+	tableFooterState;
 	processTableColumns() {
 		this.tableColumns && this.parseOptions(this.tableColumns);
 		validateTableColumns(this.tableColumnsState);
@@ -117,6 +111,73 @@ export class OntarioTable {
 				.printMessage(ConsoleType.Error);
 		}
 	}
+	transformTableData = (tableData) => {
+		// get column keys
+		const columns = extractValuesByKey(this.tableColumnsState, 'key').filter((column) => column !== undefined);
+		// organize table data data object according to the order of the column keys
+		const organizedTableData = organizeObjectKeys(tableData, columns);
+		// remove the footer table data into it's own state so that it can be rendered in a `tfoot` element
+		const [updatedTableData, tableFooterData] = removeObjectsBySpecificKey(organizedTableData, 'footer', true);
+		this.tableDataState = updatedTableData;
+		this.tableFooterState = tableFooterData;
+	};
+	getZebraStripeClass = () => {
+		return this.zebraStripes === 'disabled'
+			? `ontario-table--no-zebra-stripes`
+			: this.zebraStripes === 'enabled'
+				? `ontario-table--zebra-stripes-enabled`
+				: ``;
+	};
+	getTableClasses = () => {
+		let tableClass = '';
+		if (this.condensed && this.fullWidth) {
+			tableClass = `ontario-table--condensed ontario-table--full-container-width`;
+		} else if (this.condensed) {
+			tableClass = `ontario-table--condensed`;
+		} else if (this.fullWidth) {
+			tableClass = `ontario-table--full-container-width`;
+		}
+		const zebraStripesClass = this.getZebraStripeClass();
+		if (tableClass) {
+			tableClass = `${tableClass} ${zebraStripesClass}`;
+		} else {
+			tableClass = zebraStripesClass;
+		}
+		return tableClass;
+	};
+	getColumnClasses = (columnData) => {
+		if (columnData.type === 'numeric' && columnData.colSpan) {
+			return `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;
+		} else if (columnData.type === 'numeric') {
+			return `ontario-table-cell--numeric`;
+		} else if (columnData.colSpan) {
+			return `ontario-table-header--column-span-${columnData.colSpan}`;
+		}
+		return;
+	};
+	// A function used to generate the table header and table definitions for the table body and table footer sections.
+	generateTableDataHTML = (dataType, rowData, columns, rowClass) => {
+		return h(
+			'tr',
+			{ class: dataType === 'tableData' ? rowClass : '' },
+			this.tableColumnsState.map((column, index) => {
+				const type = column.type;
+				const tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';
+				return index === 0
+					? h(
+							'th',
+							{ scope: 'row', innerHTML: rowData.data[`${columns[0]}`] },
+							dataType === 'tableData' &&
+								rowData.highlight &&
+								h('img', {
+									class: 'ontario-table--highlight-indicator',
+									src: getAssetPath('./assets/highlight-indicator.svg'),
+								}),
+						)
+					: h('td', { class: tdClass, innerHTML: rowData.data[`${columns[index]}`] });
+			}),
+		);
+	};
 	// Helper function to apply the scrollbar styles to the tops of tables
 	applyScrollbar(tableElement, scrollerDiv) {
 		scrollerDiv.style.visibility = 'visible';
@@ -150,34 +211,34 @@ export class OntarioTable {
 		const columns = extractValuesByKey(this.tableColumnsState, 'key');
 		return h(
 			'div',
-			{ key: 'ce676d443d6f54e6eac8c7e035ac8c192b6be473', class: 'ontario-table-container' },
+			{ key: '9d04df8006e6bdfba1110f74fe8e1e2bb16e96af', class: 'ontario-table-container' },
 			h(
 				'div',
 				{
-					key: '0baf35972c5c3c2382103bc765007be2e76cea15',
+					key: '1d2bd821afbef0959cd3dd0ea91818a06173bd38',
 					class: 'ontario-table-scroll--wrapper',
 					ref: (el) => (this.tableScrollWrapper = el),
 				},
 				h('div', {
-					key: '348d83ea103a82da6c29fa94f87ee1ff45b8d485',
+					key: '62d162a39b939464b4438bd67d51093faaac578b',
 					class: 'ontario-table-scroll--div',
 					ref: (el) => (this.tableScrollDiv = el),
 				}),
 			),
 			h(
 				'div',
-				{ key: 'd7c72699f19d0fe8144551e8754878b42d76cb71', class: 'ontario-table-div', ref: (el) => (this.table = el) },
+				{ key: '9f5bdf6c32c6d21ab7ae166e5615f62a57b1c8f0', class: 'ontario-table-div', ref: (el) => (this.table = el) },
 				h(
 					'table',
-					{ key: '3c3f6bb5bbb75e0673509a1a377e224de64176f2', class: this.getTableClasses() },
-					this.caption && h('caption', null, this.caption),
+					{ key: '3a6335255edf36dc9f3e7498f5129e2c00884ed6', class: this.getTableClasses() },
+					this.caption && h('caption', { key: 'e9d58e89c6af824f30e6484926ff174b55f30816' }, this.caption),
 					this.tableColumnsState &&
 						h(
 							'thead',
-							null,
+							{ key: 'c9449c1d7cfd52fcc6aa538f4b6d1eaf6f34907f' },
 							h(
 								'tr',
-								null,
+								{ key: '46715ab0f89bd15b4f5cf47357fe01e5fb42dd3a' },
 								this.tableColumnsState.map((columnData) => {
 									const columnClass = this.getColumnClasses(columnData);
 									return h('th', {
@@ -193,20 +254,20 @@ export class OntarioTable {
 					this.tableDataState &&
 						h(
 							'tbody',
-							null,
+							{ key: '2557841f79c5c86047511e65f0f7eb311b111fee' },
 							this.tableDataState.map((rowData) => {
 								const rowClass = rowData.highlight
 									? `ontario-table-row--highlight`
 									: rowData.subtotal
-									? `ontario-table-row--subtotal`
-									: undefined;
+										? `ontario-table-row--subtotal`
+										: undefined;
 								return this.generateTableDataHTML('tableData', rowData, columns, rowClass);
 							}),
 						),
 					!!this.tableFooterState.length &&
 						h(
 							'tfoot',
-							null,
+							{ key: 'e6f5d0e80a1abd98b5af6bac5527b5b2f63f9911' },
 							this.tableFooterState.map((footerData) => {
 								return this.generateTableDataHTML('tableData', footerData, columns, undefined);
 							}),
@@ -250,6 +311,8 @@ export class OntarioTable {
 					tags: [],
 					text: 'Specifies the caption (or title) of the table.\n\nThis is optional.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'caption',
 				reflect: false,
 			},
@@ -278,6 +341,8 @@ export class OntarioTable {
 					],
 					text: 'Used to define the columns of the table.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'table-columns',
 				reflect: false,
 			},
@@ -306,6 +371,8 @@ export class OntarioTable {
 					],
 					text: 'Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'table-data',
 				reflect: false,
 			},
@@ -323,6 +390,8 @@ export class OntarioTable {
 					tags: [],
 					text: 'Indicates whether or not the table data should have alternate row zebra striping.\n\nThis is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to \u201Cenabled\u201D. If no zebra stripes are needed, it should be set to \u201Cdisabled\u201D.\n\nThe default will be set to \u201Cauto\u201D.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'zebra-stripes',
 				reflect: false,
 				defaultValue: "'auto'",
@@ -341,6 +410,8 @@ export class OntarioTable {
 					tags: [],
 					text: 'Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\nThis is optional. By default it will be set to \u201Cfalse\u201D.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'condensed',
 				reflect: false,
 				defaultValue: 'false',
@@ -359,6 +430,8 @@ export class OntarioTable {
 					tags: [],
 					text: 'Used to specify whether or not the table should extend the full width of its container.\n\nThis is optional. By default, it will be set to \u201Cfalse\u201D',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'full-width',
 				reflect: false,
 				defaultValue: 'false',