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

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

@@ -24,7 +24,7 @@ export class OntarioCallout implements CalloutAside {
 	/**
 	 * The heading level of the callout 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`.
@@ -34,7 +34,7 @@ export 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`.
 	 */
-	@Prop() headingContent: string;
+	@Prop() 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.
@@ -57,16 +57,18 @@ export class OntarioCallout 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-callout> ')
-			.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-callout> ')
+				.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')
+				.printMessage();
+		}
 	}
 
 	/**
@@ -85,25 +87,6 @@ export class OntarioCallout 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-callout> ')
-				.addRegularText('was not provided.')
-				.printMessage();
-		}
-	}
-
 	/**
 	 * Watch for changes to the `highlightColour` prop.
 	 *
@@ -153,7 +136,6 @@ export class OntarioCallout implements CalloutAside {
 
 	componentWillLoad() {
 		this.validateHighlightColour();
-		this.validateHeadingContent();
 		this.validateHeadingType();
 		this.validateHeadingContentType();
 	}
@@ -161,8 +143,8 @@ export class OntarioCallout implements CalloutAside {
 	render() {
 		return generateCalloutAside(
 			'callout',
-			this.headingType,
 			this.headingContentType,
+			this.headingType,
 			this.headingContent,
 			this.content,
 			this.highlightColour,

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

@@ -65,9 +65,9 @@ This is another example of an callout. This time, the content is passed as a chi
 | Property             | Attribute              | Description                                                                                                                                                                                                                                                                                    | Type                                                                                                       | Default     |
 | -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ----------- |
 | `content`            | `content`              | 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. HTML content can also be passed as the child/children of the callout 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 callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.                                                                                                                            | `string`                                                                                                   | `undefined` |
+| `headingContent`     | `heading-content`      | 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`.                                                                                                                            | `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 callout heading.                                                                                                                                                                                                                                                      | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"`                                                                     | `undefined` |
+| `headingType`        | `heading-type`         | The heading level of the callout heading.                                                                                                                                                                                                                                                      | `"h2" \| "h3" \| "h4" \| "h5" \| "h6" \| undefined`                                                        | `undefined` |
 | `highlightColour`    | `highlight-colour`     | Optional prop to choose the border colour of the callout. 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-callout/test/ontario-callout.spec.tsx

@@ -105,6 +105,26 @@ describe('ontario-callout', () => {
 		`);
 	});
 
+	it('should not render the heading if headingContent prop is set to `undefined`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCallout],
+			html: `<ontario-callout ><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>`,
+		});
+
+		expect(page.root).toEqualHtml(`
+			<ontario-callout >
+				<mock:shadow-root>
+					<div class="ontario-callout ontario-border-highlight--teal">
+						<slot></slot>
+					</div>
+				</mock:shadow-root>
+				<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>
+		`);
+	});
+
 	it('should reflect attributes/props being set', async () => {
 		const page = await newSpecPage({
 			components: [OntarioCallout],

package/src/components/ontario-card/ontario-card.scss

@@ -15,6 +15,11 @@
 	border-radius: globalVariables.$global-radius;
 	margin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;
 	padding: spacing.$spacing-0;
+	/* 
+	 * Required for cards to stay the same height regardless of content size.
+	 * Without subtracting the margin-bottom amount the cards will be too large.
+	 */
+	height: calc(100% - spacing.$spacing-7);
 	list-style-type: none;
 	transition: all 0.3s ease-in-out;
 	position: relative;

package/src/components/ontario-card-collection/ontario-card-collection.scss

@@ -5,6 +5,9 @@
 .ontario-card-collection__container {
 	display: flex;
 	flex-wrap: wrap;
+	justify-content: flex-start;
+	margin: spacing.$spacing-0;
+	padding: spacing.$spacing-0;
 }
 
 .ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
@@ -21,6 +24,10 @@
 			margin-right: spacing.$spacing-0;
 		}
 	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		width: calc(100% - 0.5rem);
+	}
 }
 
 .ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
@@ -29,6 +36,10 @@
 	&:nth-child(3n) {
 		margin-right: spacing.$spacing-0;
 	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		width: calc(100% - 0.5rem);
+	}
 }
 
 .ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
@@ -37,4 +48,8 @@
 	&:nth-child(2n) {
 		margin-right: spacing.$spacing-0;
 	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		width: calc(100% - 0.5rem);
+	}
 }

package/src/components/ontario-checkbox/ontario-checkboxes.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@@ -8,11 +9,18 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
+@forward '../../utils/components/error-message/error-message';
 
-$ontario-checkboxes-size: 28px;
-$ontario-checkboxes-size-mobile: 32px;
-$ontario-checkbox-border-size: 2px;
-$ontario-checkbox-box-shadow-outline: 4px;
+$ontario-checkboxes-size: globalFunctions.px-to-rem(28);
+$ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);
+$ontario-checkbox-border-size: globalFunctions.px-to-rem(2);
+$ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
+$ontario-input-border-width: 0.125rem;
+
+:host {
+	--checkbox-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E");
+}
 
 .ontario-checkboxes {
 	margin-bottom: spacing.$spacing-7;
@@ -93,7 +101,7 @@ $ontario-checkbox-box-shadow-outline: 4px;
 	// ✔✔✔ Check mark styles ✔✔✔
 	&:after {
 		content: '';
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E%0A");
+		background-image: var(--checkbox-bg);
 		background-repeat: no-repeat;
 		height: $ontario-checkboxes-size + $ontario-checkbox-border-size;
 		width: $ontario-checkboxes-size + $ontario-checkbox-border-size;

package/src/components/ontario-checkbox/ontario-checkboxes.tsx

@@ -24,6 +24,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-checkboxes',
@@ -144,6 +145,11 @@ export class OntarioCheckboxes implements Checkboxes {
 	 */
 	@Prop() required?: boolean = false;
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the checkbox onChange event.
 	 */
@@ -199,6 +205,11 @@ export class OntarioCheckboxes implements Checkboxes {
 	 */
 	@Event() checkboxOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() 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.
 	 */
@@ -323,6 +334,12 @@ export class OntarioCheckboxes implements Checkboxes {
 		this.updateCaptionState(this.caption);
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle checkbox events and the information pertaining to the checkbox to emit.
 	 */
@@ -363,7 +380,6 @@ export class OntarioCheckboxes implements Checkboxes {
 			this.element,
 		);
 	}
-
 	/**
 	 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the fieldset `aria-describedBy` attribute.
 	 */
@@ -381,8 +397,9 @@ export class OntarioCheckboxes implements Checkboxes {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
 				<fieldset class="ontario-fieldset" aria-describedby={this.hintTextId}>
 					{this.captionState.getCaption(undefined, !!this.internalHintExpander)}
 					{this.internalHintText && (
@@ -392,6 +409,7 @@ export class OntarioCheckboxes implements Checkboxes {
 							ref={(el) => (this.hintTextRef = el)}
 						></ontario-hint-text>
 					)}
+					<ErrorMessage message={this.errorMessage} error={error} />
 					<div class="ontario-checkboxes">
 						{this.internalOptions?.map((checkbox) => (
 							<div class="ontario-checkboxes__item">

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

@@ -208,6 +208,7 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 | `customOnBlur`   | --              | Used to add a custom function to the checkbox onBlur event.                                                                                                                                                                                                                                                                                                                                                                            | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnChange` | --              | Used to add a custom function to the checkbox onChange event.                                                                                                                                                                                                                                                                                                                                                                          | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnFocus`  | --              | Used to add a custom function to the checkbox onFocus event.                                                                                                                                                                                                                                                                                                                                                                           | `((event: Event) => void) \| undefined` | `undefined` |
+| `errorMessage`   | `error-message` | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                   | `string \| undefined`                   | `undefined` |
 | `hintExpander`   | `hint-expander` | 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.                                                                                                                                                                                                                                                                                     | `HintExpander \| string \| undefined`   | `undefined` |
 | `hintText`       | `hint-text`     | Used to include the ontario-hint-text component for the checkbox group. This is optional.                                                                                                                                                                                                                                                                                                                                              | `Hint \| string \| undefined`           | `undefined` |
 | `language`       | `language`      | 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 no language is passed, it will default to English.                                                                                                                                                                                                                    | `"en" \| "fr" \| undefined`             | `undefined` |
@@ -217,11 +218,12 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 
 ## Events
 
-| Event              | Description                                                                                  | Type                                                         |
-| ------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| `checkboxOnBlur`   | Emitted when a keyboard input event occurs when a checkbox option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
-| `checkboxOnChange` | Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
-| `checkboxOnFocus`  | Emitted when a keyboard input event occurs when a checkbox option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| Event                | Description                                                                                  | Type                                                         |
+| -------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| `checkboxOnBlur`     | Emitted when a keyboard input event occurs when a checkbox option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| `checkboxOnChange`   | Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
+| `checkboxOnFocus`    | Emitted when a keyboard input event occurs when a checkbox option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                                  | `CustomEvent<{ errorMessage: string; }>`                     |
 
 ## Dependencies
 
@@ -229,6 +231,7 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -236,6 +239,7 @@ expander for checkbox option 2", "content": "Example hint expander content for c
 graph TD;
   ontario-checkboxes --> ontario-hint-text
   ontario-checkboxes --> ontario-hint-expander
+  ontario-checkboxes --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-checkboxes fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-checkbox/test/ontario-checkboxes.spec.tsx

@@ -17,6 +17,10 @@ describe('ontario-checkbox', () => {
                   (optional)
                 </span>
               </legend>
+              <div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
               <div class="ontario-checkboxes"></div>
             </fieldset>
           </div>

package/src/components/ontario-dropdown-list/ontario-dropdown-list.scss

@@ -2,6 +2,9 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '../../styles/form.scss';
+@forward '../../utils/components/error-message/error-message';
+
+$ontario-dropdown-border-width: 0.125rem;
 
 .ontario-dropdown {
 	background-color: colours.$ontario-colour-white;
@@ -24,3 +27,9 @@
 .ontario-dropdown option {
 	font-weight: normal;
 }
+
+.ontario-dropdown--error {
+	select {
+		border: $ontario-dropdown-border-width solid colours.$ontario-colour-alert;
+	}
+}

package/src/components/ontario-dropdown-list/ontario-dropdown-list.tsx

@@ -33,6 +33,7 @@ import { InputFocusBlurEvent, EventType, InputInteractionEvent } from '../../uti
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-dropdown-list',
@@ -178,6 +179,11 @@ export class OntarioDropdownList implements Dropdown {
 	 */
 	@Prop() hintExpander?: HintExpander | string;
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the dropdown onChange event.
 	 */
@@ -235,6 +241,11 @@ export class OntarioDropdownList implements Dropdown {
 	 */
 	@Event() dropdownOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() 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.
 	 */
@@ -362,6 +373,12 @@ export class OntarioDropdownList implements Dropdown {
 		}
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle dropdown list events and the information pertaining to the dropdown list to emit.
 	 */
@@ -454,8 +471,9 @@ export class OntarioDropdownList implements Dropdown {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-dropdown--error' : ''}`}>
 				{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}
 				{this.internalHintText && (
 					<ontario-hint-text
@@ -464,6 +482,7 @@ export class OntarioDropdownList implements Dropdown {
 						ref={(el) => (this.hintTextRef = el)}
 					></ontario-hint-text>
 				)}
+				<ErrorMessage message={this.errorMessage} error={error} />
 				<select
 					class={this.getClass()}
 					aria-describedby={this.hintTextId}

package/src/components/ontario-dropdown-list/readme.md

@@ -293,6 +293,7 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 | `customOnChange`     | --                      | Used to add a custom function to the dropdown onChange event.                                                                                                                                                                                                                                                       | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnFocus`      | --                      | Used to add a custom function to the dropdown onFocus event.                                                                                                                                                                                                                                                        | `((event: Event) => void) \| undefined` | `undefined` |
 | `elementId`          | `element-id`            | The ID for the dropdown list. If no ID is provided, one will be generated.                                                                                                                                                                                                                                          | `string \| undefined`                   | `undefined` |
+| `errorMessage`       | `error-message`         | Set this to display an error message                                                                                                                                                                                                                                                                                | `string \| undefined`                   | `undefined` |
 | `hintExpander`       | `hint-expander`         | 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.                                                                                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |
 | `hintText`           | `hint-text`             | Used to include the ontario-hint-text component for the dropdown list. This is optional.                                                                                                                                                                                                                            | `Hint \| string \| undefined`           | `undefined` |
 | `isEmptyStartOption` | `is-empty-start-option` | This prop is used to determine whether or not the initial option displayed is empty. If set to `true`, it will render the default “select” text. If set to a string, it will render the string value.                                                                                                               | `boolean \| string \| undefined`        | `false`     |
@@ -303,11 +304,12 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 
 ## Events
 
-| Event              | Description                                                                                | Type                                                                      |
-| ------------------ | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
-| `dropdownOnBlur`   | Emitted when a keyboard input event occurs when a dropdown list has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
-| `dropdownOnChange` | Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>` |
-| `dropdownOnFocus`  | Emitted when a keyboard input event occurs when a dropdown list has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
+| Event                | Description                                                                                | Type                                                                      |
+| -------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
+| `dropdownOnBlur`     | Emitted when a keyboard input event occurs when a dropdown list has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
+| `dropdownOnChange`   | Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>` |
+| `dropdownOnFocus`    | Emitted when a keyboard input event occurs when a dropdown list has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`              |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                                | `CustomEvent<{ errorMessage: string; }>`                                  |
 
 ## Dependencies
 
@@ -315,6 +317,7 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -322,6 +325,7 @@ options='[ { "value": "netflix", "label": "Netflix" }, { "value": "disney-plus",
 graph TD;
   ontario-dropdown-list --> ontario-hint-text
   ontario-dropdown-list --> ontario-hint-expander
+  ontario-dropdown-list --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-dropdown-list fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-dropdown-list/test/ontario-dropdown-list.spec.tsx

@@ -17,6 +17,10 @@ describe('ontario-dropdown-list', () => {
 							(optional)
 							</span>
 						</label>
+						<div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
 						<select class="ontario-dropdown ontario-input" id="dropdown-list" style="background-image: url(/assets/ontario-material-dropdown-arrow-48px.svg);">
 							<option value="dropdown-option-1">Option 1</option>
 						</select>

package/src/components/ontario-footer/components/expanded-footer-wrapper.tsx

@@ -1,4 +1,4 @@
-import { FunctionalComponent, h, getAssetPath } from '@stencil/core';
+import { FunctionalComponent, h } from '@stencil/core';
 import { SimpleFooter } from './simple-footer';
 import { SimpleFooterLinks } from '../ontario-footer-interface';
 

package/src/components/ontario-header/ontario-header.scss

@@ -26,6 +26,10 @@ $ontario-header-menu-button-icon--margin-right: 6px;
 
 $ontario-navigation-container-min-width: 290px;
 
+:host {
+	--header-search-reset: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+}
+
 .ontario-header__container {
 	position: relative;
 	z-index: calc(zIndex.$ontario-z-index-above-high + 1);
@@ -419,7 +423,7 @@ input[type='reset'].ontario-header__search-reset {
 	color: colours.$ontario-colour-black;
 	margin: spacing.$spacing-0;
 	padding: spacing.$spacing-2;
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+	background-image: var(--header-search-reset);
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-color: transparent;

package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss

@@ -13,10 +13,13 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
+@forward '../../utils/components/error-message/error-message';
 
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
+$ontario-input-border-width: 0.125rem;
 
 .ontario-radios__item {
 	position: relative;

package/src/components/ontario-radio-buttons/ontario-radio-buttons.tsx

@@ -23,6 +23,7 @@ import {
 import { handleInputEvent } from '../../utils/events/event-handler';
 
 import { default as translations } from '../../translations/global.i18n.json';
+import { ErrorMessage } from '../../utils/components/error-message/error-message';
 
 @Component({
 	tag: 'ontario-radio-buttons',
@@ -50,7 +51,6 @@ export class OntarioRadioButtons implements RadioButtons {
 	 * </ontario-radio-buttons>
 	 */
 	@Prop() caption: Caption | string;
-
 	/**
 	 * 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 no language is passed, it will default to English.
@@ -148,6 +148,11 @@ export class OntarioRadioButtons implements RadioButtons {
 	 */
 	@Prop() options: string | RadioOption[];
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the radio input onChange event.
 	 */
@@ -203,6 +208,11 @@ export class OntarioRadioButtons implements RadioButtons {
 	 */
 	@Event({ eventName: 'radioOnFocus' }) radioOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() 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.
 	 */
@@ -327,6 +337,12 @@ export class OntarioRadioButtons implements RadioButtons {
 		this.updateCaptionState(this.caption);
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.
 	 */
@@ -388,8 +404,9 @@ export class OntarioRadioButtons implements RadioButtons {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>
 				<fieldset class="ontario-fieldset" aria-describedby={this.hintTextId}>
 					{this.captionState.getCaption(undefined, !!this.internalHintExpander)}
 					{this.internalHintText && (
@@ -399,7 +416,9 @@ export class OntarioRadioButtons implements RadioButtons {
 							ref={(el) => (this.hintTextRef = el)}
 						></ontario-hint-text>
 					)}
+
 					<div class="ontario-radios">
+						<ErrorMessage message={this.errorMessage} error={error} />
 						{this.internalOptions?.map((radioOption) => (
 							<div class="ontario-radios__item">
 								<Input