npm - @ongov/ontario-design-system-component-library - Versions diffs - 4.3.1-alpha.1 → 5.0.0-alpha.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (163) hide show

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

@@ -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() {
+	getCardClasses() {
 		const baseClass =
-			this.cardTypeState === 'horizontal'
-				? `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
-				: `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;
+			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';
-		return `${baseClass}${descriptionClass}`;
+		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: '606e74cea5d81cd31b355ffb1a71cf7450126cf4', class: this.getClass() },
+			{ key: 'e63b893390ea13ee21a2d47f7ef6c9b403c4d044', class: this.getCardClasses() },
 			this.image &&
 				h(
 					'div',
@@ -117,16 +143,16 @@ export class OntarioCard {
 			h(
 				'div',
 				{
-					key: '7d71d14690d4e75dcf1e4ef5c0198183b27e4b39',
+					key: 'b6f0a2218840a76baf9c803c3f155733a00ee029',
 					class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 				},
 				h(
 					'h2',
-					{ key: '4f6a337efa3986a5023f3c17e869f072aaef0e4f', class: 'ontario-card__heading' },
+					{ key: '063dc227db00f3faecec029dc82f5478910b65be', class: this.getCardHeadingClasses() },
 					h(
 						'a',
 						{
-							'key': '6efece75daafc95e43dca997e895dc88cab9194c',
+							'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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-card.js","sourceRoot":"","sources":["../../../src/components/ontario-card/ontario-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAEN,SAAS,EAET,WAAW,GAGX,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,MAAM,OAAO,WAAW;;;;;;wBA2CM,OAAO;0BAOH,SAAS;2CAkB0B,MAAM;uCAkBd,WAAW;;;;;IAsBvE;;;;;OAKG;IAEH,gBAAgB;QACf,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;QACpE,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACjD,CAAC;IACF,CAAC;IAED;;;;;OAKG;IAEH,kBAAkB;QACjB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;QACxE,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QACxC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACrD,CAAC;IACF,CAAC;IAED;;;OAGG;IACK,mBAAmB;QAC1B,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,aAAa,CAAC;aAC/B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,mCAAmC,CAAC;aACrD,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,SAAS,CAAC;aAC3B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,OAAO,OAAO,CAAC;IAChB,CAAC;IAED;;;OAGG;IACK,qBAAqB;QAC5B,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,eAAe,CAAC;aACjC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,uBAAuB,CAAC;aACzC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,WAAW,CAAC;aAC7B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;QACjB,OAAO,SAAS,CAAC;IAClB,CAAC;IAED;;OAEG;IACK,QAAQ;QACf,MAAM,SAAS,GACd,IAAI,CAAC,aAAa,KAAK,YAAY;YAClC,CAAC,CAAC,wEAAwE,IAAI,CAAC,2BAA2B,6BAA6B,IAAI,CAAC,uBAAuB,EAAE;YACrK,CAAC,CAAC,2CAA2C,IAAI,CAAC,eAAe,6BAA6B,IAAI,CAAC,aAAa,EAAE,CAAC;QAErH,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kCAAkC,CAAC;QAEpF,OAAO,GAAG,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAC1C,CAAC;IAEO,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5C,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM;QACL,OAAO,CACN,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;YACxB,IAAI,CAAC,KAAK,IAAI,CACd,WAAK,KAAK,EAAC,+BAA+B;gBACzC,SAAG,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAc,IAAI,CAAC,aAAa;oBACtD,WAAK,KAAK,EAAC,qBAAqB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,CACjD,CACC,CACN;YACD,4DAAK,KAAK,EAAE,gCAAgC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;gBACzF,2DAAI,KAAK,EAAC,uBAAuB;oBAChC,0DAAG,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAc,IAAI,CAAC,aAAa,IACrD,IAAI,CAAC,KAAK,CACR,CACA;gBACJ,IAAI,CAAC,WAAW,IAAI,CACpB,WAAK,KAAK,EAAC,2BAA2B;oBACrC,aAAI,IAAI,CAAC,WAAW,CAAK,CACpB,CACN,CACI,CACF,CACL,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","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\tconst baseClass =\n\t\t\tthis.cardTypeState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\treturn `${baseClass}${descriptionClass}`;\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"]}
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\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 CHANGED Viewed

@@ -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 ontario-card__description-false">
-						<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 CHANGED Viewed

	@@ -1 +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~~ ~~ontario-card__description-false~~\~~">\~~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"]}
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,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-date-input/test/ontario-date-input.spec.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { OntarioDateInput } from '../ontario-date-input';
+import { isInvalidYear } from '../utils';
 describe('ontario-date-input', () => {
 	it('renders deafult state', async () => {
 		const page = await newSpecPage({
@@ -117,4 +118,61 @@ describe('ontario-date-input', () => {
 		`);
 	});
 });
+describe('date-validation-utils', () => {
+	it('is invalid year value - undefined string', () => {
+		// Note: Type system doesn't like `undefined` as `any` lets us force it for testing purposes
+		const value = undefined;
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+	it('is invalid year value - null string', () => {
+		// Note: Type system doesn't like `null` as `any` lets us force it for testing purposes
+		const value = null;
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+	it('is invalid year value - empty string', () => {
+		const value = ''; // Empty string
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+	it('is invalid year value - written out number', () => {
+		const value = 'two-thousand';
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+	it('is valid year value', () => {
+		const value = '2000';
+		const isValidYear = !isInvalidYear(value);
+		expect(isValidYear).toEqual(true);
+	});
+	it('is valid year when in range', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 9999;
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+	it('is valid year when in range but is minYear', () => {
+		const value = '2000';
+		const minYear = 2000;
+		const maxYear = 9999;
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+	it('is valid year when in range but is maxYear', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 2000;
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+	it('is invalid year when out of range', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 1999;
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(false);
+	});
+});
 //# sourceMappingURL=ontario-date-input.spec.js.map

package/dist/collection/components/ontario-date-input/test/ontario-date-input.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ontario-date-input.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-date-input/test/ontario-date-input.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE,sFAAsF;SAC5F,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgD3B,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;;;;;;;;;;;IAWL;SACD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0C7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioDateInput } from '../ontario-date-input';\n\ndescribe('ontario-date-input', () => {\n\tit('renders deafult state', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioDateInput],\n\t\t\thtml: `<ontario-date-input language=\"en\" element-id=\"date-id-example\"></ontario-date-input>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-date-input element-id=\"date-id-example\" language=\"en\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t<fieldset class=\"ontario-fieldset\" role=\"group\">\n\t\t\t\t\t\t\t<legend class=\"ontario-fieldset__legend\">\n\t\t\t\t\t\t\t\tExact date\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(optional)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</legend>\n\t\t\t\t\t\t\t<div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n\t\t\t\t\t\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t\t\t\t\t\t<div class=\"ontario-error-messaging__content\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"year-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tYear\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"year-date-id-example\" inputmode=\"numeric\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"month-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tMonth\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"month-date-id-example\" inputmode=\"numeric\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"day-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tDay\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(4 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"day-date-id-example\" inputmode=\"numeric\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-date-input>\n `);\n\t});\n\n\tit('should render custom prop', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioDateInput],\n\t\t\thtml: `\n\t\t\t\t<ontario-date-input\n\t\t\t\t\telement-id=\"date-id-example\"\n\t\t\t\t\tplaceholder='{ \"day\": \"D\", \"month\": \"M\", \"year\": \"YY\" }'\n\t\t\t\t\tmin-year=\"500\"\n\t\t\t\t\tmax-year=\"1000\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\thint-text=\"Example 1990 12\"\n\t\t\t\t\tdate-options='[\"month\", \"year\"]'\n\t\t\t\t\tcaption='{ \"captionText\": \"Enter Date\", \"captionType\": \"default\" }'\n\t\t\t\t></ontario-date-input>\n\t\t\t`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-date-input element-id=\"date-id-example\" caption=\"{ "captionText": "Enter Date", "captionType": "default" }\" date-options=\"["month", "year"]\" hint-text=\"Example 1990 12\" max-year=\"1000\" min-year=\"500\" placeholder=\"{ "day": "D", "month": "M", "year": "YY" }\" required=\"true\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t<fieldset class=\"ontario-fieldset\" role=\"group\">\n\t\t\t\t\t\t\t<legend class=\"ontario-fieldset__legend\">\n\t\t\t\t\t\t\t\tEnter Date\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(required)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</legend>\n\t\t\t\t\t\t\t<p class=\"ontario-hint\" id=\"date-input-hint-date-id-example\">\n\t\t\t\t\t\t\t\tExample 1990 12\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n\t\t\t\t\t\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t\t\t\t\t\t<div class=\"ontario-error-messaging__content\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"year-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tYear\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"year-date-id-example\" inputmode=\"numeric\" placeholder=\"YY\" required=\"\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"month-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tMonth\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"month-date-id-example\" inputmode=\"numeric\" placeholder=\"M\" required=\"\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-date-input>\n\t\t`);\n\t});\n});\n"]}
1	+ {"version":3,"file":"ontario-date-input.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-date-input/test/ontario-date-input.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioDateInput } from '../ontario-date-input';\nimport { isInvalidYear } from '../utils';\n\ndescribe('ontario-date-input', () => {\n\tit('renders deafult state', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioDateInput],\n\t\t\thtml: `<ontario-date-input language=\"en\" element-id=\"date-id-example\"></ontario-date-input>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-date-input element-id=\"date-id-example\" language=\"en\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t<fieldset class=\"ontario-fieldset\" role=\"group\">\n\t\t\t\t\t\t\t<legend class=\"ontario-fieldset__legend\">\n\t\t\t\t\t\t\t\tExact date\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(optional)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</legend>\n\t\t\t\t\t\t\t<div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n\t\t\t\t\t\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t\t\t\t\t\t<div class=\"ontario-error-messaging__content\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"year-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tYear\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"year-date-id-example\" inputmode=\"numeric\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"month-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tMonth\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"month-date-id-example\" inputmode=\"numeric\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"day-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tDay\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(4 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"day-date-id-example\" inputmode=\"numeric\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-date-input>\n `);\n\t});\n\n\tit('should render custom prop', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioDateInput],\n\t\t\thtml: `\n\t\t\t\t<ontario-date-input\n\t\t\t\t\telement-id=\"date-id-example\"\n\t\t\t\t\tplaceholder='{ \"day\": \"D\", \"month\": \"M\", \"year\": \"YY\" }'\n\t\t\t\t\tmin-year=\"500\"\n\t\t\t\t\tmax-year=\"1000\"\n\t\t\t\t\trequired=\"true\"\n\t\t\t\t\thint-text=\"Example 1990 12\"\n\t\t\t\t\tdate-options='[\"month\", \"year\"]'\n\t\t\t\t\tcaption='{ \"captionText\": \"Enter Date\", \"captionType\": \"default\" }'\n\t\t\t\t></ontario-date-input>\n\t\t\t`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-date-input element-id=\"date-id-example\" caption=\"{ "captionText": "Enter Date", "captionType": "default" }\" date-options=\"["month", "year"]\" hint-text=\"Example 1990 12\" max-year=\"1000\" min-year=\"500\" placeholder=\"{ "day": "D", "month": "M", "year": "YY" }\" required=\"true\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t<fieldset class=\"ontario-fieldset\" role=\"group\">\n\t\t\t\t\t\t\t<legend class=\"ontario-fieldset__legend\">\n\t\t\t\t\t\t\t\tEnter Date\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(required)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</legend>\n\t\t\t\t\t\t\t<p class=\"ontario-hint\" id=\"date-input-hint-date-id-example\">\n\t\t\t\t\t\t\t\tExample 1990 12\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n\t\t\t\t\t\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t\t\t\t\t\t<div class=\"ontario-error-messaging__content\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"year-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tYear\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"year-date-id-example\" inputmode=\"numeric\" placeholder=\"YY\" required=\"\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-date__group-input\">\n\t\t\t\t\t\t\t\t\t<label htmlfor=\"month-date-id-example\">\n\t\t\t\t\t\t\t\t\t\tMonth\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t\t(1 or 2 digits)\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<input aria-describedby=\"date-input-hint-date-id-example\" class=\"ontario-input ontario-input--4-char-width\" id=\"month-date-id-example\" inputmode=\"numeric\" placeholder=\"M\" required=\"\" type=\"text\">\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</fieldset>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-date-input>\n\t\t`);\n\t});\n});\n\ndescribe('date-validation-utils', () => {\n\tit('is invalid year value - undefined string', () => {\n\t\t// Note: Type system doesn't like `undefined` as `any` lets us force it for testing purposes\n\t\tconst value: any = undefined;\n\n\t\tconst isInvalidYearResult = isInvalidYear(value);\n\t\texpect(isInvalidYearResult).toEqual(true);\n\t});\n\n\tit('is invalid year value - null string', () => {\n\t\t// Note: Type system doesn't like `null` as `any` lets us force it for testing purposes\n\t\tconst value: any = null;\n\n\t\tconst isInvalidYearResult = isInvalidYear(value);\n\t\texpect(isInvalidYearResult).toEqual(true);\n\t});\n\n\tit('is invalid year value - empty string', () => {\n\t\tconst value = ''; // Empty string\n\n\t\tconst isInvalidYearResult = isInvalidYear(value);\n\t\texpect(isInvalidYearResult).toEqual(true);\n\t});\n\n\tit('is invalid year value - written out number', () => {\n\t\tconst value = 'two-thousand';\n\n\t\tconst isInvalidYearResult = isInvalidYear(value);\n\t\texpect(isInvalidYearResult).toEqual(true);\n\t});\n\n\tit('is valid year value', () => {\n\t\tconst value = '2000';\n\n\t\tconst isValidYear = !isInvalidYear(value);\n\t\texpect(isValidYear).toEqual(true);\n\t});\n\n\tit('is valid year when in range', () => {\n\t\tconst value = '2000';\n\t\tconst minYear = 1;\n\t\tconst maxYear = 9999;\n\n\t\tconst isValidYear = !isInvalidYear(value, minYear, maxYear);\n\t\texpect(isValidYear).toEqual(true);\n\t});\n\n\tit('is valid year when in range but is minYear', () => {\n\t\tconst value = '2000';\n\t\tconst minYear = 2000;\n\t\tconst maxYear = 9999;\n\n\t\tconst isValidYear = !isInvalidYear(value, minYear, maxYear);\n\t\texpect(isValidYear).toEqual(true);\n\t});\n\n\tit('is valid year when in range but is maxYear', () => {\n\t\tconst value = '2000';\n\t\tconst minYear = 1;\n\t\tconst maxYear = 2000;\n\n\t\tconst isValidYear = !isInvalidYear(value, minYear, maxYear);\n\t\texpect(isValidYear).toEqual(true);\n\t});\n\n\tit('is invalid year when out of range', () => {\n\t\tconst value = '2000';\n\t\tconst minYear = 1;\n\t\tconst maxYear = 1999;\n\n\t\tconst isValidYear = !isInvalidYear(value, minYear, maxYear);\n\t\texpect(isValidYear).toEqual(false);\n\t});\n});\n"]}

package/dist/collection/components/ontario-date-input/utils/date-validation-utils.js CHANGED Viewed

@@ -27,15 +27,25 @@ const isInvalidMonth = (value) => {
 	const month = Number(value);
 	return month < MONTH_MIN_VALUE || month > MONTH_MAX_VALUE;
 };
-/*
- * Year field should be a number, not negative, at length at least 4 digits
+/**
+ * Valid value year against minimum and maximum year range (defaulted if not provided.)
+ *
+ * Year field should be a number and not written out; it has no concept of positive and negative.
+ *
+ * Suggestion:
+ * - `< 0` B.C.E.
+ * - `>= 0` A.C.E.
+ *
+ * @param value value to check for validity
+ * @param minYear minimum valid year to validate against
+ * @param maxYear maximum valid year to validate against
  */
-const isInvalidYear = (value, minYear = YEAR_MIN_VALUE, maxYear = YEAR_MAX_VALUE) => {
+export const isInvalidYear = (value, minYear = YEAR_MIN_VALUE, maxYear = YEAR_MAX_VALUE) => {
 	if (!isNumber(value)) {
 		return true;
 	}
 	const year = Number(value);
-	return year <= minYear || year > maxYear;
+	return year < minYear || year > maxYear;
 };
 /**
  * Helper function to get error message for birthdate validation

package/dist/collection/components/ontario-date-input/utils/date-validation-utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-validation-utils.js","sourceRoot":"","sources":["../../../../src/components/ontario-date-input/utils/date-validation-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,aAAa,EACb,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,GACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;GAEG;AACH,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;IACtC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO,GAAG,GAAG,aAAa,IAAI,GAAG,GAAG,aAAa,CAAC;AACnD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;IACxC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO,KAAK,GAAG,eAAe,IAAI,KAAK,GAAG,eAAe,CAAC;AAC3D,CAAC,CAAC;AAEF~~;;GAEG~~;AACH,MAAM,aAAa,GAAG,~~CAAC~~,~~KAAa~~,~~EAAE~~,UAAkB,cAAc,~~EAAE~~,UAAkB,cAAc,~~EAAE~~,EAAE;~~IAC3G~~,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE3B,OAAO,IAAI,~~IAAI~~,OAAO,IAAI,IAAI,GAAG,OAAO,CAAC;~~AAC1C~~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","sourcesContent":["import {\n\tDAY_MIN_VALUE,\n\tDAY_MAX_VALUE,\n\tMONTH_MIN_VALUE,\n\tMONTH_MAX_VALUE,\n\tYEAR_MIN_VALUE,\n\tYEAR_MAX_VALUE,\n} from '../constants';\nimport { DateValidatorReturnType } from '../ontario-date-input-interface';\nimport { isNumber, isEmpty } from '../../../utils/helper/utils';\nimport { Translations } from '../../../translations';\n/\n Day field should be a number, not negative, no greater than “31”\n /\nconst isInvalidDay = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst day = Number(value);\n\n\treturn day < DAY_MIN_VALUE \|\| day > DAY_MAX_VALUE;\n};\n\n/\n * Month field should be a number, not negative, no greater than “12”\n /\nconst isInvalidMonth = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst month = Number(value);\n\n\treturn month < MONTH_MIN_VALUE \|\| month > MONTH_MAX_VALUE;\n};\n\n~~/\~~n * Year field should be a number, not negative, at ~~length~~ at ~~least~~ 4 ~~digits~~\n /\~~nconst~~ isInvalidYear = (~~value~~: string, ~~minYear~~: number = YEAR_MIN_VALUE~~, maxYear~~: number = YEAR_MAX_VALUE) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst year = Number(value);\n\n\treturn year <= minYear \|\| year > maxYear;\n};\n\ntype GetDateErrorArg = {\n\tdayValue: string;\n\tmonthValue: string;\n\tyearValue: string;\n\terrorMessages: Translations['dateInput']['error']['en'];\n\tminYear?: number;\n\tmaxYear?: number;\n\tdayVisible: boolean;\n\tmonthVisible: boolean;\n\tyearVisible: boolean;\n};\n/\n Helper function to get error message for birthdate validation\n /\nexport const getDateErrorMessage = ({\n\tdayValue,\n\tmonthValue,\n\tyearValue,\n\terrorMessages,\n\tminYear,\n\tmaxYear,\n\tdayVisible,\n\tmonthVisible,\n\tyearVisible,\n}: GetDateErrorArg): DateValidatorReturnType => {\n\tconst {\n\t\temptyDay,\n\t\temptyMonth,\n\t\temptyYear,\n\t\temptyDayAndMonth,\n\t\temptyDayAndYear,\n\t\temptyMonthAndYear,\n\t\tinvalidDate,\n\t\tinvalidDay,\n\t\tinvalidMonth,\n\t\tinvalidYear,\n\t} = errorMessages;\n\n\tlet error = '';\n\tlet dayInvalid = false;\n\tlet monthInvalid = false;\n\tlet yearInvalid = false;\n\n\tconst isDayEmpty = dayVisible && isEmpty(dayValue);\n\tconst isMonthEmpty = monthVisible && isEmpty(monthValue);\n\tconst isYearEmpty = yearVisible && isEmpty(yearValue);\n\t/\n\t * If one ore more fields are valid but others are empty:\n\t * 1 field empty:\n\t * Day as empty - “Enter the day.”\n\t * Month as empty - “Enter the month.”\n\t * Year as empty - “Enter the year.”\n\t * 2 fields empty:\n\t * Month and day empty - “Enter the month and day.”\n\t * Year and day empty - “Enter the year and day.”\n\t * Year and month empty - “Enter the year and month.”\n\t /\n\tif (isDayEmpty && isMonthEmpty && isYearEmpty) {\n\t\terror = invalidDate;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isDayEmpty && isMonthEmpty) {\n\t\terror = emptyDayAndMonth;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty && isYearEmpty) {\n\t\terror = emptyDayAndYear;\n\t\tdayInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isMonthEmpty && isYearEmpty) {\n\t\terror = emptyMonthAndYear;\n\t\tyearInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty) {\n\t\terror = emptyDay;\n\t\tdayInvalid = true;\n\t} else if (isMonthEmpty) {\n\t\terror = emptyMonth;\n\t\tmonthInvalid = true;\n\t} else if (isYearEmpty) {\n\t\terror = emptyYear;\n\t\tyearInvalid = true;\n\t}\n\n\tconst isDayInvalid = dayVisible && isInvalidDay(dayValue);\n\tconst isMonthInvalid = monthVisible && isInvalidMonth(monthValue);\n\tconst isYearInvalid = yearVisible && isInvalidYear(yearValue, minYear, maxYear);\n\t/\n\t * If only one error, specify where the error occurs\n\t * E.g. “Enter a valid day.”, “Enter a valid month.” Or “Enter a valid year.”\n\t * If 2 or more fields have error (or all 3), say “Enter a valid date.”\n\t * If one or more fields are invalid but the others are empty say: “Enter a valid date.”\n\t */\n\tif (isEmpty(error)) {\n\t\tif (isDayInvalid && isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isDayInvalid && isMonthInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isYearInvalid) {\n\t\t\terror = invalidYear;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid) {\n\t\t\terror = invalidMonth;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid) {\n\t\t\terror = invalidDay;\n\t\t\tdayInvalid = true;\n\t\t}\n\t}\n\n\treturn { errorMessage: error, dayInvalid, monthInvalid, yearInvalid };\n};\n"]}
1	+ {"version":3,"file":"date-validation-utils.js","sourceRoot":"","sources":["../../../../src/components/ontario-date-input/utils/date-validation-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,aAAa,EACb,eAAe,EACf,eAAe,EACf,cAAc,EACd,cAAc,GACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAEhE;;GAEG;AACH,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;IACtC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1B,OAAO,GAAG,GAAG,aAAa,IAAI,GAAG,GAAG,aAAa,CAAC;AACnD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;IACxC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE5B,OAAO,KAAK,GAAG,eAAe,IAAI,KAAK,GAAG,eAAe,CAAC;AAC3D,CAAC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAC5B,KAAsB,EACtB,UAAkB,cAAc,EAChC,UAAkB,cAAc,EAC/B,EAAE;IACH,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAE3B,OAAO,IAAI,GAAG,OAAO,IAAI,IAAI,GAAG,OAAO,CAAC;AACzC,CAAC,CAAC;AAaF;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EACnC,QAAQ,EACR,UAAU,EACV,SAAS,EACT,aAAa,EACb,OAAO,EACP,OAAO,EACP,UAAU,EACV,YAAY,EACZ,WAAW,GACM,EAA2B,EAAE;IAC9C,MAAM,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,YAAY,EACZ,WAAW,GACX,GAAG,aAAa,CAAC;IAElB,IAAI,KAAK,GAAG,EAAE,CAAC;IACf,IAAI,UAAU,GAAG,KAAK,CAAC;IACvB,IAAI,YAAY,GAAG,KAAK,CAAC;IACzB,IAAI,WAAW,GAAG,KAAK,CAAC;IAExB,MAAM,UAAU,GAAG,UAAU,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,YAAY,IAAI,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,MAAM,WAAW,GAAG,WAAW,IAAI,OAAO,CAAC,SAAS,CAAC,CAAC;IACtD;;;;;;;;;;OAUG;IACH,IAAI,UAAU,IAAI,YAAY,IAAI,WAAW,EAAE,CAAC;QAC/C,KAAK,GAAG,WAAW,CAAC;QACpB,UAAU,GAAG,IAAI,CAAC;QAClB,YAAY,GAAG,IAAI,CAAC;QACpB,WAAW,GAAG,IAAI,CAAC;IACpB,CAAC;SAAM,IAAI,UAAU,IAAI,YAAY,EAAE,CAAC;QACvC,KAAK,GAAG,gBAAgB,CAAC;QACzB,UAAU,GAAG,IAAI,CAAC;QAClB,YAAY,GAAG,IAAI,CAAC;IACrB,CAAC;SAAM,IAAI,UAAU,IAAI,WAAW,EAAE,CAAC;QACtC,KAAK,GAAG,eAAe,CAAC;QACxB,UAAU,GAAG,IAAI,CAAC;QAClB,WAAW,GAAG,IAAI,CAAC;IACpB,CAAC;SAAM,IAAI,YAAY,IAAI,WAAW,EAAE,CAAC;QACxC,KAAK,GAAG,iBAAiB,CAAC;QAC1B,WAAW,GAAG,IAAI,CAAC;QACnB,YAAY,GAAG,IAAI,CAAC;IACrB,CAAC;SAAM,IAAI,UAAU,EAAE,CAAC;QACvB,KAAK,GAAG,QAAQ,CAAC;QACjB,UAAU,GAAG,IAAI,CAAC;IACnB,CAAC;SAAM,IAAI,YAAY,EAAE,CAAC;QACzB,KAAK,GAAG,UAAU,CAAC;QACnB,YAAY,GAAG,IAAI,CAAC;IACrB,CAAC;SAAM,IAAI,WAAW,EAAE,CAAC;QACxB,KAAK,GAAG,SAAS,CAAC;QAClB,WAAW,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,MAAM,YAAY,GAAG,UAAU,IAAI,YAAY,CAAC,QAAQ,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,YAAY,IAAI,cAAc,CAAC,UAAU,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,WAAW,IAAI,aAAa,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IAChF;;;;;OAKG;IACH,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACpB,IAAI,YAAY,IAAI,cAAc,IAAI,aAAa,EAAE,CAAC;YACrD,KAAK,GAAG,WAAW,CAAC;YACpB,UAAU,GAAG,IAAI,CAAC;YAClB,YAAY,GAAG,IAAI,CAAC;YACpB,WAAW,GAAG,IAAI,CAAC;QACpB,CAAC;aAAM,IAAI,YAAY,IAAI,cAAc,EAAE,CAAC;YAC3C,KAAK,GAAG,WAAW,CAAC;YACpB,UAAU,GAAG,IAAI,CAAC;YAClB,YAAY,GAAG,IAAI,CAAC;QACrB,CAAC;aAAM,IAAI,YAAY,IAAI,aAAa,EAAE,CAAC;YAC1C,KAAK,GAAG,WAAW,CAAC;YACpB,UAAU,GAAG,IAAI,CAAC;YAClB,WAAW,GAAG,IAAI,CAAC;QACpB,CAAC;aAAM,IAAI,cAAc,IAAI,aAAa,EAAE,CAAC;YAC5C,KAAK,GAAG,WAAW,CAAC;YACpB,YAAY,GAAG,IAAI,CAAC;YACpB,WAAW,GAAG,IAAI,CAAC;QACpB,CAAC;aAAM,IAAI,aAAa,EAAE,CAAC;YAC1B,KAAK,GAAG,WAAW,CAAC;YACpB,WAAW,GAAG,IAAI,CAAC;QACpB,CAAC;aAAM,IAAI,cAAc,EAAE,CAAC;YAC3B,KAAK,GAAG,YAAY,CAAC;YACrB,YAAY,GAAG,IAAI,CAAC;QACrB,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACzB,KAAK,GAAG,UAAU,CAAC;YACnB,UAAU,GAAG,IAAI,CAAC;QACnB,CAAC;IACF,CAAC;IAED,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC;AACvE,CAAC,CAAC","sourcesContent":["import {\n\tDAY_MIN_VALUE,\n\tDAY_MAX_VALUE,\n\tMONTH_MIN_VALUE,\n\tMONTH_MAX_VALUE,\n\tYEAR_MIN_VALUE,\n\tYEAR_MAX_VALUE,\n} from '../constants';\nimport { DateValidatorReturnType } from '../ontario-date-input-interface';\nimport { isNumber, isEmpty } from '../../../utils/helper/utils';\nimport { Translations } from '../../../translations';\n/\n Day field should be a number, not negative, no greater than “31”\n /\nconst isInvalidDay = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst day = Number(value);\n\n\treturn day < DAY_MIN_VALUE \|\| day > DAY_MAX_VALUE;\n};\n\n/\n * Month field should be a number, not negative, no greater than “12”\n /\nconst isInvalidMonth = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst month = Number(value);\n\n\treturn month < MONTH_MIN_VALUE \|\| month > MONTH_MAX_VALUE;\n};\n\n/\n Valid value year against minimum and maximum year range (defaulted if not provided.)\n \n Year field should be a number and not written out; it has no concept of positive and negative.\n \n Suggestion:\n * - `< 0` B.C.E.\n * - `>= 0` A.C.E.\n \n @param value value to check for validity\n * @param minYear minimum valid year to validate against\n * @param maxYear maximum valid year to validate against\n /\nexport const isInvalidYear = (\n\tvalue: string \| number,\n\tminYear: number = YEAR_MIN_VALUE,\n\tmaxYear: number = YEAR_MAX_VALUE,\n) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst year = Number(value);\n\n\treturn year < minYear \|\| year > maxYear;\n};\n\ntype GetDateErrorArg = {\n\tdayValue: string;\n\tmonthValue: string;\n\tyearValue: string;\n\terrorMessages: Translations['dateInput']['error']['en'];\n\tminYear?: number;\n\tmaxYear?: number;\n\tdayVisible: boolean;\n\tmonthVisible: boolean;\n\tyearVisible: boolean;\n};\n/\n Helper function to get error message for birthdate validation\n /\nexport const getDateErrorMessage = ({\n\tdayValue,\n\tmonthValue,\n\tyearValue,\n\terrorMessages,\n\tminYear,\n\tmaxYear,\n\tdayVisible,\n\tmonthVisible,\n\tyearVisible,\n}: GetDateErrorArg): DateValidatorReturnType => {\n\tconst {\n\t\temptyDay,\n\t\temptyMonth,\n\t\temptyYear,\n\t\temptyDayAndMonth,\n\t\temptyDayAndYear,\n\t\temptyMonthAndYear,\n\t\tinvalidDate,\n\t\tinvalidDay,\n\t\tinvalidMonth,\n\t\tinvalidYear,\n\t} = errorMessages;\n\n\tlet error = '';\n\tlet dayInvalid = false;\n\tlet monthInvalid = false;\n\tlet yearInvalid = false;\n\n\tconst isDayEmpty = dayVisible && isEmpty(dayValue);\n\tconst isMonthEmpty = monthVisible && isEmpty(monthValue);\n\tconst isYearEmpty = yearVisible && isEmpty(yearValue);\n\t/\n\t * If one ore more fields are valid but others are empty:\n\t * 1 field empty:\n\t * Day as empty - “Enter the day.”\n\t * Month as empty - “Enter the month.”\n\t * Year as empty - “Enter the year.”\n\t * 2 fields empty:\n\t * Month and day empty - “Enter the month and day.”\n\t * Year and day empty - “Enter the year and day.”\n\t * Year and month empty - “Enter the year and month.”\n\t /\n\tif (isDayEmpty && isMonthEmpty && isYearEmpty) {\n\t\terror = invalidDate;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isDayEmpty && isMonthEmpty) {\n\t\terror = emptyDayAndMonth;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty && isYearEmpty) {\n\t\terror = emptyDayAndYear;\n\t\tdayInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isMonthEmpty && isYearEmpty) {\n\t\terror = emptyMonthAndYear;\n\t\tyearInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty) {\n\t\terror = emptyDay;\n\t\tdayInvalid = true;\n\t} else if (isMonthEmpty) {\n\t\terror = emptyMonth;\n\t\tmonthInvalid = true;\n\t} else if (isYearEmpty) {\n\t\terror = emptyYear;\n\t\tyearInvalid = true;\n\t}\n\n\tconst isDayInvalid = dayVisible && isInvalidDay(dayValue);\n\tconst isMonthInvalid = monthVisible && isInvalidMonth(monthValue);\n\tconst isYearInvalid = yearVisible && isInvalidYear(yearValue, minYear, maxYear);\n\t/\n\t * If only one error, specify where the error occurs\n\t * E.g. “Enter a valid day.”, “Enter a valid month.” Or “Enter a valid year.”\n\t * If 2 or more fields have error (or all 3), say “Enter a valid date.”\n\t * If one or more fields are invalid but the others are empty say: “Enter a valid date.”\n\t */\n\tif (isEmpty(error)) {\n\t\tif (isDayInvalid && isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isDayInvalid && isMonthInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isYearInvalid) {\n\t\t\terror = invalidYear;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid) {\n\t\t\terror = invalidMonth;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid) {\n\t\t\terror = invalidDay;\n\t\t\tdayInvalid = true;\n\t\t}\n\t}\n\n\treturn { errorMessage: error, dayInvalid, monthInvalid, yearInvalid };\n};\n"]}

package/dist/collection/components/ontario-header/service-ontario-header.css CHANGED Viewed

@@ -2366,9 +2366,6 @@
 .ontario-service-subheader .ontario-header-button {
 	display: flex;
 }
-.ontario-service-subheader .ontario-header-button:last-of-type {
-	display: none;
-}
 .ontario-service-subheader .ontario-header-button {
 	background-color: #03713d;

package/dist/collection/components/ontario-search-box/assets/ontario-icon-close.svg ADDED Viewed

	@@ -0,0 +1 @@
1	+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4z" fill="#000"/></svg>