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

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>
+`;

package/src/components/ontario-card/test/ontario-cards.spec.tsx

@@ -7,18 +7,32 @@ describe('ontario-card', () => {
 			components: [OntarioCard],
 			html: `<ontario-card></ontario-card>`,
 		});
-		expect(page.root).toEqualHtml(`
-      <ontario-card>
-				<mock:shadow-root>
-					<li class="ontario-card ontario-card__card-type--basic ontario-card__header-type--default 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>
-    `);
+		expect(page.root).toMatchSnapshot();
 	});
+
+	it('should render a label', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card label="Card Title 1"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+
+	it('should render a header colour on the label', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card label="Card Title 1" header-colour="sky"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+
+	it('should render a description', async () => {
+		const page = await newSpecPage({
+			components: [OntarioCard],
+			html: `<ontario-card description="Lorem ipsum"></ontario-card>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+
+	// Don't think we can test images unless we point to a local path
 });

package/src/components/ontario-card-collection/readme.md

@@ -20,9 +20,9 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 ```html
 <ontario-card-collection cards-per-row="2">
 	<ontario-card
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 1"
-		image="https://picsum.photos/200/300"
+		image="https://picsum.photos/300/225"
 		card-link="https://google.ca"
 		horizontal-image-position-type="left"
 		horizontal-image-size-type="one-fourth"
@@ -30,9 +30,9 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 	>
 	</ontario-card>
 	<ontario-card
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 2"
-		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"
@@ -43,21 +43,21 @@ Example of a bare-bones `ontario-card-collection` component, with a `cardsPerRow
 
 <OntarioCardCollection cards-per-row="2">
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 1"
-		image="https://picsum.photos/200/300"
-		card-link="https://google.ca"
-		horizontal-image-position-type="left"
-		horizontal-image-size-type="one-fourth"
+		image="https://picsum.photos/300/225"
+		cardLink="https://google.ca"
+		horizontalImagePositionType="left"
+		horizontalImageSizeType="one-fourth"
 		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
 	>
 	</OntarioCard>
 	<OntarioCard
-		card-type="horizontal"
+		layout="horizontal"
 		label="Card Title 2"
-		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>

package/src/components/ontario-checkbox/ontario-checkboxes.scss

@@ -16,7 +16,6 @@ $ontario-checkboxes-size: globalFunctions.px-to-rem(28);
 $ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);
 $ontario-checkbox-border-size: globalFunctions.px-to-rem(2);
 $ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);
-$ontario-input-border-width: 0.125rem;
 
 :host {
 	--checkbox-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E");

package/src/components/ontario-date-input/test/ontario-date-input.spec.tsx

@@ -1,5 +1,6 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { OntarioDateInput } from '../ontario-date-input';
+import { isInvalidYear } from '../utils';
 
 describe('ontario-date-input', () => {
 	it('renders deafult state', async () => {
@@ -120,3 +121,78 @@ describe('ontario-date-input', () => {
 		`);
 	});
 });
+
+describe('date-validation-utils', () => {
+	it('is invalid year value - undefined string', () => {
+		// Note: Type system doesn't like `undefined` as `any` lets us force it for testing purposes
+		const value: any = undefined;
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is invalid year value - null string', () => {
+		// Note: Type system doesn't like `null` as `any` lets us force it for testing purposes
+		const value: any = null;
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is invalid year value - empty string', () => {
+		const value = ''; // Empty string
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is invalid year value - written out number', () => {
+		const value = 'two-thousand';
+
+		const isInvalidYearResult = isInvalidYear(value);
+		expect(isInvalidYearResult).toEqual(true);
+	});
+
+	it('is valid year value', () => {
+		const value = '2000';
+
+		const isValidYear = !isInvalidYear(value);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is valid year when in range', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 9999;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is valid year when in range but is minYear', () => {
+		const value = '2000';
+		const minYear = 2000;
+		const maxYear = 9999;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is valid year when in range but is maxYear', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 2000;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(true);
+	});
+
+	it('is invalid year when out of range', () => {
+		const value = '2000';
+		const minYear = 1;
+		const maxYear = 1999;
+
+		const isValidYear = !isInvalidYear(value, minYear, maxYear);
+		expect(isValidYear).toEqual(false);
+	});
+});

package/src/components/ontario-date-input/utils/date-validation-utils.ts

@@ -35,17 +35,31 @@ const isInvalidMonth = (value: string) => {
 	return month < MONTH_MIN_VALUE || month > MONTH_MAX_VALUE;
 };
 
-/*
- * Year field should be a number, not negative, at length at least 4 digits
+/**
+ * Valid value year against minimum and maximum year range (defaulted if not provided.)
+ *
+ * Year field should be a number and not written out; it has no concept of positive and negative.
+ *
+ * Suggestion:
+ * - `< 0` B.C.E.
+ * - `>= 0` A.C.E.
+ *
+ * @param value value to check for validity
+ * @param minYear minimum valid year to validate against
+ * @param maxYear maximum valid year to validate against
  */
-const isInvalidYear = (value: string, minYear: number = YEAR_MIN_VALUE, maxYear: number = YEAR_MAX_VALUE) => {
+export const isInvalidYear = (
+	value: string | number,
+	minYear: number = YEAR_MIN_VALUE,
+	maxYear: number = YEAR_MAX_VALUE,
+) => {
 	if (!isNumber(value)) {
 		return true;
 	}
 
 	const year = Number(value);
 
-	return year <= minYear || year > maxYear;
+	return year < minYear || year > maxYear;
 };
 
 type GetDateErrorArg = {

package/src/components/ontario-header/service-ontario-header.scss

@@ -57,10 +57,6 @@
 
 .ontario-service-subheader .ontario-header-button {
 	display: flex;
-
-	&:last-of-type {
-		display: none;
-	}
 }
 
 .ontario-service-subheader .ontario-header-button {

package/src/components/ontario-hint-text/readme.md

@@ -67,6 +67,7 @@ Promise<string | undefined>
 - [ontario-dropdown-list](../ontario-dropdown-list)
 - [ontario-input](../ontario-input)
 - [ontario-radio-buttons](../ontario-radio-buttons)
+- [ontario-search-box](../ontario-search-box)
 - [ontario-textarea](../ontario-textarea)
 
 ### Graph
@@ -77,6 +78,7 @@ graph TD;
   ontario-dropdown-list --> ontario-hint-text
   ontario-input --> ontario-hint-text
   ontario-radio-buttons --> ontario-hint-text
+  ontario-search-box --> ontario-hint-text
   ontario-textarea --> ontario-hint-text
   style ontario-hint-text fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss

@@ -19,7 +19,6 @@
 $ontario-radios-size: 32px;
 $ontario-radios-size-mobile: 36px;
 $ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);
-$ontario-input-border-width: 0.125rem;
 
 .ontario-radios__item {
 	position: relative;

package/src/components/ontario-search-box/assets/ontario-icon-close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6L19 6.4z" fill="#000"/></svg>

package/src/components/ontario-search-box/assets/ontario-logo--mobile.svg

@@ -0,0 +1,6 @@
+<svg width="46" height="46" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46" fill="none" xmlns:v="https://vecta.io/nano" tabindex="-1">
+    <path d="M23 0C7.36 0 0 7.36 0 23s7.36 23 23 23 23-7.36 23-23S38.64 0 23 0" fill="#fff" />
+    <path fill-rule="evenodd"
+        d="M23 13.223c4.728-3.178 10.58-3.613 15.69-1.153l.18.128-.026.18a16.08 16.08 0 0 1-2.07 6.765c-1.405 2.41-3.4 4.408-5.8 5.79h-.025a15.71 15.71 0 0 0-.365.191c-.188.1-.38.203-.58.296.383 5.69-2.172 10.994-6.85 14.197L23 39.72l-.153-.102a15.76 15.76 0 0 1-4.805-5.176 16.12 16.12 0 0 1-2.095-7.944v-.026c0-.333.025-.692.05-1.05-5.086-2.51-8.382-7.38-8.817-13.043l-.026-.18.153-.077c2.147-1.05 4.523-1.59 6.874-1.59 2.786 0 5.494.743 7.897 2.127h.026a17.21 17.21 0 0 1 .895.564zm5.93 8.56c1.763-1.025 3.27-2.46 4.37-4.33.51-.897.894-1.82 1.176-2.69-2.888-.666-5.8-.23-8.433 1.204.23.307.383.64.537 1.076s.18 1.025.05 1.512c-.05.205-.153.4-.256.615h0c-.51.87-1.584 1.512-2.913 1.922.51-1.59-.307-2.998-1.33-3.895-.51-.46-1.1-.846-1.687-1.204a12.29 12.29 0 0 0-5.929-1.614 12.52 12.52 0 0 0-2.964.359c.894 2.844 2.71 5.15 5.265 6.714.153-.36.358-.64.664-1s.792-.666 1.278-.794a2.94 2.94 0 0 1 .664-.077c.997 0 2.096.615 3.118 1.563-1.6.36-2.428 1.768-2.683 3.1-.128.692-.204 1.384-.204 2.076 0 2.024.486 4.075 1.56 5.945.486.87 1.125 1.69 1.79 2.383 2.02-2.204 3.092-4.946 3.17-7.944-.41.05-.74 0-1.2-.077s-.97-.384-1.33-.718c-.153-.154-.307-.333-.41-.538-.51-.897-.51-2.153-.204-3.51 1.124 1.23 2.734 1.256 4.012.794a10.52 10.52 0 0 0 1.891-.871z"
+        fill="#000" />
+</svg>

package/src/components/ontario-search-box/ontario-search-box.scss

@@ -0,0 +1,141 @@
+@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/line-heights.variables' as lineheight;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	focusPlaceholders;
+@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';
+@use '../../styles/form.scss';
+
+$ontario-input-height: globalFunctions.px-to-rem(48);
+$ontario-search-icon-size: 2rem;
+$ontario-reset-icon-size: 1.5rem;
+$ontario-search-button-width: 5rem;
+$ontario-search-button-width--mobile: 3rem;
+$ontario-search-input-padding: 8.5rem;
+$ontario-search-input-padding--mobile: 7.75rem;
+$ontario-search-desktop-width: 34rem;
+$ontario-search-mobile-width: 20.5rem;
+
+.ontario-search__container {
+	max-width: $ontario-search-desktop-width;
+	margin-bottom: spacing.$spacing-7;
+}
+
+.ontario-search__input-container {
+	position: relative;
+}
+
+.ontario-search__input.ontario-input {
+	border: 2px solid colours.$ontario-colour-black;
+	margin-bottom: spacing.$spacing-0;
+	height: $ontario-input-height;
+	padding-left: spacing.$spacing-3;
+	padding-right: $ontario-search-input-padding;
+	width: 100%;
+
+	&:invalid + input[type='reset'] {
+		display: none;
+	}
+
+	&:focus {
+		@extend %ontario-focus;
+	}
+}
+
+input[type='reset'].ontario-search__reset {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	top: spacing.$spacing-3;
+	right: $ontario-search-button-width + spacing.$spacing-4;
+	height: $ontario-reset-icon-size;
+	width: $ontario-reset-icon-size;
+	color: colours.$ontario-colour-black;
+	margin: spacing.$spacing-0;
+	padding: spacing.$spacing-1;
+	background-size: $ontario-reset-icon-size;
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-color: transparent;
+	outline: none;
+	border: none;
+	cursor: pointer;
+
+	&:focus {
+		box-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		right: $ontario-search-button-width--mobile + spacing.$spacing-7;
+	}
+}
+
+.ontario-search__submit {
+	border: 0;
+	border-radius: 0 3px 3px 0;
+	background-color: colours.$ontario-colour-link;
+	color: colours.$ontario-colour-black;
+
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	font-family: typography.$ontario-font-open-sans;
+	font-weight: fontWeights.$ontario-font-weights-semi-bold;
+	font-size: 1.125rem;
+	width: $ontario-search-button-width;
+	line-height: lineheight.$ontario-line-height-8;
+
+	position: absolute;
+	right: spacing.$spacing-0;
+	bottom: spacing.$spacing-0;
+	top: spacing.$spacing-0;
+	cursor: pointer;
+
+	&:hover {
+		background-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-white;
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;
+		background-color: colours.$ontario-colour-link--hover;
+		color: colours.$ontario-colour-white;
+	}
+
+	&:active {
+		background-color: colours.$ontario-colour-link--active;
+		color: colours.$ontario-colour-white;
+	}
+
+	svg {
+		fill: colours.$ontario-colour-white;
+		margin-right: spacing.$spacing-0;
+		margin-bottom: spacing.$spacing-0;
+		width: $ontario-search-icon-size;
+		height: $ontario-search-icon-size;
+		display: inline-block;
+		vertical-align: middle;
+		overflow: hidden;
+	}
+
+	@media screen and (max-width: breakpoints.$small-breakpoint) {
+		width: $ontario-search-button-width--mobile;
+	}
+}
+
+// remove default cancel button for input with type="search"
+input[type='search'].ontario-search__input::-webkit-search-decoration,
+input[type='search'].ontario-search__input::-webkit-search-cancel-button,
+input[type='search'].ontario-search__input::-webkit-search-results-button,
+input[type='search'].ontario-search__input::-webkit-search-results-decoration {
+	-webkit-appearance: none;
+}