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

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-alpha.1",
+	"version": "4.3.0-alpha.1",
 	"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-alpha.1",
+		"@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": "d18083f3565f0c6b7f3e6da76e7364cb5c7356fb"
+	"gitHead": "e2994e1e48a783104f3299980481b3cdaab2a302"
 }

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],

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) {

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;