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

package/dist/collection/components/ontario-task/ontario-task.js

@@ -0,0 +1,515 @@
+import { h, Fragment } from '@stencil/core';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { TaskStatuses, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';
+import { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { constructHintTextObject } from '../../utils/components/hints/hints';
+import translations from '../../translations/global.i18n.json';
+export class OntarioTask {
+	el;
+	// Reference to the ontario-hint-text element for this task.
+	hintTextRef;
+	/**
+	 * Specifies the label of the task.
+	 *
+	 * This is required to provide the name of the task.
+	 */
+	label;
+	/**
+	 * A unique id for the task.
+	 *
+	 * This is required.
+	 */
+	taskId;
+	/**
+	 * Specifies an optional link associated with the task.
+	 *
+	 * If provided, clicking the task will navigate to this URL.
+	 */
+	link;
+	/**
+	 * Disables the task link when set to `true`.
+	 *
+	 * Default is `false`, meaning the link will be active if provided.
+	 */
+	deactivateLink = 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.
+	 */
+	language;
+	/**
+	 * Used to include the ontario-hint-text component for the task.
+	 *
+	 * This is optional.
+	 */
+	hintText;
+	/**
+	 * 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.
+	 */
+	taskStatus = TaskStatuses.NotStarted;
+	/**
+	 * Allows consumers to define the heading level for the task label.
+	 *
+	 * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.
+	 */
+	headingLevel = 'h3';
+	/**
+	 * The hint text options are re-assigned to the internalHintText state.
+	 */
+	internalHintText;
+	/**
+	 * Mutable variable, for internal use only.
+	 *
+	 * Set the task's status state depending on validation result.
+	 */
+	taskStatusState = TaskStatuses.NotStarted;
+	/**
+	 * Watch for changes in `taskStatus` prop to validate its value.
+	 */
+	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'`.
+	 */
+	warnAndGetDefaultTaskStatus() {
+		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.
+	 */
+	validateHeadingLevel(newValue) {
+		const allowedValues = ['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.
+	 */
+	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.
+	 */
+	handleSetAppLanguage(event) {
+		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.
+	 */
+	handleHeaderLanguageToggled(event) {
+		this.language = validateLanguage(event);
+	}
+	/**
+	 * Determines the badge colour based on the current `taskStatusState`.
+	 *
+	 * @returns {TaskBadgeColour}
+	 */
+	getBadgeColour() {
+		return TaskToBadgeColour[this.taskStatusState] || 'grey';
+	}
+	/**
+	 * Provides a translated task status string based on the current language.
+	 */
+	getTranslatedTaskStatus() {
+		const resolvedLanguage = validateLanguage(this.language);
+		return translations.taskStatus[this.taskStatusState][resolvedLanguage];
+	}
+	/**
+	 * Renders hint text if available.
+	 */
+	renderHintText() {
+		if (this.internalHintText) {
+			return h('ontario-hint-text', {
+				hint: this.internalHintText.hint,
+				hintContentType: this.internalHintText.hintContentType,
+				ref: (el) => (this.hintTextRef = el),
+			});
+		}
+		return null;
+	}
+	/**
+	 * Returns the class name(s) for the task label.
+	 */
+	getClass() {
+		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.
+	 */
+	renderTaskContent() {
+		const headingProps = {
+			id: `task-label--${this.taskId}`,
+			class: this.getClass(),
+		};
+		return h(
+			'div',
+			{ class: 'ontario-task__content' },
+			h(this.headingLevel, headingProps, this.label),
+			this.taskStatusState &&
+				h(
+					'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(),
+				),
+		);
+	}
+	/**
+	 * 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 = h(
+			Fragment,
+			{ key: '4968807e30ded9336a79d517b25cd0bd35a14a3d' },
+			this.renderTaskContent(),
+			this.renderHintText(),
+		);
+		return h(
+			'li',
+			{
+				'key': 'a000b87343f37fbdcee5e96cada8c0344e1a7218',
+				'class': `ontario-task ${taskStatusClass}`,
+				'role': 'group',
+				'aria-labelledby': `task-label--${this.taskId}`,
+				'data-task-status': this.taskStatusState,
+			},
+			isLinkActive
+				? h('a', { 'href': this.link, 'class': 'ontario-task__link', 'aria-label': this.label }, taskContent)
+				: h('div', null, taskContent),
+		);
+	}
+	static get is() {
+		return 'ontario-task';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-task.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-task.css'],
+		};
+	}
+	static get properties() {
+		return {
+			label: {
+				type: 'string',
+				attribute: 'label',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'Specifies the label of the task.\n\nThis is required to provide the name of the task.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+			taskId: {
+				type: 'string',
+				attribute: 'task-id',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'A unique id for the task.\n\nThis is required.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+			link: {
+				type: 'string',
+				attribute: 'link',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Specifies an optional link associated with the task.\n\nIf provided, clicking the task will navigate to this URL.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+			deactivateLink: {
+				type: 'boolean',
+				attribute: 'deactivate-link',
+				mutable: false,
+				complexType: {
+					original: 'boolean',
+					resolved: 'boolean',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'Disables the task link when set to `true`.\n\nDefault is `false`, meaning the link will be active if provided.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: 'false',
+			},
+			language: {
+				type: 'string',
+				attribute: 'language',
+				mutable: true,
+				complexType: {
+					original: 'Language',
+					resolved: '"en" | "fr" | undefined',
+					references: {
+						Language: {
+							location: 'import',
+							path: '../../utils/common/language-types',
+							id: 'src/utils/common/language-types.ts::Language',
+						},
+					},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'The language of the component.\n\nThis 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.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+			hintText: {
+				type: 'string',
+				attribute: 'hint-text',
+				mutable: true,
+				complexType: {
+					original: 'string | Hint',
+					resolved: 'Hint | string | undefined',
+					references: {
+						Hint: {
+							location: 'import',
+							path: '../../utils/common/common.interface',
+							id: 'src/utils/common/common.interface.ts::Hint',
+						},
+					},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Used to include the ontario-hint-text component for the task.\n\nThis is optional.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+			taskStatus: {
+				type: 'string',
+				attribute: 'task-status',
+				mutable: false,
+				complexType: {
+					original: 'TaskStatuses',
+					resolved:
+						'TaskStatuses.CannotStartYet | TaskStatuses.Completed | TaskStatuses.Error | TaskStatuses.InProgress | TaskStatuses.NotStarted | TaskStatuses.Optional',
+					references: {
+						TaskStatuses: {
+							location: 'import',
+							path: '../../utils/common/task-statuses.enum',
+							id: 'src/utils/common/task-statuses.enum.ts::TaskStatuses',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: "Defines the status of the task, with default set to 'NotStarted'.\n\nAccepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.",
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: 'TaskStatuses.NotStarted',
+			},
+			headingLevel: {
+				type: 'string',
+				attribute: 'heading-level',
+				mutable: false,
+				complexType: {
+					original: 'TaskHeadingLevel',
+					resolved: '"h2" | "h3" | "h4"',
+					references: {
+						TaskHeadingLevel: {
+							location: 'local',
+							path: '/home/runner/work/ontario-design-system/ontario-design-system/packages/ontario-design-system-component-library/src/components/ontario-task/ontario-task.tsx',
+							id: 'src/components/ontario-task/ontario-task.tsx::TaskHeadingLevel',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: "Allows consumers to define the heading level for the task label.\n\nAccepts 'h2', 'h3' or 'h4'. Default is 'h3'.",
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "'h3'",
+			},
+		};
+	}
+	static get states() {
+		return {
+			internalHintText: {},
+			taskStatusState: {},
+		};
+	}
+	static get elementRef() {
+		return 'el';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'taskStatus',
+				methodName: 'validateTaskStatus',
+			},
+			{
+				propName: 'headingLevel',
+				methodName: 'validateHeadingLevel',
+			},
+			{
+				propName: 'hintText',
+				methodName: 'parseHintText',
+			},
+		];
+	}
+	static get listeners() {
+		return [
+			{
+				name: 'setAppLanguage',
+				method: 'handleSetAppLanguage',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+			{
+				name: 'headerLanguageToggled',
+				method: 'handleHeaderLanguageToggled',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-task.js.map

package/dist/collection/components/ontario-task/ontario-task.js.map

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

package/dist/collection/components/ontario-task-list/ontario-task-list.css

@@ -0,0 +1,39 @@
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+.ontario-task-list {
+	border-top: 0.125rem solid #cccccc;
+	padding: 0;
+}
+
+.ontario-task-list__item {
+	max-width: 100%;
+	list-style-type: none;
+}