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

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

@@ -0,0 +1,107 @@
+import { OntarioAccordion } from '@ongov/ontario-design-system-component-library-react';
+
+# ontario-accordion
+
+Use accordions to provide a show/hide option for sections of content on complex pages.
+
+## Usage guidance
+
+Please refer to the [Ontario Design System](https://designsystem.ontario.ca/components/detail/accordions.html) for current documentation guidance for accordions.
+
+## Configuration
+
+Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the accordion component can be added directly into the project's code, and can be customized by updating the properties outlined [here](#properties). Please see the [examples](#examples) below for how to configure the component.
+
+## Examples
+
+Example of an accordion component, where the user is explicitly passing in content through the `accordionData` property.
+
+```html
+<ontario-accordion
+	title="My Accordion"
+	expand-collapse-button='{
+		"expandAllSectionsLabel": "Expand All",
+		"collapseAllSectionsLabel": "Collapse All"
+	}'
+	accordion-data='[
+	    {"label": "Accordion 1", "content": "This is a string"},
+		{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}
+	]'
+></ontario-accordion>
+```
+
+<div>
+	<OntarioAccordion
+		title="My Accordion"
+		expand-collapse-button='{
+			"expandAllSectionsLabel": "Expand All",
+			"collapseAllSectionsLabel": "Collapse All"
+		}'
+		accordion-data='[
+			{"label": "Accordion 1", "content": "This is a string"},
+			{"label": "Accordion 2", "accordionContentType": "html", "content": "<ul><li>List A</li><li>List B</li><li>List C</li></ul>"}
+		]'
+	></OntarioAccordion>
+</div>
+
+## Custom property types
+
+### Accordion
+
+```ts
+accordion-data='[ {"label": "Accordion 1", "content": "Text Context"}, {"label": "Accordion 2", "content": "Text Content"}]'
+```
+
+| Property               | Description                                                                                                                                   | Type                 | Default  |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------- |
+| `label`                | The label for the individual accordion button.                                                                                                | `string`             |          |
+| `accordionContentType` | The content type of the accordion. If the accordion requires multiple lines or HTML, the `accordionContentType` prop should be set to `html`. | `'string' \| 'html'` | `string` |
+| `content`              | The content that is passed into each accordion.                                                                                               | `string`             |
+| `isOpen`               | A boolean to track whether the accordion is expanded or collapsed.                                                                            | `string`             |
+| `ariaLabelText`        | Custom Aria Label text for the section.                                                                                                       | `string`             |
+
+### ExpandCollapseButtonDetails
+
+By default, the component uses our recommended values for the Expand/Collapse button label, which will automatically match the language the component is in. However, if custom values for this button are required they can be set via the `expandCollapseButton` property.
+
+```ts
+expand-collapse-button='{ "expandAllSectionsLabel": "Expand All", "collapseAllSectionsLabel": "Collapse All" }'
+```
+
+| Property                   | Description                              | Type     |
+| -------------------------- | ---------------------------------------- | -------- |
+| `expandAllSectionsLabel`   | The label for the 'Expand all' button.   | `string` |
+| `collapseAllSectionsLabel` | The label for the 'Collapse all' button. | `string` |
+| `ariaLabelText`            | Alt text for the expand/close button.    | `string` |
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property               | Attribute                | Description                                                                                                                                                                                                                                                                    | Type                                                 | Default     |
+| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------- | ----------- |
+| `accordionData`        | `accordion-data`         | Used to include individual accordion data for the accordion component. This is passed in as an array of objects with key-value pairs. The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType. | `Accordion[] \| string`                              | `undefined` |
+| `expandCollapseButton` | `expand-collapse-button` | Custom Expand/Collapse button text.                                                                                                                                                                                                                                            | `ExpandCollapseButtonDetails \| string \| undefined` | `undefined` |
+| `isOpen`               | `is-open`                | Used to show whether the accordion is opened or closed.                                                                                                                                                                                                                        | `boolean`                                            | `false`     |
+| `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 none are passed, it will default to English.                                                                  | `"en" \| "fr" \| undefined`                          | `undefined` |
+| `name`                 | `name`                   | The name of the accordion component. This is not optional.                                                                                                                                                                                                                     | `string`                                             | `undefined` |
+
+## Dependencies
+
+### Depends on
+
+- [ontario-icon-chevron-up](../ontario-icon)
+- [ontario-icon-chevron-down](../ontario-icon)
+
+### Graph
+
+```mermaid
+graph TD;
+  ontario-accordion --> ontario-icon-chevron-up
+  ontario-accordion --> ontario-icon-chevron-down
+  style ontario-accordion fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

package/src/components/ontario-accordion/test/ontario-accordion.e2e.ts

@@ -0,0 +1,11 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ontario-accordion', () => {
+	it('renders', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-accordion></ontario-accordion>');
+
+		const element = await page.find('ontario-accordion');
+		expect(element).toHaveClass('hydrated');
+	});
+});

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

@@ -0,0 +1,29 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioAccordion } from '../ontario-accordion';
+
+describe('ontario-accordion', () => {
+	it('renders', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAccordion],
+			html: `<ontario-accordion></ontario-accordion>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-accordion>
+				<mock:shadow-root>
+					<div>
+						<h2></h2>
+						<div class="ontario-accordions__container">
+							<div class="ontario-accordion__controls">
+								<button aria-expanded="true" class="ontario-accordion__button--expand-all">
+									<span class="ontario-accordion--expand-open-all">
+										<div>Collapse all</div>
+									</span>
+								</button>
+							</div>
+						</div>
+					</div>
+				</mock:shadow-root>
+			</ontario-accordion>
+    `);
+	});
+});

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

@@ -0,0 +1,47 @@
+@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/global.variables' as globalVariables;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';
+
+.ontario-aside {
+	border-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;
+	padding: spacing.$spacing-5;
+	margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;
+
+	* {
+		max-width: globalVariables.$standard-width;
+
+		&:last-child {
+			margin-bottom: spacing.$spacing-2;
+		}
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		.ontario-aside {
+			margin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;
+		}
+	}
+}
+
+.ontario-aside__title {
+	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;
+}
+
+$aside-highlight-colours: (
+	'teal': colours.$ontario-colour-dark-teal,
+	'gold': colours.$ontario-colour-dark-gold,
+	'yellow': colours.$ontario-colour-dark-yellow,
+	'taupe': colours.$ontario-colour-dark-taupe,
+	'green': colours.$ontario-colour-dark-green,
+	'lime': colours.$ontario-colour-dark-lime,
+	'sky': colours.$ontario-colour-dark-sky,
+	'blue': colours.$ontario-colour-dark-blue,
+	'purple': colours.$ontario-colour-dark-purple,
+);
+
+@each $colour-name, $hex in $aside-highlight-colours {
+	.ontario-border-highlight--#{$colour-name} {
+		border-color: $hex !important;
+	}
+}

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

@@ -0,0 +1,172 @@
+import { Component, Prop, Watch } from '@stencil/core';
+
+import {
+	CalloutAside,
+	HeadingLevelOptions,
+	HeadingContentType,
+	HeadingContentTypes,
+	HighlightColourOptions,
+} from '../../utils/components/callout-aside/callout-aside.interface';
+import {
+	isValidHighlightColour,
+	generateCalloutAside,
+	isValidHeadingLevel,
+} from '../../utils/components/callout-aside/callout-aside-helpers';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+
+@Component({
+	tag: 'ontario-aside',
+	styleUrl: 'ontario-aside.scss',
+	shadow: true,
+})
+export class OntarioAside implements CalloutAside {
+	/**
+	 * The heading level of the aside heading.
+	 */
+	@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;
+
+	/**
+	 * 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;
+
+	/**
+	 * 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.
+	 *
+	 * @example
+	 * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>
+	 */
+	@Prop() content?: string;
+
+	/**
+	 * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.
+	 */
+	@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';
+
+	/**
+	 * Watch for changes to the `headingType` prop.
+	 *
+	 * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.
+	 */
+	@Watch('headingType')
+	validateHeadingType() {
+		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();
+	}
+
+	/**
+	 * Watch for changes in the `headingContentType` prop for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).
+	 * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.
+	 */
+	@Watch('headingContentType')
+	validateHeadingContentType() {
+		const isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);
+		if (isValid) {
+			return this.headingContentType;
+		} else {
+			return this.warnDefaultType();
+		}
+	}
+
+	/**
+	 * 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.
+	 *
+	 * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.
+	 */
+	@Watch('highlightColour')
+	validateHighlightColour() {
+		if (this.highlightColour) {
+			if (isValidHighlightColour(this.highlightColour)) return this.highlightColour;
+			else {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(` highlightColour ${this.highlightColour} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-aside> ')
+					.addRegularText(
+						'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',
+					)
+					.printMessage();
+			}
+		}
+
+		// if no highlight colour is passed, return 'teal'
+		return 'teal';
+	}
+
+	/**
+	 * Print the invalid `type` warning message.
+	 * @returns default type ('string')
+	 */
+	private warnDefaultType() {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' headingContentType ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-aside> ')
+			.addRegularText('was set to an invalid type; only')
+			.addMonospaceText(' string or html ')
+			.addRegularText('are supported. The default type')
+			.addMonospaceText(' string ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return (this.headingContentType = 'string');
+	}
+
+	componentWillLoad() {
+		this.validateHighlightColour();
+		this.validateHeadingContent();
+		this.validateHeadingType();
+		this.validateHeadingContentType();
+	}
+
+	render() {
+		return generateCalloutAside(
+			'aside',
+			this.headingType,
+			this.headingContentType,
+			this.headingContent,
+			this.content,
+			this.highlightColour,
+		);
+	}
+}

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

@@ -0,0 +1,83 @@
+import { OntarioAside } from '@ongov/ontario-design-system-component-library-react';
+
+# ontario-aside
+
+Use asides to highlight in-page content.
+
+## Usage guidance
+
+Please refer to the [Ontario Design System](https://designsystem.ontario.ca/components/detail/callouts-asides.html) for current documentation guidance for asides.
+
+## Configuration
+
+Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the aside component can be added directly into the project's code, and can be customized by updating the properties outlined [here](#properties). Please see the [examples](#examples) below for how to configure the component.
+
+## Examples
+
+Example of an aside component, where the user is explicitly passing in content through the `content` property.
+
+```html
+<ontario-aside
+	heading-type="h2"
+	heading-content-type="html"
+	heading-content="<a href='#'>This is an aside heading that is a link</a>"
+	content="This is the content for the aside component."
+></ontario-aside>
+```
+
+<div>
+	<OntarioAside
+		heading-type="h2"
+		heading-content-type="html"
+		heading-content="<a href='#'>This is an aside heading that is a link</a>"
+		content="This is the content for the aside component."
+	></OntarioAside>
+</div>
+
+This is another example of an aside. This time, the content is passed as a child of the `ontario-aside` component, which allows for HTML content to be passed. A `highlightColour` option is also passed.
+
+```html
+<ontario-aside
+	heading-type="h4"
+	heading-content-type="string"
+	heading-content="This is an aside heading"
+	highlight-colour="purple"
+>
+	<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>
+	<p><a href="#">Learn more about Canada's global missions.</a></p>
+</ontario-aside>
+```
+
+<div>
+	<OntarioAside
+		heading-type="h4"
+		heading-content-type="string"
+		heading-content="This is an aside heading"
+		highlight-colour="purple"
+	>
+		<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>
+		<p><a href="#">Learn more about Canada's global missions.</a></p>
+	</OntarioAside>
+</div>
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| 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` |
+| `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'`    |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ontario-aside snapshot should render the expected html 1`] = `
+<ontario-aside heading-content="Quick fact:" heading-content-type="string" heading-type="h3" highlight-colour="gold">
+  <mock:shadow-root>
+    <aside class="ontario-aside ontario-border-highlight--gold">
+      <h3 class="ontario-aside__title ontario-h5">
+        Quick fact:
+      </h3>
+      <slot></slot>
+    </aside>
+  </mock:shadow-root>
+  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>
+`;

package/src/components/ontario-aside/test/ontario-aside.e2e.ts

@@ -0,0 +1,65 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ontario-aside', () => {
+	it('renders', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-aside></ontario-aside>');
+		const component = await page.find('ontario-aside');
+		const element = await page.find('ontario-aside >>> aside');
+
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--teal']);
+	});
+
+	describe('render changes', () => {
+		let page: any;
+		let component: any;
+		let element: any;
+
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent('<ontario-aside></ontario-aside>');
+			component = await page.find('ontario-aside');
+			element = await page.find('ontario-aside >>> aside');
+		});
+
+		it('renders changes to the headingType property', async () => {
+			component.setProperty('headingType', 'h3');
+			await page.waitForChanges();
+
+			expect(element.firstChild.nodeName).toBe('H3');
+
+			component.setProperty('headingType', 'h4');
+			await page.waitForChanges();
+			expect(element.firstChild.nodeName).toBe('H4');
+		});
+
+		it('renders changes to the class names when the highlightColor is changed', async () => {
+			component.setProperty('highlightColour', 'gold');
+			await page.waitForChanges();
+
+			expect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--gold']);
+
+			component.setProperty('highlightColour', 'lime');
+			await page.waitForChanges();
+
+			expect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--lime']);
+		});
+
+		it('renders changes to the HTML through the headingContentType property', async () => {
+			component.setProperty('headingContentType', 'string');
+			component.setProperty('headingContent', 'Quick fact:');
+			await page.waitForChanges();
+
+			const heading = await page.find('ontario-aside >>> h2');
+
+			expect(heading).toEqualHtml('<h2 class="ontario-aside__title ontario-h5">Quick fact:</h2>');
+
+			component.setProperty('headingContentType', 'html');
+			component.setProperty('headingContent', '<a href="#">Quick fact:</a>');
+			await page.waitForChanges();
+
+			expect(heading).toEqualHtml('<h2 class="ontario-aside__title ontario-h5"><a href="#">Quick fact:</a></h2>');
+		});
+	});
+});

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

@@ -0,0 +1,114 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioAside } from '../ontario-aside';
+
+describe('ontario-aside', () => {
+	describe('snapshot', () => {
+		it('should render the expected html', async () => {
+			const page = await newSpecPage({
+				components: [OntarioAside],
+				html: `<ontario-aside heading-type="h3" heading-content-type="string" heading-content="Quick fact:" highlight-colour="gold">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>`,
+			});
+
+			expect(page.root).toMatchSnapshot();
+		});
+	});
+
+	it('should render the h2 heading level if no headingType prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content-type="string" heading-content="Quick fact:" highlight-colour="gold"><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="string" heading-content="Quick fact:" highlight-colour="gold">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--gold">
+						<h2 class="ontario-aside__title ontario-h5">
+							Quick fact:
+						</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 render the expected heading level when a headingType prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-type="h5" heading-content-type="string" heading-content="Quick fact:"><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-type="h5" heading-content-type="string" heading-content="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h5 class="ontario-aside__title ontario-h5">
+							Quick fact:
+						</h5>
+						<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 render a string heading if no headingContentType prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content="Quick fact:"><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="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h2 class="ontario-aside__title ontario-h5">
+							Quick fact:
+						</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 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 reflect attributes/props being set', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-type="h4" heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>" highlight-colour="purple" 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>`,
+		});
+
+		expect(page.rootInstance.headingType).toBe('h4');
+		expect(page.rootInstance.headingContentType).toBe('html');
+		expect(page.rootInstance.headingContent).toBe("<a href='#'>Quick fact:</a>");
+		expect(page.rootInstance.highlightColour).toBe('purple');
+		expect(page.rootInstance.content).toBe(
+			'As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.',
+		);
+	});
+});