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

package/src/components/ontario-back-to-top/ontario-back-to-top.scss

@@ -2,7 +2,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-sizes.variables' as fontSizes;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
@@ -37,7 +37,7 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 	color: colours.$ontario-colour-black;
 	line-height: globalFunctions.px-to-rem(20);
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
-	font-family: typography.$ontario-font-open-sans;
+	font-family: fonts.$ontario-font-open-sans;
 	font-weight: fontWeights.$ontario-font-weights-semi-bold;
 	z-index: 10000;
 	cursor: pointer;
@@ -54,7 +54,8 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 
 	&:focus {
 		background-color: $ontario-colour-back-to-top-background;
-		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
+		box-shadow:
+			0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
 			0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
 		outline: globalFunctions.px-to-rem(4) solid transparent;
 		transition: 0.1s ease-in-out;
@@ -62,10 +63,13 @@ $ontario-colour-back-to-top--active-background: #b2b2b2;
 
 	&:active {
 		background-color: $ontario-colour-back-to-top--active-background;
-		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
+		box-shadow:
+			0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
 			0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
 		outline: globalFunctions.px-to-rem(4) solid transparent;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	@media screen and (max-width: breakpoints.$medium-breakpoint) {

package/src/components/ontario-back-to-top/test/__snapshots__/ontario-back-to-top.spec.tsx.snap

@@ -2,11 +2,11 @@
 
 exports[`ontario-back-to-top should render the expected html 1`] = `
 <ontario-back-to-top>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <button aria-label="Scroll back to the top" class="ontario-back-to-top">
       <span aria-hidden="true"></span>
       Top
     </button>
-  </mock:shadow-root>
+  </template>
 </ontario-back-to-top>
 `;

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

@@ -1,5 +1,5 @@
 @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/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/spacing.variables' as spacing;
 @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/1-variables/font-sizes.variables' as fontSizes;
@@ -27,7 +27,7 @@
 	background-color: colours.$ontario-colour-information-light;
 	color: colours.$ontario-greyscale-70;
 	padding: spacing.$spacing-1 spacing.$spacing-2;
-	font-family: typography.$ontario-font-raleway-modified;
+	font-family: fonts.$ontario-font-raleway;
 	font-size: fontSizes.$ontario-font-size-standard-body-text;
 	font-weight: fontWeights.$ontario-font-weights-bold;
 	line-height: globalFunctions.px-to-rem(25);

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

@@ -2,44 +2,44 @@
 
 exports[`ontario-badge should override the host textContent with label prop output on the span element 1`] = `
 <ontario-badge label="completed">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span class="ontario-badge ontario-badge--default-heavy">
       completed
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;
 
 exports[`ontario-badge should render the aria-label attribute on the span element 1`] = `
 <ontario-badge aria-label-text="This course is currently in progress.">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span aria-label="This course is currently in progress." class="ontario-badge ontario-badge--default-heavy">
       In progress
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;
 
 exports[`ontario-badge should render the expected base html 1`] = `
 <ontario-badge>
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span class="ontario-badge ontario-badge--default-heavy">
       In progress
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;
 
 exports[`ontario-badge should render with the ontario-badge--default-light class on the span element 1`] = `
 <ontario-badge colour="light-teal">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <span class="ontario-badge ontario-badge--default-light">
       In progress
     </span>
-  </mock:shadow-root>
+  </template>
   In progress
 </ontario-badge>
 `;

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

@@ -2,14 +2,14 @@
 @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/line-heights.variables' as lineHeights;
 @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/functions/global.functions' as globalFunctions;
 
 .ontario-blockquote {
 	border-left: 4px solid colours.$ontario-greyscale-70;
-	font-family: typography.$ontario-font-raleway-modified;
+	font-family: fonts.$ontario-font-raleway;
 	font-size: globalFunctions.px-to-rem(19);
 	font-weight: fontWeights.$ontario-font-weights-normal;
 	letter-spacing: 0.025rem;
@@ -17,7 +17,7 @@
 	max-width: globalVariables.$standard-width;
 	margin: spacing.$spacing-6;
 	padding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;
-	quotes: '\201C''\201D';
+	quotes: '\201C' '\201D';
 
 	@media screen and (max-width: breakpoints.$small-breakpoint) {
 		font-size: globalFunctions.px-to-rem(18);

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

@@ -2,7 +2,7 @@
 
 exports[`ontario-blockquote snapshot should render the expected html 1`] = `
 <ontario-blockquote attribution="DS Tech Team" quote="This is a test quote">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <blockquote class="ontario-blockquote ontario-blockquote--short">
       <p>
         This is a test quote
@@ -11,6 +11,6 @@ exports[`ontario-blockquote snapshot should render the expected html 1`] = `
         DS Tech Team
       </cite>
     </blockquote>
-  </mock:shadow-root>
+  </template>
 </ontario-blockquote>
 `;

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

@@ -3,8 +3,8 @@
 @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/font-weights.variables' as fontWeights;
+@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/placeholder/focus.placeholders' as
 	placeholders;
 @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
@@ -22,7 +22,7 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 	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: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;
@@ -60,13 +60,17 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 	&:focus {
 		background-color: $ontario-button-bg-primary--hover;
 		color: colours.$ontario-colour-white;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: $ontario-button-bg-primary--active;
 		color: colours.$ontario-colour-white;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {
@@ -91,14 +95,18 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 		background-color: colours.$ontario-colour-button-secondary--hover;
 		border-color: colours.$ontario-colour-link--hover;
 		color: colours.$ontario-colour-link--hover;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: colours.$ontario-colour-button-secondary--active;
 		border-color: colours.$ontario-colour-link--active;
 		color: colours.$ontario-colour-link--active;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {
@@ -121,14 +129,18 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 		background-color: colours.$ontario-colour-button-tertiary--hover;
 		color: colours.$ontario-colour-link--hover;
 		text-decoration: underline;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: colours.$ontario-colour-button-tertiary--active;
 		color: colours.$ontario-colour-link--active;
 		text-decoration: underline;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {
@@ -147,12 +159,16 @@ $ontario-button-bg-secondary: colours.$ontario-colour-white;
 
 	&:focus {
 		background-color: colours.$ontario-greyscale-70;
-		transition: background-color 0.2s ease-out, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0.2s ease-out,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:active {
 		background-color: colours.$ontario-greyscale-70;
-		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+		transition:
+			background-color 0s,
+			focusPlaceholders.$ontario-focus-transition;
 	}
 
 	&:visited {

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

@@ -2,14 +2,14 @@
 
 exports[`ontario-callout snapshot should render the expected html 1`] = `
 <ontario-callout heading-content="Get notified" heading-content-type="string" heading-type="h3" highlight-colour="gold">
-  <mock:shadow-root>
+  <template shadowrootmode="open">
     <div class="ontario-border-highlight--gold ontario-callout">
       <h3 class="ontario-callout__title ontario-h5">
         Get notified
       </h3>
       <slot></slot>
     </div>
-  </mock:shadow-root>
+  </template>
   <p>
     <a href="#">
       Sign up for email reminders

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

@@ -1,9 +1,38 @@
-export const CardTypes = ['basic', 'image', 'title', 'horizontal'] as const;
-export const HeaderTypes = ['default', 'light', 'dark'] as const;
+export const Layouts = ['vertical', 'horizontal'] as const;
 export const HorizontalImagePositionTypes = ['left', 'right'] as const;
 export const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;
 
-export type CardType = (typeof CardTypes)[number];
-export type HeaderType = (typeof HeaderTypes)[number];
+export type Layout = (typeof Layouts)[number];
 export type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];
 export type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];
+
+export const HeaderColours = [
+	'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',
+];
+
+export type HeaderColour = (typeof HeaderColours)[number];

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);
@@ -47,16 +48,11 @@
 	}
 }
 
-.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;
+	@at-root .ontario-card__card-type--horizontal & {
+		margin-top: spacing.$spacing-0;
+	}
 }
 
 .ontario-card__card-type--horizontal {
@@ -72,6 +68,10 @@
 		position: relative;
 	}
 
+	.ontario-card__heading {
+		border-radius: 0;
+	}
+
 	a {
 		&:focus-within {
 			box-shadow: none;
@@ -100,30 +100,22 @@
 	padding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;
 	transition: text-decoration 0.3s ease-in-out;
 	background-color: colours.$ontario-colour-white;
+	max-width: none;
 
 	.ontario-card:hover & {
 		text-decoration-line: underline;
 		text-decoration-color: colours.$ontario-colour-black;
 	}
 
-	.ontario-card__header-type--light & {
-		background-color: colours.$ontario-greyscale-5;
-		padding-top: spacing.$spacing-4;
-		padding-bottom: spacing.$spacing-4;
-		padding-right: spacing.$spacing-9;
-		border-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;
-	}
-
-	.ontario-card__header-type--dark & {
-		background-color: colours.$ontario-colour-black;
-		padding-top: spacing.$spacing-4;
-		padding-bottom: spacing.$spacing-4;
-		border-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;
-	}
+	.ontario-card--image-true & {
+		border-radius: 0;
+		@at-root .ontario-card__image-right & {
+			border-radius: globalVariables.$global-radius 0 0 0;
+		}
 
-	.ontario-card__header-type--dark:hover & {
-		text-decoration-line: underline;
-		text-decoration-color: colours.$ontario-colour-white;
+		@at-root .ontario-card__image-left & {
+			border-radius: 0 globalVariables.$global-radius 0 0;
+		}
 	}
 
 	a {
@@ -131,10 +123,6 @@
 		text-decoration: none;
 		outline: none;
 
-		.ontario-card__header-type--dark & {
-			color: colours.$ontario-colour-white;
-		}
-
 		&::after {
 			content: '';
 			position: absolute;
@@ -160,9 +148,50 @@
 	}
 }
 
+// ontario-card's header colour options
+
+$ontario-card-heading-colours: (
+	'light-accent': colours.$ontario-greyscale-5,
+	'dark-accent': colours.$ontario-colour-black,
+	'light-gold': colours.$ontario-colour-light-gold,
+	'light-yellow': colours.$ontario-colour-light-yellow,
+	'light-taupe': colours.$ontario-colour-light-taupe,
+	'light-green': colours.$ontario-colour-light-green,
+	'light-lime': colours.$ontario-colour-light-lime,
+	'light-teal': colours.$ontario-colour-light-teal,
+	'light-sky': colours.$ontario-colour-light-sky,
+	'light-purple': colours.$ontario-colour-light-purple,
+	'light-orange': colours.$ontario-colour-light-orange,
+	'light-red': colours.$ontario-colour-light-red,
+	'light-magenta': colours.$ontario-colour-light-magenta,
+	'gold': colours.$ontario-colour-gold,
+	'yellow': colours.$ontario-colour-yellow,
+	'taupe': colours.$ontario-colour-taupe,
+	'green': colours.$ontario-colour-green,
+	'lime': colours.$ontario-colour-lime,
+	'teal': colours.$ontario-colour-teal,
+	'sky': colours.$ontario-colour-sky,
+	'purple': colours.$ontario-colour-purple,
+	'orange': colours.$ontario-colour-orange,
+	'red': colours.$ontario-colour-red,
+	'magenta': colours.$ontario-colour-magenta,
+);
+
+@each $colour-name, $colour-value in $ontario-card-heading-colours {
+	.ontario-card__background--#{$colour-name} {
+		background-color: $colour-value;
+	}
+
+	.ontario-card__heading--#{$colour-name} {
+		background-color: $colour-value;
+		padding-top: spacing.$spacing-4;
+		padding-bottom: spacing.$spacing-4;
+	}
+}
+
 .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 & {
@@ -189,18 +218,8 @@
 		margin-bottom: spacing.$spacing-0;
 	}
 
-	.ontario-card__header-type--light &,
-	.ontario-card__header-type--dark & {
-		padding-top: spacing.$spacing-4;
-	}
-
 	@media screen and (max-width: breakpoints.$medium-breakpoint) {
 		padding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;
-
-		.ontario-card__header-type--light &,
-		.ontario-card__header-type--dark & {
-			padding-top: spacing.$spacing-4;
-		}
 	}
 }