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

package/src/components/ontario-hint-expander/hint-expander.interface.ts

@@ -0,0 +1,16 @@
+import { Hint } from '../../utils/common/common.interface';
+
+export interface HintExpander extends Hint {
+	/**
+	 * Content to display as the hint, once the expander is toggled open.
+	 * Please note that any content that is passed into this prop will only be displayed as a string.
+	 * If you would like to add HTML content, supply child content to the component.
+	 *
+	 * @example
+	 * <ontario-hint-expander hint="This is the hint"
+	 *   <img src="https://www.jquery-az.com/html/images/banana.jpg" title="Title of image" alt="alt text here"/>
+	 *   <p> Here is the content beside the image </p>
+	 * </ontario-hint-expander>
+	 */
+	content: string;
+}

package/src/components/ontario-hint-expander/ontario-hint-expander.scss

@@ -0,0 +1,121 @@
+@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/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;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	placeholders;
+@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/1-variables/font-weights.variables' as fontWeights;
+
+.ontario-hint-expander__container {
+	max-width: globalVariables.$standard-width;
+}
+
+.ontario-hint-expander__button {
+	color: colours.$ontario-colour-link;
+	cursor: pointer;
+	background: none;
+	border: none;
+	display: flex;
+	align-items: center;
+	font-family: typography.$ontario-font-open-sans;
+	font-weight: fontWeights.$ontario-font-weights-normal;
+	font-size: fontSizes.$ontario-font-size-standard-body-text;
+	text-align: left;
+	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
+	padding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;
+
+	&-icon--close {
+		display: none;
+		margin-right: spacing.$spacing-1;
+	}
+
+	&-icon--open {
+		display: inline-block;
+		margin-right: spacing.$spacing-1;
+	}
+
+	&:hover {
+		color: colours.$ontario-colour-link--hover;
+	}
+
+	&:active {
+		color: colours.$ontario-colour-link--active;
+	}
+
+	&:focus,
+	&:active {
+		@extend %ontario-focus;
+	}
+
+	& > * {
+		pointer-events: none;
+	}
+}
+
+.ontario-hint-expander__content {
+	border-left: 4px solid colours.$ontario-greyscale-20;
+	color: colours.$ontario-colour-black;
+	background-color: colours.$ontario-greyscale-5;
+	display: none;
+	padding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 calc(#{spacing.$spacing-4} + #{spacing.$spacing-1});
+	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;
+
+	& *:first-child {
+		margin-top: spacing.$spacing-0;
+	}
+
+	& *:last-child {
+		margin-bottom: spacing.$spacing-0;
+	}
+
+	& img {
+		width: globalVariables.$full-width;
+
+		@media screen and (min-width: breakpoints.$small-breakpoint) {
+			width: 50%;
+		}
+	}
+}
+
+.ontario-hint-expander__content.ontario-expander__content--opened {
+	display: block;
+}
+
+.ontario-hint-expander__container.ontario-expander--active {
+	.ontario-hint-expander__button-icon--close {
+		display: inline-block;
+	}
+
+	.ontario-hint-expander__button-icon--open {
+		display: none;
+	}
+}
+
+.ontario-hint-expander__checkbox-exists-true {
+	margin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		margin-top: spacing.$spacing-4;
+	}
+}
+
+// Fractal component style coverage ↓
+.ontario-input + .ontario-hint-expander__container {
+	margin-top: -1 * spacing.$spacing-5 !important;
+}
+
+.ontario-checkboxes__item .ontario-hint-expander__container,
+.ontario-radios__item .ontario-hint-expander__container {
+	margin-left: spacing.$spacing-2;
+}
+
+.ontario-checkboxes__label + .ontario-hint-expander__container,
+.ontario-radios__label + .ontario-hint-expander__container {
+	margin-top: spacing.$spacing-3;
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		margin-top: spacing.$spacing-4;
+	}
+}

package/src/components/ontario-hint-expander/ontario-hint-expander.tsx

@@ -0,0 +1,204 @@
+import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from '@stencil/core';
+import { v4 as uuid } from 'uuid';
+
+import { HintExpander } from './hint-expander.interface';
+import { HintContentType } from '../../utils/common/common.interface';
+
+import { validatePropExists } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+
+@Component({
+	tag: 'ontario-hint-expander',
+	styleUrl: 'ontario-hint-expander.scss',
+	shadow: true,
+})
+export class OntarioHintExpander implements HintExpander {
+	@Element() host: HTMLElement;
+
+	/**
+	 * The content type of the hint.
+	 * If no prop is passed, it will default to a string.
+	 * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.
+	 */
+	@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';
+
+	/**
+	 * Text to display as the hint expander question/statement
+	 */
+	@Prop() hint: string;
+
+	/**
+	 * Content to display as the hint, once the expander is toggled open.
+	 * Please note that any content that is passed into this prop will only be displayed as a string.
+	 * If you would like to add HTML content, supply child content to the component.
+	 *
+	 * @example
+	 * <ontario-hint-expander hint="This is the hint"
+	 *   <img src="https://www.jquery-az.com/html/images/banana.jpg" title="Title of image" alt="alt text here"/>
+	 *   <p> Here is the content beside the image </p>
+	 * </ontario-hint-expander>
+	 */
+	@Prop({ mutable: true }) content: string;
+
+	/**
+	 * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.
+	 */
+	@Prop({ mutable: true }) elementId?: string;
+
+	@State() hintState: string;
+
+	/**
+	 * Emitted when a keyboard input or mouse event occurs.
+	 */
+	@Event() toggleExpanderEvent!: EventEmitter<MouseEvent | KeyboardEvent>;
+
+	/**
+	 * Watch for changes to the `hintContentType` prop for validation purposes.
+	 * If none is provided, or the wrong type is provided, it will default to `string`.
+	 */
+	@Watch('hintContentType')
+	private checkHintContentType() {
+		if (this.hintContentType !== 'string' && this.hintContentType !== 'html') {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' hintContentType ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-hint-text> ')
+				.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')
+				.printMessage();
+
+			return (this.hintContentType = 'string');
+		}
+
+		return this.hintContentType;
+	}
+
+	/*
+	 * Watch for changes in the `hint` prop for validation purposes.
+	 * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).
+	 */
+	@Watch('hint')
+	private updateHintContent() {
+		this.hintState = this.hint ?? this.host.textContent ?? '';
+		this.validateHint(this.hintState);
+	}
+
+	/*
+	 * Watch for changes to the `content` prop for validation purposes.
+	 *
+	 * Validate the `content` and make sure the `content` has a value.
+	 * Log a warning if user doesn't input a value for the `content` or element content.
+	 */
+	@Watch('content')
+	validateContent(newValue: string) {
+		if (validatePropExists(newValue)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' content ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-hint-expander> ')
+				.addRegularText('was not provided')
+				.printMessage();
+		}
+	}
+
+	private onClick = (ev: Event) => {
+		const hintExpander = ev.target as HTMLButtonElement | null;
+		const hintExpanderParent = hintExpander?.parentElement;
+
+		hintExpanderParent?.classList.toggle('ontario-expander--active');
+		let content = hintExpanderParent?.querySelector("[data-toggle='ontario-expander-content']");
+		content?.classList.toggle('ontario-expander__content--opened');
+		content?.classList.contains('ontario-expander__content--opened')
+			? content.setAttribute('aria-hidden', 'false')
+			: content?.setAttribute('aria-hidden', 'true');
+		hintExpanderParent?.classList.contains('ontario-expander--active')
+			? hintExpanderParent?.setAttribute('aria-expanded', 'true')
+			: hintExpanderParent?.setAttribute('aria-expanded', 'false');
+
+		this.toggleExpanderEvent.emit(ev as MouseEvent);
+	};
+
+	/*
+	 * Watch for changes in the `hint` prop for validation purposes.
+	 *
+	 * Validate the `hint` and make sure the `hint` has a value.
+	 * Log a warning if user doesn't input a value for the `hint`.
+	 */
+	validateHint(newValue: string) {
+		if (validatePropExists(newValue)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' hint ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-hint-expander> ')
+				.addRegularText('was not provided')
+				.printMessage();
+		}
+	}
+
+	/**
+	 * Set `hint` using internal component logic
+	 */
+	componentWillLoad() {
+		this.elementId = this.elementId ?? uuid();
+		this.updateHintContent();
+		this.checkHintContentType();
+		this.validateContent(this.content);
+	}
+
+	/**
+	 * This helper is used to help load translations for any slots + text content passed in by the user.
+	 */
+	componentDidLoad() {
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes') {
+					this.updateHintContent();
+				}
+			});
+		});
+
+		const options = { attributes: true };
+		observer.observe(this.host, options);
+	}
+
+	public getId(): string {
+		return this.elementId ?? '';
+	}
+
+	render() {
+		return (
+			<div class="ontario-hint-expander__container">
+				<button
+					class="ontario-hint-expander__button"
+					onClick={this.onClick}
+					id={`hint-expander-button-${this.getId()}`}
+					aria-controls={`hint-expander-content-${this.getId()}`}
+					aria-expanded="false"
+					data-toggle="ontario-collapse"
+				>
+					<span class="ontario-hint-expander__button-icon--close ontario-icon">
+						<ontario-icon-chevron-up colour="inherit"></ontario-icon-chevron-up>
+					</span>
+					<span class="ontario-hint-expander__button-icon--open">
+						<ontario-icon-chevron-down colour="inherit"></ontario-icon-chevron-down>
+					</span>
+					{this.hint}
+				</button>
+				<div
+					class="ontario-hint-expander__content"
+					id={`hint-expander-content-${this.getId()}`}
+					aria-labelledby={`hint-expander-button-${this.getId()}`}
+					aria-hidden="true"
+					data-toggle="ontario-expander-content"
+				>
+					{this.hintContentType === 'string' ? this.content : <span innerHTML={this.content}></span>}
+				</div>
+			</div>
+		);
+	}
+}

package/src/components/ontario-hint-expander/readme.md

@@ -0,0 +1,112 @@
+import { OntarioHintExpander } from '@ongov/ontario-design-system-component-library-react';
+
+# ontario-hint-expander
+
+Use a hint expander when:
+
+- the hint text is long and **won’t be needed by the majority of users**
+- you want to give the user the option to see a **helpful image**, such as a picture of a driver’s licence showing where to find the licence number
+
+## Usage guidance
+
+Please refer to the [Ontario Design System](https://designsystem.ontario.ca/components/detail/hint-text.html) for current documentation guidance.
+
+## Configuration
+
+Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the hint expander 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 a bare-bones hint expander component where the user is passing the `hint` that will be displayed as the question/statement. The`content` is what is displayed once the hint expander is expanded.
+
+```html
+<ontario-hint-expander hint="This is the hint" content="This is the content"></ontario-hint-expander>
+```
+
+<OntarioHintExpander hint="This is the hint" content="This is the content"></OntarioHintExpander>
+
+Example of a hint expander that includes an `element-id` property - this is used to establish a relationship between hint text content and elements using the `aria-describedby` attribute.
+
+```html
+<ontario-hint-expander
+	hint="This is the hint"
+	content="This is the content"
+	element-id="expander-82913"
+></ontario-hint-expander>
+```
+
+<div>
+  <OntarioHintExpander
+    hint="This is the hint"
+    content="This is the content"
+    element-id="expander-82913">
+  </OntarioHintExpander>
+</div>
+
+## Accessibility
+
+### Usage
+
+In order for hint expanders to have meaningful sequence, they should be added after the associated form element so the user can understand the context of the information.
+
+Since the hint expander information comes after the form element, add text in the associated label (only visible to screen readers) to let the user know there is additional context below.
+
+#### Example:
+
+```html
+<legend class="ontario-fieldset__legend">
+	{this.legend}
+	<span class="ontario-label__flag"> {this.isRequired ? "(required)" : "(optional)"} </span>
+	<span class="ontario-show-for-sr">More information on (label name) is available in the next element</span>
+</legend>
+```
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property          | Attribute           | Description                                                                                                                                                                                                                                     | Type                              | Default     |
+| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `content`         | `content`           | Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component. | `string`                          | `undefined` |
+| `elementId`       | `element-id`        | Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.                                                                           | `string \| undefined`             | `undefined` |
+| `hint`            | `hint`              | Text to display as the hint expander question/statement                                                                                                                                                                                         | `string`                          | `undefined` |
+| `hintContentType` | `hint-content-type` | The content type of the hint. If no prop is passed, it will default to a string. If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.                                                               | `"html" \| "string" \| undefined` | `'string'`  |
+
+## Events
+
+| Event                 | Description                                          | Type                                       |
+| --------------------- | ---------------------------------------------------- | ------------------------------------------ |
+| `toggleExpanderEvent` | Emitted when a keyboard input or mouse event occurs. | `CustomEvent<KeyboardEvent \| MouseEvent>` |
+
+## Dependencies
+
+### Used by
+
+- [ontario-checkboxes](../ontario-checkbox)
+- [ontario-dropdown-list](../ontario-dropdown-list)
+- [ontario-input](../ontario-input)
+- [ontario-radio-buttons](../ontario-radio-buttons)
+- [ontario-textarea](../ontario-textarea)
+
+### Depends on
+
+- [ontario-icon-chevron-up](../ontario-icon)
+- [ontario-icon-chevron-down](../ontario-icon)
+
+### Graph
+
+```mermaid
+graph TD;
+  ontario-hint-expander --> ontario-icon-chevron-up
+  ontario-hint-expander --> ontario-icon-chevron-down
+  ontario-checkboxes --> ontario-hint-expander
+  ontario-dropdown-list --> ontario-hint-expander
+  ontario-input --> ontario-hint-expander
+  ontario-radio-buttons --> ontario-hint-expander
+  ontario-textarea --> ontario-hint-expander
+  style ontario-hint-expander fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

package/src/components/ontario-hint-expander/test/ontario-hint-expander.e2e.ts

@@ -0,0 +1,23 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+describe('ontario-hint-expander', () => {
+	it('render a default hint expander', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-hint-expander></ontario-hint-expander>');
+		const component = await page.find('ontario-hint-expander');
+		const element = await page.find('ontario-hint-expander >>> div');
+
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClass('ontario-hint-expander__container');
+	});
+
+	it('fires the onclick event', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-hint-expander>Element Content</ontario-hint-expander>');
+		const changedEvent = await page.spyOnEvent('click');
+		const component = await page.find('ontario-hint-expander');
+		component.click();
+		await page.waitForChanges();
+		expect(changedEvent).toHaveReceivedEventTimes(1);
+	});
+});

package/src/components/ontario-hint-expander/test/ontario-hint-expander.spec.tsx

@@ -0,0 +1,35 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioHintExpander } from '../ontario-hint-expander';
+import { mutationObserverMock } from '../../../utils/tests/mutation-observer.mock';
+
+global.MutationObserver = mutationObserverMock;
+
+describe('ontario-hint-expander', () => {
+	it('should render a default hint expander', async () => {
+		const page = await newSpecPage({
+			components: [OntarioHintExpander],
+			html: `<ontario-hint-expander hint="This is the hint" content="This is the content" element-id="elementId" aria-controls="hint-expander-controls">`,
+		});
+		expect(page.root).toEqualHtml(`
+      <ontario-hint-expander hint="This is the hint" content="This is the content" element-id="elementId" aria-controls="hint-expander-controls">
+        <mock:shadow-root>
+        <div class="ontario-hint-expander__container">
+          <button class="ontario-hint-expander__button"
+            id="hint-expander-button-elementId"
+            aria-controls="hint-expander-content-elementId"
+            aria-expanded="false"
+            data-toggle="ontario-collapse"
+          >
+            <span class="ontario-hint-expander__button-icon--close ontario-icon"><ontario-icon-chevron-up colour="inherit"></ontario-icon-chevron-up></span>
+            <span class="ontario-hint-expander__button-icon--open"><ontario-icon-chevron-down colour="inherit"></ontario-icon-chevron-down></span>
+            This is the hint
+          </button>
+          <div class="ontario-hint-expander__content" id="hint-expander-content-elementId" aria-labelledby="hint-expander-button-elementId" aria-hidden="true" data-toggle="ontario-expander-content">
+            This is the content
+          </div>
+        </div>
+        </mock:shadow-root>
+      </ontario-hint-expander>
+    `);
+	});
+});

package/src/components/ontario-hint-text/ontario-hint-text.scss

@@ -0,0 +1,31 @@
+@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/spacing.variables' as spacing;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+
+.ontario-hint {
+	color: colours.$ontario-greyscale-70;
+	display: inline-block;
+	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;
+	width: globalVariables.$full-width;
+	max-width: globalVariables.$standard-width;
+
+	p {
+		margin-bottom: spacing.$spacing-4;
+
+		&:first-of-type {
+			margin-top: spacing.$spacing-0;
+		}
+
+		&:last-of-type {
+			margin-bottom: spacing.$spacing-0;
+		}
+	}
+
+	// Fractal component style coverage ↓
+	// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices
+	a[x-apple-data-detectors] {
+		color: inherit;
+		cursor: none;
+		text-decoration: none;
+	}
+}

package/src/components/ontario-hint-text/ontario-hint-text.tsx

@@ -0,0 +1,143 @@
+import { Component, Prop, Element, h, Watch, State, Method } from '@stencil/core';
+import { v4 as uuid } from 'uuid';
+
+import { Hint, HintContentType } from '../../utils/common/common.interface';
+
+import { validatePropExists } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+
+@Component({
+	tag: 'ontario-hint-text',
+	styleUrl: 'ontario-hint-text.scss',
+	shadow: true,
+})
+export class OntarioHintText implements Hint {
+	@Element() host: HTMLElement;
+
+	/**
+	 * The content type of the hint.
+	 * If no prop is passed, it will default to a string.
+	 * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.
+	 */
+	@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';
+
+	/**
+	 * Text to display as the hint text statement.
+	 *
+	 * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.
+	 *
+	 * @example
+	 * <ontario-hint-text hint="Override Hint Text">Hint Text</ontario-button>
+	 *
+	 * The resulting hint text will display `"Override Hint Text"`.
+	 */
+	@Prop() hint: string;
+
+	/*
+	 * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.
+	 */
+	@Prop({ mutable: true }) elementId?: string;
+
+	@State() hintState: string;
+
+	/**
+	 * Watch for changes to the `hintContentType` prop for validation purposes.
+	 * If none is provided, or the wrong type is provided, it will default to `string`.
+	 */
+	@Watch('hintContentType')
+	private checkHintContentType() {
+		if (this.hintContentType !== 'string' && this.hintContentType !== 'html') {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' hintContentType ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-hint-text> ')
+				.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')
+				.printMessage();
+
+			return (this.hintContentType = 'string');
+		}
+
+		return this.hintContentType;
+	}
+
+	/*
+	 * Watch for changes in the `hint` prop for validation purposes.
+	 * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).
+	 */
+	@Watch('hint')
+	private updateHintContent() {
+		this.hintState = this.hint ?? this.host.textContent ?? '';
+		this.validateHintContent(this.hintState);
+	}
+
+	/*
+	 * Validate the `hint` and make sure the `hint` has a value.
+	 * Log a warning if user doesn't input a value for the `hint` or element content.
+	 */
+	validateHintContent(newValue: string) {
+		// If element content is not provided, check whether prop exists
+		if (!this.host.textContent) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' hint ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-text> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+	}
+
+	public getId(): string {
+		return this.elementId ?? '';
+	}
+
+	/**
+	 * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.
+	 *
+	 * @returns Promise<string | undefined>
+	 */
+	@Method()
+	async getHintTextId(): Promise<string | undefined> {
+		return this.elementId;
+	}
+
+	/**
+	 * Set `hint` using internal component logic
+	 */
+	componentWillLoad() {
+		this.updateHintContent();
+		this.checkHintContentType();
+		this.elementId = this.elementId ?? uuid();
+	}
+
+	/**
+	 * This helper is used to help load translations for any slots + text content passed in by the user.
+	 */
+	componentDidLoad() {
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes') {
+					this.updateHintContent();
+				}
+			});
+		});
+
+		const options = { attributes: true };
+		observer.observe(this.host, options);
+	}
+
+	render() {
+		return this.hintContentType === 'string' ? (
+			<p id={this.getId()} class="ontario-hint">
+				{this.hintState}
+			</p>
+		) : (
+			<div id={this.getId()} class="ontario-hint" innerHTML={this.hintState}></div>
+		);
+	}
+}