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

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

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 (76) hide show

package/dist/types/components/ontario-header/ontario-header.d.ts CHANGED Viewed

@@ -153,9 +153,20 @@ export declare class OntarioHeader {
 	 */
 	handleClick(event: any): void;
 	/**
-	 * 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: CustomEvent<Language>): void;
+	handleSetAppLanguage(event: CustomEvent<Language> | Language): void;
+	/**
+	 * 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: CustomEvent<{
+			oldLanguage: Language;
+			newLanguage: Language;
+		}>,
+	): void;
 	/**
 	 * Logic to handle the menu toggling
 	 */

package/dist/types/components/ontario-language-toggle/ontario-language-toggle.d.ts CHANGED Viewed

@@ -2,7 +2,14 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { Language } from '../../utils/common/language-types';
 import { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';
 export declare class OntarioLanguageToggle {
-	language: Language | string;
+	/**
+	 * The language of the component.
+	 *
+	 * In most cases, the language toggle should be the source of truth for determining the site language.
+	 *
+	 * Only pass a language value here if necessary.
+	 */
+	language?: Language;
 	/**
 	 * The size of the language toggle button.
 	 *
@@ -23,17 +30,77 @@ export declare class OntarioLanguageToggle {
 	customLanguageToggle?: (event: globalThis.Event) => void;
 	translations: any;
 	/**
-	 * An event to set the Document's HTML lang property, and emit the toggled language to other components.
+	 * Internal state used as the source of truth for component language.
 	 */
-	setAppLanguage: EventEmitter<string>;
-	setAppLanguageHandler(): void;
+	private languageState;
 	/**
-	 * An event that emits to other components that the language toggle button has been toggled.
+	 * Internal state used to render the text on the language toggle UI.
+	 */
+	private oppositeLanguageLabel;
+	/**
+	 * Updates the language and languageState props when changes to the language prop are detected.
 	 */
-	headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;
-	handleHeaderLanguageToggled(language: string, event?: globalThis.Event): void;
 	updateLanguage(): void;
-	updateHTMLLang: (lang: string) => void;
+	/**
+	 * Event that fires during the setAppLanguageHandler() method.
+	 *
+	 * The event contains the current language (after language logic has already occurred).
+	 */
+	setAppLanguage: EventEmitter<Language>;
+	/**
+	 * Event that fires when the language toggle is pressed/clicked.
+	 *
+	 * The event contains the oldLanguage along with the newLanguage.
+	 */
+	headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;
+	/**
+	 * This function sets the languageState (if not already set).
+	 *
+	 * It also emits the setAppLanguage() event, updates the component language label, and
+	 * updates the <html> tag lang attribute with the languageState value.
+	 *
+	 * It gets called by the connectedCallback() component lifecycle hook, and by the
+	 * updateLanguage() method, which is fired on the watch for the language prop.
+	 */
+	private setAppLanguageHandler;
+	/**
+	 * An event that emits to other components that the language toggle button has been toggled.
+	 *
+	 * @param {Language} oldLanguage - The language prior to the language toggle being pressed.
+	 * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).
+	 */
+	private handleHeaderLanguageToggled;
+	/**
+	 * Prints a warning message to the console about using an incorrect language for the component.
+	 *
+	 * @param {string} lang - The incorrect language that was received.
+	 * @param {string} type - prop/document | Where the incorrect language is coming from.
+	 */
+	private showLanguageWarning;
+	/**
+	 * Returns abbreviated text for the opposite language.
+	 *
+	 * @returns {Language}
+	 */
+	private getOppositeLanguageAbbrievation;
+	/**
+	 * Returns full word text for the opposite language.
+	 *
+	 * @returns {string}
+	 */
+	private getOppositeLanguageFullWord;
+	private updateHTMLLang;
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	connectedCallback(): void;
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#componentdidload
+	 */
+	componentDidLoad(): void;
 	render(): any;
 }

package/dist/types/components.d.ts CHANGED Viewed

@@ -1725,7 +1725,10 @@ export namespace Components {
 		 * A custom function to pass to the language toggle button.  This is optional.
 		 */
 		customLanguageToggle?: (event: globalThis.Event) => void;
-		language: Language | string;
+		/**
+		 * The language of the component.  In most cases, the language toggle should be the source of truth for determining the site language.  Only pass a language value here if necessary.
+		 */
+		language?: Language;
 		/**
 		 * The size of the language toggle button.  If no prop is passed, it will be set to the `default` size.
 		 */
@@ -2893,7 +2896,7 @@ declare global {
 		new (): HTMLOntarioInputElement;
 	};
 	interface HTMLOntarioLanguageToggleElementEventMap {
-		setAppLanguage: string;
+		setAppLanguage: Language;
 		headerLanguageToggled: HeaderLanguageToggleEventDetails;
 	}
 	interface HTMLOntarioLanguageToggleElement extends Components.OntarioLanguageToggle, HTMLStencilElement {
@@ -4923,15 +4926,18 @@ declare namespace LocalJSX {
 		 * A custom function to pass to the language toggle button.  This is optional.
 		 */
 		customLanguageToggle?: (event: globalThis.Event) => void;
-		language?: Language | string;
 		/**
-		 * An event that emits to other components that the language toggle button has been toggled.
+		 * The language of the component.  In most cases, the language toggle should be the source of truth for determining the site language.  Only pass a language value here if necessary.
+		 */
+		language?: Language;
+		/**
+		 * Event that fires when the language toggle is pressed/clicked.  The event contains the oldLanguage along with the newLanguage.
 		 */
 		onHeaderLanguageToggled?: (event: OntarioLanguageToggleCustomEvent<HeaderLanguageToggleEventDetails>) => void;
 		/**
-		 * An event to set the Document's HTML lang property, and emit the toggled language to other components.
+		 * Event that fires during the setAppLanguageHandler() method.  The event contains the current language (after language logic has already occurred).
 		 */
-		onSetAppLanguage?: (event: OntarioLanguageToggleCustomEvent<string>) => void;
+		onSetAppLanguage?: (event: OntarioLanguageToggleCustomEvent<Language>) => void;
 		/**
 		 * The size of the language toggle button.  If no prop is passed, it will be set to the `default` size.
 		 */

package/dist/types/utils/common/language-types.d.ts CHANGED Viewed

@@ -1 +1,2 @@
-export type Language = 'en' | 'fr';
+export declare const supportedLanguages: readonly ['en', 'fr'];
+export type Language = (typeof supportedLanguages)[number];

package/dist/types/utils/helper/utils-types.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const conjunctions: readonly ['and', 'or'];
2	+ export type Conjunction = (typeof conjunctions)[number];

package/dist/types/utils/helper/utils.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import { Conjunction } from './utils-types';
 export declare function format(first: string | undefined, middle: string | undefined, last: string | undefined): string;
 export declare function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean;
 export declare function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]>;
@@ -20,3 +21,23 @@ export declare function isEmpty(str: string | undefined | null): boolean;
  * @returns {string[]}
  */
 export declare function retrieveEnumKeys(enumObject: object): string[];
+/**
+ * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.
+ * As per ontario.ca content guidelines, there is no Oxford comma.
+ *
+ * @param {Array<any>} arr - The array that you wish to print.
+ * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'
+ *
+ * @returns {string}
+ */
+export declare function printArray(arr: Array<any>, conjunctionType?: Conjunction): string;
+/**
+ * Grabs the HTML element of the page.
+ *
+ * More targetted than document.documentElement as the documentElement could
+ * in theory be any element that is the top level. e.g. <div> if the page is not
+ * set up to be semantically correct.
+ *
+ * @returns {HTMLElement}
+ */
+export declare function getRootHTMLElement(): HTMLElement;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "4.3.0",
+	"version": "4.3.1-alpha.1",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "4.3.0",
+		"@ongov/ontario-design-system-global-styles": "4.3.1-alpha.1",
 		"@stencil/core": "^4.12.2",
 		"dotenv": "^16.3.1"
 	},
@@ -102,5 +102,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "788db424e1fbcb72a4b9bf8da801da4765ab6154"
+	"gitHead": "ab7fc8a847e4155ec0ad01347484aaed6dc2d981"
 }

package/src/components/ontario-card/ontario-card.scss CHANGED Viewed

@@ -15,7 +15,7 @@
 	border-radius: globalVariables.$global-radius;
 	margin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;
 	padding: spacing.$spacing-0;
-	/*
+	/*
 	 * Required for cards to stay the same height regardless of content size.
 	 * Without subtracting the margin-bottom amount the cards will be too large.
 	 */
@@ -47,6 +47,18 @@
 	}
 }
+.ontario-card__header-type--dark.ontario-card__description-false {
+	background-color: colours.$ontario-colour-black;
+}
+.ontario-card__header-type--light.ontario-card__description-false {
+	background-color: colours.$ontario-greyscale-5;
+}
+.ontario-card--image-true {
+	margin-top: spacing.$spacing-2 * -1;
+}
 .ontario-card__card-type--horizontal {
 	display: flex;
@@ -114,11 +126,6 @@
 		text-decoration-color: colours.$ontario-colour-white;
 	}
-	.ontario-card--no-description & {
-		padding: spacing.$spacing-4 spacing.$spacing-5;
-		border-radius: 0 0 globalVariables.$global-radius globalVariables.$global-radius;
-	}
 	a {
 		color: colours.$ontario-colour-black;
 		text-decoration: none;

package/src/components/ontario-card/ontario-card.tsx CHANGED Viewed

@@ -199,12 +199,14 @@ export class OntarioCard {
 	 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
 	 */
 	private 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}`;
 	}
 	private getHref() {

package/src/components/ontario-card/test/ontario-cards.spec.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ describe('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">
+					<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>

package/src/components/ontario-header/ontario-header.tsx CHANGED Viewed

@@ -250,11 +250,22 @@ export class OntarioHeader {
 	}
 	/**
-	 * 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.
 	 */
 	@Listen('setAppLanguage', { target: 'window' })
-	handleSetAppLanguage(event: CustomEvent<Language>) {
+	handleSetAppLanguage(event: CustomEvent<Language> | Language) {
 		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.
+	 */
+	@Listen('headerLanguageToggled', { target: 'window' })
+	handleLanguageToggle(event: CustomEvent<{ oldLanguage: Language; newLanguage: Language }>) {
+		this.handleSetAppLanguage(event.detail.newLanguage);
 	}
 	/**
@@ -573,7 +584,6 @@ export class OntarioHeader {
 										url={this.language === 'en' ? this.languageState?.frenchLink : this.languageState?.englishLink}
 										size="default"
 										customLanguageToggle={this.customLanguageToggle}
-										language={this.language}
 									></ontario-language-toggle>
 									<button
 										class="ontario-header__search-toggler ontario-header-button ontario-header-button--without-outline ontario-hide-for-large"
@@ -674,7 +684,6 @@ export class OntarioHeader {
 										size="small"
 										url={this.language === 'en' ? this.languageState?.frenchLink : this.languageState?.englishLink}
 										customLanguageToggle={this.customLanguageToggle}
-										language={this.language}
 									></ontario-language-toggle>
 								</div>
 							</div>

package/src/components/ontario-header/test/ontario-header.spec.tsx CHANGED Viewed

@@ -87,7 +87,7 @@ describe('ontario-header', () => {
 										</a>
 									</div>
 									<div class="ontario-application-header__lang-toggle ontario-columns ontario-small-6">
-										<ontario-language-toggle language="en" size="small" url="/fr"></ontario-language-toggle>
+										<ontario-language-toggle size="small" url="/fr"></ontario-language-toggle>
 									</div>
 								</div>
 							</header>
@@ -370,7 +370,7 @@ describe('ontario-header', () => {
 									</button>
 								</form>
 								<div class="ontario-columns ontario-header__nav-right-container ontario-large-3 ontario-medium-8 ontario-small-10">
-									<ontario-language-toggle language="en" size="default" url="/fr"></ontario-language-toggle>
+									<ontario-language-toggle size="default" url="/fr"></ontario-language-toggle>
 									<button aria-controls="ontario-search-form-container" class="ontario-header-button ontario-header-button--without-outline ontario-header__search-toggler ontario-hide-for-large" id="ontario-header-search-toggler">
 										<span class="ontario-header__icon-container"></span>
 										<span class="ontario-show ontario-show-for-medium">
@@ -532,7 +532,7 @@ describe('ontario-header', () => {
 										</a>
 									</div>
 									<div class="ontario-application-header__lang-toggle ontario-columns ontario-small-6">
-										<ontario-language-toggle language="en" size="small" url="/fr"></ontario-language-toggle>
+										<ontario-language-toggle size="small" url="/fr"></ontario-language-toggle>
 									</div>
 								</div>
 							</header>