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

package/dist/types/components/ontario-footer/ontario-footer-interface.d.ts

@@ -1,19 +1,21 @@
 export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';
 export interface FooterLink {
-	text?: string;
+	text: string;
 	href: string;
 }
 export interface FooterLinks {
-	accessibilityLink?: Partial<FooterLink>;
-	privacyLink?: Partial<FooterLink>;
+	accessibilityLink?: FooterLink;
+	privacyLink?: FooterLink;
 	contactLink?: FooterLink;
-	printerLink?: Partial<FooterLink>;
+	printerLink?: FooterLink;
+	termsOfUseLink?: FooterLink;
 }
 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';
 export type HeadingLevelType = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/types/components/ontario-footer/ontario-footer.d.ts

@@ -13,7 +13,7 @@ export declare class OntarioFooter {
 	type: OntarioFooterType;
 	/**
 	 * 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'
 	 */
 	footerLinks: FooterLinks | string;
 	/**

package/dist/types/components.d.ts

@@ -459,7 +459,7 @@ export namespace Components {
 		 */
 		assetBasePath: string;
 		/**
-		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'
 		 */
 		footerLinks: FooterLinks | string;
 		/**
@@ -3753,7 +3753,7 @@ declare namespace LocalJSX {
 		 */
 		assetBasePath?: string;
 		/**
-		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'
 		 */
 		footerLinks?: FooterLinks | string;
 		/**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "5.0.0-alpha.3",
+	"version": "5.0.0-alpha.5",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -102,5 +102,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "a839878fb4e0fa43dbe93a486a021325aaaf2ff5"
+	"gitHead": "f769c5fb19eb7fd246aeb837df1fe8766547efab"
 }

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

@@ -13,7 +13,7 @@
 .ontario-card {
 	box-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);
 	border-radius: globalVariables.$global-radius;
-	margin: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;
+	margin-bottom: spacing.$spacing-7;
 	padding: spacing.$spacing-0;
 	/*
 	 * Required for cards to stay the same height regardless of content size.
@@ -24,6 +24,7 @@
 	transition: all 0.3s ease-in-out;
 	position: relative;
 	cursor: pointer;
+	background: colours.$ontario-colour-white;
 
 	&:hover {
 		box-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);
@@ -108,7 +109,11 @@
 
 	.ontario-card--image-true & {
 		border-radius: 0;
-		@at-root .ontario-card__card-type--horizontal & {
+		@at-root .ontario-card__image-right & {
+			border-radius: globalVariables.$global-radius 0 0 0;
+		}
+
+		@at-root .ontario-card__image-left & {
 			border-radius: 0 globalVariables.$global-radius 0 0;
 		}
 	}
@@ -186,7 +191,7 @@ $ontario-card-heading-colours: (
 
 .ontario-card__text-container {
 	.ontario-card__card-type--horizontal & {
-		width: 66.6%;
+		width: math.percentage(math.div(2, 3));
 	}
 
 	.ontario-card__image-size-one-fourth & {

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-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.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-header.scss

@@ -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;
@@ -304,7 +304,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 +346,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;
 	}
 }
 

package/src/components.d.ts

@@ -459,7 +459,7 @@ export namespace Components {
 		 */
 		assetBasePath: string;
 		/**
-		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'
 		 */
 		footerLinks: FooterLinks | string;
 		/**
@@ -3753,7 +3753,7 @@ declare namespace LocalJSX {
 		 */
 		assetBasePath?: string;
 		/**
-		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+		 * A prop that stores the required links for all footers. Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'
 		 */
 		footerLinks?: FooterLinks | string;
 		/**

package/src/index.html

@@ -415,7 +415,7 @@
 							</ontario-card-collection>
 
 							<h3>Edge cases</h3>
-							<ontario-card-collection cards-per-row="4">
+							<ontario-card-collection cards-per-row="3">
 								<ontario-card
 									header-colour="orange"
 									label="Card Title 1 Card Title 1 Card Title 1"
@@ -437,7 +437,7 @@
 								</ontario-card>
 							</ontario-card-collection>
 
-							<ontario-card-collection cards-per-row="4">
+							<ontario-card-collection cards-per-row="2">
 								<ontario-card
 									layout="horizontal"
 									header-colour="orange"
@@ -1386,6 +1386,10 @@
 				},
 				"printerLink": {
 					"href": "https://www.ontario.ca/page/copyright-information"
+				},
+				"termsOfUseLink": {
+					"text": "Terms of Use",
+					"href": "https://www.ontario.ca/page/terms-use"
 				}
 			}'
 			social-links='{

package/src/translations/global.i18n.json

@@ -23,6 +23,16 @@
 			"fr": "Accessibilité"
 		}
 	},
+	"termsOfUse": {
+		"link": {
+			"en": "https://www.ontario.ca/page/terms-use",
+			"fr": "https://www.ontario.ca/fr/page/conditions-dutilisation"
+		},
+		"text": {
+			"en": "Terms of Use",
+			"fr": "Conditions d’utilisation"
+		}
+	},
 	"accordion": {
 		"collapse": {
 			"en": "Collapse all",