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

package/src/components/ontario-radio-buttons/readme.md

@@ -240,6 +240,7 @@ visible when the hint expander title (hint) is toggled" }'
 | `customOnBlur`   | --              | Used to add a custom function to the radio input onBlur event.                                                                                                                                                                                                                                                                                                                                                                                 | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnChange` | --              | Used to add a custom function to the radio input onChange event.                                                                                                                                                                                                                                                                                                                                                                               | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnFocus`  | --              | Used to add a custom function to the radio input 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 radio button 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 radio button 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` |
@@ -249,11 +250,12 @@ visible when the hint expander title (hint) is toggled" }'
 
 ## Events
 
-| Event           | Description                                                                               | Type                                                         |
-| --------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| `radioOnBlur`   | Emitted when a keyboard input event occurs when a radio option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
-| `radioOnChange` | Emitted when a keyboard input or mouse event occurs when a radio option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
-| `radioOnFocus`  | Emitted when a keyboard input event occurs when a radio option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| Event                | Description                                                                               | Type                                                         |
+| -------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                               | `CustomEvent<{ errorMessage: string; }>`                     |
+| `radioOnBlur`        | Emitted when a keyboard input event occurs when a radio option has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
+| `radioOnChange`      | Emitted when a keyboard input or mouse event occurs when a radio option has been changed. | `CustomEvent<InputInteractionEvent & { checked: boolean; }>` |
+| `radioOnFocus`       | Emitted when a keyboard input event occurs when a radio option has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>` |
 
 ## Dependencies
 
@@ -261,6 +263,7 @@ visible when the hint expander title (hint) is toggled" }'
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -268,6 +271,7 @@ visible when the hint expander title (hint) is toggled" }'
 graph TD;
   ontario-radio-buttons --> ontario-hint-text
   ontario-radio-buttons --> ontario-hint-expander
+  ontario-radio-buttons --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-radio-buttons fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-radio-buttons/test/ontario-radio-button.spec.tsx

@@ -17,7 +17,12 @@ describe('ontario-radio-buttons', () => {
                     (optional)
                   </span>
                 </legend>
-              <div class="ontario-radios"></div>
+              <div class="ontario-radios">
+                <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>
             </fieldset>
           </div>
         </mock:shadow-root>

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

@@ -7,6 +7,9 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
 @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-textarea-border-width: 0.125rem;
 
 .ontario-textarea {
 	border: globalVariables.$border-size-standard solid colours.$ontario-colour-black;
@@ -34,3 +37,9 @@
 .ontario-textarea.ontario-textarea-hint-expander--true {
 	margin-bottom: spacing.$spacing-4;
 }
+
+.ontario-textarea--error {
+	textarea {
+		border: $ontario-textarea-border-width solid colours.$ontario-colour-alert;
+	}
+}

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

@@ -19,6 +19,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-textarea',
@@ -105,6 +106,11 @@ export class OntarioTextarea implements Input {
 	 */
 	@Prop({ mutable: true }) language?: Language;
 
+	/**
+	 * Set this to display an error message
+	 */
+	@Prop({ mutable: true }) errorMessage?: string;
+
 	/**
 	 * Used to add a custom function to the textarea onInput event.
 	 */
@@ -165,6 +171,11 @@ export class OntarioTextarea implements Input {
 	 */
 	@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;
 
+	/**
+	 * Emitted when an error message is reported to the component.
+	 */
+	@Event() 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.
 	 */
@@ -253,6 +264,12 @@ export class OntarioTextarea implements Input {
 		this.updateCaptionState(this.caption);
 	}
 
+	@Watch('errorMessage')
+	broadcastInputErrorOccurredEvent() {
+		// Emit event to notify anyone who wants to listen for errors occurring
+		this.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });
+	}
+
 	/**
 	 * Function to handle textarea events and the information pertaining to the textarea to emit.
 	 */
@@ -307,8 +324,9 @@ export class OntarioTextarea implements Input {
 	}
 
 	render() {
+		const error = !!this.errorMessage;
 		return (
-			<div class="ontario-form-group">
+			<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>
 				{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}
 				{this.internalHintText && (
 					<ontario-hint-text
@@ -317,6 +335,7 @@ export class OntarioTextarea implements Input {
 						ref={(el) => (this.hintTextRef = el)}
 					></ontario-hint-text>
 				)}
+				<ErrorMessage message={this.errorMessage} error={error} />
 				<textarea
 					aria-describedby={this.hintTextId}
 					class={this.getClass()}

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

@@ -98,6 +98,7 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 | `customOnFocus`  | --              | Used to add a custom function to the textarea onFocus event.                                                                                                                                                                                   | `((event: Event) => void) \| undefined` | `undefined` |
 | `customOnInput`  | --              | Used to add a custom function to the textarea onInput event.                                                                                                                                                                                   | `((event: Event) => void) \| undefined` | `undefined` |
 | `elementId`      | `element-id`    | The unique identifier of the textarea. This is optional - if no ID is passed, 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 textarea 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 textarea. 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` |
@@ -107,12 +108,13 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 
 ## Events
 
-| Event           | Description                                                                         | Type                                                                        |
-| --------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| `inputOnBlur`   | Emitted when a keyboard input event occurs when an input has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
-| `inputOnChange` | Emitted when a keyboard input or mouse event occurs when an input has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>`   |
-| `inputOnFocus`  | Emitted when a keyboard input event occurs when an input has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
-| `inputOnInput`  | Emitted when a input event occurs when an input has been changed.                   | `CustomEvent<InputInteractionEvent & { inputType?: string \| undefined; }>` |
+| Event                | Description                                                                         | Type                                                                        |
+| -------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `inputErrorOccurred` | Emitted when an error message is reported to the component.                         | `CustomEvent<{ inputId: string; errorMessage: string; }>`                   |
+| `inputOnBlur`        | Emitted when a keyboard input event occurs when an input has lost focus.            | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
+| `inputOnChange`      | Emitted when a keyboard input or mouse event occurs when an input has been changed. | `CustomEvent<{ id?: string \| undefined; value?: string \| undefined; }>`   |
+| `inputOnFocus`       | Emitted when a keyboard input event occurs when an input has gained focus.          | `CustomEvent<InputInteractionEvent & { focused: boolean; }>`                |
+| `inputOnInput`       | Emitted when a input event occurs when an input has been changed.                   | `CustomEvent<InputInteractionEvent & { inputType?: string \| undefined; }>` |
 
 ## Dependencies
 
@@ -120,6 +122,7 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 
 - [ontario-hint-text](../ontario-hint-text)
 - [ontario-hint-expander](../ontario-hint-expander)
+- [ontario-icon-alert-error](../ontario-icon)
 
 ### Graph
 
@@ -127,6 +130,7 @@ hintExpander='{ "hint": "This is the hint expander title", "content": "This is t
 graph TD;
   ontario-textarea --> ontario-hint-text
   ontario-textarea --> ontario-hint-expander
+  ontario-textarea --> ontario-icon-alert-error
   ontario-hint-expander --> ontario-icon-chevron-up
   ontario-hint-expander --> ontario-icon-chevron-down
   style ontario-textarea fill:#f9f,stroke:#333,stroke-width:4px

package/src/components/ontario-textarea/test/__snapshots__/ontario-textarea.spec.tsx.snap

@@ -9,7 +9,11 @@ exports[`ontario-textarea snapshot should render the expected html 1`] = `
         <span class="ontario-label__flag">
           (optional)
         </span>
-      </label><textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
+      </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><textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
     </div>
   </mock:shadow-root>
 </ontario-textarea>

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

@@ -8,7 +8,6 @@ describe('ontario-textarea', () => {
 				components: [OntarioTextarea],
 				html: `<ontario-textarea name="ontario-textarea" element-id="ontario-textarea" caption='{"captionText": "Ontario Textarea"}'></ontario-textarea>`,
 			});
-
 			expect(page.root).toMatchSnapshot();
 		});
 	});
@@ -29,6 +28,10 @@ describe('ontario-textarea', () => {
 									(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>
 							<textarea class="ontario-textarea" id="ontario-textarea" name="ontario-textarea" value=""></textarea>
 						</div>
 					</mock:shadow-root>

package/src/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/src/index.html

@@ -125,6 +125,7 @@
 						<h2 id="callout-aside">Callouts and Asides</h2>
 						<div>
 							<h3 class="ontario-h4">Callouts</h3>
+							<h4 class="ontario-h5">With Heading</h4>
 							<ontario-callout
 								heading-type="h3"
 								heading-content-type="string"
@@ -136,10 +137,18 @@
 									expires.
 								</p>
 							</ontario-callout>
+							<h4 class="ontario-h5">Without Heading</h4>
+							<ontario-callout highlight-colour="purple">
+								<p>
+									<a href="#">Sign up for email reminders</a> and we’ll notify you 60 and 30 days before your licence
+									expires.
+								</p>
+							</ontario-callout>
 						</div>
 
 						<div>
 							<h3 class="ontario-h4">Asides</h3>
+							<h4 class="ontario-h5">With Heading</h4>
 							<ontario-aside
 								heading-type="h2"
 								heading-content-type="string"
@@ -148,6 +157,12 @@
 								content="As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions."
 							>
 							</ontario-aside>
+							<h4 class="ontario-h5">Without Heading</h4>
+							<ontario-aside
+								highlight-colour="gold"
+								content="As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions."
+							>
+							</ontario-aside>
 						</div>
 						<hr />
 					</div>

package/src/utils/components/callout-aside/callout-aside-helpers.tsx

@@ -23,7 +23,7 @@ const generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColou
 
 const generateHeading = (
 	type: CalloutAsideType,
-	headingType: HeadingLevelOptions,
+	headingType: HeadingLevelOptions | undefined,
 	headingContentType: HeadingContentType,
 	headingContent: string,
 ) => {
@@ -71,9 +71,9 @@ const generateHeading = (
 
 export const generateCalloutAside = (
 	type: CalloutAsideType,
-	headingType: HeadingLevelOptions,
 	headingContentType: HeadingContentType,
-	headingContent: string,
+	headingType?: HeadingLevelOptions,
+	headingContent?: string,
 	content?: string | HTMLElement,
 	highlightColour?: HighlightColourOptions,
 ) => {
@@ -81,13 +81,13 @@ export const generateCalloutAside = (
 
 	return type === 'callout' ? (
 		<div class={generateClasses(type, highlightColour)}>
-			{generateHeading(type, headingType, headingContentType, headingContent)}
+			{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}
 			{contentIsString ? <p>{content}</p> : <slot />}
 		</div>
 	) : (
 		<aside class={generateClasses(type, highlightColour)}>
-			{generateHeading(type, headingType, headingContentType, headingContent)}
-			{contentIsString ? <p>{content}</p> : <slot />}
+			{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}
+			{contentIsString ? content ? <p>{content}</p> : '' : <slot />}
 		</aside>
 	);
 };

package/src/utils/components/callout-aside/callout-aside.interface.ts

@@ -18,7 +18,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/www/build/ontario-design-system-components.css

@@ -2497,6 +2497,9 @@ p + ol {
 		float: left;
 	}
 }
+.ontario-form-group:last-of-type {
+	margin-bottom: 2.5rem;
+}
 .ontario-form-group:last-of-type {
 	margin-bottom: 3rem;
 }