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

package/www/build/p-fcd689c7.entry.js

@@ -0,0 +1,95 @@
+import { r as o, h as i } from './p-Cc98g_3o.js';
+import { v as t, a as s, I as e } from './p-_eQ6Jzc4.js';
+import { C as a } from './p-CJXRCL8b.js';
+const r =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+const l = class {
+	constructor(i) {
+		o(this, i);
+	}
+	iconWidth = 24;
+	iconWidthState;
+	validateWidth() {
+		if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+			const o = new a();
+			o.addDesignSystemTag()
+				.addMonospaceText(' icon-width ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-previous> ')
+				.addRegularText(
+					`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+				)
+				.addMonospaceText(' 24px ')
+				.addRegularText('was assumed.')
+				.printMessage();
+			this.iconWidthState = 24;
+		} else {
+			this.iconWidthState = this.iconWidth;
+		}
+	}
+	colour = 'black';
+	iconColourState;
+	iconCustomColourState;
+	validateColour() {
+		const o = t(this.colour, e);
+		if (o) {
+			this.iconColourState = this.colour;
+		} else {
+			if (s(this.colour)) {
+				this.iconCustomColourState = this.colour;
+			} else {
+				this.iconColourState = this.warnDefaultColour();
+			}
+		}
+	}
+	warnDefaultColour() {
+		const o = new a();
+		o.addDesignSystemTag()
+			.addMonospaceText(' colour ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-icon-previous> ')
+			.addRegularText('was set to an invalid colour; only')
+			.addMonospaceText(' black, blue, grey or white ')
+			.addRegularText('are supported. The default colour')
+			.addMonospaceText(' black ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'black';
+	}
+	componentWillLoad() {
+		this.validateColour();
+		this.validateWidth();
+	}
+	render() {
+		return i(
+			'div',
+			{
+				key: 'c23053b38ea1f15038fbfb480c50a1024e8e2ef7',
+				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+				style: { width: `${this.iconWidthState}px` },
+			},
+			i(
+				'svg',
+				{
+					key: '1c71a1f44f56469f868fdba34cabf13c7913fdb5',
+					class: 'svg-icon',
+					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+					role: 'img',
+					xmlns: 'http://www.w3.org/2000/svg',
+					viewBox: '0 0 24 24',
+					id: 'previous',
+				},
+				i('path', {
+					key: '96156cd83fcff7901016cc22800d1e3dadd70496',
+					d: 'M22 12a10 10 0 0 1-10 10 10 10 0 0 1-7.071-2.929 10 10 0 0 1 0-14.142 10 10 0 0 1 10.898-2.168 10 10 0 0 1 5.412 5.412A10 10 0 0 1 22 12zm-6.6 4.6L10.8 12l4.6-4.6L14 6l-6 6 6 6 1.4-1.4z',
+				}),
+			),
+		);
+	}
+	static get watchers() {
+		return { iconWidth: ['validateWidth'], colour: ['validateColour'] };
+	}
+};
+l.style = r;
+export { l as ontario_icon_previous };
+//# sourceMappingURL=p-fcd689c7.entry.js.map

package/www/build/p-fcd689c7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioIconCss","OntarioIconPrevious","iconWidth","iconWidthState","validateWidth","isNaN","this","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","colour","iconColourState","iconCustomColourState","validateColour","isValid","validateValueAgainstArray","IconColours","validateColor","warnDefaultColour","componentWillLoad","render","h","key","class","style","width","fill","stroke","role","xmlns","viewBox","id","d"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-previous&encapsulation=shadow","src/components/ontario-icon/ontario-icon-previous.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-previous',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconPrevious implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-previous> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-previous> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"previous\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M22 12a10 10 0 0 1-10 10 10 10 0 0 1-7.071-2.929 10 10 0 0 1 0-14.142 10 10 0 0 1 10.898-2.168 10 10 0 0 1 5.412 5.412A10 10 0 0 1 22 12zm-6.6 4.6L10.8 12l4.6-4.6L14 6l-6 6 6 6 1.4-1.4z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"mappings":"iIAAA,MAAMA,EAAiB,0Z,MCaVC,EAAmB,M,yBAKvBC,UAAsB,GAMrBC,eAOT,aAAAC,GACC,GAAIC,MAAMC,KAAKJ,aAAgBG,MAAMC,KAAKJ,YAAcI,KAAKJ,WAAa,EAAI,CAC7E,MAAMK,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,gBACjBC,eAAe,MACfD,iBAAiB,6BACjBC,eACA,GACCN,MAAMC,KAAKJ,WAAa,iCAAmC,0FAG5DQ,iBAAiB,UACjBC,eAAe,gBACfC,eACFN,KAAKH,eAAiB,E,KAChB,CACNG,KAAKH,eAAiBG,KAAKJ,S,EAOrBW,OAAqB,QAMpBC,gBAMAC,sBAQT,cAAAC,GACC,MAAMC,EAAUC,EAA0BZ,KAAKO,OAAQM,GACvD,GAAIF,EAAS,CACZX,KAAKQ,gBAAkBR,KAAKO,M,KACtB,CACN,GAAIO,EAAcd,KAAKO,QAAS,CAC/BP,KAAKS,sBAAwBT,KAAKO,M,KAC5B,CACNP,KAAKQ,gBAAkBR,KAAKe,mB,GASvB,iBAAAA,GACP,MAAMd,EAAU,IAAIC,EACpBD,EACEE,qBACAC,iBAAiB,YACjBC,eAAe,MACfD,iBAAiB,6BACjBC,eAAe,sCACfD,iBAAiB,gCACjBC,eAAe,qCACfD,iBAAiB,WACjBC,eAAe,eACfC,eACF,MAAO,O,CAMR,iBAAAU,GACChB,KAAKU,iBACLV,KAAKF,e,CAMN,MAAAmB,GACC,OACCC,EACC,OAAAC,IAAA,2CAAAC,MAAO,8BAA8BpB,KAAKQ,uCAAuCR,KAAKH,iBACtFwB,MAAO,CAAEC,MAAO,GAAGtB,KAAKH,qBAExBqB,EAAA,OAAAC,IAAA,2CACCC,MAAM,WACNC,MAAO,CAAEE,KAAM,GAAGvB,KAAKS,wBAAyBe,OAAQ,GAAGxB,KAAKS,yBAChEgB,KAAK,MACLC,MAAM,6BACNC,QAAQ,YACRC,GAAG,YAEHV,EAAA,QAAAC,IAAA,2CAAMU,EAAE,+L","ignoreList":[]}

package/www/i18n/global.i18n.json

@@ -243,6 +243,54 @@
 			"fr": "fr"
 		}
 	},
+	"taskGroup": {
+		"completed": {
+			"en": "You have completed",
+			"fr": "Vous avez complété"
+		},
+		"outOf": {
+			"en": "out of",
+			"fr": "sur"
+		},
+		"tasks": {
+			"en": "tasks.",
+			"fr": "tâches."
+		}
+	},
+	"taskStatus": {
+		"taskStatus": {
+			"en": "Task Status:",
+			"fr": "Statut de la tâche:"
+		},
+		"notStarted": {
+			"en": "Not Started",
+			"fr": "Pas commencé"
+		},
+		"inProgress": {
+			"en": "In Progress",
+			"fr": "En cours"
+		},
+		"completed": {
+			"en": "Completed",
+			"fr": "Terminé"
+		},
+		"cannotStartYet": {
+			"en": "Cannot Start Yet",
+			"fr": "Peux pas encore commencer"
+		},
+		"error": {
+			"en": "Error",
+			"fr": "Erreur"
+		},
+		"optional": {
+			"en": "Optional",
+			"fr": "Facultatif"
+		}
+	},
+	"newWindow": {
+		"en": "opens in a new window",
+		"fr": "s'ouvre dans une nouvelle fenêtre"
+	},
 	"required": {
 		"en": "required",
 		"fr": "obligatoire"

package/www/index.html

@@ -5,13 +5,13 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
 		<title>Ontario Design System - component samples</title>
-		<link rel="modulepreload" href="/build/p-3f2d25b9.js" />
-		<link rel="modulepreload" href="/build/p-79293fd1.js" />
-		<link rel="modulepreload" href="/build/p-b2019a19.js" />
-		<link rel="modulepreload" href="/build/p-efc52a1c.js" />
+		<link rel="modulepreload" href="/build/p-75dc5ad3.js" />
+		<link rel="modulepreload" href="/build/p-CJXRCL8b.js" />
+		<link rel="modulepreload" href="/build/p-Cc98g_3o.js" />
+		<link rel="modulepreload" href="/build/p-_eQ6Jzc4.js" />
 		<script
 			type="module"
-			src="/build/p-3f2d25b9.js"
+			src="/build/p-75dc5ad3.js"
 			data-stencil
 			data-resources-url="/build/"
 			data-stencil-namespace="ontario-design-system-components"
@@ -64,6 +64,7 @@
 						<li><a href="#page-alerts">Page alerts</a></li>
 						<li><a href="#radio-buttons">Radio buttons</a></li>
 						<li><a href="#tables">Tables</a></li>
+						<li><a href="#tasks">Tasks</a></li>
 						<li><a href="#textareas">Textareas</a></li>
 						<li><a href="#text-inputs">Text inputs</a></li>
 						<li><a href="#date-input">Date input</a></li>
@@ -92,7 +93,7 @@
 					<!-- Badges -->
 					<div>
 						<h2 id="badges">Badges</h2>
-						<ontario-badge>Default</ontario-badge> <ontario-badge colour="light-teal">Default light</ontario-badge>
+						<ontario-badge>Default</ontario-badge> <ontario-badge colour="lightTeal">Default light</ontario-badge>
 						<ontario-badge colour="black">Neutral</ontario-badge>
 						<ontario-badge colour="grey">Neutral light</ontario-badge>
 						<hr />
@@ -249,7 +250,7 @@
 							<h3>Horizontal cards with left align 9:16 images (one-fourth size)</h3>
 							<ontario-card-collection cards-per-row="4">
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
@@ -257,7 +258,7 @@
 									label="Card Title 1"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									header-colour="sky"
@@ -266,14 +267,14 @@
 									label="Card Title 2"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-fourth"
 									label="Card Title 3"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									header-colour="sky"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
@@ -284,7 +285,7 @@
 							<h3>Horizontal cards with left align 9:16 images (one-third size)</h3>
 							<ontario-card-collection cards-per-row="4">
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
@@ -292,7 +293,7 @@
 									label="Card Title 1"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									header-colour="sky"
@@ -301,14 +302,14 @@
 									label="Card Title 2"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
 									horizontal-image-size-type="one-third"
 									label="Card Title 3"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									header-colour="sky"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="left"
@@ -319,7 +320,7 @@
 							<h3>Horizontal cards with right align 9:16 images (one-fourth size)</h3>
 							<ontario-card-collection cards-per-row="4">
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="right"
@@ -327,7 +328,7 @@
 									label="Card Title 1"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									header-colour="sky"
@@ -336,14 +337,14 @@
 									label="Card Title 2"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="right"
 									horizontal-image-size-type="one-fourth"
 									label="Card Title 3"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									header-colour="sky"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="right"
@@ -354,7 +355,7 @@
 							<h3>Horizontal cards with right align 9:16 images (one-third size)</h3>
 							<ontario-card-collection cards-per-row="4">
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="right"
@@ -362,7 +363,7 @@
 									label="Card Title 1"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 									image="https://picsum.photos/169/300"
 									header-colour="sky"
@@ -371,14 +372,14 @@
 									label="Card Title 2"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="right"
 									horizontal-image-size-type="one-third"
 									label="Card Title 3"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									header-colour="sky"
 									image="https://picsum.photos/169/300"
 									horizontal-image-position-type="right"
@@ -407,7 +408,7 @@
 							</ontario-card-collection>
 							<ontario-card-collection cards-per-row="2">
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									header-colour="orange"
 									label="Card Title 1 Card Title 1 Card Title 1"
 									image="https://picsum.photos/200/300"
@@ -415,7 +416,7 @@
 									horizontal-image-size-type="one-third"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									header-colour="sky"
 									label="Card Title 2"
 									image="https://picsum.photos/200/300"
@@ -424,7 +425,7 @@
 									description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 								></ontario-card>
 								<ontario-card
-									layout="horizontal"
+									layout-direction="horizontal"
 									label="Card Title 3"
 									image="https://picsum.photos/200/300"
 									horizontal-image-position-type="left"
@@ -992,6 +993,50 @@
 						></ontario-table>
 						<hr />
 					</div>
+					<!-- Tasks -->
+					<div>
+						<h2 id="tasks">Tasks</h2>
+						<ontario-task-list heading-level="h6" label="Task list collection" language="en">
+							<ontario-task
+								label="Task 1"
+								task-id="Task-1-unique-id"
+								heading-level="h2"
+								hint-text="A hint for task 1"
+								task-status="completed"
+								link="https://example.com"
+								language="en"
+							></ontario-task>
+							<ontario-task
+								label="Task 2"
+								task-id="Task-2-unique-id"
+								hint-text="A hint for task 2"
+								task-status="inProgress"
+								link="https://example.com"
+								deactivate-link="true"
+								language="en"
+							></ontario-task>
+							<ontario-task
+								label="Task 3"
+								task-id="Task-3-unique-id"
+								task-status="notStarted"
+								language="en"
+							></ontario-task>
+							<ontario-task
+								label="Task 4"
+								task-id="Task-4-unique-id"
+								task-status="optional"
+								language="en"
+							></ontario-task>
+							<ontario-task label="Task 5" task-id="Task-5-unique-id" task-status="error" language="en"></ontario-task>
+							<ontario-task
+								label="Task 6"
+								task-id="Task-6-unique-id"
+								task-status="cannotStartYet"
+								language="en"
+							></ontario-task>
+						</ontario-task-list>
+						<hr />
+					</div>
 					<!-- Textareas -->
 					<div>
 						<h2 id="textareas">Textareas</h2>

package/dist/cjs/app-globals-8a80755e.js

@@ -1,17 +0,0 @@
-'use strict';
-
-const index = require('./index-38af86a6.js');
-
-index.setMode((elm) => {
-	// NOTE: you can write whatever you want here - it's up to you. This
-	// function must return one of the style "modes" defined in step 1.
-	return elm.type;
-});
-
-const globalFn = () => {};
-
-const globalScripts = globalFn;
-
-exports.globalScripts = globalScripts;
-
-//# sourceMappingURL=app-globals-8a80755e.js.map

package/dist/cjs/app-globals-8a80755e.js.map

@@ -1 +0,0 @@
-{"file":"app-globals-8a80755e.js","mappings":";;;;AAEAA,aAAO,CAAC,CAAC,GAAG;;;IAGX,OAAQ,GAAW,CAAC,IAAI;AACzB,CAAC,CAAC;;;;ACLU,MAAC,aAAa,GAAGC;;;;","names":["setMode","appGlobalScript"],"sources":["src/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["import { setMode } from '@stencil/core';\n\nsetMode((elm) => {\n\t// NOTE: you can write whatever you want here - it's up to you. This\n\t// function must return one of the style \"modes\" defined in step 1.\n\treturn (elm as any).type;\n});\n","import appGlobalScript from '/home/runner/work/ontario-design-system/ontario-design-system/packages/ontario-design-system-component-library/src/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/console-message-04515047.js

@@ -1,98 +0,0 @@
-'use strict';
-
-exports.ConsoleType = void 0;
-(function (ConsoleType) {
-	ConsoleType['Error'] = 'error';
-	ConsoleType['Info'] = 'info';
-	ConsoleType['Log'] = 'log';
-	ConsoleType['Warning'] = 'warning';
-})(exports.ConsoleType || (exports.ConsoleType = {}));
-var MessageStyle;
-(function (MessageStyle) {
-	MessageStyle['Regular'] = 'regular';
-	MessageStyle['Code'] = 'code';
-})(MessageStyle || (MessageStyle = {}));
-
-// system tag with formatting specifier
-const designSystemTag = 'Ontario Design System';
-// default font size for console messages
-const fontSize = '12px';
-// styles for the system tag in a string format
-// the `background-color`, `color`, `padding` and `border-radius` values are hardcoded because
-// they are specific for console message use case
-const tagStyles = [
-	'background-color: #367A76',
-	'border: none',
-	'color: white',
-	'padding: 2px 5px',
-	'text-align: center',
-	'text-decoration: none',
-	'display: inline-block',
-	'cursor: pointer',
-	'border-radius: 5px',
-].join(';');
-// styles for regular text in string format
-const regularTextStyles = ['font-family: sans-serif', `font-size: ${fontSize}`].join(';');
-// styles for code in string format
-const monospaceTextStyles = ['font-family: monospace', `font-size: ${fontSize}`].join(';');
-function addSpecifier(message) {
-	const styleSpecifier = '%c';
-	return styleSpecifier.concat(message);
-}
-// build and print console message with a fluent interface design
-class ConsoleMessageClass {
-	message;
-	styles;
-	constructor() {
-		this.message = '';
-		this.styles = [];
-	}
-	// add the `Ontario Design System` tag to the beginning of the message
-	// the first call in the chain if a tag is required
-	addDesignSystemTag() {
-		this.message = addSpecifier(designSystemTag);
-		this.styles.push(tagStyles);
-		return this;
-	}
-	// build console message as regular text
-	addRegularText(text) {
-		this.addText(text, regularTextStyles);
-		return this;
-	}
-	// build console message as monospace text
-	addMonospaceText(text) {
-		this.addText(text, monospaceTextStyles);
-		return this;
-	}
-	// print message to console depending on the `ConsoleType`
-	// the last function call in the chain
-	printMessage(consoleType = exports.ConsoleType.Warning) {
-		const messageArray = [this.message, ...this.styles];
-		// pass array of arguments into the console function for printing depending on `consoleType`
-		// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically
-		switch (consoleType) {
-			case exports.ConsoleType.Error:
-				console.error.apply(null, messageArray);
-				break;
-			case exports.ConsoleType.Info:
-				console.info.apply(null, messageArray);
-				break;
-			case exports.ConsoleType.Warning:
-				console.warn.apply(null, messageArray);
-				break;
-			default:
-				console.log.apply(null, messageArray);
-		}
-	}
-	// add text to the `message` property and associated styles into the `styles` array
-	addText(text, style) {
-		if (text && text?.trim().length > 0) {
-			this.message += addSpecifier(text);
-			this.styles.push(style);
-		}
-	}
-}
-
-exports.ConsoleMessageClass = ConsoleMessageClass;
-
-//# sourceMappingURL=console-message-04515047.js.map

package/dist/cjs/console-message-04515047.js.map

@@ -1 +0,0 @@
-{"file":"console-message-04515047.js","mappings":";;AAAYA;AAAZ,WAAY,WAAW;IACtB,8BAAe,CAAA;IACf,4BAAa,CAAA;IACb,0BAAW,CAAA;IACX,kCAAmB,CAAA;AACpB,CAAC,EALWA,mBAAW,KAAXA,mBAAW,QAKtB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACvB,mCAAmB,CAAA;IACnB,6BAAa,CAAA;AACd,CAAC,EAHW,YAAY,KAAZ,YAAY;;ACJxB;AACA,MAAM,eAAe,GAAG,uBAAuB,CAAC;AAEhD;AACA,MAAM,QAAQ,GAAG,MAAM,CAAC;AAExB;AACA;AACA;AACA,MAAM,SAAS,GAAG;IACjB,2BAA2B;IAC3B,cAAc;IACd,cAAc;IACd,kBAAkB;IAClB,oBAAoB;IACpB,uBAAuB;IACvB,uBAAuB;IACvB,iBAAiB;IACjB,oBAAoB;CACpB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;AACA,MAAM,iBAAiB,GAAG,CAAC,yBAAyB,EAAE,cAAc,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE1F;AACA,MAAM,mBAAmB,GAAG,CAAC,wBAAwB,EAAE,cAAc,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAE3F,SAAS,YAAY,CAAC,OAAe;IACpC,MAAM,cAAc,GAAG,IAAI,CAAC;IAC5B,OAAO,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACvC,CAAC;AAwDD;MACa,mBAAmB;IAC/B,OAAO,CAAS;IAChB,MAAM,CAAW;IAEjB;QACC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KACjB;;;IAID,kBAAkB;QACjB,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;QAC7C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC5B,OAAO,IAAI,CAAC;KACZ;;IAGD,cAAc,CAAC,IAAY;QAC1B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACZ;;IAGD,gBAAgB,CAAC,IAAY;QAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;KACZ;;;IAID,YAAY,CAAC,WAAW,GAAGA,mBAAW,CAAC,OAAO;QAC7C,MAAM,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;;;QAIpD,QAAQ,WAAW;YAClB,KAAKA,mBAAW,CAAC,KAAK;gBACrB,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;gBACxC,MAAM;YACP,KAAKA,mBAAW,CAAC,IAAI;gBACpB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;gBACvC,MAAM;YACP,KAAKA,mBAAW,CAAC,OAAO;gBACvB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;gBACvC,MAAM;YACP;gBACC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;SACvC;KACD;;IAGO,OAAO,CAAC,IAAY,EAAE,KAAa;QAC1C,IAAI,IAAI,IAAI,IAAI,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACpC,IAAI,CAAC,OAAO,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACxB;KACD;;;;;","names":["ConsoleType"],"sources":["src/utils/console-message/console-message.enum.ts","src/utils/console-message/console-message.ts"],"sourcesContent":["export enum ConsoleType {\n\tError = 'error',\n\tInfo = 'info',\n\tLog = 'log',\n\tWarning = 'warning',\n}\n\nexport enum MessageStyle {\n\tRegular = 'regular',\n\tCode = 'code',\n}\n","import { ConsoleMessage } from './console-message.interface';\nimport { ConsoleType, MessageStyle } from './console-message.enum';\n\n// system tag with formatting specifier\nconst designSystemTag = 'Ontario Design System';\n\n// default font size for console messages\nconst fontSize = '12px';\n\n// styles for the system tag in a string format\n// the `background-color`, `color`, `padding` and `border-radius` values are hardcoded because\n// they are specific for console message use case\nconst tagStyles = [\n\t'background-color: #367A76',\n\t'border: none',\n\t'color: white',\n\t'padding: 2px 5px',\n\t'text-align: center',\n\t'text-decoration: none',\n\t'display: inline-block',\n\t'cursor: pointer',\n\t'border-radius: 5px',\n].join(';');\n\n// styles for regular text in string format\nconst regularTextStyles = ['font-family: sans-serif', `font-size: ${fontSize}`].join(';');\n\n// styles for code in string format\nconst monospaceTextStyles = ['font-family: monospace', `font-size: ${fontSize}`].join(';');\n\nfunction addSpecifier(message: string): string {\n\tconst styleSpecifier = '%c';\n\treturn styleSpecifier.concat(message);\n}\n\n// print message to console depending on the `ConsoleType`\nexport function printConsoleMessage(\n\tmessages: ConsoleMessage[] | string,\n\tconsoleType = ConsoleType.Warning,\n\thasDesignSystemTag = true,\n) {\n\t// retrieve message from each object and concatenate them into one single string in order\n\t// if `hasSystemTag` is true then the message string will being with the value stored within `designSystemTag`.\n\tconst message =\n\t\ttypeof messages === 'string' // Note the TypeScript transpiler Stencil is using doesn't like this type guard as a const.\n\t\t\t? `${addSpecifier(designSystemTag)}${addSpecifier(` ${messages}`)}`\n\t\t\t: messages?.reduce(\n\t\t\t\t\t(message: string, currentObject: ConsoleMessage) => (message += addSpecifier(currentObject.message) ?? ''),\n\t\t\t\t\thasDesignSystemTag ? addSpecifier(designSystemTag) : '',\n\t\t\t\t);\n\n\t// array of arguments to be passed into the the console function\n\tconst messageArray: string[] = [];\n\n\t// push message into the array of arguments\n\t// depending on whether the system tag is used (i.e. `hasSystemTag` is true), push `tagStyles` into the array\n\tif (hasDesignSystemTag) {\n\t\tmessageArray.push(message, tagStyles);\n\t} else {\n\t\tmessageArray.push(message);\n\t}\n\n\t// Note the TypeScript transpiler Stencil is using doesn't like this type guard as a const.\n\tif (typeof messages === 'string') {\n\t\tmessageArray.push(regularTextStyles);\n\t} else {\n\t\t// push style of each message into the array of arguments in order\n\t\tmessages?.forEach((message: ConsoleMessage) => {\n\t\t\tmessageArray.push(message.style && message.style === MessageStyle.Code ? monospaceTextStyles : regularTextStyles);\n\t\t});\n\t}\n\n\t// pass array of arguments into the console function for printing depending on `consoleType`\n\t// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically\n\tswitch (consoleType) {\n\t\tcase ConsoleType.Error:\n\t\t\treturn console.error.apply(null, messageArray);\n\n\t\tcase ConsoleType.Info:\n\t\t\treturn console.info.apply(null, messageArray);\n\n\t\tcase ConsoleType.Warning:\n\t\t\treturn console.warn.apply(null, messageArray);\n\n\t\tdefault:\n\t\t\treturn console.log.apply(null, messageArray);\n\t}\n}\n\n// build and print console message with a fluent interface design\nexport class ConsoleMessageClass {\n\tmessage: string;\n\tstyles: string[];\n\n\tconstructor() {\n\t\tthis.message = '';\n\t\tthis.styles = [];\n\t}\n\n\t// add the `Ontario Design System` tag to the beginning of the message\n\t// the first call in the chain if a tag is required\n\taddDesignSystemTag() {\n\t\tthis.message = addSpecifier(designSystemTag);\n\t\tthis.styles.push(tagStyles);\n\t\treturn this;\n\t}\n\n\t// build console message as regular text\n\taddRegularText(text: string) {\n\t\tthis.addText(text, regularTextStyles);\n\t\treturn this;\n\t}\n\n\t// build console message as monospace text\n\taddMonospaceText(text: string) {\n\t\tthis.addText(text, monospaceTextStyles);\n\t\treturn this;\n\t}\n\n\t// print message to console depending on the `ConsoleType`\n\t// the last function call in the chain\n\tprintMessage(consoleType = ConsoleType.Warning) {\n\t\tconst messageArray = [this.message, ...this.styles];\n\n\t\t// pass array of arguments into the console function for printing depending on `consoleType`\n\t\t// the `function.apply()` function handles array of arguments which allows list of arguments to be set programmatically\n\t\tswitch (consoleType) {\n\t\t\tcase ConsoleType.Error:\n\t\t\t\tconsole.error.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tcase ConsoleType.Info:\n\t\t\t\tconsole.info.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tcase ConsoleType.Warning:\n\t\t\t\tconsole.warn.apply(null, messageArray);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tconsole.log.apply(null, messageArray);\n\t\t}\n\t}\n\n\t// add text to the `message` property and associated styles into the `styles` array\n\tprivate addText(text: string, style: string) {\n\t\tif (text && text?.trim().length > 0) {\n\t\t\tthis.message += addSpecifier(text);\n\t\t\tthis.styles.push(style);\n\t\t}\n\t}\n}\n"],"version":3}