@ongov/ontario-design-system-component-library 5.0.0-alpha.6 → 5.0.0

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

@@ -286,19 +286,19 @@ visible when the hint expander title (hint) is toggled" }'
 
 ## Properties
 
-| Property         | Attribute       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                    | Type                                    | Default     |
-| ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
-| `caption`        | `caption`       | The text to display for the radio button legend.                                                                                                                                                                                                                                                                                                                                                                                               | `Caption \| string`                     | `undefined` |
-| `customOnBlur`   | --              | Used to add a custom function to the radio input onBlur event.                                                                                                                                                                                                                                                                                                                                                                                 | `((event: Event) => void) \| undefined` | `undefined` |
-| `customOnChange` | --              | Used to add a custom function to the radio input onChange event.                                                                                                                                                                                                                                                                                                                                                                               | `((event: Event) => void) \| undefined` | `undefined` |
-| `customOnFocus`  | --              | Used to add a custom function to the radio input onFocus event.                                                                                                                                                                                                                                                                                                                                                                                | `((event: Event) => void) \| undefined` | `undefined` |
-| `errorMessage`   | `error-message` | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                           | `string \| undefined`                   | `undefined` |
-| `hintExpander`   | `hint-expander` | Used to include the ontario-hint-expander component for the radio button group. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                                                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |
-| `hintText`       | `hint-text`     | Used to include the ontario-hint-text component for radio button group. This is optional.                                                                                                                                                                                                                                                                                                                                                      | `Hint \| string \| undefined`           | `undefined` |
-| `language`       | `language`      | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                                                                                                                            | `"en" \| "fr" \| undefined`             | `undefined` |
-| `name`           | `name`          | The name assigned to the radio button. The name value is used to reference form data after a form is submitted.                                                                                                                                                                                                                                                                                                                                | `string`                                | `undefined` |
-| `options`        | `options`       | The options for the radio button 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 radio buttons in a group, each radio button will be displayed as an option. In the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group. | `RadioOption[] \| string`               | `undefined` |
-| `required`       | `required`      | This is used to determine whether the radio button is required or not. This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label. If no prop is set, it will default to false (optional).                                                                                                                                                                                             | `boolean \| undefined`                  | `false`     |
+| Property         | Attribute          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                    | Type                                    | Default     |
+| ---------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
+| `caption`        | `caption`          | The text to display for the radio button legend.                                                                                                                                                                                                                                                                                                                                                                                               | `Caption \| string`                     | `undefined` |
+| `customOnBlur`   | `custom-on-blur`   | Used to add a custom function to the radio input onBlur event.                                                                                                                                                                                                                                                                                                                                                                                 | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnChange` | `custom-on-change` | Used to add a custom function to the radio input onChange event.                                                                                                                                                                                                                                                                                                                                                                               | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnFocus`  | `custom-on-focus`  | Used to add a custom function to the radio input onFocus event.                                                                                                                                                                                                                                                                                                                                                                                | `((event: Event) => void) \| undefined` | `undefined` |
+| `errorMessage`   | `error-message`    | Set this to display an error message                                                                                                                                                                                                                                                                                                                                                                                                           | `string \| undefined`                   | `undefined` |
+| `hintExpander`   | `hint-expander`    | Used to include the ontario-hint-expander component for the radio button group. This is passed in as an object with key-value pairs. This is optional.                                                                                                                                                                                                                                                                                         | `HintExpander \| string \| undefined`   | `undefined` |
+| `hintText`       | `hint-text`        | Used to include the ontario-hint-text component for radio button group. This is optional.                                                                                                                                                                                                                                                                                                                                                      | `Hint \| string \| undefined`           | `undefined` |
+| `language`       | `language`         | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.                                                                                                                                                                                                                            | `"en" \| "fr" \| undefined`             | `undefined` |
+| `name`           | `name`             | The name assigned to the radio button. The name value is used to reference form data after a form is submitted.                                                                                                                                                                                                                                                                                                                                | `string`                                | `undefined` |
+| `options`        | `options`          | The options for the radio button 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 radio buttons in a group, each radio button will be displayed as an option. In the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group. | `RadioOption[] \| string`               | `undefined` |
+| `required`       | `required`         | This is used to determine whether the radio button is required or not. This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label. If no prop is set, it will default to false (optional).                                                                                                                                                                                             | `boolean \| undefined`                  | `false`     |
 
 ## Events
 

package/src/components/ontario-search-box/ontario-search-box.tsx

@@ -52,18 +52,18 @@ export class OntarioSearchBox {
 	@Prop({ mutable: true }) value?: string;
 
 	/**
-	* The text to display as the input label
-	*
-	* @example
-	* <ontario-search-box
-	*      caption='{
-					"captionText": "Search directory",
-					"captionType": "default"
-					}'
-				required = "true"
-	>
-	</ontario-search-box>
-	*/
+	 * The text to display as the input label
+	 *
+	 * @example
+	 * <ontario-search-box
+	 *   caption='{
+	 *			"captionText": "Search directory",
+	 *			"captionType": "default"
+	 *		}'
+	 *		required = "true"
+	 * >
+	 * </ontario-search-box>
+	 */
 	@Prop() caption: Caption | string;
 
 	/**

package/src/components/ontario-search-box/readme.md

@@ -89,19 +89,19 @@ caption='{ "captionText": "Input label", "captionType": "large" }'
 
 ## Properties
 
-| Property         | Attribute    | Description                                                                                                                                                                                                                                                                                                                                                                            | Type                                                            | Default     |
-| ---------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
-| `caption`        | `caption`    | The text to display as the input label                                                                                                                                                                                                                                                                                                                                                 | `Caption \| string`                                             | `undefined` |
-| `customOnBlur`   | --           | Used to add a custom function to the input onBlur event.                                                                                                                                                                                                                                                                                                                               | `((event: Event) => void) \| undefined`                         | `undefined` |
-| `customOnChange` | --           | Used to add a custom function to the input onChange event.                                                                                                                                                                                                                                                                                                                             | `((event: Event) => void) \| undefined`                         | `undefined` |
-| `customOnFocus`  | --           | Used to add a custom function to the input onFocus event.                                                                                                                                                                                                                                                                                                                              | `((event: Event) => void) \| undefined`                         | `undefined` |
-| `customOnInput`  | --           | Used to add a custom function to the input onInput event.                                                                                                                                                                                                                                                                                                                              | `((event: Event) => void) \| undefined`                         | `undefined` |
-| `elementId`      | `element-id` | The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.                                                                                                                                                                                                                                                                       | `string \| undefined`                                           | `undefined` |
-| `hintText`       | `hint-text`  | Used to include the ontario-hint-text component for the search-box. This is optional.                                                                                                                                                                                                                                                                                                  | `Hint \| string \| undefined`                                   | `undefined` |
-| `language`       | `language`   | The language of the component. This is used for translations. If none is passed, it will default to English.                                                                                                                                                                                                                                                                           | `"en" \| "fr" \| undefined`                                     | `'en'`      |
-| `performSearch`  | --           | This Function to perform a search operation. This function will be called when the search submit button is triggered. The value argument is used for as search term to use for the search operation. This parameter is optional. The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted. | `((value?: string \| undefined) => Promise<void>) \| undefined` | `undefined` |
-| `required`       | `required`   | This is used to determine whether the dropdown list is required or not. This prop gets passed to the InputCaption utility to display either an optional or required flag in the label. If no prop is set, it will default to false (optional).                                                                                                                                         | `boolean \| undefined`                                          | `false`     |
-| `value`          | `value`      | The value of the search term. This is optional.                                                                                                                                                                                                                                                                                                                                        | `string \| undefined`                                           | `undefined` |
+| Property         | Attribute          | Description                                                                                                                                                                                                                                                                                                                                                                            | Type                                                            | Default     |
+| ---------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
+| `caption`        | `caption`          | The text to display as the input label                                                                                                                                                                                                                                                                                                                                                 | `Caption \| string`                                             | `undefined` |
+| `customOnBlur`   | `custom-on-blur`   | Used to add a custom function to the input onBlur event.                                                                                                                                                                                                                                                                                                                               | `((event: Event) => void) \| undefined`                         | `undefined` |
+| `customOnChange` | `custom-on-change` | Used to add a custom function to the input onChange event.                                                                                                                                                                                                                                                                                                                             | `((event: Event) => void) \| undefined`                         | `undefined` |
+| `customOnFocus`  | `custom-on-focus`  | Used to add a custom function to the input onFocus event.                                                                                                                                                                                                                                                                                                                              | `((event: Event) => void) \| undefined`                         | `undefined` |
+| `customOnInput`  | `custom-on-input`  | Used to add a custom function to the input onInput event.                                                                                                                                                                                                                                                                                                                              | `((event: Event) => void) \| undefined`                         | `undefined` |
+| `elementId`      | `element-id`       | The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.                                                                                                                                                                                                                                                                       | `string \| undefined`                                           | `undefined` |
+| `hintText`       | `hint-text`        | Used to include the ontario-hint-text component for the search-box. This is optional.                                                                                                                                                                                                                                                                                                  | `Hint \| string \| undefined`                                   | `undefined` |
+| `language`       | `language`         | The language of the component. This is used for translations. If none is passed, it will default to English.                                                                                                                                                                                                                                                                           | `"en" \| "fr" \| undefined`                                     | `'en'`      |
+| `performSearch`  | `perform-search`   | This Function to perform a search operation. This function will be called when the search submit button is triggered. The value argument is used for as search term to use for the search operation. This parameter is optional. The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted. | `((value?: string \| undefined) => Promise<void>) \| undefined` | `undefined` |
+| `required`       | `required`         | This is used to determine whether the dropdown list is required or not. This prop gets passed to the InputCaption utility to display either an optional or required flag in the label. If no prop is set, it will default to false (optional).                                                                                                                                         | `boolean \| undefined`                                          | `false`     |
+| `value`          | `value`            | The value of the search term. This is optional.                                                                                                                                                                                                                                                                                                                                        | `string \| undefined`                                           | `undefined` |
 
 ## Events
 

package/src/components/ontario-step-indicator/readme.md

@@ -104,7 +104,7 @@ The simplest use of the back button is to provide, via the `back-button-url` att
 | -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | ----------- |
 | `backButtonUrl`      | `back-button-url`     | URL for the back element to set a path for where the link will lead. If a URL is passed in, the back element will display as an anchor tag. The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display. | `string \| undefined`                   | `undefined` |
 | `currentStep`        | `current-step`        | A number value to indicate which step the user is currently on.                                                                                                                                                                                                                          | `number \| undefined`                   | `undefined` |
-| `customOnClick`      | --                    | Used to add a custom function to the back button onClick event. If this function is passed in, the back element will display as a button. The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.   | `((event: Event) => void) \| undefined` | `undefined` |
+| `customOnClick`      | `custom-on-click`     | Used to add a custom function to the back button onClick event. If this function is passed in, the back element will display as a button. The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.   | `((event: Event) => void) \| undefined` | `undefined` |
 | `language`           | `language`            | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.                                                                            | `"en" \| "fr" \| undefined`             | `undefined` |
 | `numberOfSteps`      | `number-of-steps`     | A number value to indicate to the user the total number of steps the form has.                                                                                                                                                                                                           | `number \| undefined`                   | `undefined` |
 | `percentageComplete` | `percentage-complete` | A number value to indicate to the user the percentage of the form that has been completed.                                                                                                                                                                                               | `number \| undefined`                   | `undefined` |

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

@@ -0,0 +1,110 @@
+@use 'sass:math';
+@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/2-tools/functions/global.functions' as globalFunctions;
+@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/2-tools/placeholder/focus.placeholders' as
+	placeholders;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+
+.ontario-task {
+	border-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;
+	padding: globalFunctions.px-to-rem(19) spacing.$spacing-0;
+	list-style: none;
+
+	&__content {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		@media screen and (max-width: breakpoints.$small-breakpoint) {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+		}
+	}
+
+	&__label {
+		text-align: left;
+		margin: spacing.$spacing-0;
+		font-size: globalFunctions.px-to-rem(19);
+		font-weight: fontWeights.$ontario-font-weights-semi-bold;
+		display: inline-block;
+
+		@media screen and (max-width: breakpoints.$small-breakpoint) {
+			margin-bottom: spacing.$spacing-2;
+		}
+
+		a {
+			text-decoration: none;
+			color: inherit;
+
+			&:hover {
+				text-decoration: underline;
+			}
+		}
+	}
+
+	&__link {
+		display: block;
+		text-decoration: underline;
+		color: colours.$ontario-colour-link;
+		font-weight: normal;
+	}
+
+	&__hint-text--true {
+		margin-bottom: spacing.$spacing-2;
+	}
+}
+
+.ontario-task__link:focus {
+	outline: none;
+	box-shadow: none;
+
+	.ontario-task__label {
+		@extend %ontario-focus;
+		box-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;
+	}
+}
+
+.ontario-task:has(.ontario-task__link) {
+	&:hover {
+		background-color: colours.$ontario-greyscale-5;
+	}
+}
+
+@mixin link-states {
+	&:visited .ontario-task__label {
+		color: colours.$ontario-colour-link--visited;
+	}
+	&:hover .ontario-task__label {
+		color: colours.$ontario-colour-link--hover;
+	}
+	&:active .ontario-task__label {
+		color: colours.$ontario-colour-link--active;
+	}
+}
+
+.ontario-task {
+	&--status-completed,
+	&--status-inprogress,
+	&--status-notstarted,
+	&--status-optional,
+	&--status-error {
+		.ontario-task__link {
+			.ontario-task__label {
+				color: colours.$ontario-colour-link;
+				text-decoration: underline;
+			}
+			@include link-states;
+		}
+	}
+}
+
+ontario-hint-text::part(hint-text) {
+	margin: spacing.$spacing-0;
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		margin-top: spacing.$spacing-2;
+	}
+}

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

@@ -0,0 +1,325 @@
+import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';
+import { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { Hint } from '../../utils/common/common.interface';
+import { Language } from '../../utils/common/language-types';
+import { constructHintTextObject } from '../../utils/components/hints/hints';
+import translations from '../../translations/global.i18n.json';
+import { HeadingLevel } from '../../utils/common/common.interface';
+export type TaskHeadingLevel = Extract<HeadingLevel, 'h2' | 'h3' | 'h4'>;
+
+@Component({
+	tag: 'ontario-task',
+	styleUrl: 'ontario-task.scss',
+	shadow: true,
+})
+export class OntarioTask {
+	@Element() el: HTMLElement;
+
+	// Reference to the ontario-hint-text element for this task.
+	hintTextRef?: HTMLOntarioHintTextElement | undefined;
+
+	/**
+	 * Specifies the label of the task.
+	 *
+	 * This is required to provide the name of the task.
+	 */
+	@Prop() label: string;
+
+	/**
+	 * A unique id for the task.
+	 *
+	 * This is required.
+	 */
+	@Prop() taskId: string;
+
+	/**
+	 * Specifies an optional link associated with the task.
+	 *
+	 * If provided, clicking the task will navigate to this URL.
+	 */
+	@Prop() link?: string;
+
+	/**
+	 * Disables the task link when set to `true`.
+	 *
+	 * Default is `false`, meaning the link will be active if provided.
+	 */
+	@Prop() deactivateLink: boolean = false;
+
+	/**
+	 * The language of the component.
+	 *
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
+	 */
+	@Prop({ mutable: true }) language?: Language;
+
+	/**
+	 * Used to include the ontario-hint-text component for the task.
+	 *
+	 * This is optional.
+	 */
+	@Prop({ mutable: true }) hintText?: string | Hint;
+
+	/**
+	 * Defines the status of the task, with default set to 'NotStarted'.
+	 *
+	 * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.
+	 */
+	/**
+	 * Defines the status of the task, with default set to 'NotStarted'.
+	 *
+	 * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.
+	 */
+	@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;
+
+	/**
+	 * Allows consumers to define the heading level for the task label.
+	 *
+	 * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.
+	 */
+	@Prop() headingLevel: TaskHeadingLevel = 'h3';
+
+	/**
+	 * The hint text options are re-assigned to the internalHintText state.
+	 */
+	@State() private internalHintText: Hint;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 *
+	 * Set the task's status state depending on validation result.
+	 */
+	@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;
+	/**
+	 * Watch for changes in `taskStatus` prop to validate its value.
+	 */
+	@Watch('taskStatus')
+	validateTaskStatus() {
+		const validStatuses = Object.values(TaskStatuses);
+		const isValidStatus = validStatuses.includes(this.taskStatus);
+		this.taskStatusState = isValidStatus ? this.taskStatus : this.warnAndGetDefaultTaskStatus();
+
+		// Update the `data-task-status` attribute
+		this.el.setAttribute('data-task-status', this.taskStatusState);
+	}
+
+	/**
+	 * Logs a warning to the console if the `taskStatus` prop is set to an invalid value.
+	 *
+	 * This function informs developers that the provided `taskStatus` is not recognized
+	 * and resets the status to the default value of `'notStarted'`. The warning message
+	 * specifies the valid task statuses to help guide correct usage.
+	 *
+	 * @returns The default task status `'notStarted'`.
+	 */
+	private warnAndGetDefaultTaskStatus(): TaskStatuses {
+		const validStatuses = Object.values(TaskStatuses).join(', ');
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' taskStatus ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-task> ')
+			.addRegularText('was set to an invalid taskStatus; only ')
+			.addMonospaceText(validStatuses)
+			.addRegularText(' are supported. The default taskStatus ')
+			.addMonospaceText(TaskStatuses.NotStarted)
+			.addRegularText(' is assumed.')
+			.printMessage();
+		return TaskStatuses.NotStarted;
+	}
+
+	/**
+	 * Watch for changes in `headingLevel` prop to validate its value.
+	 */
+	@Watch('headingLevel')
+	validateHeadingLevel(newValue: string) {
+		const allowedValues: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];
+
+		// Validate the new value against the allowed values
+		const isValid = validateValueAgainstArray(newValue, allowedValues);
+
+		if (!isValid) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' headingLevel ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-task> ')
+				.addRegularText('was set to an invalid value; only ')
+				.addMonospaceText(allowedValues.join(', '))
+				.addRegularText(' are supported. The default value ')
+				.addMonospaceText('h3')
+				.addRegularText(' is assumed.')
+				.printMessage();
+
+			this.headingLevel = 'h3';
+		}
+	}
+
+	/**
+	 * Watch for changes in `hintText` prop and parse it if available.
+	 *
+	 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,
+	 * and the result will be stored in the `internalHintText` state.
+	 */
+	@Watch('hintText')
+	private parseHintText() {
+		if (this.hintText) {
+			const hintTextObject = constructHintTextObject(this.hintText);
+			this.internalHintText = hintTextObject;
+		}
+	}
+
+	/**
+	 * Listen for app language settings on the window to update the component language.
+	 */
+	@Listen('setAppLanguage', { target: 'window' })
+	handleSetAppLanguage(event: CustomEvent<Language>) {
+		if (!this.language) {
+			this.language = validateLanguage(event);
+		}
+	}
+
+	/**
+	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.
+	 * It is used for changing the component language after the language toggle has been activated.
+	 */
+	@Listen('headerLanguageToggled', { target: 'window' })
+	handleHeaderLanguageToggled(event: CustomEvent<Language>) {
+		this.language = validateLanguage(event);
+	}
+
+	/**
+	 * Determines the badge colour based on the current `taskStatusState`.
+	 *
+	 * @returns {TaskBadgeColour}
+	 */
+	private getBadgeColour(): TaskBadgeColour {
+		return TaskToBadgeColour[this.taskStatusState] || 'grey';
+	}
+
+	/**
+	 * Provides a translated task status string based on the current language.
+	 */
+	private getTranslatedTaskStatus(): string {
+		const resolvedLanguage = validateLanguage(this.language);
+		return translations.taskStatus[this.taskStatusState][resolvedLanguage];
+	}
+
+	/**
+	 * Renders hint text if available.
+	 */
+	private renderHintText() {
+		if (this.internalHintText) {
+			return (
+				<ontario-hint-text
+					hint={this.internalHintText.hint}
+					hintContentType={this.internalHintText.hintContentType}
+					ref={(el) => (this.hintTextRef = el)}
+				></ontario-hint-text>
+			);
+		}
+		return null;
+	}
+
+	/**
+	 * Returns the class name(s) for the task label.
+	 */
+	private getClass(): string {
+		return ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');
+	}
+
+	/**
+	 * Renders the task label and status content.
+	 *
+	 * This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,
+	 * as well as the badge indicating the task status.
+	 */
+	private renderTaskContent() {
+		const headingProps: any = {
+			id: `task-label--${this.taskId}`,
+			class: this.getClass(),
+		};
+
+		return (
+			<div class="ontario-task__content">
+				{h(this.headingLevel, headingProps, this.label)}
+				{this.taskStatusState && (
+					<ontario-badge
+						class="ontario-task__badge"
+						role="status"
+						aria-label={`${
+							translations.taskStatus.taskStatus[validateLanguage(this.language)]
+						} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}
+						colour={this.getBadgeColour()}
+					>
+						{this.getTranslatedTaskStatus()}
+					</ontario-badge>
+				)}
+			</div>
+		);
+	}
+
+	/**
+	 * After the component loads, retrieve the hint text ID (if available) from the hintText component,
+	 * and set it for the `aria-describedby` attribute.
+	 */
+	async componentDidLoad() {
+		if (this.hintTextRef) {
+			let hintTextId = this.hintTextRef.elementId;
+
+			if (!hintTextId) {
+				hintTextId = `hint-text--${this.taskId}`;
+				this.hintTextRef.elementId = hintTextId;
+			}
+
+			const taskElement = this.el.shadowRoot?.querySelector('li');
+			if (taskElement) {
+				taskElement.setAttribute('aria-describedby', hintTextId);
+			}
+		}
+	}
+
+	/**
+	 * Lifecycle method: before the component loads, parse the hint text and
+	 * validate language and task status and heading level.
+	 */
+	async componentWillLoad() {
+		this.parseHintText();
+		this.language = validateLanguage(this.language);
+		this.validateTaskStatus();
+		this.validateHeadingLevel(this.headingLevel);
+	}
+
+	render() {
+		const isLinkActive = this.link && !this.deactivateLink;
+		const taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
+
+		const taskContent = (
+			<Fragment>
+				{this.renderTaskContent()}
+				{this.renderHintText()}
+			</Fragment>
+		);
+
+		return (
+			<li
+				class={`ontario-task ${taskStatusClass}`}
+				role="group"
+				aria-labelledby={`task-label--${this.taskId}`}
+				data-task-status={this.taskStatusState}
+			>
+				{isLinkActive ? (
+					<a href={this.link} class="ontario-task__link" aria-label={this.label}>
+						{taskContent}
+					</a>
+				) : (
+					<div>{taskContent}</div>
+				)}
+			</li>
+		);
+	}
+}