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

package/dist/components/global.i18n.js

@@ -1,154 +1,54 @@
-const required = {
-	en: 'required',
-	fr: 'obligatoire',
-};
-const optional = {
-	en: 'optional',
-	fr: 'facultative',
-};
 const accessibility = {
-	moreInfo: {
-		en: 'More information on',
-		fr: 'Des renseignements supplémentaires sur',
-	},
 	checkboxHintExpander: {
 		en: 'is available after the last checkbox item.',
 		fr: 'suivront à la dernière case à cocher.',
 	},
+	moreInfo: {
+		en: 'More information on',
+		fr: 'Des renseignements supplémentaires sur',
+	},
 	singleHintExpander: {
 		en: 'field is available in the next element.',
 		fr: 'suivront au prochain élément.',
 	},
 };
-const backToTop = {
-	top: {
-		en: 'Top',
-		fr: 'Haut',
-	},
-	ariaLabel: {
-		en: 'Scroll back to the top',
-		fr: 'Retour en haut de la page',
-	},
-};
-const loading = {
-	en: 'Loading',
-	fr: 'Chargement',
-};
-const dropdownList = {
-	select: {
-		en: 'Select',
-		fr: 'Sélectionner',
-	},
-};
-const contactUs = {
-	en: 'Contact us',
-	fr: 'Contactez-nous',
-};
 const accessibilityLink = {
-	text: {
-		en: 'Accessibility',
-		fr: 'Accessibilité',
-	},
 	link: {
 		en: 'https://www.ontario.ca/page/accessibility',
 		fr: 'https://www.ontario.ca/fr/page/accessibilite',
 	},
-};
-const privacyLink = {
-	text: {
-		en: 'Privacy',
-		fr: 'Confidentialité',
-	},
-	link: {
-		en: 'https://www.ontario.ca/page/privacy-statement',
-		fr: 'https://www.ontario.ca/fr/page/declaration-concernant-la-protection-de-la-vie-privee',
-	},
-};
-const printerLink = {
 	text: {
-		en: "King's Printer for Ontario,",
-		fr: 'Imprimeur du Roi pour l’Ontario,',
-	},
-	link: {
-		en: 'https://www.ontario.ca/page/copyright-information',
-		fr: 'https://www.ontario.ca/fr/page/droits-dauteur',
-	},
-};
-const languageToggle = {
-	ariaLabel: {
-		en: 'Click to switch language to French',
-		fr: 'Cliquez pour changer de langue en anglais',
+		en: 'Accessibility',
+		fr: 'Accessibilité',
 	},
 };
-const stepIndicator = {
-	back: {
-		en: 'Back',
-		fr: 'Retour',
-	},
-	step: {
-		en: 'Step',
-		fr: 'Étape',
+const accordion = {
+	collapse: {
+		en: 'Collapse all',
+		fr: 'Réduire tout',
 	},
-	of: {
-		en: 'of',
-		fr: 'sur',
+	expand: {
+		en: 'Expand all',
+		fr: 'Agrandir tout',
 	},
-	complete: {
-		en: 'complete',
-		fr: 'complet',
+	expandCollapseAriaLabel: {
+		en: 'Expand or collapse the accordion',
+		fr: "Agrandissez ou réduisez l'accordéon",
 	},
 };
-const header = {
-	ontarioSearchURL: {
-		en: 'https://www.ontario.ca/search/search-results?query=',
-		fr: 'https://www.ontario.ca/fr/recherche/resultats-de-recherche/?query=',
-	},
-	logoLink: {
-		en: 'https://www.ontario.ca/page/government-ontario',
-		fr: 'https://www.ontario.ca/fr/page/gouvernement-de-lontario',
-	},
-	logoAltText: {
-		en: 'Ontario.ca homepage',
-		fr: 'Page d’accueil Ontario.ca',
-	},
-	clearSearchField: {
-		en: 'Clear field',
-		fr: 'Vider le champ',
-	},
-	submit: {
-		en: 'Submit',
-		fr: 'Soumission',
-	},
-	search: {
-		en: 'Search',
-		fr: 'Rechercher',
-	},
-	serviceOntario: {
-		en: 'ServiceOntario',
-		fr: 'ServiceOntario',
-	},
-	openMenu: {
-		en: 'Show navigation menu',
-		fr: 'Ouvrir le menu de navigation',
-	},
-	closeMenu: {
-		en: 'Hide navigation menu',
-		fr: 'Fermer le menu de navigation',
-	},
-	close: {
-		en: 'close',
-		fr: 'fermer',
+const backToTop = {
+	ariaLabel: {
+		en: 'Scroll back to the top',
+		fr: 'Retour en haut de la page',
 	},
-	closeSearch: {
-		en: 'Close search bar',
-		fr: 'Fermer la barre de recherche',
+	top: {
+		en: 'Top',
+		fr: 'Haut',
 	},
 };
-const input = {
-	requiredFieldError: {
-		en: 'This is a required field.',
-		fr: 'Ce champ est obligatoire.',
-	},
+const contactUs = {
+	en: 'Contact us',
+	fr: 'Contactez-nous',
 };
 const dateInput = {
 	caption: {
@@ -156,43 +56,23 @@ const dateInput = {
 		fr: 'Dates exactes',
 	},
 	day: {
-		label: {
-			en: 'Day',
-			fr: 'Jour',
-		},
 		accessibility: {
 			en: '4 digits',
 			fr: '4 chiffres',
 		},
-	},
-	month: {
 		label: {
-			en: 'Month',
-			fr: 'Mois',
-		},
-		accessibility: {
-			en: '1 or 2 digits',
-			fr: '1 ou 2 chiffres',
-		},
-	},
-	year: {
-		label: {
-			en: 'Year',
-			fr: 'Année',
-		},
-		accessibility: {
-			en: '1 or 2 digits',
-			fr: '1 ou 2 chiffres',
+			en: 'Day',
+			fr: 'Jour',
 		},
 	},
 	error: {
 		en: {
 			emptyDay: 'Enter the day.',
-			emptyMonth: 'Enter the month.',
-			emptyYear: 'Enter the year.',
 			emptyDayAndMonth: 'Enter the month and day.',
 			emptyDayAndYear: 'Enter the year and day.',
+			emptyMonth: 'Enter the month.',
 			emptyMonthAndYear: 'Enter the year and month.',
+			emptyYear: 'Enter the year.',
 			invalidDate: 'Enter a valid date.',
 			invalidDay: 'Enter a valid day.',
 			invalidMonth: 'Enter a valid month.',
@@ -200,49 +80,180 @@ const dateInput = {
 		},
 		fr: {
 			emptyDay: 'Saisissez le jour.',
-			emptyMonth: 'Saisissez le mois.',
-			emptyYear: 'Saisissez l’année.',
 			emptyDayAndMonth: 'Saisissez le mois et le jour.',
 			emptyDayAndYear: 'Saisissez l’année et le jour.',
+			emptyMonth: 'Saisissez le mois.',
 			emptyMonthAndYear: 'Saisissez l’année et le mois.',
+			emptyYear: 'Saisissez l’année.',
 			invalidDate: 'Saisissez une date valide.',
 			invalidDay: 'Saisissez un jour valide.',
 			invalidMonth: 'Saisissez un mois valide.',
 			invalidYear: 'Saisissez une année valide.',
 		},
 	},
+	month: {
+		accessibility: {
+			en: '1 or 2 digits',
+			fr: '1 ou 2 chiffres',
+		},
+		label: {
+			en: 'Month',
+			fr: 'Mois',
+		},
+	},
+	year: {
+		accessibility: {
+			en: '1 or 2 digits',
+			fr: '1 ou 2 chiffres',
+		},
+		label: {
+			en: 'Year',
+			fr: 'Année',
+		},
+	},
 };
-const accordion = {
-	expand: {
-		en: 'Expand all',
-		fr: 'Agrandir tout',
+const dropdownList = {
+	select: {
+		en: 'Select',
+		fr: 'Sélectionner',
 	},
-	collapse: {
-		en: 'Collapse all',
-		fr: 'Réduire tout',
+};
+const header = {
+	clearSearchField: {
+		en: 'Clear field',
+		fr: 'Vider le champ',
 	},
-	expandCollapseAriaLabel: {
-		en: 'Expand or collapse the accordion',
-		fr: "Agrandissez ou réduisez l'accordéon",
+	close: {
+		en: 'close',
+		fr: 'fermer',
+	},
+	closeMenu: {
+		en: 'Hide navigation menu',
+		fr: 'Fermer le menu de navigation',
+	},
+	closeSearch: {
+		en: 'Close search bar',
+		fr: 'Fermer la barre de recherche',
+	},
+	logoAltText: {
+		en: 'Ontario.ca homepage',
+		fr: 'Page d’accueil Ontario.ca',
+	},
+	logoLink: {
+		en: 'https://www.ontario.ca/page/government-ontario',
+		fr: 'https://www.ontario.ca/fr/page/gouvernement-de-lontario',
+	},
+	ontarioSearchURL: {
+		en: 'https://www.ontario.ca/search/search-results?query=',
+		fr: 'https://www.ontario.ca/fr/recherche/resultats-de-recherche/?query=',
+	},
+	openMenu: {
+		en: 'Show navigation menu',
+		fr: 'Ouvrir le menu de navigation',
+	},
+	search: {
+		en: 'Search',
+		fr: 'Rechercher',
+	},
+	serviceOntario: {
+		en: 'ServiceOntario',
+		fr: 'ServiceOntario',
+	},
+	submit: {
+		en: 'Submit',
+		fr: 'Soumission',
+	},
+};
+const input = {
+	requiredFieldError: {
+		en: 'This is a required field.',
+		fr: 'Ce champ est obligatoire.',
+	},
+};
+const languageToggle = {
+	ariaLabel: {
+		en: 'Click to switch the language to English',
+		fr: 'Cliquez pour changer la langue en français',
+	},
+};
+const loading = {
+	en: 'Loading',
+	fr: 'Chargement',
+};
+const optional = {
+	en: 'optional',
+	fr: 'facultative',
+};
+const printerLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/copyright-information',
+		fr: 'https://www.ontario.ca/fr/page/droits-dauteur',
+	},
+	text: {
+		en: "King's Printer for Ontario,",
+		fr: 'Imprimeur du Roi pour l’Ontario,',
+	},
+};
+const privacyLink = {
+	link: {
+		en: 'https://www.ontario.ca/page/privacy-statement',
+		fr: 'https://www.ontario.ca/fr/page/declaration-concernant-la-protection-de-la-vie-privee',
+	},
+	text: {
+		en: 'Privacy',
+		fr: 'Confidentialité',
+	},
+};
+const stepIndicator = {
+	back: {
+		en: 'Back',
+		fr: 'Retour',
+	},
+	complete: {
+		en: 'complete',
+		fr: 'complet',
+	},
+	of: {
+		en: 'of',
+		fr: 'sur',
+	},
+	step: {
+		en: 'Step',
+		fr: 'Étape',
+	},
+};
+const siteLanguage = {
+	fullWord: {
+		en: 'English',
+		fr: 'Français',
+	},
+	abbreviation: {
+		en: 'en',
+		fr: 'fr',
 	},
 };
+const required = {
+	en: 'required',
+	fr: 'obligatoire',
+};
 const translations = {
-	required: required,
-	optional: optional,
 	accessibility: accessibility,
+	accessibilityLink: accessibilityLink,
+	accordion: accordion,
 	backToTop: backToTop,
-	loading: loading,
-	dropdownList: dropdownList,
 	contactUs: contactUs,
-	accessibilityLink: accessibilityLink,
-	privacyLink: privacyLink,
-	printerLink: printerLink,
-	languageToggle: languageToggle,
-	stepIndicator: stepIndicator,
+	dateInput: dateInput,
+	dropdownList: dropdownList,
 	header: header,
 	input: input,
-	dateInput: dateInput,
-	accordion: accordion,
+	languageToggle: languageToggle,
+	loading: loading,
+	optional: optional,
+	printerLink: printerLink,
+	privacyLink: privacyLink,
+	stepIndicator: stepIndicator,
+	siteLanguage: siteLanguage,
+	required: required,
 };
 
 export { translations as t };

package/dist/components/global.i18n.js.map

@@ -1 +1 @@
-{"file":"global.i18n.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"global.i18n.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ontario-card.js

@@ -6,7 +6,7 @@ const CardTypes = ['basic', 'image', 'title', 'horizontal'];
 const HeaderTypes = ['default', 'light', 'dark'];
 
 const ontarioCardCss =
-	'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card--no-description .ontario-card__heading{padding:1rem 1.5rem;border-radius:0 0 4px 4px}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
+	'.ontario-card__heading{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}.ontario-card__heading{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card__header-type--dark.ontario-card__description-false{background-color:#1a1a1a}.ontario-card__header-type--light.ontario-card__description-false{background-color:#f2f2f2}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
 const OntarioCardStyle0 = ontarioCardCss;
 
 const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
@@ -97,12 +97,12 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
 		 */
 		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}`;
-			}
+			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}`;
+			const descriptionClass = this.description ? '' : ' ontario-card__description-false';
+			return `${baseClass}${descriptionClass}`;
 		}
 		getHref() {
 			return this.cardLink ? this.cardLink : '#';
@@ -114,7 +114,7 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'li',
-				{ key: '00b148bc48fab4a103f88f3e8b60251c1b77f1e0', class: this.getClass() },
+				{ key: '606e74cea5d81cd31b355ffb1a71cf7450126cf4', class: this.getClass() },
 				this.image &&
 					h(
 						'div',
@@ -128,16 +128,16 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 				h(
 					'div',
 					{
-						key: '9cef298a65f2b17ccd540e9d74efb3a77685d723',
+						key: '7d71d14690d4e75dcf1e4ef5c0198183b27e4b39',
 						class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 					},
 					h(
 						'h2',
-						{ key: '3f008a11081c8314be2a99e4190b744e75db3f62', class: 'ontario-card__heading' },
+						{ key: '4f6a337efa3986a5023f3c17e869f072aaef0e4f', class: 'ontario-card__heading' },
 						h(
 							'a',
 							{
-								'key': '81d9fcfc1fada5f6dfb7e90c466dfb8fe4bdf618',
+								'key': '6efece75daafc95e43dca997e895dc88cab9194c',
 								'href': this.getHref(),
 								'aria-label': this.ariaLabelText,
 							},

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

@@ -1 +1 @@
-{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const CardTypes = ['basic', 'image', 'title', 'horizontal'] as const;\nexport const HeaderTypes = ['default', 'light', 'dark'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type CardType = (typeof CardTypes)[number];\nexport type HeaderType = (typeof HeaderTypes)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\t/* \n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card__header-type--light & {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-9;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark & {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-white;\n\t}\n\n\t.ontario-card--no-description & {\n\t\tpadding: spacing.$spacing-4 spacing.$spacing-5;\n\t\tborder-radius: 0 0 globalVariables.$global-radius globalVariables.$global-radius;\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t.ontario-card__header-type--dark & {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t.ontario-card__header-type--light &,\n\t.ontario-card__header-type--dark & {\n\t\tpadding-top: spacing.$spacing-4;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\n\t\t.ontario-card__header-type--light &,\n\t\t.ontario-card__header-type--dark & {\n\t\t\tpadding-top: spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","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","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const CardTypes = ['basic', 'image', 'title', 'horizontal'] as const;\nexport const HeaderTypes = ['default', 'light', 'dark'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type CardType = (typeof CardTypes)[number];\nexport type HeaderType = (typeof HeaderTypes)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card__header-type--dark.ontario-card__description-false {\n\tbackground-color: colours.$ontario-colour-black;\n}\n\n.ontario-card__header-type--light.ontario-card__description-false {\n\tbackground-color: colours.$ontario-greyscale-5;\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card__header-type--light & {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-9;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark & {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-white;\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t.ontario-card__header-type--dark & {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t.ontario-card__header-type--light &,\n\t.ontario-card__header-type--dark & {\n\t\tpadding-top: spacing.$spacing-4;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\n\t\t.ontario-card__header-type--light &,\n\t\t.ontario-card__header-type--dark & {\n\t\t\tpadding-top: spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","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"],"version":3}

package/dist/components/ontario-header.js

@@ -262,10 +262,19 @@ const OntarioHeader$1 = /*@__PURE__*/ proxyCustomElement(
 			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
@@ -558,7 +567,6 @@ const OntarioHeader$1 = /*@__PURE__*/ proxyCustomElement(
 												: _b.englishLink,
 										size: 'default',
 										customLanguageToggle: this.customLanguageToggle,
-										language: this.language,
 									}),
 									h(
 										'button',
@@ -690,7 +698,6 @@ const OntarioHeader$1 = /*@__PURE__*/ proxyCustomElement(
 												? void 0
 												: _e.englishLink,
 										customLanguageToggle: this.customLanguageToggle,
-										language: this.language,
 									}),
 								),
 							),
@@ -981,6 +988,7 @@ const OntarioHeader$1 = /*@__PURE__*/ proxyCustomElement(
 		[
 			[10, 'click', 'handleClick'],
 			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleLanguageToggle'],
 		],
 		{
 			applicationHeaderInfo: ['parseApplicationHeaderInfo'],