@ongov/ontario-design-system-component-library 6.0.0-alpha.3 → 6.0.0-alpha.5

package/src/utils/components/header/header-menu-items.tsx

@@ -0,0 +1,28 @@
+import { h } from '@stencil/core';
+
+/**
+ * This function generates the menu items in a <li>, accordingly, to the given parameters.
+ *
+ * href and title are necessary, but rest are not.
+ *
+ * @param {string} href - the href of the menu item
+ * @param {string} title - the title of the menu item
+ * @param {boolean} [linkIsActive] - when set to true, this will add the classes necessary to style the link in a way that indicates to the user what the active page/link is
+ * @param {string} [liClass] - if there is a class that is related to the <a> portion of the menu item, put it here
+ * @param {function(PointerEvent): void} [onClickHandler] - for any custom onClick functionality a user might want to add to their menu links
+ */
+export const generateMenuItem = (
+	href: string,
+	title: string,
+	linkIsActive?: boolean,
+	liClass?: string,
+	onClickHandler?: (e: PointerEvent) => void,
+) => {
+	return (
+		<li class={liClass}>
+			<a class={`ontario-menu-item ${linkIsActive ? 'ontario-link--active' : ''}`} href={href} onClick={onClickHandler}>
+				{title}
+			</a>
+		</li>
+	);
+};

package/src/utils/helper/utils-types.ts

@@ -1,2 +1,7 @@
+import { DeviceTypes } from '../common/common.enum';
+
+// Create a Union Type from Enum Values
+export type DeviceType = `${DeviceTypes}`;
+
 export const conjunctions = ['and', 'or'] as const;
 export type Conjunction = (typeof conjunctions)[number];

package/src/utils/helper/utils.ts

@@ -1,4 +1,6 @@
-import { Conjunction } from './utils-types';
+import { DeviceTypes } from '../common/common.enum';
+import { DeviceType, Conjunction } from './utils-types';
+import { ScreenBreakpoints, standardFontSizePx } from '../common/common.variables';
 
 export function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {
 	return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
@@ -75,6 +77,25 @@ export function isEmpty(str: string | undefined | null): boolean {
 	return !str || str?.length <= 0;
 }
 
+/**
+ * Takes a string value of "true" and converts it to boolean true.
+ *
+ * All other values are converted to boolean false.
+ *
+ * Has advantages over the built in JavaScript Boolean() constructor / function.
+ *
+ * Using Boolean() could lead to unexpected results.
+ *
+ * e.g. Boolean("false") evaluates to a boolean value of true.
+ *
+ * @param {string} value - The value you would like to convert to a boolean.
+ *
+ * @returns {boolean}
+ */
+export function convertStringToBoolean(value: string): boolean {
+	return value.toLowerCase() === 'true';
+}
+
 /**
  * Retrieves the keys from an enum and lists them in an array.
  *
@@ -114,3 +135,26 @@ export function printArray(arr: Array<any>, conjunctionType: Conjunction = 'and'
 export function getRootHTMLElement(): HTMLElement {
 	return document.getElementsByTagName('html')[0];
 }
+
+/**
+ * Determines the device type based on screen breakpoints.
+ *
+ * @returns {DeviceType}
+ */
+export function determineDeviceType(): DeviceType {
+	const windowWidthPx = window.innerWidth;
+	/**
+	 * Converted window width in em values, useful for comparisons
+	 * against the screenBreakpoints, which are listed in em values
+	 * which are pulled from the design tokens package.
+	 */
+	const windowWidthEm = Math.ceil(windowWidthPx / standardFontSizePx);
+
+	if (windowWidthEm <= ScreenBreakpoints.Small) {
+		return DeviceTypes.Mobile;
+	} else if (windowWidthEm > ScreenBreakpoints.Small && windowWidthEm <= ScreenBreakpoints.Medium) {
+		return DeviceTypes.Tablet;
+	}
+
+	return DeviceTypes.Desktop;
+}

package/www/build/ontario-design-system-components.css

@@ -9,9 +9,6 @@ h3,
 .ontario-h3,
 h2,
 .ontario-h2,
-h1 > .ontario-label--heading,
-.ontario-fieldset__legend--large h1,
-.ontario-fieldset__legend--heading h1,
 h1,
 .ontario-h1 {
 	font-style: normal;
@@ -21,9 +18,6 @@ h1,
 	font-feature-settings: normal;
 	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
-h1 > .ontario-label--heading,
-.ontario-fieldset__legend--large h1,
-.ontario-fieldset__legend--heading h1,
 h1,
 .ontario-h1 {
 	font-size: 2rem;
@@ -33,9 +27,6 @@ h1,
 	max-width: 70rem;
 }
 @media screen and (min-width: 40em) {
-	h1 > .ontario-label--heading,
-	.ontario-fieldset__legend--large h1,
-	.ontario-fieldset__legend--heading h1,
 	h1,
 	.ontario-h1 {
 		font-size: 2.5rem;
@@ -637,17 +628,11 @@ h6,
 .ontario-margin-left-80-\! {
 	margin-left: 5rem !important;
 }
-.ontario-input:focus,
-.ontario-input:active {
-	box-shadow: 0 0 0 4px #009adb;
-	outline: 4px solid transparent;
-	transition: box-shadow 0.1s ease-in-out;
-}
 .ontario-bg-white {
 	background-color: #ffffff;
 }
 .ontario-bg-greyscale-5 {
-	background-color: #f2f2f2;
+	background-color: rgb(242.25, 242.25, 242.25);
 }
 .ontario-bg-greyscale-20 {
 	background-color: #cccccc;
@@ -659,10 +644,10 @@ h6,
 	background-color: #666666;
 }
 .ontario-bg-greyscale-70 {
-	background-color: #4d4d4d;
+	background-color: rgb(76.5, 76.5, 76.5);
 }
 .ontario-bg-black {
-	background-color: #1a1a1a;
+	background-color: rgb(25.5, 25.5, 25.5);
 }
 .ontario-bg-gold {
 	background-color: #cba52e;
@@ -1222,7 +1207,7 @@ body {
 	font-size: 1rem;
 	line-height: 1.6;
 	background-color: #ffffff;
-	color: #1a1a1a;
+	color: rgb(25.5, 25.5, 25.5);
 	margin: 0;
 }
 p {
@@ -1257,7 +1242,7 @@ hr {
 	border-bottom: 4px solid #cccccc;
 }
 hr.ontario-hr--dark {
-	border-bottom: 4px solid #1a1a1a;
+	border-bottom: 4px solid rgb(25.5, 25.5, 25.5);
 }
 a {
 	color: #0066cc;
@@ -2835,189 +2820,11 @@ p + ol {
 		float: left;
 	}
 }
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
-}
 .ontario-form-group:last-of-type {
 	margin-bottom: 3rem;
 }
-.ontario-fieldset__legend {
-	color: #1a1a1a;
-	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1.1875rem;
-	font-weight: 700;
-	margin: 0 0 1rem 0;
-	line-height: 1.5;
-	max-width: 38.75em;
-	white-space: normal;
-	width: 100%;
-	hyphens: auto;
-}
-@media screen and (max-width: 40em) {
-	.ontario-fieldset__legend {
-		font-size: 1.125rem;
-		line-height: 1.56;
-	}
-}
-.ontario-fieldset__legend--large,
-.ontario-fieldset__legend--heading {
-	letter-spacing: 0.02rem;
-	line-height: 1.2;
-}
-.ontario-fieldset__legend--large h1,
-.ontario-fieldset__legend--heading h1 {
-	display: inline-block;
-	margin: 0;
-}
-@media screen and (max-width: 40em) {
-	.ontario-fieldset__legend--large,
-	.ontario-fieldset__legend--heading {
-		font-size: 1.4375rem;
-		line-height: 1.39;
-	}
-}
-.ontario-fieldset__legend--large {
-	font-size: 1.75rem;
-}
-.ontario-fieldset__legend-required-flag,
-.ontario-fieldset__legend-optional-flag {
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1rem;
-	font-weight: 400;
-}
-.ontario-fieldset__legend-required-flag:before,
-.ontario-fieldset__legend-optional-flag:before {
-	content: ' ';
-}
-.ontario-label__flag {
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1rem;
-	font-weight: 400;
-}
-.ontario-label__flag:before {
-	content: ' ';
-}
-.ontario-label {
-	cursor: pointer;
-	color: #1a1a1a;
-	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1.1875rem;
-	font-weight: 700;
-	line-height: 1.5;
-	margin: 0 0 1rem 0;
-	max-width: 38.75em;
-	white-space: normal;
-	width: 100%;
-	hyphens: auto;
-}
-@media screen and (max-width: 40em) {
-	.ontario-label {
-		font-size: 1.125rem;
-		line-height: 1.56;
-	}
-}
-.ontario-label--large {
-	font-size: 1.75rem;
-	letter-spacing: 0.02rem;
-	line-height: 1.2;
-	max-width: 26.25em;
-}
-@media screen and (max-width: 40em) {
-	.ontario-label--large {
-		font-size: 1.4375rem;
-		line-height: 1.39;
-	}
-}
-h1 > .ontario-label--heading {
-	display: inline-block;
-	margin: 0;
-}
-.ontario-label__flag {
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	font-size: 1rem;
-	font-weight: 400;
-}
-.ontario-label__flag:before {
-	content: ' ';
-}
-.ontario-input {
-	border: 2px solid #1a1a1a;
-	border-radius: 4px;
-	box-sizing: border-box;
-	color: #1a1a1a;
-	display: block;
-	font-size: 1rem;
-	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-	line-height: 1.5;
-	margin: 0 0 2.5rem;
-	max-width: 48rem;
-	width: 100%;
-	padding: 0.625rem 1rem;
-	transition: box-shadow 0.1s ease-in-out;
-}
-.ontario-input--2-char-width {
-	max-width: 8ex;
-}
-.ontario-input--3-char-width {
-	max-width: 10ex;
-}
-.ontario-input--4-char-width {
-	max-width: 12ex;
-}
-.ontario-input--5-char-width {
-	max-width: 14ex;
-}
-.ontario-input--7-char-width {
-	max-width: 17ex;
-}
-.ontario-input--10-char-width {
-	max-width: 23ex;
-}
-.ontario-input--20-char-width {
-	max-width: 41ex;
-}
-.ontario-form-group:last-of-type {
-	margin-bottom: 2.5rem;
-}
-.ontario-aside *:last-of-type,
-.ontario-callout *:last-of-type {
-	margin-bottom: 0.5rem;
-}
-ontario-aside *,
-ontario-callout * {
-	max-width: 48rem;
-}
-ontario-aside *:last-of-type,
-ontario-callout *:last-of-type {
-	margin-bottom: 0.5rem;
-}
-ontario-page-alert p {
-	margin-top: 0;
-}
-ontario-page-alert p:last-of-type {
-	margin-bottom: 0.5rem;
-}
-ontario-page-alert p:last-of-type + ul {
-	margin-top: 1rem;
-}
-ontario-page-alert ul:last-of-type {
-	margin-bottom: 0.5rem;
-}
-ontario-page-alert[type='error'] ul {
-	margin-left: 1.5rem;
-}
-ontario-page-alert[type='error'] ul:last-of-type {
-	margin-bottom: 0.5rem;
-}
-ontario-page-alert[type='error'] a {
-	color: #cd0000;
-}
-ontario-page-alert[type='error'] a:hover,
-ontario-page-alert[type='error'] a:focus {
-	color: #6b0000;
-}
-ontario-page-alert[type='error'] a:active {
-	color: #280000;
+.ontario-button {
+	margin: 0 1.75rem 1.5rem 0;
 }
 .ontario-hide {
 	display: none !important;
@@ -3123,3 +2930,39 @@ ontario-page-alert[type='error'] a:active {
 		display: block !important;
 	}
 }
+ontario-aside *,
+ontario-callout * {
+	max-width: 48rem;
+}
+ontario-aside *:last-of-type,
+ontario-callout *:last-of-type {
+	margin-bottom: 0.5rem;
+}
+ontario-page-alert p {
+	margin-top: 0;
+}
+ontario-page-alert p:last-of-type {
+	margin-bottom: 0.5rem;
+}
+ontario-page-alert p:last-of-type + ul {
+	margin-top: 1rem;
+}
+ontario-page-alert ul:last-of-type {
+	margin-bottom: 0.5rem;
+}
+ontario-page-alert[type='error'] ul {
+	margin-left: 1.5rem;
+}
+ontario-page-alert[type='error'] ul:last-of-type {
+	margin-bottom: 0.5rem;
+}
+ontario-page-alert[type='error'] a {
+	color: #cd0000;
+}
+ontario-page-alert[type='error'] a:hover,
+ontario-page-alert[type='error'] a:focus {
+	color: #6b0000;
+}
+ontario-page-alert[type='error'] a:active {
+	color: #280000;
+}