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

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

@@ -1,14 +1,15 @@
 import { Component, Prop, Element, h, State, Watch } from '@stencil/core';
 import {
-	CardType,
-	CardTypes,
-	HeaderType,
-	HeaderTypes,
+	HeaderColour,
+	HeaderColours,
 	HorizontalImagePositionType,
 	HorizontalImageSizeType,
+	Layout,
+	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';
 
 @Component({
 	tag: 'ontario-card',
@@ -53,19 +54,19 @@ export class OntarioCard {
 	@Prop() cardLink?: string;
 
 	/**
-	 * The type of card to render.
+	 * The layout oritnetation of the card.
 	 *
-	 * If no type is passed, it will default to 'basic'.
+	 * If no type is passed, it will default to 'vertical'.
 	 *
 	 */
-	@Prop() cardType: CardType = 'basic';
+	@Prop() layout?: Layout = 'vertical';
 
 	/**
-	 * The type of header to render.
+	 * Set the card's header colour.
 	 *
-	 * If no type is passed, it will default to 'default'.
+	 * This is optional.
 	 */
-	@Prop() headerType: HeaderType = 'default';
+	@Prop() headerColour?: HeaderColour;
 
 	/**
 	 * The position of the image when the card-type is set to 'horizontal'.
@@ -113,112 +114,139 @@ export class OntarioCard {
 
 	/**
 	 * Mutable variable, for internal use only.
-	 * Set the card's type depending on validation result.
+	 * Set the card's layout depending on validation result.
 	 */
-	@State() private cardTypeState: string;
+	@State() private layoutState: string;
 
 	/**
-	 * Mutable variable, for internal use only.
-	 * Set the card's header type depending on validation result.
-	 */
-	@State() private headerTypeState: string;
-
-	/**
-	 * 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.
 	 */
-	@Watch('cardType')
-	validateCardType() {
-		const isValid = validateValueAgainstArray(this.cardType, CardTypes);
-		if (isValid) {
-			this.cardTypeState = this.cardType;
-		} else {
-			this.cardTypeState = this.warnDefaultCardType();
+	@Watch('layout')
+	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.
 	 */
-	@Watch('headerType')
-	validateHeaderType() {
-		const isValid = validateValueAgainstArray(this.headerType, HeaderTypes);
-		if (isValid) {
-			this.headerTypeState = this.headerType;
-		} else {
-			this.headerTypeState = this.warnDefaultHeaderType();
+	@Watch('headerColour')
+	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.
 	 */
-	private warnDefaultCardType(): CardType {
+	private 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.
 	 */
-	private warnDefaultHeaderType(): HeaderType {
+	private 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}
 	 */
-	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}`;
-		}
+	private getCardClasses(): string {
+		const baseClass =
+			this.layoutState === 'horizontal'
+				? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+				: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;
+
+		const descriptionClass = this.description ? '' : ' ontario-card__description-false';
+
+		const backgroundClass =
+			this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
+
+		return `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();
 	}
 
-	private getHref() {
+	/**
+	 * Returns the heading classes of the card.
+	 *
+	 * @returns {string}
+	 */
+	private getCardHeadingClasses(): string {
+		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}
+	 */
+	private getHref(): string {
 		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 (
-			<li class={this.getClass()}>
+			<li class={this.getCardClasses()}>
 				{this.image && (
 					<div class="ontario-card__image-container">
 						<a href={this.getHref()} aria-label={this.ariaLabelText}>
@@ -227,7 +255,7 @@ export class OntarioCard {
 					</div>
 				)}
 				<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>
-					<h2 class="ontario-card__heading">
+					<h2 class={this.getCardHeadingClasses()}>
 						<a href={this.getHref()} aria-label={this.ariaLabelText}>
 							{this.label}
 						</a>

package/src/components/ontario-card/readme.md

@@ -14,7 +14,7 @@ Once the component package has been installed (see Ontario Design System Compone
 
 ## Examples
 
-Example of a bare-bones `ontario-card` component where the `label` and `description` for the card is provided. The default card type will be `basic`, and default header type will be `default`.
+Example of a bare-bones `ontario-card` component where the `label` and `description` for the card is provided.
 
 ```html
 <ontario-card label="Card Title" description="Lorem Ipsum Lorem Ipsum"></ontario-card>
@@ -22,14 +22,13 @@ Example of a bare-bones `ontario-card` component where the `label` and `descript
 
 <OntarioCard label="Card Title" description="Lorem Ipsum Lorem Ipsum"></OntarioCard>
 
-Example of an `ontario-card` component with an image, which includes the `cardType`, `headerType`, `image`, `label` and `description` properties.
+Example of an `ontario-card` component with an image, which includes the `headerColour`, `image`, `label` and `description` properties.
 
 ```html
 <ontario-card
-	card-type="image"
-	header-type="light"
 	label="Card Title"
-	image="https://picsum.photos/200/300"
+	header-colour="sky"
+	image="https://picsum.photos/300/225"
 	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 >
 </ontario-card>
@@ -37,22 +36,20 @@ Example of an `ontario-card` component with an image, which includes the `cardTy
 
 <div>
 	<OntarioCard
-		card-type="image"
-		header-type="light"
 		label="Card Title"
-		image="https://picsum.photos/200/300"
+		headerColour="sky"
+		image="https://picsum.photos/300/225"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	></OntarioCard>
 </div>
 
-This is another example of an `ontario-card` component, where the user is passing in the horizontal card-type. This will
-require more properties, including the `horizontalImagePositionType` and the `horizontalImageSizeType`.
+This is another example of an `ontario-card` component with a horizontal layout containing an image. This will require more properties, including the `horizontalImagePositionType` and the `horizontalImageSizeType`.
 
 ```html
 <ontario-card
-	card-type="horizontal"
+	layout="horizontal"
 	label="Card Title"
-	image="https://picsum.photos/200/300"
+	image="https://picsum.photos/300/225"
 	horizontal-image-position-type="left"
 	horizontal-image-size-type="one-fourth"
 	description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
@@ -62,30 +59,63 @@ require more properties, including the `horizontalImagePositionType` and the `ho
 
 <div>
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title"
-		image="https://picsum.photos/200/300"
-		horizontal-image-position-type="left"
-		horizontal-image-size-type="one-fourth"
+		image="https://picsum.photos/300/225"
+		horizontalImagePositionType="left"
+		horizontalImageSizeType="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	></OntarioCard>
 </div>
 
+## Custom property types
+
+### headerColour
+
+The `header-colour` property supports a wide range of values, including:
+
+- `dark-accent`
+- `light-accent`
+- `light-gold`
+- `light-yellow`
+- `light-taupe`
+- `light-green`
+- `light-lime`
+- `light-teal`
+- `light-sky`
+- `light-blue`
+- `light-purple`
+- `light-orange`
+- `light-red`
+- `light-magenta`
+- `gold`
+- `yellow`
+- `taupe`
+- `green`
+- `lime`
+- `teal`
+- `sky`
+- `blue`
+- `purple`
+- `orange`
+- `red`
+- `magenta`
+
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Property                      | Attribute                        | Description                                                                                                                                                                                                                 | Type                                            | Default       |
-| ----------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------- |
-| `ariaLabelText`               | `aria-label-text`                | 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. This is optional. | `string \| undefined`                           | `undefined`   |
-| `cardLink`                    | `card-link`                      | Action link for when the card is clicked. This is optional.                                                                                                                                                                 | `string \| undefined`                           | `undefined`   |
-| `cardType`                    | `card-type`                      | The type of card to render. If no type is passed, it will default to 'basic'.                                                                                                                                               | `"basic" \| "horizontal" \| "image" \| "title"` | `'basic'`     |
-| `description`                 | `description`                    | Text to be displayed within the card description container. This is optional.                                                                                                                                               | `string \| undefined`                           | `undefined`   |
-| `headerType`                  | `header-type`                    | The type of header to render. If no type is passed, it will default to 'default'.                                                                                                                                           | `"dark" \| "default" \| "light"`                | `'default'`   |
-| `horizontalImagePositionType` | `horizontal-image-position-type` | The position of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                  | `"left" \| "right" \| undefined`                | `'left'`      |
-| `horizontalImageSizeType`     | `horizontal-image-size-type`     | The size of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                      | `"one-fourth" \| "one-third" \| undefined`      | `'one-third'` |
-| `image`                       | `image`                          | Image to be displayed within the card image container. This is optional.                                                                                                                                                    | `string \| undefined`                           | `undefined`   |
-| `label`                       | `label`                          | Text to be displayed within the header.                                                                                                                                                                                     | `string`                                        | `undefined`   |
+| Property                      | Attribute                        | Description                                                                                                                                                                                                                 | Type                                       | Default       |
+| ----------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------- |
+| `ariaLabelText`               | `aria-label-text`                | 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. This is optional. | `string \| undefined`                      | `undefined`   |
+| `cardLink`                    | `card-link`                      | Action link for when the card is clicked. This is optional.                                                                                                                                                                 | `string \| undefined`                      | `undefined`   |
+| `description`                 | `description`                    | Text to be displayed within the card description container. This is optional.                                                                                                                                               | `string \| undefined`                      | `undefined`   |
+| `headerColour`                | `header-colour`                  | Set the card's header colour. This is optional.                                                                                                                                                                             | `string \| undefined`                      | `undefined`   |
+| `horizontalImagePositionType` | `horizontal-image-position-type` | The position of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                  | `"left" \| "right" \| undefined`           | `'left'`      |
+| `horizontalImageSizeType`     | `horizontal-image-size-type`     | The size of the image when the card-type is set to 'horizontal'. This prop is only necessry when the card-type is set to 'horizontal'.                                                                                      | `"one-fourth" \| "one-third" \| undefined` | `'one-third'` |
+| `image`                       | `image`                          | Image to be displayed within the card image container. This is optional.                                                                                                                                                    | `string \| undefined`                      | `undefined`   |
+| `label`                       | `label`                          | Text to be displayed within the header.                                                                                                                                                                                     | `string`                                   | `undefined`   |
+| `layout`                      | `layout`                         | The layout oritnetation of the card. If no type is passed, it will default to 'vertical'.                                                                                                                                   | `"horizontal" \| "vertical" \| undefined`  | `'vertical'`  |
 
 ---
 

package/src/components/ontario-card/test/__snapshots__/ontario-cards.spec.tsx.snap

@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ontario-card renders 1`] = `
+<ontario-card>
+  <mock:shadow-root>
+    <li class="ontario-card ontario-card--position-vertical ontario-card__card-type--basic 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>
+`;
+
+exports[`ontario-card should render a description 1`] = `
+<ontario-card description="Lorem ipsum">
+  <mock:shadow-root>
+    <li class="ontario-card ontario-card--position-vertical ontario-card__card-type--basic">
+      <div class="ontario-card__text-container">
+        <h2 class="ontario-card__heading">
+          <a href="#"></a>
+        </h2>
+        <div class="ontario-card__description">
+          <p>
+            Lorem ipsum
+          </p>
+        </div>
+      </div>
+    </li>
+  </mock:shadow-root>
+</ontario-card>
+`;
+
+exports[`ontario-card should render a header colour on the label 1`] = `
+<ontario-card header-colour="sky" label="Card Title 1">
+  <mock:shadow-root>
+    <li class="ontario-card ontario-card--position-vertical ontario-card__background--sky ontario-card__card-type--basic ontario-card__description-false">
+      <div class="ontario-card__text-container">
+        <h2 class="ontario-card__heading ontario-card__heading--sky">
+          <a href="#">
+            Card Title 1
+          </a>
+        </h2>
+      </div>
+    </li>
+  </mock:shadow-root>
+</ontario-card>
+`;
+
+exports[`ontario-card should render a label 1`] = `
+<ontario-card label="Card Title 1">
+  <mock:shadow-root>
+    <li class="ontario-card ontario-card--position-vertical ontario-card__card-type--basic ontario-card__description-false">
+      <div class="ontario-card__text-container">
+        <h2 class="ontario-card__heading">
+          <a href="#">
+            Card Title 1
+          </a>
+        </h2>
+      </div>
+    </li>
+  </mock:shadow-root>
+</ontario-card>
+`;

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

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

package/src/components/ontario-card-collection/readme.md

@@ -20,9 +20,9 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 ```html
 <ontario-card-collection cards-per-row="2">
 	<ontario-card
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 1"
-		image="https://picsum.photos/200/300"
+		image="https://picsum.photos/300/225"
 		card-link="https://google.ca"
 		horizontal-image-position-type="left"
 		horizontal-image-size-type="one-fourth"
@@ -30,9 +30,9 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 	>
 	</ontario-card>
 	<ontario-card
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 2"
-		image="https://picsum.photos/200/300"
+		image="https://picsum.photos/300/225"
 		horizontal-image-position-type="left"
 		horizontal-image-size-type="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
@@ -43,21 +43,21 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 
 <OntarioCardCollection cards-per-row="2">
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 1"
-		image="https://picsum.photos/200/300"
-		card-link="https://google.ca"
-		horizontal-image-position-type="left"
-		horizontal-image-size-type="one-fourth"
+		image="https://picsum.photos/300/225"
+		cardLink="https://google.ca"
+		horizontalImagePositionType="left"
+		horizontalImageSizeType="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	>
 	</OntarioCard>
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 2"
-		image="https://picsum.photos/200/300"
-		horizontal-image-position-type="left"
-		horizontal-image-size-type="one-fourth"
+		image="https://picsum.photos/300/225"
+		horizontalImagePositionType="left"
+		horizontalImageSizeType="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	>
 	</OntarioCard>

package/src/components/ontario-checkbox/ontario-checkboxes.scss

@@ -16,7 +16,6 @@ $ontario-checkboxes-size: globalFunctions.px-to-rem(28);
 $ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);
 $ontario-checkbox-border-size: globalFunctions.px-to-rem(2);
 $ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
-$ontario-input-border-width: 0.125rem;
 
 :host {
 	--checkbox-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E");

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

@@ -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/service-ontario-header.scss

@@ -57,10 +57,6 @@
 
 .ontario-service-subheader .ontario-header-button {
 	display: flex;
-
-	&:last-of-type {
-		display: none;
-	}
 }
 
 .ontario-service-subheader .ontario-header-button {

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

@@ -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>