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

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

@@ -2,7 +2,7 @@
 
 exports[`ontario-card renders 1`] = `
 <ontario-card>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <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">
@@ -10,13 +10,13 @@ exports[`ontario-card renders 1`] = `
         </h2>
       </div>
     </li>
-  </mock:shadow-root>
+  </template>
 </ontario-card>
 `;
 
 exports[`ontario-card should render a description 1`] = `
 <ontario-card description="Lorem ipsum">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <li class="ontario-card ontario-card--position-vertical ontario-card__card-type--basic">
       <div class="ontario-card__text-container">
         <h2 class="ontario-card__heading">
@@ -29,13 +29,13 @@ exports[`ontario-card should render a description 1`] = `
         </div>
       </div>
     </li>
-  </mock:shadow-root>
+  </template>
 </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>
+  <template shadowrootmode="open">
     <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">
@@ -45,13 +45,13 @@ exports[`ontario-card should render a header colour on the label 1`] = `
         </h2>
       </div>
     </li>
-  </mock:shadow-root>
+  </template>
 </ontario-card>
 `;
 
 exports[`ontario-card should render a label 1`] = `
 <ontario-card label="Card Title 1">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <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">
@@ -61,6 +61,6 @@ exports[`ontario-card should render a label 1`] = `
         </h2>
       </div>
     </li>
-  </mock:shadow-root>
+  </template>
 </ontario-card>
 `;

package/src/components/ontario-card-collection/ontario-card-collection.scss

@@ -5,51 +5,35 @@
 .ontario-card-collection__container {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: flex-start;
+	gap: spacing.$spacing-6;
 	margin: spacing.$spacing-0;
 	padding: spacing.$spacing-0;
 }
 
 .ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {
-	width: calc(25% - 2rem);
-
-	&:nth-child(4n) {
-		margin-right: spacing.$spacing-0;
-	}
+	width: calc(25% - 1.5rem);
 
 	@media screen and (max-width: breakpoints.$medium-breakpoint) {
-		width: calc(50% - 1.25rem);
-
-		&:nth-child(2n) {
-			margin-right: spacing.$spacing-0;
-		}
+		width: calc(50% - 1rem);
 	}
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
-		width: calc(100% - 0.5rem);
+		width: 100%;
 	}
 }
 
 .ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {
-	width: calc(33.3% - 1.75rem);
-
-	&:nth-child(3n) {
-		margin-right: spacing.$spacing-0;
-	}
+	width: calc(33.3% - 1.33rem);
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
-		width: calc(100% - 0.5rem);
+		width: 100%;
 	}
 }
 
 .ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {
-	width: calc(50% - 1.25rem);
-
-	&:nth-child(2n) {
-		margin-right: spacing.$spacing-0;
-	}
+	width: calc(50% - 1rem);
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
-		width: calc(100% - 0.5rem);
+		width: 100%;
 	}
 }

package/src/components/ontario-date-input/ontario-date-input.tsx

@@ -176,7 +176,7 @@ export class OntarioDateInput {
 					dayVisible,
 					monthVisible,
 					yearVisible,
-			  });
+				});
 
 		this.dayInvalid = dayInvalid;
 		this.monthInvalid = monthInvalid;

package/src/components/ontario-date-input/test/ontario-date-input.spec.tsx

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

package/src/components/ontario-date-input/utils/date-validation-utils.ts

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

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

@@ -2,7 +2,7 @@
 
 exports[`ontario-fieldset snapshot should render the expected html 1`] = `
 <ontario-fieldset legend="What is your delivery address?" legend-size="heading">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div class="ontario-form-group">
       <fieldset class="ontario-fieldset">
         <legend class="ontario-fieldset__legend ontario-fieldset__legend--heading">
@@ -13,6 +13,6 @@ exports[`ontario-fieldset snapshot should render the expected html 1`] = `
         <slot></slot>
       </fieldset>
     </div>
-  </mock:shadow-root>
+  </template>
 </ontario-fieldset>
 `;

package/src/components/ontario-footer/components/simple-footer.tsx

@@ -13,6 +13,7 @@ export const SimpleFooter: FunctionalComponent<SimpleFooterProps> = ({
 	contactLink,
 	printerLink,
 	className,
+	termsOfUseLink,
 }) => {
 	return (
 		<div class={`ontario-row ${className ?? ''}`}>
@@ -35,6 +36,13 @@ export const SimpleFooter: FunctionalComponent<SimpleFooterProps> = ({
 							</a>
 						</li>
 					)}
+					{termsOfUseLink && (
+						<li>
+							<a class="ontario-footer__link" href={termsOfUseLink?.href}>
+								{termsOfUseLink?.text}
+							</a>
+						</li>
+					)}
 				</ul>
 				<div class="ontario-footer__copyright">
 					<a class="ontario-footer__link" href={printerLink?.href}>

package/src/components/ontario-footer/ontario-footer-interface.tsx

@@ -1,24 +1,26 @@
 export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';
 
 export interface FooterLink {
-	text?: string;
+	text: string;
 	href: string;
 }
 
 // External interface to be passed to the Footer component
 export interface FooterLinks {
-	accessibilityLink?: Partial<FooterLink>;
-	privacyLink?: Partial<FooterLink>;
+	accessibilityLink?: FooterLink;
+	privacyLink?: FooterLink;
 	contactLink?: FooterLink;
-	printerLink?: Partial<FooterLink>;
+	printerLink?: FooterLink;
+	termsOfUseLink?: FooterLink;
 }
 
 // Internal interface for SimpleFooter Component
 export interface SimpleFooterLinks {
-	accessibilityLink: Required<FooterLink>;
-	privacyLink: Required<FooterLink>;
-	printerLink: Required<FooterLink>;
-	contactLink?: Required<FooterLink>;
+	accessibilityLink: FooterLink;
+	privacyLink: FooterLink;
+	printerLink: FooterLink;
+	contactLink?: FooterLink;
+	termsOfUseLink?: FooterLink;
 }
 
 export type FooterContentType = 'text' | 'list' | 'html';

package/src/components/ontario-footer/ontario-footer.scss

@@ -3,7 +3,7 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '../../styles/grid.scss';
 @use '../../styles/common.scss';
@@ -186,7 +186,7 @@ $ontario-icon-size--social-small: 32px;
 	box-shadow: none;
 	display: inline-block;
 	font-size: 1.125rem;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	line-height: math.div(14, 9);
 	margin: 0 (1rem + 0.75rem) 1.5rem 0;

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

@@ -36,7 +36,7 @@ export class OntarioFooter {
 
 	/**
 	 * A prop that stores the required links for all footers.
-	 * Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+	 * Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'
 	 */
 	@Prop() footerLinks: FooterLinks | string;
 
@@ -210,7 +210,7 @@ export class OntarioFooter {
 
 	private getFooterLinks(): SimpleFooterLinks {
 		const { language, translations, footerLinksState } = this;
-		const { accessibilityLink, privacyLink, contactLink, printerLink } = footerLinksState ?? {};
+		const { accessibilityLink, privacyLink, contactLink, termsOfUseLink, printerLink } = footerLinksState ?? {};
 
 		const links: SimpleFooterLinks = {
 			accessibilityLink: {
@@ -228,12 +228,19 @@ export class OntarioFooter {
 		};
 
 		if (contactLink) {
-			links['contactLink'] = {
+			links.contactLink = {
 				href: contactLink.href,
 				text: contactLink.text ?? translations.contactUs[language],
 			};
 		}
 
+		if (termsOfUseLink) {
+			links.termsOfUseLink = {
+				href: termsOfUseLink.href,
+				text: termsOfUseLink.text ?? translations.termsOfUse[language],
+			};
+		}
+
 		return links;
 	}
 

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

@@ -437,18 +437,23 @@ footer-links='{
 		"text": "Contact",
 		"href": "https://www.ontario.ca/feedback/contact-us"
 	},
+	"termsOfUseLink": {
+		"text": "Terms of use",
+		"href": "https://www.ontario.ca/page/terms-use"
+	},
 	"printerLink": {
 		"href": "https://www.ontario.ca/page/copyright-information"
 	}
 }'
 ```
 
-| **Property name**   | **Type**                           | **Description**                                                          | Required |
-| ------------------- | ---------------------------------- | ------------------------------------------------------------------------ | -------- |
-| `accessibilityLink` | `[FooterLinkType](FooterLinkType)` | The URL and text for the accessibility footer link                       | NO       |
-| `privacyLink`       | `[FooterLinkType](FooterLinkType)` | The URL and text for the privacy footer link                             | NO       |
-| `contactLink`       | `[FooterLinkType](FooterLinkType)` | The URL and text for the contact us footer link                          | NO       |
-| `printerLink`       | `[FooterLinkType](FooterLinkType)` | The URL and text for the printer footer link. This property is optional. | NO       |
+| **Property name**   | **Type**                            | **Description**                                                          | Required |
+| ------------------- | ----------------------------------- | ------------------------------------------------------------------------ | -------- |
+| `accessibilityLink` | [`FooterLinkType`](#footerlinktype) | The URL and text for the accessibility footer link                       | NO       |
+| `privacyLink`       | [`FooterLinkType`](#footerlinktype) | The URL and text for the privacy footer link                             | NO       |
+| `contactLink`       | [`FooterLinkType`](#footerlinktype) | The URL and text for the contact us footer link                          | NO       |
+| `termsOfUseLink`    | [`FooterLinkType`](#footerlinktype) | The URL and text for the terms of use footer link                        | NO       |
+| `printerLink`       | [`FooterLinkType`](#footerlinktype) | The URL and text for the printer footer link. This property is optional. | NO       |
 
 ### FooterLinkType
 
@@ -589,7 +594,7 @@ two-column-options='{
 | Property             | Attribute              | Description                                                                                                                                                                                                         | Type                                                                                                                                           | Default     |
 | -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `assetBasePath`      | `asset-base-path`      | The base path to an assets folder containing the Design System assets                                                                                                                                               | `string`                                                                                                                                       | `undefined` |
-| `footerLinks`        | `footer-links`         | A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'                                                                    | `FooterLinks \| string`                                                                                                                        | `undefined` |
+| `footerLinks`        | `footer-links`         | A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'                                                   | `FooterLinks \| string`                                                                                                                        | `undefined` |
 | `language`           | `language`             | The language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English. | `"en" \| "fr"`                                                                                                                                 | `undefined` |
 | `socialLinks`        | `social-links`         | Social media links to render in the footer. Available options are 'facebook', 'twitter', 'instagram' and 'youtube'                                                                                                  | `string \| { facebook?: string \| undefined; twitter?: string \| undefined; instagram?: string \| undefined; youtube?: string \| undefined; }` | `undefined` |
 | `threeColumnOptions` | `three-column-options` | Stores the titles and content for the expanded three column footer.                                                                                                                                                 | `ThreeColumnOptions \| string \| undefined`                                                                                                    | `undefined` |

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

@@ -58,7 +58,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>
@@ -201,7 +201,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>
@@ -370,7 +370,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>
@@ -549,7 +549,7 @@ describe('ontario-footer', () => {
                   <li><a class="ontario-footer__link" href="https://www.ontario.ca/feedback/contact-us">Contact</a></li>
                 </ul>
                 <div class="ontario-footer__copyright">
-                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–24</span></a>
+                  <a class="ontario-footer__link" href="https://www.ontario.ca/page/copyright-information">© King's Printer for Ontario, <span class="ontario-nbsp">2012–25</span></a>
                 </div>
               </div>
             </div>

package/src/components/ontario-header/ontario-application-header.scss

@@ -3,12 +3,13 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
 	focusPlaceholders;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
@@ -244,7 +245,7 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 	border-radius: globalVariables.$global-radius;
 	color: colours.$ontario-colour-white;
 	display: inline-block;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-size: globalFunctions.px-to-rem(18);
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	height: globalVariables.$standard-input-height;
@@ -347,7 +348,7 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 	display: block;
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	text-decoration: none;
 	padding: calc(spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;
 
@@ -387,7 +388,9 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 	background: colours.$ontario-colour-white;
 	position: absolute;
 	transform: translateY(-100%);
-	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	transition:
+		transform 0.3s ease-in-out,
+		visibility 0.1s ease;
 	width: 100%;
 	visibility: hidden;
 	z-index: zIndex.$ontario-z-index-above-high;
@@ -445,7 +448,7 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	height: globalVariables.$standard-input-height;
 	line-height: math.div(14, 9);
 	text-align: center;
@@ -528,7 +531,9 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 	background: colours.$ontario-colour-white;
 	position: absolute;
 	transform: translateY(-100%);
-	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	transition:
+		transform 0.3s ease-in-out,
+		visibility 0.1s ease;
 	width: 100%;
 	visibility: hidden;
 	z-index: zIndex.$ontario-z-index-above-high;
@@ -589,7 +594,7 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 	display: block;
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	text-decoration: none;
 	padding: (spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;
 

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

@@ -3,7 +3,7 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
-@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
@@ -14,8 +14,8 @@
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
 
-$ontario-search-input-padding: 7.2rem;
-$ontario-search-input-padding--mobile: 6.4rem;
+$ontario-search-padding: 7.2rem;
+$ontario-search-padding--mobile: 6.4rem;
 
 $ontario-header-logo-width: 180px;
 $ontario-header-logo-width--mobile: 45px;
@@ -57,7 +57,7 @@ $ontario-navigation-container-min-width: 290px;
 	border-radius: globalVariables.$global-radius;
 	color: colours.$ontario-colour-white;
 	display: inline;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-size: globalFunctions.px-to-rem(18);
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	height: globalVariables.$standard-input-height;
@@ -103,7 +103,9 @@ $ontario-navigation-container-min-width: 290px;
 	background: white;
 	position: absolute;
 	transform: translateY(-100%);
-	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	transition:
+		transform 0.3s ease-in-out,
+		visibility 0.1s ease;
 	width: 100%;
 	visibility: hidden;
 	z-index: zIndex.$ontario-z-index-above-high;
@@ -145,7 +147,7 @@ $ontario-navigation-container-min-width: 290px;
 	display: block;
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	text-decoration: none;
 	padding: calc(spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;
 
@@ -240,7 +242,9 @@ $ontario-navigation-container-min-width: 290px;
 	background: colours.$ontario-colour-white;
 	position: absolute;
 	transform: translateY(-100%);
-	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	transition:
+		transform 0.3s ease-in-out,
+		visibility 0.1s ease;
 	width: 100%;
 	visibility: hidden;
 	z-index: zIndex.$ontario-z-index-above-high;
@@ -304,7 +308,7 @@ $ontario-navigation-container-min-width: 290px;
 	margin-bottom: spacing.$spacing-0;
 	height: globalVariables.$standard-input-height;
 	padding-left: spacing.$spacing-3;
-	padding-right: $ontario-search-input-padding;
+	padding-right: $ontario-search-padding;
 
 	&:invalid + input[type='reset'] {
 		display: none;
@@ -346,7 +350,7 @@ $ontario-navigation-container-min-width: 290px;
 
 	@media screen and (min-width: breakpoints.$small-breakpoint) and (max-width: breakpoints.$medium-breakpoint) {
 		padding-left: spacing.$spacing-4;
-		padding-right: $ontario-search-input-padding--mobile;
+		padding-right: $ontario-search-padding--mobile;
 	}
 }
 
@@ -360,7 +364,7 @@ $ontario-navigation-container-min-width: 290px;
 	justify-content: center;
 	align-items: center;
 
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	font-size: 1.125rem;
 	height: 100%;
@@ -456,7 +460,7 @@ input[type='reset'].ontario-header__search-reset {
 	align-items: center;
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	height: globalVariables.$standard-input-height;
 	line-height: math.div(14, 9);
 	text-align: center;
@@ -664,7 +668,9 @@ input[type='reset'].ontario-header__search-reset {
 	background: colours.$ontario-colour-white;
 	position: absolute;
 	transform: translateY(-100%);
-	transition: transform 0.3s ease-in-out, visibility 0.1s ease;
+	transition:
+		transform 0.3s ease-in-out,
+		visibility 0.1s ease;
 	width: 100%;
 	visibility: hidden;
 	z-index: zIndex.$ontario-z-index-above-high;
@@ -708,7 +714,7 @@ input[type='reset'].ontario-header__search-reset {
 	display: block;
 	font-size: 1.125rem;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	text-decoration: none;
 	padding: (spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;