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

package/dist/ontario-design-system-components/{p-ed2d68e1.entry.js → p-fc9ff3c0.entry.js}

@@ -67,14 +67,14 @@ const l = class {
 		return o(
 			'div',
 			{
-				key: 'ab724873601dae7dc97640e5f05c938478351f44',
+				key: '74f6a3f620dd6ed82865cfffe2b761285304c9f5',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			o(
 				'svg',
 				{
-					key: '8dce26d308bd7d4fb6460b1ae7df837c68c2536b',
+					key: 'bae1b3885c211bad155c386a0f9fe6b70a920c96',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -83,7 +83,7 @@ const l = class {
 					id: 'favourite-off',
 				},
 				o('path', {
-					key: '90ed36df7b6b3646ffbe69d44dbaad5fdbb0c59b',
+					key: '63476bceaa451185d98b23fabdf5d09a27e1104f',
 					d: 'M12.1 18.55l-.1.1-.1-.1C7.14 14.24 4 11.4 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04 1 3.57 2.36h1.86C13.46 6 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.9-3.14 5.74-7.9 10.05zM16.5 3c-1.74 0-3.4.8-4.5 2.08C10.9 3.8 9.24 3 7.5 3 4.42 3 2 5.4 2 8.5c0 3.77 3.4 6.86 8.55 11.53L12 21.35l1.45-1.32C18.6 15.36 22 12.27 22 8.5 22 5.4 19.58 3 16.5 3z',
 				}),
 			),
@@ -95,4 +95,4 @@ const l = class {
 };
 l.style = r;
 export { l as ontario_icon_favourite_off };
-//# sourceMappingURL=p-ed2d68e1.entry.js.map
+//# sourceMappingURL=p-fc9ff3c0.entry.js.map

package/{www/build/p-e96e36ff.entry.js → dist/ontario-design-system-components/p-fec501d5.entry.js}

@@ -67,14 +67,14 @@ const l = class {
 		return o(
 			'div',
 			{
-				key: 'fa1371e932069cb030825ffea3607085c7a856fe',
+				key: '13acaaf3a835d03d9516adef45103328355348a6',
 				class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
 				style: { width: `${this.iconWidthState}px` },
 			},
 			o(
 				'svg',
 				{
-					key: '67e7c3f689890471a82410ebd7382bf2138ecd60',
+					key: 'c087ab31f6e5166f2d4a817939c21eaca294c751',
 					class: 'svg-icon',
 					style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
 					role: 'img',
@@ -84,7 +84,7 @@ const l = class {
 					id: 'add',
 				},
 				o('path', {
-					key: '7a183977bf5173e3e306348308f064e759bb7e2e',
+					key: 'e4b522146ab2f5146836e4761480df78b0f00ebd',
 					d: 'M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z',
 				}),
 			),
@@ -96,4 +96,4 @@ const l = class {
 };
 l.style = r;
 export { l as ontario_icon_add };
-//# sourceMappingURL=p-e96e36ff.entry.js.map
+//# sourceMappingURL=p-fec501d5.entry.js.map

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

@@ -0,0 +1,59 @@
+import { BadgeColour } from './ontario-badge.types';
+export declare class OntarioBadge {
+	host: HTMLElement;
+	internals: ElementInternals;
+	/**
+	 * The colour of the badge.
+	 */
+	colour: BadgeColour;
+	/**
+	 * The label for the badge.
+	 *
+	 * Offical guidance is to keep the label length within 15 characters.
+	 */
+	label: string;
+	/**
+	 * An aria label for screen readers.
+	 *
+	 * Used to provide more context to screen readers if necessary.
+	 *
+	 * This property is optional.
+	 *
+	 * @example
+	 * <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
+	 */
+	ariaLabelText?: string;
+	/**
+	 * Watch for changes in the `label` prop for validation purposes.
+	 *
+	 * If no `label` value or host.textContent is provided, a warning message will be printed.
+	 */
+	validateLabel(): void;
+	/**
+	 * Watch for changes to the `colour` prop.
+	 *
+	 * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
+	 *
+	 * @returns {BadgeColour}
+	 */
+	validateColour(): BadgeColour;
+	/**
+	 * Programatically set and return the colour prop.
+	 *
+	 * @prop {BadgeColour} colour
+	 *
+	 * @returns {BadgeColour}
+	 */
+	setBadgeColour(colour: BadgeColour): BadgeColour;
+	/**
+	 * Returns badge label depending on if the label prop was set or
+	 * if the host.textContent (text in-between the opening and closing tag) was set.
+	 *
+	 * The label prop takes priority.
+	 *
+	 * @returns {string | null}
+	 */
+	getBadgeLabel(): string | null;
+	componentWillLoad(): void;
+	render(): any;
+}

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

@@ -0,0 +1,11 @@
+export declare enum BadgeColourToClass {
+	teal = 'ontario-badge--default-heavy',
+	'light-teal' = 'ontario-badge--default-light',
+	black = 'ontario-badge--neutral-heavy',
+	grey = 'ontario-badge--neutral-light',
+	red = 'ontario-badge--alert-heavy',
+	yellow = 'ontario-badge--warning-heavy',
+	green = 'ontario-badge--success-heavy',
+}
+export declare const BadgeColours: string[];
+export type BadgeColour = keyof typeof BadgeColourToClass;

package/dist/types/components.d.ts

@@ -13,6 +13,7 @@ import {
 	HeadingLevelOptions,
 	HighlightColourOptions,
 } from './utils/components/callout-aside/callout-aside.interface';
+import { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 import { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
 import {
 	CardType,
@@ -64,6 +65,7 @@ export {
 	HeadingLevelOptions,
 	HighlightColourOptions,
 } from './utils/components/callout-aside/callout-aside.interface';
+export { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 export { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
 export {
 	CardType,
@@ -161,6 +163,21 @@ export namespace Components {
 		 */
 		language?: Language;
 	}
+	interface OntarioBadge {
+		/**
+		 * An aria label for screen readers.  Used to provide more context to screen readers if necessary.  This property is optional.
+		 * @example <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
+		 */
+		ariaLabelText?: string;
+		/**
+		 * The colour of the badge.
+		 */
+		colour: BadgeColour;
+		/**
+		 * The label for the badge.  Offical guidance is to keep the label length within 15 characters.
+		 */
+		label: string;
+	}
 	interface OntarioBlockquote {
 		/**
 		 * Optional text to be displayed as the attribution (the author) of the quote.
@@ -1969,6 +1986,11 @@ declare global {
 		prototype: HTMLOntarioBackToTopElement;
 		new (): HTMLOntarioBackToTopElement;
 	};
+	interface HTMLOntarioBadgeElement extends Components.OntarioBadge, HTMLStencilElement {}
+	var HTMLOntarioBadgeElement: {
+		prototype: HTMLOntarioBadgeElement;
+		new (): HTMLOntarioBadgeElement;
+	};
 	interface HTMLOntarioBlockquoteElement extends Components.OntarioBlockquote, HTMLStencilElement {}
 	var HTMLOntarioBlockquoteElement: {
 		prototype: HTMLOntarioBlockquoteElement;
@@ -3067,6 +3089,7 @@ declare global {
 		'ontario-accordion': HTMLOntarioAccordionElement;
 		'ontario-aside': HTMLOntarioAsideElement;
 		'ontario-back-to-top': HTMLOntarioBackToTopElement;
+		'ontario-badge': HTMLOntarioBadgeElement;
 		'ontario-blockquote': HTMLOntarioBlockquoteElement;
 		'ontario-button': HTMLOntarioButtonElement;
 		'ontario-callout': HTMLOntarioCalloutElement;
@@ -3257,6 +3280,21 @@ declare namespace LocalJSX {
 		 */
 		language?: Language;
 	}
+	interface OntarioBadge {
+		/**
+		 * An aria label for screen readers.  Used to provide more context to screen readers if necessary.  This property is optional.
+		 * @example <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
+		 */
+		ariaLabelText?: string;
+		/**
+		 * The colour of the badge.
+		 */
+		colour?: BadgeColour;
+		/**
+		 * The label for the badge.  Offical guidance is to keep the label length within 15 characters.
+		 */
+		label?: string;
+	}
 	interface OntarioBlockquote {
 		/**
 		 * Optional text to be displayed as the attribution (the author) of the quote.
@@ -5145,6 +5183,7 @@ declare namespace LocalJSX {
 		'ontario-accordion': OntarioAccordion;
 		'ontario-aside': OntarioAside;
 		'ontario-back-to-top': OntarioBackToTop;
+		'ontario-badge': OntarioBadge;
 		'ontario-blockquote': OntarioBlockquote;
 		'ontario-button': OntarioButton;
 		'ontario-callout': OntarioCallout;
@@ -5288,6 +5327,7 @@ declare module '@stencil/core' {
 			'ontario-accordion': LocalJSX.OntarioAccordion & JSXBase.HTMLAttributes<HTMLOntarioAccordionElement>;
 			'ontario-aside': LocalJSX.OntarioAside & JSXBase.HTMLAttributes<HTMLOntarioAsideElement>;
 			'ontario-back-to-top': LocalJSX.OntarioBackToTop & JSXBase.HTMLAttributes<HTMLOntarioBackToTopElement>;
+			'ontario-badge': LocalJSX.OntarioBadge & JSXBase.HTMLAttributes<HTMLOntarioBadgeElement>;
 			'ontario-blockquote': LocalJSX.OntarioBlockquote & JSXBase.HTMLAttributes<HTMLOntarioBlockquoteElement>;
 			'ontario-button': LocalJSX.OntarioButton & JSXBase.HTMLAttributes<HTMLOntarioButtonElement>;
 			'ontario-callout': LocalJSX.OntarioCallout & JSXBase.HTMLAttributes<HTMLOntarioCalloutElement>;

package/dist/types/utils/helper/utils.d.ts

@@ -3,5 +3,20 @@ export declare function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolea
 export declare function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]>;
 export declare function organizeObjectKeys(data: any[], columns: string[]): any[];
 export declare function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]];
-export declare function isNumber(str: string): boolean;
+/**
+ * Takes an input value and determines whether or not it is a number.
+ *
+ * @param {string | number} value - The value you would like to test against.
+ *
+ * @returns {boolean}
+ */
+export declare function isNumber(value: string | number): boolean;
 export declare function isEmpty(str: string | undefined | null): boolean;
+/**
+ * Retrieves the keys from an enum and lists them in an array.
+ *
+ * @param {object} enumObject - The enum you wish to get the keys of.
+ *
+ * @returns {string[]}
+ */
+export declare function retrieveEnumKeys(enumObject: object): string[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "4.3.0-alpha.2",
+	"version": "4.3.0",
 	"private": false,
 	"description": "Ontario Design System Component Library",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "4.3.0-alpha.1",
+		"@ongov/ontario-design-system-global-styles": "4.3.0",
 		"@stencil/core": "^4.12.2",
 		"dotenv": "^16.3.1"
 	},
@@ -102,5 +102,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "5b915851b8223b9bfa05b70e4be5035cafb1b911"
+	"gitHead": "788db424e1fbcb72a4b9bf8da801da4765ab6154"
 }

package/readme.md

@@ -57,6 +57,8 @@ There are two ways to install the Ontario Design System component library packag
    ></script>
    ```
 
+_Note_: When working with bundlers, like [Vite](https://vitejs.dev/), the component library and framework specific versions should work out of the box.
+
 ### CDN
 
 A quick and easy way to get started with the Web Components without having to use a package is to use the published CDN version. The CDN used in this example is Unpkg, but other CDNs should work.

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

@@ -0,0 +1,71 @@
+@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/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;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
+
+.ontario-badge__container {
+	display: flex;
+	flex-direction: column;
+	gap: spacing.$spacing-7;
+	align-items: flex-start;
+	padding: spacing.$spacing-5 spacing.$spacing-4;
+}
+
+.ontario-badge__label {
+	display: block;
+	text-align: left;
+	font-weight: fontWeights.$ontario-font-weights-semi-bold;
+	margin-bottom: spacing.$spacing-3;
+	font-size: fontSizes.$ontario-font-size-small;
+	color: colours.$ontario-greyscale-70;
+}
+
+.ontario-badge {
+	display: inline-block;
+	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-size: fontSizes.$ontario-font-size-standard-body-text;
+	font-weight: fontWeights.$ontario-font-weights-bold;
+	line-height: globalFunctions.px-to-rem(25);
+	letter-spacing: 0.03rem;
+	text-transform: uppercase;
+}
+
+.ontario-badge--default-light {
+	background-color: colours.$ontario-colour-information-light;
+	color: colours.$ontario-greyscale-70;
+}
+
+.ontario-badge--default-heavy {
+	background-color: colours.$ontario-colour-information;
+	color: colours.$ontario-colour-white;
+}
+
+.ontario-badge--neutral-light {
+	background-color: colours.$ontario-greyscale-5;
+	color: colours.$ontario-greyscale-70;
+}
+
+.ontario-badge--neutral-heavy {
+	background-color: colours.$ontario-colour-black;
+	color: colours.$ontario-colour-white;
+}
+
+.ontario-badge--alert-heavy {
+	background-color: colours.$ontario-colour-alert;
+	color: colours.$ontario-colour-white;
+}
+
+.ontario-badge--warning-heavy {
+	background-color: colours.$ontario-colour-warning;
+	color: colours.$ontario-colour-black;
+}
+
+.ontario-badge--success-heavy {
+	background-color: colours.$ontario-colour-success;
+	color: colours.$ontario-colour-white;
+}

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

@@ -0,0 +1,123 @@
+import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';
+
+import { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+
+@Component({
+	tag: 'ontario-badge',
+	styleUrl: 'ontario-badge.scss',
+	shadow: true,
+})
+export class OntarioBadge {
+	@Element() host: HTMLElement;
+	@AttachInternals() internals: ElementInternals;
+
+	/**
+	 * The colour of the badge.
+	 */
+	@Prop({ mutable: true }) colour: BadgeColour = 'teal';
+
+	/**
+	 * The label for the badge.
+	 *
+	 * Offical guidance is to keep the label length within 15 characters.
+	 */
+	@Prop() label: string;
+
+	/**
+	 * An aria label for screen readers.
+	 *
+	 * Used to provide more context to screen readers if necessary.
+	 *
+	 * This property is optional.
+	 *
+	 * @example
+	 * <ontario-badge aria-label-text="This training is currently in progress.">In progress</ontario-badge>
+	 */
+	@Prop({ mutable: true }) ariaLabelText?: string;
+
+	/**
+	 * Watch for changes in the `label` prop for validation purposes.
+	 *
+	 * If no `label` value or host.textContent is provided, a warning message will be printed.
+	 */
+	@Watch('label')
+	validateLabel() {
+		if (!this.getBadgeLabel()) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' a label ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-badge> ')
+				.addRegularText('was not provided.')
+				.printMessage();
+		}
+	}
+
+	/**
+	 * Watch for changes to the `colour` prop.
+	 *
+	 * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.
+	 *
+	 * @returns {BadgeColour}
+	 */
+	@Watch('colour')
+	validateColour(): BadgeColour {
+		if (this.colour) {
+			if (validateValueAgainstArray(this.colour, BadgeColours)) {
+				return this.colour;
+			} else {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(` colour ${this.colour} `)
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-badge> ')
+					.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')
+					.printMessage();
+			}
+		}
+
+		return this.setBadgeColour('teal');
+	}
+
+	/**
+	 * Programatically set and return the colour prop.
+	 *
+	 * @prop {BadgeColour} colour
+	 *
+	 * @returns {BadgeColour}
+	 */
+	setBadgeColour(colour: BadgeColour): BadgeColour {
+		this.colour = colour;
+		return this.colour;
+	}
+
+	/**
+	 * Returns badge label depending on if the label prop was set or
+	 * if the host.textContent (text in-between the opening and closing tag) was set.
+	 *
+	 * The label prop takes priority.
+	 *
+	 * @returns {string | null}
+	 */
+	getBadgeLabel(): string | null {
+		const badgeLabel = this.label ? this.label : this.host.textContent;
+		return badgeLabel;
+	}
+
+	componentWillLoad() {
+		this.validateColour();
+		this.validateLabel();
+	}
+
+	render() {
+		return (
+			<span class={`ontario-badge ${BadgeColourToClass[this.colour]}`} aria-label={this.ariaLabelText}>
+				{this.getBadgeLabel()}
+			</span>
+		);
+	}
+}

package/src/components/ontario-badge/ontario-badge.types.ts

@@ -0,0 +1,15 @@
+import { retrieveEnumKeys } from '../../utils/helper/utils';
+
+export enum BadgeColourToClass {
+	teal = 'ontario-badge--default-heavy',
+	'light-teal' = 'ontario-badge--default-light',
+	black = 'ontario-badge--neutral-heavy',
+	grey = 'ontario-badge--neutral-light',
+	red = 'ontario-badge--alert-heavy',
+	yellow = 'ontario-badge--warning-heavy',
+	green = 'ontario-badge--success-heavy',
+}
+
+export const BadgeColours = retrieveEnumKeys(BadgeColourToClass);
+
+export type BadgeColour = keyof typeof BadgeColourToClass;

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

@@ -0,0 +1,57 @@
+import { OntarioBadge } from '@ongov/ontario-design-system-component-library-react';
+
+# ontario-badge
+
+Use badges to indicate the status of a page or section.
+
+Do not use a badge to bring a user’s attention to important content.
+
+## Usage guidance
+
+Please refer to the [Ontario Design System](https://designsystem.ontario.ca/components/detail/badges.html) for current documentation guidance for badges.
+
+## Configuration
+
+Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the badge component can be added directly into the project's code, and can be customized by updating the properties outlined [here](#properties). Please see the [examples](#examples) below for how to configure the component.
+
+## Examples
+
+Example of a badge component, where the user is explicitly passing in content through the `label` property.
+
+```html
+<ontario-badge label="Not started"></ontario-badge>
+```
+
+<div>
+	<OntarioBadge
+		label="Not started"
+	></OntarioBadge>
+</div>
+
+This is another example of a badge. This time, the content is passed as a child of the `ontario-badge` component. A `colour` option is also passed.
+
+```html
+<ontario-badge colour="light-teal">Completed</ontario-badge>
+```
+
+<div>
+	<OntarioBadge
+		colour="light-teal"
+	>
+		Completed
+	</OntarioBadge>
+</div>
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property        | Attribute         | Description                                                                                                               | Type                                                                          | Default     |
+| --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------- |
+| `ariaLabelText` | `aria-label-text` | An aria label for screen readers. Used to provide more context to screen readers if necessary. This property is optional. | `string \| undefined`                                                         | `undefined` |
+| `colour`        | `colour`          | The colour of the badge.                                                                                                  | `"black" \| "green" \| "grey" \| "light-teal" \| "red" \| "teal" \| "yellow"` | `'teal'`    |
+| `label`         | `label`           | The label for the badge. Offical guidance is to keep the label length within 15 characters.                               | `string`                                                                      | `undefined` |
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ontario-badge should override the host textContent with label prop output on the span element 1`] = `
+<ontario-badge label="completed">
+  <mock:shadow-root>
+    <span class="ontario-badge ontario-badge--default-heavy">
+      completed
+    </span>
+  </mock:shadow-root>
+  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>
+    <span aria-label="This course is currently in progress." class="ontario-badge ontario-badge--default-heavy">
+      In progress
+    </span>
+  </mock:shadow-root>
+  In progress
+</ontario-badge>
+`;
+
+exports[`ontario-badge should render the expected base html 1`] = `
+<ontario-badge>
+  <mock:shadow-root>
+    <span class="ontario-badge ontario-badge--default-heavy">
+      In progress
+    </span>
+  </mock:shadow-root>
+  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>
+    <span class="ontario-badge ontario-badge--default-light">
+      In progress
+    </span>
+  </mock:shadow-root>
+  In progress
+</ontario-badge>
+`;