@ongov/ontario-design-system-component-library 4.2.0 → 4.3.0-alpha.2

package/dist/types/components/ontario-callout/ontario-callout.d.ts

@@ -8,7 +8,7 @@ export declare class OntarioCallout implements CalloutAside {
 	/**
 	 * The heading level of the callout heading.
 	 */
-	headingType: HeadingLevelOptions;
+	headingType?: HeadingLevelOptions;
 	/**
 	 * The type of the heading content. If no prop is passed, it will default to `string`.
 	 */
@@ -16,7 +16,7 @@ export declare class OntarioCallout implements CalloutAside {
 	/**
 	 * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
 	 */
-	headingContent: string;
+	headingContent?: string;
 	/**
 	 * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.
 	 *
@@ -42,12 +42,6 @@ export declare class OntarioCallout implements CalloutAside {
 	 * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.
 	 */
 	validateHeadingContentType(): string;
-	/**
-	 * Watch for changes in the `headingContent` prop for validation purposes.
-	 *
-	 * If no `headingContent` value is provided, a warning message will be printed.
-	 */
-	validateHeadingContent(): void;
 	/**
 	 * Watch for changes to the `highlightColour` prop.
 	 *

package/dist/types/components/ontario-checkbox/ontario-checkboxes.d.ts

@@ -110,6 +110,10 @@ export declare class OntarioCheckboxes implements Checkboxes {
 	 * If no prop is set, it will default to false (optional).
 	 */
 	required?: boolean;
+	/**
+	 * Set this to display an error message
+	 */
+	errorMessage?: string;
 	/**
 	 * Used to add a custom function to the checkbox onChange event.
 	 */
@@ -154,6 +158,12 @@ export declare class OntarioCheckboxes implements Checkboxes {
 	 * Emitted when a keyboard input event occurs when a checkbox option has gained focus.
 	 */
 	checkboxOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	inputErrorOccurred: EventEmitter<{
+		errorMessage: string;
+	}>;
 	/**
 	 * 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.
 	 */
@@ -196,6 +206,7 @@ export declare class OntarioCheckboxes implements Checkboxes {
 	 * Watch for changes to the `language` prop to render either the English or French translations
 	 */
 	updateLanguage(): void;
+	broadcastInputErrorOccurredEvent(): void;
 	/**
 	 * Function to handle checkbox events and the information pertaining to the checkbox to emit.
 	 */

package/dist/types/components/ontario-dropdown-list/ontario-dropdown-list.d.ts

@@ -132,6 +132,10 @@ export declare class OntarioDropdownList implements Dropdown {
 	 * </ontario-dropdown-list>
 	 */
 	hintExpander?: HintExpander | string;
+	/**
+	 * Set this to display an error message
+	 */
+	errorMessage?: string;
 	/**
 	 * Used to add a custom function to the dropdown onChange event.
 	 */
@@ -177,6 +181,12 @@ export declare class OntarioDropdownList implements Dropdown {
 	 * Emitted when a keyboard input event occurs when a dropdown list has gained focus.
 	 */
 	dropdownOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	inputErrorOccurred: EventEmitter<{
+		errorMessage: string;
+	}>;
 	/**
 	 * 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.
 	 */
@@ -213,6 +223,7 @@ export declare class OntarioDropdownList implements Dropdown {
 	 * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.
 	 */
 	private parseHintExpander;
+	broadcastInputErrorOccurredEvent(): void;
 	/**
 	 * Function to handle dropdown list events and the information pertaining to the dropdown list to emit.
 	 */

package/dist/types/components/ontario-radio-buttons/ontario-radio-buttons.d.ts

@@ -115,6 +115,10 @@ export declare class OntarioRadioButtons implements RadioButtons {
 	 * </ontario-radio-buttons>
 	 */
 	options: string | RadioOption[];
+	/**
+	 * Set this to display an error message
+	 */
+	errorMessage?: string;
 	/**
 	 * Used to add a custom function to the radio input onChange event.
 	 */
@@ -159,6 +163,12 @@ export declare class OntarioRadioButtons implements RadioButtons {
 	 * Emitted when a keyboard input event occurs when a radio option has gained focus.
 	 */
 	radioOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	inputErrorOccurred: EventEmitter<{
+		errorMessage: string;
+	}>;
 	/**
 	 * 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.
 	 */
@@ -195,6 +205,7 @@ export declare class OntarioRadioButtons implements RadioButtons {
 	 * Watch for changes to the `language` prop to render either the English or French translations
 	 */
 	updateLanguage(): void;
+	broadcastInputErrorOccurredEvent(): void;
 	/**
 	 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
 	 */

package/dist/types/components/ontario-textarea/ontario-textarea.d.ts

@@ -77,6 +77,10 @@ export declare class OntarioTextarea implements Input {
 	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
 	 */
 	language?: Language;
+	/**
+	 * Set this to display an error message
+	 */
+	errorMessage?: string;
 	/**
 	 * Used to add a custom function to the textarea onInput event.
 	 */
@@ -125,6 +129,13 @@ export declare class OntarioTextarea implements Input {
 	 * Emitted when a keyboard input event occurs when an input has gained focus.
 	 */
 	inputOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	inputErrorOccurred: EventEmitter<{
+		inputId: string;
+		errorMessage: string;
+	}>;
 	/**
 	 * 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 textarea component loads.
 	 */
@@ -154,6 +165,7 @@ export declare class OntarioTextarea implements Input {
 	 * Watch for changes to the `language` prop to render either the English or French translations
 	 */
 	updateLanguage(): void;
+	broadcastInputErrorOccurredEvent(): void;
 	/**
 	 * Function to handle textarea events and the information pertaining to the textarea to emit.
 	 */

package/dist/types/components.d.ts

@@ -141,7 +141,7 @@ export namespace Components {
 		/**
 		 * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
 		 */
-		headingContent: string;
+		headingContent?: string;
 		/**
 		 * The type of the heading content. If no prop is passed, it will default to string.
 		 */
@@ -149,7 +149,7 @@ export namespace Components {
 		/**
 		 * The heading level of the aside heading.
 		 */
-		headingType: HeadingLevelOptions;
+		headingType?: HeadingLevelOptions;
 		/**
 		 * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.
 		 */
@@ -208,7 +208,7 @@ export namespace Components {
 		/**
 		 * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
 		 */
-		headingContent: string;
+		headingContent?: string;
 		/**
 		 * The type of the heading content. If no prop is passed, it will default to `string`.
 		 */
@@ -216,7 +216,7 @@ export namespace Components {
 		/**
 		 * The heading level of the callout heading.
 		 */
-		headingType: HeadingLevelOptions;
+		headingType?: HeadingLevelOptions;
 		/**
 		 * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.
 		 */
@@ -287,6 +287,10 @@ export namespace Components {
 		 * Used to add a custom function to the checkbox onFocus event.
 		 */
 		customOnFocus?: (event: globalThis.Event) => void;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the checkbox group. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-checkboxes   caption='{     "captionText": "Checkbox legend",     "captionType": "heading",   }   name='ontario-checkboxes'   options='[ 	{ 		"value": "checkbox-option-1", 		"label": "Checkbox option 1 label", 		"elementId": "checkbox-1" 	}   }]'   hint-expander='{    "hint": "Hint expander for the checkbox group",    "content": "Example hint expander content for the checkbox group"   }'   required="true" > </ontario-checkboxes>
@@ -386,6 +390,10 @@ export namespace Components {
 		 * The ID for the dropdown list. If no ID is provided, one will be generated.
 		 */
 		elementId?: string;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the dropdown list component. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-dropdown-list   caption='{     "caption": "What province do you live in?",     "captionType": "heading",   }   name="ontario-dropdown-list"   options='[     {       "value": "dropdown-option-1",       "label": "Option 1",       "selected": "true"     },     {       "value": "dropdown-option-2",       "label": "Option 2"     },     {       "value": "dropdown-option-3",       "label": "Option 3"     }   ]'   hint-expander='{    "hint": "Hint expander for the dropdown list",    "content": "Example hint expander content for the dropdown list."   }' > </ontario-dropdown-list>
@@ -1767,6 +1775,10 @@ export namespace Components {
 		 * Used to add a custom function to the radio input onFocus event.
 		 */
 		customOnFocus?: (event: globalThis.Event) => void;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the radio button group. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-radio-buttons   caption='{     "captionText": "Radio legend",     "captionType": "heading",   }' 	 name="radios"   options='[ 	   {        "value": "radio-option-1", 		  "elementId": "radio-1",        "label": "Radio option 1 label",        "hintExpander": { 		  "hint": "Hint expander for radio option 1", 		      "content": "Example hint expander content for radio option 1." 	  }     }   ]'   hint-expander='{     "hint": "Hint expander for the radio button group",     "content": "Example hint expander content for the radio button group."   }'   required="true" > </ontario-radio-buttons>
@@ -1878,6 +1890,10 @@ export namespace Components {
 		 * The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.
 		 */
 		elementId?: string;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the textarea component. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-textarea   caption='{     "captionText": "What are your thoughts",     "captionType": "heading",   }' 	 name: "textarea"   hint-expander='{     "hint": "This is the hint expander",     "content": "This is the content for the hint expander"   }'   required="true" > </ontario-textarea>
@@ -1982,6 +1998,7 @@ declare global {
 		checkboxOnChange: RadioAndCheckboxChangeEvent;
 		checkboxOnBlur: InputFocusBlurEvent;
 		checkboxOnFocus: InputFocusBlurEvent;
+		inputErrorOccurred: { errorMessage: string };
 	}
 	interface HTMLOntarioCheckboxesElement extends Components.OntarioCheckboxes, HTMLStencilElement {
 		addEventListener<K extends keyof HTMLOntarioCheckboxesElementEventMap>(
@@ -2109,6 +2126,7 @@ declare global {
 		dropdownOnChange: InputInteractionEvent;
 		dropdownOnBlur: InputFocusBlurEvent;
 		dropdownOnFocus: InputFocusBlurEvent;
+		inputErrorOccurred: { errorMessage: string };
 	}
 	interface HTMLOntarioDropdownListElement extends Components.OntarioDropdownList, HTMLStencilElement {
 		addEventListener<K extends keyof HTMLOntarioDropdownListElementEventMap>(
@@ -2922,6 +2940,7 @@ declare global {
 		radioOnChange: RadioAndCheckboxChangeEvent;
 		radioOnBlur: InputFocusBlurEvent;
 		radioOnFocus: InputFocusBlurEvent;
+		inputErrorOccurred: { errorMessage: string };
 	}
 	interface HTMLOntarioRadioButtonsElement extends Components.OntarioRadioButtons, HTMLStencilElement {
 		addEventListener<K extends keyof HTMLOntarioRadioButtonsElementEventMap>(
@@ -2990,6 +3009,7 @@ declare global {
 		inputOnChange: InputInteractionEvent;
 		inputOnBlur: InputFocusBlurEvent;
 		inputOnFocus: InputFocusBlurEvent;
+		inputErrorOccurred: { inputId: string; errorMessage: string };
 	}
 	interface HTMLOntarioTextareaElement extends Components.OntarioTextarea, HTMLStencilElement {
 		addEventListener<K extends keyof HTMLOntarioTextareaElementEventMap>(
@@ -3363,6 +3383,10 @@ declare namespace LocalJSX {
 		 * Used to add a custom function to the checkbox onFocus event.
 		 */
 		customOnFocus?: (event: globalThis.Event) => void;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the checkbox group. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-checkboxes   caption='{     "captionText": "Checkbox legend",     "captionType": "heading",   }   name='ontario-checkboxes'   options='[ 	{ 		"value": "checkbox-option-1", 		"label": "Checkbox option 1 label", 		"elementId": "checkbox-1" 	}   }]'   hint-expander='{    "hint": "Hint expander for the checkbox group",    "content": "Example hint expander content for the checkbox group"   }'   required="true" > </ontario-checkboxes>
@@ -3392,6 +3416,10 @@ declare namespace LocalJSX {
 		 * Emitted when a keyboard input event occurs when a checkbox option has gained focus.
 		 */
 		onCheckboxOnFocus?: (event: OntarioCheckboxesCustomEvent<InputFocusBlurEvent>) => void;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		onInputErrorOccurred?: (event: OntarioCheckboxesCustomEvent<{ errorMessage: string }>) => void;
 		/**
 		 * The options for the checkbox group.  Each property will be passed in through an object in the options array. This can either be passed in as an object directly (if using react), or as a string in HTML. If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.  In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.
 		 * @example <ontario-checkboxes   caption='{ 	"captionText": "Checkbox legend", 	"captionType": "heading",   }   name="ontario-checkboxes",   hint-text="Hint text for the checkbox group."   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"        }      }   ]'   required="true" > </ontario-checkboxes>
@@ -3504,6 +3532,10 @@ declare namespace LocalJSX {
 		 * The ID for the dropdown list. If no ID is provided, one will be generated.
 		 */
 		elementId?: string;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the dropdown list component. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-dropdown-list   caption='{     "caption": "What province do you live in?",     "captionType": "heading",   }   name="ontario-dropdown-list"   options='[     {       "value": "dropdown-option-1",       "label": "Option 1",       "selected": "true"     },     {       "value": "dropdown-option-2",       "label": "Option 2"     },     {       "value": "dropdown-option-3",       "label": "Option 3"     }   ]'   hint-expander='{    "hint": "Hint expander for the dropdown list",    "content": "Example hint expander content for the dropdown list."   }' > </ontario-dropdown-list>
@@ -3538,6 +3570,10 @@ declare namespace LocalJSX {
 		 * Emitted when a keyboard input event occurs when a dropdown list has gained focus.
 		 */
 		onDropdownOnFocus?: (event: OntarioDropdownListCustomEvent<InputFocusBlurEvent>) => void;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		onInputErrorOccurred?: (event: OntarioDropdownListCustomEvent<{ errorMessage: string }>) => void;
 		/**
 		 * The options for dropdown list.  Each option will be passed in through an object in the options array. This can either be passed in as an object directly (if using react), or as a string in HTML.  In the example below, the options are being passed in as a string and there are three dropdown options displayed.
 		 * @example <ontario-dropdown-list   caption='{     "captionText": "Label",     "captionType": "heading",   }'   name="ontario-dropdown-list"   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>
@@ -4924,6 +4960,10 @@ declare namespace LocalJSX {
 		 * Used to add a custom function to the radio input onFocus event.
 		 */
 		customOnFocus?: (event: globalThis.Event) => void;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the radio button group. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-radio-buttons   caption='{     "captionText": "Radio legend",     "captionType": "heading",   }' 	 name="radios"   options='[ 	   {        "value": "radio-option-1", 		  "elementId": "radio-1",        "label": "Radio option 1 label",        "hintExpander": { 		  "hint": "Hint expander for radio option 1", 		      "content": "Example hint expander content for radio option 1." 	  }     }   ]'   hint-expander='{     "hint": "Hint expander for the radio button group",     "content": "Example hint expander content for the radio button group."   }'   required="true" > </ontario-radio-buttons>
@@ -4941,6 +4981,10 @@ declare namespace LocalJSX {
 		 * The name assigned to the radio button. The name value is used to reference form data after a form is submitted.
 		 */
 		name?: string;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		onInputErrorOccurred?: (event: OntarioRadioButtonsCustomEvent<{ errorMessage: string }>) => void;
 		/**
 		 * Emitted when a keyboard input event occurs when a radio option has lost focus.
 		 */
@@ -5047,6 +5091,10 @@ declare namespace LocalJSX {
 		 * The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.
 		 */
 		elementId?: string;
+		/**
+		 * Set this to display an error message
+		 */
+		errorMessage?: string;
 		/**
 		 * Used to include the ontario-hint-expander component for the textarea component. This is passed in as an object with key-value pairs.  This is optional.
 		 * @example <ontario-textarea   caption='{     "captionText": "What are your thoughts",     "captionType": "heading",   }' 	 name: "textarea"   hint-expander='{     "hint": "This is the hint expander",     "content": "This is the content for the hint expander"   }'   required="true" > </ontario-textarea>
@@ -5064,6 +5112,10 @@ declare namespace LocalJSX {
 		 * The name assigned to the textarea. The name value is used to reference form data after a form is submitted.
 		 */
 		name?: string;
+		/**
+		 * Emitted when an error message is reported to the component.
+		 */
+		onInputErrorOccurred?: (event: OntarioTextareaCustomEvent<{ inputId: string; errorMessage: string }>) => void;
 		/**
 		 * Emitted when a keyboard input event occurs when an input has lost focus.
 		 */

package/dist/types/utils/components/callout-aside/callout-aside-helpers.d.ts

@@ -10,9 +10,9 @@ export declare const isValidHighlightColour: (
 export declare const isValidHeadingLevel: (level: HeadingLevelOptions) => level is 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export declare const generateCalloutAside: (
 	type: CalloutAsideType,
-	headingType: HeadingLevelOptions,
 	headingContentType: HeadingContentType,
-	headingContent: string,
+	headingType?: HeadingLevelOptions,
+	headingContent?: string,
 	content?: string | HTMLElement,
 	highlightColour?: HighlightColourOptions,
 ) => any;

package/dist/types/utils/components/callout-aside/callout-aside.interface.d.ts

@@ -20,7 +20,7 @@ export interface CalloutAside extends Base {
 	/**
 	 * The heading level of the callout/aside heading.
 	 */
-	headingType: HeadingLevelOptions;
+	headingType?: HeadingLevelOptions;
 	/**
 	 * The type of the heading content. If no prop is passed, it will default to string.
 	 */
@@ -28,7 +28,7 @@ export interface CalloutAside extends Base {
 	/**
 	 * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
 	 */
-	headingContent: string;
+	headingContent?: string;
 	/**
 	 * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.
 	 *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "4.2.0",
+	"version": "4.3.0-alpha.2",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "4.2.0",
+		"@ongov/ontario-design-system-global-styles": "4.3.0-alpha.1",
 		"@stencil/core": "^4.12.2",
 		"dotenv": "^16.3.1"
 	},
@@ -102,5 +102,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "f4b1151ce275ec0d782d5bbeab87f68418b08d04"
+	"gitHead": "5b915851b8223b9bfa05b70e4be5035cafb1b911"
 }

package/src/components/ontario-aside/ontario-aside.tsx

@@ -24,17 +24,17 @@ export class OntarioAside implements CalloutAside {
 	/**
 	 * The heading level of the aside heading.
 	 */
-	@Prop({ mutable: true }) headingType: HeadingLevelOptions;
+	@Prop({ mutable: true }) headingType?: HeadingLevelOptions;
 
 	/**
 	 * The type of the heading content. If no prop is passed, it will default to string.
 	 */
-	@Prop({ mutable: true }) headingContentType: HeadingContentType;
+	@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';
 
 	/**
 	 * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.
 	 */
-	@Prop() headingContent: string;
+	@Prop() headingContent?: string;
 
 	/**
 	 * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.
@@ -58,16 +58,18 @@ export class OntarioAside implements CalloutAside {
 	 */
 	@Watch('headingType')
 	validateHeadingType() {
-		if (isValidHeadingLevel(this.headingType)) return this.headingType;
+		if (!!this.headingType) {
+			if (isValidHeadingLevel(this.headingType)) return this.headingType;
 
-		const message = new ConsoleMessageClass();
-		return message
-			.addDesignSystemTag()
-			.addMonospaceText(` headingType ${this.headingType} `)
-			.addRegularText('for')
-			.addMonospaceText(' <ontario-aside> ')
-			.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
-			.printMessage();
+			const message = new ConsoleMessageClass();
+			return message
+				.addDesignSystemTag()
+				.addMonospaceText(` headingType ${this.headingType} `)
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-aside> ')
+				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+				.printMessage();
+		}
 	}
 
 	/**
@@ -86,25 +88,6 @@ export class OntarioAside implements CalloutAside {
 		}
 	}
 
-	/**
-	 * Watch for changes in the `headingContent` prop for validation purposes.
-	 *
-	 * If no `headingContent` value is provided, a warning message will be printed.
-	 */
-	@Watch('headingContent')
-	validateHeadingContent() {
-		if (!this.headingContent) {
-			const message = new ConsoleMessageClass();
-			message
-				.addDesignSystemTag()
-				.addMonospaceText(' headingContent ')
-				.addRegularText('for')
-				.addMonospaceText(' <ontario-aside> ')
-				.addRegularText('was not provided.')
-				.printMessage();
-		}
-	}
-
 	/**
 	 * Watch for changes to the `highlightColour` prop.
 	 *
@@ -154,7 +137,6 @@ export class OntarioAside implements CalloutAside {
 
 	componentWillLoad() {
 		this.validateHighlightColour();
-		this.validateHeadingContent();
 		this.validateHeadingType();
 		this.validateHeadingContentType();
 	}
@@ -162,8 +144,8 @@ export class OntarioAside implements CalloutAside {
 	render() {
 		return generateCalloutAside(
 			'aside',
-			this.headingType,
 			this.headingContentType,
+			this.headingType,
 			this.headingContent,
 			this.content,
 			this.highlightColour,

package/src/components/ontario-aside/readme.md

@@ -73,9 +73,9 @@ This is another example of an aside. This time, the content is passed as a child
 | Property             | Attribute              | Description                                                                                                                                                                                                                                                                                | Type                                                                                                       | Default     |
 | -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | ----------- |
 | `content`            | `content`              | Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag. HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed. | `string \| undefined`                                                                                      | `undefined` |
-| `headingContent`     | `heading-content`      | Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.                                                                                                                          | `string`                                                                                                   | `undefined` |
-| `headingContentType` | `heading-content-type` | The type of the heading content. If no prop is passed, it will default to string.                                                                                                                                                                                                          | `"html" \| "string"`                                                                                       | `undefined` |
-| `headingType`        | `heading-type`         | The heading level of the aside heading.                                                                                                                                                                                                                                                    | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"`                                                                     | `undefined` |
+| `headingContent`     | `heading-content`      | Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.                                                                                                                          | `string \| undefined`                                                                                      | `undefined` |
+| `headingContentType` | `heading-content-type` | The type of the heading content. If no prop is passed, it will default to string.                                                                                                                                                                                                          | `"html" \| "string"`                                                                                       | `'string'`  |
+| `headingType`        | `heading-type`         | The heading level of the aside heading.                                                                                                                                                                                                                                                    | `"h2" \| "h3" \| "h4" \| "h5" \| "h6" \| undefined`                                                        | `undefined` |
 | `highlightColour`    | `highlight-colour`     | Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.                                                                                                                                                                                | `"blue" \| "gold" \| "green" \| "lime" \| "purple" \| "sky" \| "taupe" \| "teal" \| "yellow" \| undefined` | `'teal'`    |
 
 ---

package/src/components/ontario-aside/test/ontario-aside.spec.tsx

@@ -97,6 +97,45 @@ describe('ontario-aside', () => {
 		`);
 	});
 
+	it('should render html in the heading content if the headingContentType prop is set to `html`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+
+		expect(page.root).toEqualHtml(`
+			<ontario-aside heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>" heading-content="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h2 class="ontario-aside__title ontario-h5">
+							<a href="#">Quick fact:</a>
+						</h2>
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+
+	it('should not render the heading if headingContent prop is set to `undefined`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+
+		expect(page.root).toEqualHtml(`
+			<ontario-aside>
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+
 	it('should reflect attributes/props being set', async () => {
 		const page = await newSpecPage({
 			components: [OntarioAside],