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

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

@@ -1,109 +1,135 @@
 import { h } from '@stencil/core';
-import { CardTypes, HeaderTypes } from './ontario-card-types';
+import { HeaderColours, Layouts } from './ontario-card-types';
 import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
 import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { printArray } from '../../utils/helper/utils';
 export class OntarioCard {
 	constructor() {
 		this.label = undefined;
 		this.image = undefined;
 		this.description = undefined;
 		this.cardLink = undefined;
-		this.cardType = 'basic';
-		this.headerType = 'default';
+		this.layout = 'vertical';
+		this.headerColour = undefined;
 		this.horizontalImagePositionType = 'left';
 		this.horizontalImageSizeType = 'one-third';
 		this.ariaLabelText = undefined;
-		this.cardTypeState = undefined;
-		this.headerTypeState = undefined;
+		this.layoutState = undefined;
 	}
 	/**
-	 * Watch for changes to the `cardType` property for validation purposes.
+	 * Watch for changes to the `layout` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).
-	 * If a match is found in one of the array values then `cardType` will be set to the matching array key value.
+	 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
+	 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
 	 */
-	validateCardType() {
-		const isValid = validateValueAgainstArray(this.cardType, CardTypes);
-		if (isValid) {
-			this.cardTypeState = this.cardType;
-		} else {
-			this.cardTypeState = this.warnDefaultCardType();
+	validateLayout() {
+		if (this.layout) {
+			const isValid = validateValueAgainstArray(this.layout, Layouts);
+			if (isValid) {
+				this.layoutState = this.layout;
+			} else {
+				this.warnDefaultLayout();
+				this.layoutState = 'vertical';
+			}
 		}
 	}
 	/**
-	 * Watch for changes to the `headerType` property for validation purposes.
+	 * Watch for changes to the `headerColour` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).
-	 * If a match is found in one of the array values then `headerType` will be set to the matching array key value.
+	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+	 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 	 */
-	validateHeaderType() {
-		const isValid = validateValueAgainstArray(this.headerType, HeaderTypes);
-		if (isValid) {
-			this.headerTypeState = this.headerType;
-		} else {
-			this.headerTypeState = this.warnDefaultHeaderType();
+	validateHeaderColour() {
+		if (this.headerColour) {
+			const isValid = validateValueAgainstArray(this.headerColour, HeaderColours);
+			if (!isValid) {
+				this.warnDefaultHeaderColour();
+				this.headerColour = '';
+			}
 		}
 	}
 	/**
-	 * Print the invalid `cardType` prop warning message.
-	 * @returns default type (basic).
+	 * Print the invalid `layout` prop warning message.
 	 */
-	warnDefaultCardType() {
+	warnDefaultLayout() {
 		const message = new ConsoleMessageClass();
 		message
 			.addDesignSystemTag()
-			.addMonospaceText(' card-type ')
+			.addMonospaceText(' layout ')
 			.addRegularText('on')
 			.addMonospaceText(' <ontario-card> ')
-			.addRegularText('was set to an invalid type; only')
-			.addMonospaceText(' basic, image, label, horizontal ')
-			.addRegularText('are supported. The default type')
-			.addMonospaceText(' basic ')
+			.addRegularText('was set to an invalid layout; only ')
+			.addMonospaceText(printArray([...Layouts]))
+			.addRegularText(' are supported. The default layout')
+			.addMonospaceText(' vertical ')
 			.addRegularText('is assumed.')
 			.printMessage();
-		return 'basic';
 	}
 	/**
-	 * Print the invalid `headerType` prop warning message.
-	 * @returns default type (default).
+	 * Print the invalid `headerColour` prop warning message.
 	 */
-	warnDefaultHeaderType() {
+	warnDefaultHeaderColour() {
 		const message = new ConsoleMessageClass();
 		message
 			.addDesignSystemTag()
-			.addMonospaceText(' header-type ')
+			.addMonospaceText(' header-colour ')
 			.addRegularText('on')
 			.addMonospaceText(' <ontario-card> ')
-			.addRegularText('was set to an invalid type; only')
-			.addMonospaceText(' default, light, dark')
-			.addRegularText('are supported. The default type')
-			.addMonospaceText(' default ')
-			.addRegularText('is assumed.')
+			.addRegularText('was set to an invalid colour; only ')
+			.addMonospaceText(printArray([...HeaderColours]))
+			.addRegularText(' are supported. ')
+			.addRegularText('No colour is assumed as the default.')
 			.printMessage();
-		return 'default';
 	}
 	/**
-	 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
+	 * Returns the top level classes of the card.
+	 *
+	 * @returns {string}
 	 */
-	getClass() {
-		if (this.cardTypeState === 'horizontal') {
-			return `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`;
-		} else {
-			// Return other classes when cardTypeState is not 'horizontal'
-			return `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;
-		}
+	getCardClasses() {
+		const baseClass =
+			this.layoutState === 'horizontal'
+				? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+				: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;
+		const descriptionClass = this.description ? '' : ' ontario-card__description-false';
+		const backgroundClass =
+			this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
+		return `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();
 	}
+	/**
+	 * Returns the heading classes of the card.
+	 *
+	 * @returns {string}
+	 */
+	getCardHeadingClasses() {
+		const baseClass = 'ontario-card__heading';
+		const backgroundClass =
+			this.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)
+				? `ontario-card__heading--${this.headerColour}`
+				: '';
+		return `${baseClass} ${backgroundClass}`.trim();
+	}
+	/**
+	 * Returns the url that the card links to.
+	 *
+	 * @returns {string}
+	 */
 	getHref() {
 		return this.cardLink ? this.cardLink : '#';
 	}
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	componentWillLoad() {
-		this.validateCardType();
-		this.validateHeaderType();
+		this.validateLayout();
+		this.validateHeaderColour();
 	}
 	render() {
 		return h(
 			'li',
-			{ key: '00b148bc48fab4a103f88f3e8b60251c1b77f1e0', class: this.getClass() },
+			{ key: 'e63b893390ea13ee21a2d47f7ef6c9b403c4d044', class: this.getCardClasses() },
 			this.image &&
 				h(
 					'div',
@@ -117,16 +143,16 @@ export class OntarioCard {
 			h(
 				'div',
 				{
-					key: '9cef298a65f2b17ccd540e9d74efb3a77685d723',
+					key: 'b6f0a2218840a76baf9c803c3f155733a00ee029',
 					class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 				},
 				h(
 					'h2',
-					{ key: '3f008a11081c8314be2a99e4190b744e75db3f62', class: 'ontario-card__heading' },
+					{ key: '063dc227db00f3faecec029dc82f5478910b65be', class: this.getCardHeadingClasses() },
 					h(
 						'a',
 						{
-							'key': '81d9fcfc1fada5f6dfb7e90c466dfb8fe4bdf618',
+							'key': 'debb40036a708ad1a1852a85fa35db2d5f1e23cc',
 							'href': this.getHref(),
 							'aria-label': this.ariaLabelText,
 						},
@@ -228,53 +254,52 @@ export class OntarioCard {
 				attribute: 'card-link',
 				reflect: false,
 			},
-			cardType: {
+			layout: {
 				type: 'string',
 				mutable: false,
 				complexType: {
-					original: 'CardType',
-					resolved: '"basic" | "horizontal" | "image" | "title"',
+					original: 'Layout',
+					resolved: '"horizontal" | "vertical" | undefined',
 					references: {
-						CardType: {
+						Layout: {
 							location: 'import',
 							path: './ontario-card-types',
-							id: 'src/components/ontario-card/ontario-card-types.tsx::CardType',
+							id: 'src/components/ontario-card/ontario-card-types.tsx::Layout',
 						},
 					},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
-					text: "The type of card to render.\n\nIf no type is passed, it will default to 'basic'.",
+					text: "The layout oritnetation of the card.\n\nIf no type is passed, it will default to 'vertical'.",
 				},
-				attribute: 'card-type',
+				attribute: 'layout',
 				reflect: false,
-				defaultValue: "'basic'",
+				defaultValue: "'vertical'",
 			},
-			headerType: {
+			headerColour: {
 				type: 'string',
 				mutable: false,
 				complexType: {
-					original: 'HeaderType',
-					resolved: '"dark" | "default" | "light"',
+					original: 'HeaderColour',
+					resolved: 'string | undefined',
 					references: {
-						HeaderType: {
+						HeaderColour: {
 							location: 'import',
 							path: './ontario-card-types',
-							id: 'src/components/ontario-card/ontario-card-types.tsx::HeaderType',
+							id: 'src/components/ontario-card/ontario-card-types.tsx::HeaderColour',
 						},
 					},
 				},
 				required: false,
-				optional: false,
+				optional: true,
 				docs: {
 					tags: [],
-					text: "The type of header to render.\n\nIf no type is passed, it will default to 'default'.",
+					text: "Set the card's header colour.\n\nThis is optional.",
 				},
-				attribute: 'header-type',
+				attribute: 'header-colour',
 				reflect: false,
-				defaultValue: "'default'",
 			},
 			horizontalImagePositionType: {
 				type: 'string',
@@ -355,8 +380,7 @@ export class OntarioCard {
 	}
 	static get states() {
 		return {
-			cardTypeState: {},
-			headerTypeState: {},
+			layoutState: {},
 		};
 	}
 	static get elementRef() {
@@ -365,12 +389,12 @@ export class OntarioCard {
 	static get watchers() {
 		return [
 			{
-				propName: 'cardType',
-				methodName: 'validateCardType',
+				propName: 'layout',
+				methodName: 'validateLayout',
 			},
 			{
-				propName: 'headerType',
-				methodName: 'validateHeaderType',
+				propName: 'headerColour',
+				methodName: 'validateHeaderColour',
 			},
 		];
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"ontario-card.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tCardType,\n\tCardTypes,\n\tHeaderType,\n\tHeaderTypes,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The type of card to render.\n\t *\n\t * If no type is passed, it will default to 'basic'.\n\t *\n\t */\n\t@Prop() cardType: CardType = 'basic';\n\n\t/**\n\t * The type of header to render.\n\t *\n\t * If no type is passed, it will default to 'default'.\n\t */\n\t@Prop() headerType: HeaderType = 'default';\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's type depending on validation result.\n\t */\n\t@State() private cardTypeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's header type depending on validation result.\n\t */\n\t@State() private headerTypeState: string;\n\n\t/**\n\t * Watch for changes to the `cardType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).\n\t * If a match is found in one of the array values then `cardType` will be set to the matching array key value.\n\t */\n\t@Watch('cardType')\n\tvalidateCardType() {\n\t\tconst isValid = validateValueAgainstArray(this.cardType, CardTypes);\n\t\tif (isValid) {\n\t\t\tthis.cardTypeState = this.cardType;\n\t\t} else {\n\t\t\tthis.cardTypeState = this.warnDefaultCardType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).\n\t * If a match is found in one of the array values then `headerType` will be set to the matching array key value.\n\t */\n\t@Watch('headerType')\n\tvalidateHeaderType() {\n\t\tconst isValid = validateValueAgainstArray(this.headerType, HeaderTypes);\n\t\tif (isValid) {\n\t\t\tthis.headerTypeState = this.headerType;\n\t\t} else {\n\t\t\tthis.headerTypeState = this.warnDefaultHeaderType();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `cardType` prop warning message.\n\t * @returns default type (basic).\n\t */\n\tprivate warnDefaultCardType(): CardType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' card-type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' basic, image, label, horizontal ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' basic ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'basic';\n\t}\n\n\t/**\n\t * Print the invalid `headerType` prop warning message.\n\t * @returns default type (default).\n\t */\n\tprivate warnDefaultHeaderType(): HeaderType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' default, light, dark')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' default ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'default';\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and `headerType`.\n\t */\n\tprivate getClass() {\n\t\tif (this.cardTypeState === 'horizontal') {\n\t\t\treturn `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`;\n\t\t} else {\n\t\t\t// Return other classes when cardTypeState is not 'horizontal'\n\t\t\treturn `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;\n\t\t}\n\t}\n\n\tprivate getHref() {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardType();\n\t\tthis.validateHeaderType();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getClass()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class=\"ontario-card__heading\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-card.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/**\n\t * Component life cycle hook.\n\t *\n\t * https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateLayout();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t<h2 class={this.getCardHeadingClasses()}>\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</h2>\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-card/test/ontario-cards.spec.js

@@ -6,19 +6,29 @@ describe('ontario-card', () => {
 			components: [OntarioCard],
 			html: `<ontario-card></ontario-card>`,
 		});
-		expect(page.root).toEqualHtml(`
-      <ontario-card>
-				<mock:shadow-root>
-					<li class="ontario-card ontario-card__card-type--basic ontario-card__header-type--default">
-						<div class="ontario-card__text-container">
-							<h2 class="ontario-card__heading">
-								<a href="#"></a>
-							</h2>
-						</div>
-					</li>
-				</mock:shadow-root>
-      </ontario-card>
-    `);
+		expect(page.root).toMatchSnapshot();
 	});
+	it('should render a label', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card label="Card Title 1"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('should render a header colour on the label', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card label="Card Title 1" header-colour="sky"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('should render a description', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card description="Lorem ipsum"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	// Don't think we can test images unless we point to a local path
 });
 //# sourceMappingURL=ontario-cards.spec.js.map

package/dist/collection/components/ontario-card/test/ontario-cards.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-cards.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-card/test/ontario-cards.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACxB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,+BAA+B;SACrC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY3B,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioCard } from '../ontario-card';\n\ndescribe('ontario-card', () => {\n\tit('renders', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCard],\n\t\t\thtml: `<ontario-card></ontario-card>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n      <ontario-card>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<li class=\"ontario-card ontario-card__card-type--basic ontario-card__header-type--default\">\n\t\t\t\t\t\t<div class=\"ontario-card__text-container\">\n\t\t\t\t\t\t\t<h2 class=\"ontario-card__heading\">\n\t\t\t\t\t\t\t\t<a href=\"#\"></a>\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t</mock:shadow-root>\n      </ontario-card>\n    `);\n\t});\n});\n"]}
+{"version":3,"file":"ontario-cards.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-card/test/ontario-cards.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACxB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,+BAA+B;SACrC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,oDAAoD;SAC1D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,wEAAwE;SAC9E,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC5C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,yDAAyD;SAC/D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,iEAAiE;AAClE,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioCard } from '../ontario-card';\n\ndescribe('ontario-card', () => {\n\tit('renders', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCard],\n\t\t\thtml: `<ontario-card></ontario-card>`,\n\t\t});\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('should render a label', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCard],\n\t\t\thtml: `<ontario-card label=\"Card Title 1\"></ontario-card>`,\n\t\t});\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('should render a header colour on the label', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCard],\n\t\t\thtml: `<ontario-card label=\"Card Title 1\" header-colour=\"sky\"></ontario-card>`,\n\t\t});\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('should render a description', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioCard],\n\t\t\thtml: `<ontario-card description=\"Lorem ipsum\"></ontario-card>`,\n\t\t});\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\t// Don't think we can test images unless we point to a local path\n});\n"]}

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

@@ -111,10 +111,19 @@ export class OntarioHeader {
 		if (this.menuToggle) this.menuToggle = !this.menuToggle;
 	}
 	/**
-	 * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.
+	 * This listens for the `setAppLanguage` event sent from the language toggle when it is is connected to the DOM.
+	 * It is used for the initial language when the input component loads.
 	 */
 	handleSetAppLanguage(event) {
 		this.language = validateLanguage(event);
+		this.parseMenuItems();
+	}
+	/**
+	 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is is connected to the DOM.
+	 * It is used for changing the component language after the language toggle has been activated.
+	 */
+	handleLanguageToggle(event) {
+		this.handleSetAppLanguage(event.detail.newLanguage);
 	}
 	/**
 	 * Call to Ontario Menu API to fetch linksets to populate header component
@@ -407,7 +416,6 @@ export class OntarioHeader {
 											: _b.englishLink,
 									size: 'default',
 									customLanguageToggle: this.customLanguageToggle,
-									language: this.language,
 								}),
 								h(
 									'button',
@@ -539,7 +547,6 @@ export class OntarioHeader {
 											? void 0
 											: _e.englishLink,
 									customLanguageToggle: this.customLanguageToggle,
-									language: this.language,
 								}),
 							),
 						),
@@ -1044,6 +1051,13 @@ export class OntarioHeader {
 				capture: false,
 				passive: false,
 			},
+			{
+				name: 'headerLanguageToggled',
+				method: 'handleLanguageToggle',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
 		];
 	}
 }