@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/collection/components/ontario-back-to-top/test/ontario-back-to-top.e2e.js

@@ -0,0 +1,62 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { mockBTTContent } from './mock-page-content';
+describe('ontario-back-to-top', () => {
+	it('should be hidden on page load', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-back-to-top></ontario-back-to-top>');
+		const element = await page.find('ontario-back-to-top >>> button');
+		const styles = await element.getComputedStyle();
+		expect(styles.visibility).toBe('hidden');
+		expect(element).toHaveClass('ontario-back-to-top');
+		expect(element).not.toHaveClass('active');
+	});
+	it('should be visible when the window is scrolled down beyond 200px', async () => {
+		const page = await newE2EPage();
+		await page.setContent(mockBTTContent);
+		// scroll down the page
+		// this method was taken from: https://github.com/microsoft/playwright/issues/4302#issuecomment-1132919529
+		// setting delay function and calling it after setting the scrollTo was the only way to successfully get the scroll to work
+		await page.evaluate(async () => {
+			window.scrollTo(0, 500);
+			await new Promise((resolve) => setTimeout(resolve, 100));
+		});
+		const element = await page.find('ontario-back-to-top >>> button');
+		const styles = await element.getComputedStyle();
+		expect(element.className).toEqual('ontario-back-to-top active');
+		expect(styles === null || styles === void 0 ? void 0 : styles.visibility).toBe('visible');
+	});
+	it('should trigger the window to scroll back to the top of the page when clicked', async () => {
+		const page = await newE2EPage();
+		await page.setContent(mockBTTContent);
+		// scroll down the page
+		await page.evaluate(async () => {
+			window.scrollTo(0, 500);
+			await new Promise((resolve) => setTimeout(resolve, 100));
+		});
+		// wait for the scroll event to trigger and update the component's state
+		await page.waitForChanges();
+		const element = await page.find('ontario-back-to-top >>> button');
+		// click the button
+		await element.click();
+		// Wait for the scroll animation to complete
+		await new Promise((resolve) => setTimeout(resolve, 500));
+		const pageDetails = await page.evaluate(() => {
+			var _a, _b, _c;
+			const component = window.document.getElementsByTagName('ontario-back-to-top')[0];
+			return {
+				scrollY: window.scrollY,
+				element: (_a = component.shadowRoot) === null || _a === void 0 ? void 0 : _a.firstElementChild,
+				elementClassName:
+					(_c = (_b = component.shadowRoot) === null || _b === void 0 ? void 0 : _b.firstElementChild) === null ||
+					_c === void 0
+						? void 0
+						: _c.className,
+			};
+		});
+		expect(pageDetails.scrollY).toEqual(0);
+		expect(pageDetails.elementClassName).toEqual('ontario-back-to-top');
+		const styles = await element.getComputedStyle();
+		expect(styles.visibility).toBe('hidden');
+	});
+});
+//# sourceMappingURL=ontario-back-to-top.e2e.js.map

package/dist/collection/components/ontario-back-to-top/test/ontario-back-to-top.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-back-to-top.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-back-to-top/test/ontario-back-to-top.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\nimport { mockBTTContent } from './mock-page-content';\n\ndescribe('ontario-back-to-top', () => {\n\tit('should be hidden on page load', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-back-to-top></ontario-back-to-top>');\n\t\tconst element = await page.find('ontario-back-to-top >>> button');\n\t\tconst styles = await element.getComputedStyle();\n\n\t\texpect(styles.visibility).toBe('hidden');\n\t\texpect(element).toHaveClass('ontario-back-to-top');\n\t\texpect(element).not.toHaveClass('active');\n\t});\n\n\tit('should be visible when the window is scrolled down beyond 200px', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(mockBTTContent);\n\n\t\t// scroll down the page\n\t\t// this method was taken from: https://github.com/microsoft/playwright/issues/4302#issuecomment-1132919529\n\t\t// setting delay function and calling it after setting the scrollTo was the only way to successfully get the scroll to work\n\t\tawait page.evaluate(async () => {\n\t\t\twindow.scrollTo(0, 500);\n\t\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\t});\n\n\t\tconst element = await page.find('ontario-back-to-top >>> button');\n\t\tconst styles = await element.getComputedStyle();\n\n\t\texpect(element.className).toEqual('ontario-back-to-top active');\n\t\texpect(styles?.visibility).toBe('visible');\n\t});\n\n\tit('should trigger the window to scroll back to the top of the page when clicked', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(mockBTTContent);\n\n\t\t// scroll down the page\n\t\tawait page.evaluate(async () => {\n\t\t\twindow.scrollTo(0, 500);\n\t\t\tawait new Promise((resolve) => setTimeout(resolve, 100));\n\t\t});\n\n\t\t// wait for the scroll event to trigger and update the component's state\n\t\tawait page.waitForChanges();\n\t\tconst element = await page.find('ontario-back-to-top >>> button');\n\n\t\t// click the button\n\t\tawait element.click();\n\n\t\t// Wait for the scroll animation to complete\n\t\tawait new Promise((resolve) => setTimeout(resolve, 500));\n\n\t\tconst pageDetails = await page.evaluate(() => {\n\t\t\tconst component = window.document.getElementsByTagName('ontario-back-to-top')[0];\n\n\t\t\treturn {\n\t\t\t\tscrollY: window.scrollY,\n\t\t\t\telement: component.shadowRoot?.firstElementChild,\n\t\t\t\telementClassName: component.shadowRoot?.firstElementChild?.className,\n\t\t\t};\n\t\t});\n\n\t\texpect(pageDetails.scrollY).toEqual(0);\n\t\texpect(pageDetails.elementClassName).toEqual('ontario-back-to-top');\n\n\t\tconst styles = await element.getComputedStyle();\n\t\texpect(styles.visibility).toBe('hidden');\n\t});\n});\n"]}

package/dist/collection/components/ontario-back-to-top/test/ontario-back-to-top.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioBackToTop } from '../ontario-back-to-top';
+describe('ontario-back-to-top', () => {
+	it('should render the expected html', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBackToTop],
+			html: `<ontario-back-to-top></ontario-back-to-top>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('renders', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBackToTop],
+			html: `<ontario-back-to-top></ontario-back-to-top>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-back-to-top>
+				<mock:shadow-root>
+					<button aria-label="Scroll back to the top" class="ontario-back-to-top">
+						<span aria-hidden="true"></span>
+						Top
+					</button>
+				</mock:shadow-root>
+			</ontario-back-to-top>
+    	`);
+	});
+});
+//# sourceMappingURL=ontario-back-to-top.spec.js.map

package/dist/collection/components/ontario-back-to-top/test/ontario-back-to-top.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-back-to-top.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-back-to-top/test/ontario-back-to-top.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE,6CAA6C;SACnD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACxB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE,6CAA6C;SACnD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;MAS1B,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioBackToTop } from '../ontario-back-to-top';\n\ndescribe('ontario-back-to-top', () => {\n\tit('should render the expected html', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBackToTop],\n\t\t\thtml: `<ontario-back-to-top></ontario-back-to-top>`,\n\t\t});\n\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('renders', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBackToTop],\n\t\t\thtml: `<ontario-back-to-top></ontario-back-to-top>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-back-to-top>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<button aria-label=\"Scroll back to the top\" class=\"ontario-back-to-top\">\n\t\t\t\t\t\t<span aria-hidden=\"true\"></span>\n\t\t\t\t\t\tTop\n\t\t\t\t\t</button>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-back-to-top>\n    \t`);\n\t});\n});\n"]}

package/dist/collection/components/ontario-blockquote/blockquote.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=blockquote.interface.js.map

package/dist/collection/components/ontario-blockquote/blockquote.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockquote.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-blockquote/blockquote.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Base } from '../../utils/common/common.interface';\n\nexport interface Blockquote extends Base {\n\t/**\n\t * Text to be displayed as the quote. Note that wrapping the quotes in quotations is not needed - this is handled through the component styles.\n\t */\n\tquote: string;\n\n\t/**\n\t * Optional text to be displayed as the attribution (the author) of the quote.\n\t */\n\tattribution?: string;\n\n\t/**\n\t * Optional text to be displayed for additional information about the attribution/author.\n\t */\n\tbyline?: string | undefined;\n}\n"]}

package/dist/collection/components/ontario-blockquote/ontario-blockquote.css

@@ -0,0 +1,113 @@
+@charset "UTF-8";
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+/* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+.ontario-blockquote {
+	border-left: 4px solid #4d4d4d;
+	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1.1875rem;
+	font-weight: 400;
+	letter-spacing: 0.025rem;
+	line-height: 1.56;
+	max-width: 48rem;
+	margin: 2rem;
+	padding: 1.5rem 0 1.5rem 1.5rem;
+	quotes: '“' '”';
+}
+@media screen and (max-width: 40em) {
+	.ontario-blockquote {
+		font-size: 1.125rem;
+		letter-spacing: 0.03rem;
+		line-height: 1.5;
+		margin: 1.5rem 0 2rem 0;
+	}
+}
+
+.ontario-blockquote p {
+	margin: 0 0 1.5rem 0;
+}
+.ontario-blockquote p::before {
+	content: open-quote;
+}
+.ontario-blockquote p::after {
+	content: close-quote;
+}
+
+.ontario-blockquote--short {
+	font-size: 1.75rem;
+	letter-spacing: 0.02rem;
+	line-height: 1.5;
+}
+@media screen and (max-width: 40em) {
+	.ontario-blockquote--short {
+		font-size: 1.4375rem;
+		line-height: 1.43;
+	}
+}
+
+.ontario-blockquote__attribution,
+.ontario-blockquote__byline {
+	display: block;
+	font-size: 1rem;
+	letter-spacing: 0.025rem;
+	line-height: 1.56;
+	text-align: right;
+}
+@media screen and (max-width: 40em) {
+	.ontario-blockquote__attribution,
+	.ontario-blockquote__byline {
+		letter-spacing: 0.03rem;
+		line-height: 1.5;
+	}
+}
+
+.ontario-blockquote__attribution {
+	font-style: normal;
+	font-weight: 700;
+}
+.ontario-blockquote__attribution::before {
+	content: '— ';
+}
+
+html[lang='fr'] blockquote {
+	quotes: '« ' ' »';
+}

package/dist/collection/components/ontario-blockquote/ontario-blockquote.js

@@ -0,0 +1,166 @@
+import { h } from '@stencil/core';
+import { validatePropExists } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+export class OntarioBlockquote {
+	constructor() {
+		this.quote = undefined;
+		this.attribution = undefined;
+		this.byline = undefined;
+		this.shortQuoteLength = 140;
+		this.shortQuote = false;
+		this.quoteState = undefined;
+	}
+	/*
+	 * Watch for changes in the `quote` prop for validation purposes.
+	 *
+	 * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).
+	 * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.
+	 */
+	validateQuote() {
+		var _a, _b, _c, _d;
+		this.quoteState =
+			(_b = (_a = this.quote) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
+				? _b
+				: '';
+		this.validateQuoteContent(this.quoteState);
+		this.shortQuote =
+			(_d = ((_c = this.quoteState) === null || _c === void 0 ? void 0 : _c.length) <= this.shortQuoteLength) !==
+				null && _d !== void 0
+				? _d
+				: true;
+	}
+	/**
+	 * Print the missing `quote` prop warning message
+	 */
+	validateQuoteContent(newValue) {
+		if (validatePropExists(newValue)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' quote ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-blockquote> ')
+				.addRegularText('was not provided')
+				.printMessage();
+		}
+	}
+	componentWillLoad() {
+		this.validateQuote();
+	}
+	/**
+	 * This helper is used to help load translations for any slots + text content passed in by the user.
+	 */
+	componentDidLoad() {
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes') {
+					this.validateQuote();
+				}
+			});
+		});
+		const options = { attributes: true };
+		observer.observe(this.host, options);
+	}
+	render() {
+		return h(
+			'blockquote',
+			{
+				key: '10d7b83d6b3984b8b321c9757fb6fb5ffca89ee3',
+				class: this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`,
+			},
+			h('p', { key: '6b557c47534fb2c50f0f7eb31967bc21f4969043' }, this.quoteState),
+			this.attribution && h('cite', { class: 'ontario-blockquote__attribution' }, this.attribution),
+			this.byline && h('cite', { class: 'ontario-blockquote__byline' }, this.byline),
+		);
+	}
+	static get is() {
+		return 'ontario-blockquote';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-blockquote.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-blockquote.css'],
+		};
+	}
+	static get properties() {
+		return {
+			quote: {
+				type: 'string',
+				mutable: true,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'Text to be displayed as the quote.\n\nNote that wrapping the quotes in quotations is not needed - this is handled through the component styles',
+				},
+				attribute: 'quote',
+				reflect: false,
+			},
+			attribution: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Optional text to be displayed as the attribution (the author) of the quote.',
+				},
+				attribute: 'attribution',
+				reflect: false,
+			},
+			byline: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'Optional text to be displayed for additional information about the attribution/author.',
+				},
+				attribute: 'byline',
+				reflect: false,
+			},
+		};
+	}
+	static get states() {
+		return {
+			shortQuoteLength: {},
+			shortQuote: {},
+			quoteState: {},
+		};
+	}
+	static get elementRef() {
+		return 'host';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'quote',
+				methodName: 'validateQuote',
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-blockquote.js.map

package/dist/collection/components/ontario-blockquote/ontario-blockquote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-blockquote.js","sourceRoot":"","sources":["../../../src/components/ontario-blockquote/ontario-blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAI1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAOlF,MAAM,OAAO,iBAAiB;;;;;gCAoBO,GAAG;0BAER,KAAK;;;IAIpC;;;;;OAKG;IAEH,aAAa;;QACZ,IAAI,CAAC,UAAU,GAAG,MAAA,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,IAAI,CAAC,WAAW,mCAAI,EAAE,CAAC;QAC5D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC3C,IAAI,CAAC,UAAU,GAAG,MAAA,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,KAAI,IAAI,CAAC,gBAAgB,mCAAI,IAAI,CAAC;IAC5E,CAAC;IAED;;OAEG;IACH,oBAAoB,CAAC,QAAgB;QACpC,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,SAAS,CAAC;iBAC3B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,wBAAwB,CAAC;iBAC1C,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;QAClB,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IACH,gBAAgB;QACf,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACnD,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC9B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACpC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACtB,CAAC;YACF,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;QACrC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACtC,CAAC;IAED,MAAM;QACL,OAAO,CACN,mEAAY,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,oBAAoB;YACzG,4DAAI,IAAI,CAAC,UAAU,CAAK;YACvB,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,WAAW,CAAQ;YAC3F,IAAI,CAAC,MAAM,IAAI,YAAM,KAAK,EAAC,4BAA4B,IAAE,IAAI,CAAC,MAAM,CAAQ,CACjE,CACb,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed as the quote.\n\t *\n\t * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t */\n\t@Prop({ mutable: true }) quote: string;\n\n\t/**\n\t * Optional text to be displayed as the attribution (the author) of the quote.\n\t */\n\t@Prop() attribution?: string;\n\n\t/**\n\t * Optional text to be displayed for additional information about the attribution/author.\n\t */\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/*\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t *\n\t * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t */\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength ?? true;\n\t}\n\n\t/**\n\t * Print the missing `quote` prop warning message\n\t */\n\tvalidateQuoteContent(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.validateQuote();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-blockquote/test/ontario-blockquote.e2e.js

@@ -0,0 +1,73 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-blockquote', () => {
+	it('renders', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-blockquote></ontario-blockquote>');
+		const component = await page.find('ontario-blockquote');
+		const element = await page.find('ontario-blockquote >>> blockquote');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClass('ontario-blockquote');
+	});
+	describe('render changes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent('<ontario-blockquote></ontario-blockquote>');
+			component = await page.find('ontario-blockquote');
+			element = await page.find('ontario-blockquote >>> blockquote');
+		});
+		it('renders changes to the quote property', async () => {
+			component.setProperty('quote', 'This is the quote');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-blockquote', 'ontario-blockquote--short']);
+			expect(element.textContent).toContain('This is the quote');
+			// set a longer quote and test that the short class does not exist
+			component.setProperty(
+				'quote',
+				'When one door closes, another opens; but we often look so long and so regretfully upon the closed door that we do not see the one that has opened for us.',
+			);
+			await page.waitForChanges();
+			expect(element).toHaveClass('ontario-blockquote');
+			expect(element).not.toHaveClass('ontario-blockquote--short');
+		});
+		it('renders changes to the attribution property', async () => {
+			component.setProperty('attribution', 'Homer Simpson');
+			await page.waitForChanges();
+			expect(element).toHaveClass('ontario-blockquote');
+			expect(element.textContent).toContain('Homer Simpson');
+		});
+		it('renders changes to the byline property', async () => {
+			component.setProperty('byline', 'Ontario Digital Service');
+			await page.waitForChanges();
+			expect(element).toHaveClass('ontario-blockquote');
+			expect(element.textContent).toContain('Ontario Digital Service');
+		});
+	});
+	describe('render CSS classes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent('<ontario-blockquote></ontario-blockquote>');
+			component = await page.find('ontario-blockquote');
+			element = await page.find('ontario-blockquote >>> blockquote');
+		});
+		it('should render only the `ontario-blockquote` class when the count of the quote prop is over 140 characters', async () => {
+			component.setProperty(
+				'quote',
+				'I saw this movie about a bus that had to speed around a city, keeping its speed over fifty, and if its speed dropped, it would explode! I think it was called, "The Bus That Couldn’t Slow Down".',
+			);
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-blockquote']);
+		});
+		it('should render both the `ontario-blockquote` and `ontario-blockquote--short` classes when the count of the quote prop is under 140 characters', async () => {
+			component.setProperty('quote', 'This is an example of a short quote');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-blockquote', 'ontario-blockquote--short']);
+		});
+	});
+});
+//# sourceMappingURL=ontario-blockquote.e2e.js.map

package/dist/collection/components/ontario-blockquote/test/ontario-blockquote.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-blockquote.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-blockquote/test/ontario-blockquote.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-blockquote', () => {\n\tit('renders', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-blockquote></ontario-blockquote>');\n\t\tconst component = await page.find('ontario-blockquote');\n\t\tconst element = await page.find('ontario-blockquote >>> blockquote');\n\n\t\texpect(component).toHaveClass('hydrated');\n\t\texpect(element).toHaveClass('ontario-blockquote');\n\t});\n\n\tdescribe('render changes', () => {\n\t\tlet page: any;\n\t\tlet component: any;\n\t\tlet element: any;\n\n\t\tbeforeEach(async () => {\n\t\t\tpage = await newE2EPage();\n\t\t\tawait page.setContent('<ontario-blockquote></ontario-blockquote>');\n\t\t\tcomponent = await page.find('ontario-blockquote');\n\t\t\telement = await page.find('ontario-blockquote >>> blockquote');\n\t\t});\n\n\t\tit('renders changes to the quote property', async () => {\n\t\t\tcomponent.setProperty('quote', 'This is the quote');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-blockquote', 'ontario-blockquote--short']);\n\t\t\texpect(element.textContent).toContain('This is the quote');\n\n\t\t\t// set a longer quote and test that the short class does not exist\n\t\t\tcomponent.setProperty(\n\t\t\t\t'quote',\n\t\t\t\t'When one door closes, another opens; but we often look so long and so regretfully upon the closed door that we do not see the one that has opened for us.',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClass('ontario-blockquote');\n\t\t\texpect(element).not.toHaveClass('ontario-blockquote--short');\n\t\t});\n\n\t\tit('renders changes to the attribution property', async () => {\n\t\t\tcomponent.setProperty('attribution', 'Homer Simpson');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClass('ontario-blockquote');\n\t\t\texpect(element.textContent).toContain('Homer Simpson');\n\t\t});\n\n\t\tit('renders changes to the byline property', async () => {\n\t\t\tcomponent.setProperty('byline', 'Ontario Digital Service');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClass('ontario-blockquote');\n\t\t\texpect(element.textContent).toContain('Ontario Digital Service');\n\t\t});\n\t});\n\n\tdescribe('render CSS classes', () => {\n\t\tlet page: any;\n\t\tlet component: any;\n\t\tlet element: any;\n\n\t\tbeforeEach(async () => {\n\t\t\tpage = await newE2EPage();\n\t\t\tawait page.setContent('<ontario-blockquote></ontario-blockquote>');\n\t\t\tcomponent = await page.find('ontario-blockquote');\n\t\t\telement = await page.find('ontario-blockquote >>> blockquote');\n\t\t});\n\n\t\tit('should render only the `ontario-blockquote` class when the count of the quote prop is over 140 characters', async () => {\n\t\t\tcomponent.setProperty(\n\t\t\t\t'quote',\n\t\t\t\t'I saw this movie about a bus that had to speed around a city, keeping its speed over fifty, and if its speed dropped, it would explode! I think it was called, \"The Bus That Couldn’t Slow Down\".',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-blockquote']);\n\t\t});\n\n\t\tit('should render both the `ontario-blockquote` and `ontario-blockquote--short` classes when the count of the quote prop is under 140 characters', async () => {\n\t\t\tcomponent.setProperty('quote', 'This is an example of a short quote');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-blockquote', 'ontario-blockquote--short']);\n\t\t});\n\t});\n});\n"]}

package/dist/collection/components/ontario-blockquote/test/ontario-blockquote.spec.js

@@ -0,0 +1,57 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioBlockquote } from '../ontario-blockquote';
+import { mutationObserverMock } from '../../../utils/tests/mutation-observer.mock';
+global.MutationObserver = mutationObserverMock;
+describe('ontario-blockquote', () => {
+	describe('snapshot', () => {
+		it('should render the expected html', async () => {
+			const page = await newSpecPage({
+				components: [OntarioBlockquote],
+				html: `<ontario-blockquote quote="This is a test quote" attribution="DS Tech Team"></ontario-blockquote>`,
+			});
+			expect(page.root).toMatchSnapshot();
+		});
+	});
+	it('should render a byline when the byline prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBlockquote],
+			html: `<ontario-blockquote attribution="DS Tech Team" byline="The best team at the ODS!">This is a test quote</ontario-blockquote>`,
+		});
+		expect(page.root).toEqualHtml(`
+      <ontario-blockquote attribution="DS Tech Team" byline="The best team at the ODS!">
+        <mock:shadow-root>
+          <blockquote class="ontario-blockquote ontario-blockquote--short">
+						<p>This is a test quote</p>
+						<cite class="ontario-blockquote__attribution">DS Tech Team</cite>
+						<cite class="ontario-blockquote__byline">The best team at the ODS!</cite>
+					</blockquote>
+        </mock:shadow-root>
+				This is a test quote
+      </ontario-blockquote>
+    `);
+	});
+	it('should reflect attributes/props being set', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBlockquote],
+			html: `<ontario-blockquote quote="This is another test quote" attribution="DS Tech Team" byline="Ontario Digital Service"></ontario-blockquote>`,
+		});
+		expect(page.rootInstance.quote).toBe('This is another test quote');
+		expect(page.rootInstance.attribution).toBe('DS Tech Team');
+		expect(page.rootInstance.byline).toBe('Ontario Digital Service');
+	});
+	it('should set the shortQuote state to `true` when the character count is under 140', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBlockquote],
+			html: `<ontario-blockquote quote="This is another test quote" attribution="DS Tech Team" byline="Ontario Digital Service"></ontario-blockquote>`,
+		});
+		expect(page.rootInstance.shortQuote).toBe(true);
+	});
+	it('should set the shortQuote state to `false` when the character count is over 140', async () => {
+		const page = await newSpecPage({
+			components: [OntarioBlockquote],
+			html: `<ontario-blockquote attribution="Homer Simpson">I saw this movie about a bus that had to speed around a city, keeping its speed over fifty, and if its speed dropped, it would explode! I think it was called, "The Bus That Couldn’t Slow Down".</ontario-blockquote>`,
+		});
+		expect(page.rootInstance.shortQuote).toBe(false);
+	});
+});
+//# sourceMappingURL=ontario-blockquote.spec.js.map

package/dist/collection/components/ontario-blockquote/test/ontario-blockquote.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-blockquote.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-blockquote/test/ontario-blockquote.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAEnF,MAAM,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;AAE/C,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IACnC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,iBAAiB,CAAC;gBAC/B,IAAI,EAAE,mGAAmG;aACzG,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,6HAA6H;SACnI,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW3B,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,0IAA0I;SAChJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;QACnE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iFAAiF,EAAE,KAAK,IAAI,EAAE;QAChG,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,0IAA0I;SAChJ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iFAAiF,EAAE,KAAK,IAAI,EAAE;QAChG,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,iBAAiB,CAAC;YAC/B,IAAI,EAAE,wQAAwQ;SAC9Q,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClD,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioBlockquote } from '../ontario-blockquote';\nimport { mutationObserverMock } from '../../../utils/tests/mutation-observer.mock';\n\nglobal.MutationObserver = mutationObserverMock;\n\ndescribe('ontario-blockquote', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioBlockquote],\n\t\t\t\thtml: `<ontario-blockquote quote=\"This is a test quote\" attribution=\"DS Tech Team\"></ontario-blockquote>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render a byline when the byline prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBlockquote],\n\t\t\thtml: `<ontario-blockquote attribution=\"DS Tech Team\" byline=\"The best team at the ODS!\">This is a test quote</ontario-blockquote>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n      <ontario-blockquote attribution=\"DS Tech Team\" byline=\"The best team at the ODS!\">\n        <mock:shadow-root>\n          <blockquote class=\"ontario-blockquote ontario-blockquote--short\">\n\t\t\t\t\t\t<p>This is a test quote</p>\n\t\t\t\t\t\t<cite class=\"ontario-blockquote__attribution\">DS Tech Team</cite>\n\t\t\t\t\t\t<cite class=\"ontario-blockquote__byline\">The best team at the ODS!</cite>\n\t\t\t\t\t</blockquote>\n        </mock:shadow-root>\n\t\t\t\tThis is a test quote\n      </ontario-blockquote>\n    `);\n\t});\n\n\tit('should reflect attributes/props being set', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBlockquote],\n\t\t\thtml: `<ontario-blockquote quote=\"This is another test quote\" attribution=\"DS Tech Team\" byline=\"Ontario Digital Service\"></ontario-blockquote>`,\n\t\t});\n\n\t\texpect(page.rootInstance.quote).toBe('This is another test quote');\n\t\texpect(page.rootInstance.attribution).toBe('DS Tech Team');\n\t\texpect(page.rootInstance.byline).toBe('Ontario Digital Service');\n\t});\n\n\tit('should set the shortQuote state to `true` when the character count is under 140', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBlockquote],\n\t\t\thtml: `<ontario-blockquote quote=\"This is another test quote\" attribution=\"DS Tech Team\" byline=\"Ontario Digital Service\"></ontario-blockquote>`,\n\t\t});\n\n\t\texpect(page.rootInstance.shortQuote).toBe(true);\n\t});\n\n\tit('should set the shortQuote state to `false` when the character count is over 140', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioBlockquote],\n\t\t\thtml: `<ontario-blockquote attribution=\"Homer Simpson\">I saw this movie about a bus that had to speed around a city, keeping its speed over fifty, and if its speed dropped, it would explode! I think it was called, \"The Bus That Couldn’t Slow Down\".</ontario-blockquote>`,\n\t\t});\n\n\t\texpect(page.rootInstance.shortQuote).toBe(false);\n\t});\n});\n"]}

package/dist/collection/components/ontario-button/button.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=button.interface.js.map

package/dist/collection/components/ontario-button/button.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-button/button.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { Base } from '../../utils/common/common.interface';\nimport { ButtonType, HtmlType } from './ontario-button.types';\n\nexport interface Button extends Base {\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\ttype: ButtonType;\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no htmlType is passed, it will default to 'button'.\n\t */\n\thtmlType: HtmlType;\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\tariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.\n\t */\n\telementId?: string;\n}\n"]}