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

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>
+    <blockquote class="ontario-blockquote ontario-blockquote--short">
+      <p>
+        This is a test quote
+      </p>
+      <cite class="ontario-blockquote__attribution">
+        DS Tech Team
+      </cite>
+    </blockquote>
+  </mock:shadow-root>
+</ontario-blockquote>
+`;

package/src/components/ontario-blockquote/test/ontario-blockquote.e2e.ts

@@ -0,0 +1,84 @@
+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: any;
+		let component: any;
+		let element: any;
+
+		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: any;
+		let component: any;
+		let element: any;
+
+		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']);
+		});
+	});
+});

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

@@ -0,0 +1,66 @@
+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);
+	});
+});

package/src/components/ontario-button/button.interface.ts

@@ -0,0 +1,43 @@
+import { Base } from '../../utils/common/common.interface';
+import { ButtonType, HtmlType } from './ontario-button.types';
+
+export interface Button extends Base {
+	/**
+	 * The type of button to render.
+	 *
+	 * If no type is passed, it will default to 'secondary'.
+	 */
+	type: ButtonType;
+
+	/**
+	 * The native HTML button type the button should use.
+	 *
+	 * If no htmlType is passed, it will default to 'button'.
+	 */
+	htmlType: HtmlType;
+
+	/**
+	 * Text to be displayed within the button. This will override the text provided through the host element textContent.
+	 *
+	 * @example
+	 * <ontario-button label="Label Text">Text</ontario-button>
+	 *
+	 * The resulting button will have the label `"Label Text"`.
+	 */
+	label?: string;
+
+	/**
+	 * 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.
+	 *
+	 *  This is optional.
+	 *
+	 * @example
+	 * <ontario-button aria-label-text="Click button to open map">Open</ontario button>
+	 */
+	ariaLabelText?: string;
+
+	/**
+	 * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.
+	 */
+	elementId?: string;
+}

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

@@ -0,0 +1,161 @@
+@use 'sass:math';
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@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/2-tools/placeholder/focus.placeholders' as
+	placeholders;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	focusPlaceholders;
+
+$ontario-button-bg-primary: colours.$ontario-colour-link;
+$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;
+$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;
+$ontario-button-bg-secondary: colours.$ontario-colour-white;
+
+.ontario-button {
+	border: none;
+	border-radius: globalVariables.$global-radius;
+	box-sizing: border-box;
+	box-shadow: none;
+	display: inline-block;
+	font-size: 1.125rem;
+	font-family: typography.$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;
+	min-width: 10rem;
+	padding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;
+	text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+
+	&:focus,
+	&:active {
+		@extend %ontario-focus;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		margin-right: 0;
+		display: block;
+		width: 100%;
+	}
+
+	.ontario-icon {
+		margin-right: 4px;
+	}
+}
+
+.ontario-button--primary {
+	background-color: $ontario-button-bg-primary;
+	color: colours.$ontario-colour-white;
+
+	&:hover {
+		background-color: $ontario-button-bg-primary--hover;
+		color: 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;
+	}
+
+	&:active {
+		background-color: $ontario-button-bg-primary--active;
+		color: colours.$ontario-colour-white;
+		transition: background-color 0s, focusPlaceholders.$ontario-focus-transition;
+	}
+
+	&:visited {
+		color: colours.$ontario-colour-white;
+	}
+}
+
+.ontario-button--secondary {
+	background-color: $ontario-button-bg-secondary;
+	border: globalVariables.$border-size-standard solid colours.$ontario-colour-link;
+	color: colours.$ontario-colour-link;
+	padding-top: spacing.$spacing-2;
+	padding-bottom: spacing.$spacing-2;
+
+	&:hover {
+		background-color: colours.$ontario-colour-button-secondary--hover;
+		border-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-link--hover;
+	}
+
+	&:focus {
+		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;
+	}
+
+	&: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;
+	}
+
+	&:visited {
+		color: colours.$ontario-colour-link;
+	}
+}
+
+.ontario-button--tertiary {
+	background-color: transparent;
+	color: colours.$ontario-colour-link;
+	text-decoration: underline;
+
+	&:hover {
+		background-color: colours.$ontario-colour-button-tertiary--hover;
+		color: $ontario-button-bg-primary--hover;
+		text-decoration: underline;
+	}
+
+	&:focus {
+		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;
+	}
+
+	&: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;
+	}
+
+	&:visited {
+		color: colours.$ontario-colour-link;
+	}
+}
+
+.ontario-button--internalThemeDark {
+	background-color: colours.$ontario-colour-black;
+	border: globalVariables.$border-size-standard solid colours.$ontario-colour-white;
+	color: colours.$ontario-colour-white;
+
+	&:hover {
+		background-color: colours.$ontario-greyscale-70;
+	}
+
+	&:focus {
+		background-color: colours.$ontario-greyscale-70;
+		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;
+	}
+
+	&:visited {
+		color: colours.$ontario-colour-link;
+	}
+}

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

@@ -0,0 +1,231 @@
+import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';
+
+import { Button } from './button.interface';
+import { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';
+
+import { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+
+@Component({
+	tag: 'ontario-button',
+	styleUrl: 'ontario-button.scss',
+	shadow: true,
+	formAssociated: true,
+})
+export class OntarioButton implements Button {
+	@Element() host: HTMLElement;
+	@AttachInternals() internals: ElementInternals;
+
+	/**
+	 * The type of button to render.
+	 *
+	 * If no type is passed, it will default to 'secondary'.
+	 */
+	@Prop() type: ButtonType = 'secondary';
+
+	/**
+	 * The native HTML button type the button should use.
+	 *
+	 * If no htmlType is passed, it will default to 'button'.
+	 */
+	@Prop() htmlType: HtmlType = 'button';
+
+	/**
+	 * Text to be displayed within the button. This will override the text provided through the host element textContent.
+	 *
+	 * @example
+	 * <ontario-button label="Label Text">Text</ontario-button>
+	 *
+	 * The resulting button will have the label `"Label Text"`.
+	 */
+	@Prop() label?: string;
+
+	/**
+	 * 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.
+	 *
+	 *  This is optional.
+	 *
+	 * @example
+	 * <ontario-button aria-label-text="Click button to open map">Open</ontario button>
+	 */
+	@Prop({ mutable: true }) ariaLabelText?: string;
+
+	/**
+	 * The unique identifier of the button. This is optional - if no ID is passed, one will be generated.
+	 */
+	@Prop({ mutable: true }) elementId?: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the button's type depending on validation result.
+	 */
+	@State() private typeState: string;
+
+	/**
+	 * Mutable variable, for internal use only.
+	 * Set the native HTML button type depending on validation result.
+	 */
+	@State() private htmlTypeState: string;
+
+	@State() private labelState: string;
+
+	/**
+	 * A reference to the internal button element.
+	 */
+	private buttonRef: HTMLButtonElement;
+
+	/*
+	 * Watch for changes to the `label` property for validation purposes.
+	 *
+	 * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).
+	 */
+	@Watch('label')
+	private updateLabelContent() {
+		this.labelState = this.label ?? this.host.textContent ?? '';
+		this.validateLabelContent(this.labelState);
+	}
+
+	/**
+	 * Watch for changes to the `type` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `type` will be set to its default (`secondary`).
+	 * If a match is found in one of the array values then `type` will be set to the matching array key value.
+	 */
+	@Watch('type')
+	validateType() {
+		const isValid = validateValueAgainstArray(this.type, ButtonTypes);
+		if (isValid) {
+			this.typeState = this.type;
+		} else {
+			this.typeState = this.warnDefaultType();
+		}
+	}
+
+	/**
+	 *  Watch for changes to the `htmlType` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).
+	 * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.
+	 */
+	@Watch('htmlType')
+	validateHtmlType() {
+		const isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);
+		if (isValid) {
+			this.htmlTypeState = this.htmlType;
+		} else {
+			this.htmlTypeState = this.warnDefaultHtmlType();
+		}
+	}
+
+	/**
+	 * Print the missing `label` prop warning message
+	 */
+	validateLabelContent(newValue: string) {
+		if (validatePropExists(newValue)) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' label ')
+				.addRegularText('for')
+				.addMonospaceText(' <ontario-button> ')
+				.addRegularText('was not provided')
+				.printMessage();
+		}
+	}
+
+	/**
+	 * Print the invalid `type` prop warning message
+	 * @returns default type (secondary)
+	 */
+	private warnDefaultType(): ButtonType {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' type ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-button> ')
+			.addRegularText('was set to an invalid type; only')
+			.addMonospaceText(' primary, secondary, or tertiary ')
+			.addRegularText('are supported. The default type')
+			.addMonospaceText(' secondary ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'secondary';
+	}
+
+	/**
+	 * Print the invalid `htmlType` warning message
+	 * @returns default htmlType (button)
+	 */
+	private warnDefaultHtmlType(): HtmlType {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' htmlType ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-button> ')
+			.addRegularText('was set to an invalid htmlType; only')
+			.addMonospaceText(' button, reset, or submit ')
+			.addRegularText('are supported. The default type')
+			.addMonospaceText(' button ')
+			.addRegularText('is assumed.')
+			.printMessage();
+		return 'button';
+	}
+
+	/**
+	 * @returns the classes of the button based of the button's `type`.
+	 */
+	private getClass() {
+		return `ontario-button ontario-button--${this.typeState}`;
+	}
+
+	public getId(): string {
+		return this.elementId ?? '';
+	}
+
+	/**
+	 * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.
+	 */
+	componentWillLoad() {
+		this.updateLabelContent();
+		this.validateHtmlType();
+		this.validateType();
+		this.ariaLabelText = this.ariaLabelText ?? this.labelState;
+	}
+
+	componentDidLoad() {
+		// Used to help load translations for any slots + text content passed in by the user.
+		const observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'attributes') {
+					this.updateLabelContent();
+				}
+			});
+		});
+
+		const options = { attributes: true };
+		observer.observe(this.host, options);
+
+		// Add a click event listener to handle submitting a form
+		if (this.htmlTypeState === 'submit') {
+			const { form } = this.internals;
+			// Based off a comment within this bug about preventDefault(): https://bugzilla.mozilla.org/show_bug.cgi?id=1370630
+			this.buttonRef.addEventListener('click', () => form?.dispatchEvent(new Event('submit', { cancelable: true })));
+		}
+	}
+
+	render() {
+		return (
+			<button
+				ref={(el) => (this.buttonRef = el as HTMLButtonElement)}
+				type={this.htmlTypeState}
+				class={this.getClass()}
+				aria-label={this.ariaLabelText}
+				id={this.getId()}
+			>
+				{this.labelState}
+			</button>
+		);
+	}
+}

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

@@ -0,0 +1,5 @@
+export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;
+export const HtmlTypes = ['button', 'reset', 'submit'] as const;
+
+export type ButtonType = (typeof ButtonTypes)[number];
+export type HtmlType = (typeof HtmlTypes)[number];