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

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

@@ -47,16 +47,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 +67,10 @@
 		position: relative;
 	}
 
+	.ontario-card__heading {
+		border-radius: 0;
+	}
+
 	a {
 		&:focus-within {
 			box-shadow: none;
@@ -100,30 +99,18 @@
 	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__header-type--dark:hover & {
-		text-decoration-line: underline;
-		text-decoration-color: colours.$ontario-colour-white;
+	.ontario-card--image-true & {
+		border-radius: 0;
+		@at-root .ontario-card__card-type--horizontal & {
+			border-radius: 0 globalVariables.$global-radius 0 0;
+		}
 	}
 
 	a {
@@ -131,10 +118,6 @@
 		text-decoration: none;
 		outline: none;
 
-		.ontario-card__header-type--dark & {
-			color: colours.$ontario-colour-white;
-		}
-
 		&::after {
 			content: '';
 			position: absolute;
@@ -160,6 +143,47 @@
 	}
 }
 
+// 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%;
@@ -189,18 +213,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;
-		}
 	}
 }
 

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,114 +114,139 @@ export class OntarioCard {
 
 	/**
 	 * Mutable variable, for internal use only.
-	 * Set the card's type depending on validation result.
-	 */
-	@State() private cardTypeState: string;
-
-	/**
-	 * Mutable variable, for internal use only.
-	 * Set the card's header type depending on validation result.
+	 * Set the card's layout depending on validation result.
 	 */
-	@State() private headerTypeState: string;
+	@State() private layoutState: 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() {
+	private getCardClasses(): string {
 		const baseClass =
-			this.cardTypeState === 'horizontal'
-				? `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
-				: `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;
+			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';
 
-		return `${baseClass}${descriptionClass}`;
+		const backgroundClass =
+			this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
+
+		return `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();
+	}
+
+	/**
+	 * 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();
 	}
 
-	private getHref() {
+	/**
+	 * 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}>
@@ -229,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>
+`;