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

package/src/components.d.ts

@@ -15,7 +15,7 @@ import {
 } 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 { HeadingLevel, Hint, HintContentType } from './utils/common/common.interface';
+import { HeadingLevel, Hint, HintContentType, MenuItem } from './utils/common/common.interface';
 import {
 	HeaderColour,
 	HorizontalImagePositionType,
@@ -49,7 +49,6 @@ import { FooterSocialLinksProps } from './components/ontario-footer/components';
 import {
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
-	MenuItem,
 	OntarioHeaderType,
 } from './components/ontario-header/ontario-header.interface';
 import { IconColour, IconSize } from './components/ontario-icon/icon.types';
@@ -70,7 +69,7 @@ export {
 } 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 { HeadingLevel, Hint, HintContentType } from './utils/common/common.interface';
+export { HeadingLevel, Hint, HintContentType, MenuItem } from './utils/common/common.interface';
 export {
 	HeaderColour,
 	HorizontalImagePositionType,
@@ -104,7 +103,6 @@ export { FooterSocialLinksProps } from './components/ontario-footer/components';
 export {
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
-	MenuItem,
 	OntarioHeaderType,
 } from './components/ontario-header/ontario-header.interface';
 export { IconColour, IconSize } from './components/ontario-icon/icon.types';
@@ -530,7 +528,7 @@ export namespace Components {
 	interface OntarioHeader {
 		/**
 		 * Information pertaining to the application header. This is only necessary for the 'application' header type.  This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
-		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage",      "maxSubheaderDesktopLinks": "3",      "maxSubheaderTabletLinks": "2",      "maxSubheaderMobileLinks": "1"    }'>  </ontario-header>
+		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage", 	"maxSubheaderLinks": { 		"desktop": "3", 		"tablet": "2", 		"mobile": "1" 	}    }' >  </ontario-header>
 		 */
 		applicationHeaderInfo: ApplicationHeaderInfo | string;
 		/**
@@ -567,6 +565,13 @@ export namespace Components {
 		 */
 		type?: OntarioHeaderType;
 	}
+	interface OntarioHeaderOverflowMenu {
+		/**
+		 * The items that will go inside the menu.
+		 * @example <ontario-header-overflow-menu 	menu-items='[{ 		"title": "Link 1", 		"href": "/link-1" 		"linkIsActive": "false" 	},{ 		"title": "Link 2", 		"href": "/link-2" 		"linkIsActive": "false" 	},{ 		"title": "Link 3", 		"href": "/link-3" 		"linkIsActive": "false" 	},{ 		"title": "Link 4", 		"href": "/link-4" 		"linkIsActive": "false" 	}]'> </ontario-header-overflow-menu>
+		 */
+		menuItems: MenuItem[] | string;
+	}
 	interface OntarioHintExpander {
 		/**
 		 * Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component.
@@ -2396,6 +2401,10 @@ export interface OntarioDropdownListCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioDropdownListElement;
 }
+export interface OntarioHeaderCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLOntarioHeaderElement;
+}
 export interface OntarioHintExpanderCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioHintExpanderElement;
@@ -2717,11 +2726,66 @@ declare global {
 		prototype: HTMLOntarioFormContainerElement;
 		new (): HTMLOntarioFormContainerElement;
 	};
-	interface HTMLOntarioHeaderElement extends Components.OntarioHeader, HTMLStencilElement {}
+	interface HTMLOntarioHeaderElementEventMap {
+		menuButtonToggled: boolean;
+	}
+	interface HTMLOntarioHeaderElement extends Components.OntarioHeader, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLOntarioHeaderElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioHeaderElement,
+				ev: OntarioHeaderCustomEvent<HTMLOntarioHeaderElementEventMap[K]>,
+			) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener<K extends keyof DocumentEventMap>(
+			type: K,
+			listener: (this: Document, ev: DocumentEventMap[K]) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(
+			type: K,
+			listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener(
+			type: string,
+			listener: EventListenerOrEventListenerObject,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof HTMLOntarioHeaderElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioHeaderElement,
+				ev: OntarioHeaderCustomEvent<HTMLOntarioHeaderElementEventMap[K]>,
+			) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof DocumentEventMap>(
+			type: K,
+			listener: (this: Document, ev: DocumentEventMap[K]) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(
+			type: K,
+			listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener(
+			type: string,
+			listener: EventListenerOrEventListenerObject,
+			options?: boolean | EventListenerOptions,
+		): void;
+	}
 	var HTMLOntarioHeaderElement: {
 		prototype: HTMLOntarioHeaderElement;
 		new (): HTMLOntarioHeaderElement;
 	};
+	interface HTMLOntarioHeaderOverflowMenuElement extends Components.OntarioHeaderOverflowMenu, HTMLStencilElement {}
+	var HTMLOntarioHeaderOverflowMenuElement: {
+		prototype: HTMLOntarioHeaderOverflowMenuElement;
+		new (): HTMLOntarioHeaderOverflowMenuElement;
+	};
 	interface HTMLOntarioHintExpanderElementEventMap {
 		toggleExpanderEvent: MouseEvent | KeyboardEvent;
 	}
@@ -3709,6 +3773,7 @@ declare global {
 		'ontario-footer': HTMLOntarioFooterElement;
 		'ontario-form-container': HTMLOntarioFormContainerElement;
 		'ontario-header': HTMLOntarioHeaderElement;
+		'ontario-header-overflow-menu': HTMLOntarioHeaderOverflowMenuElement;
 		'ontario-hint-expander': HTMLOntarioHintExpanderElement;
 		'ontario-hint-text': HTMLOntarioHintTextElement;
 		'ontario-icon-accessibility': HTMLOntarioIconAccessibilityElement;
@@ -4322,7 +4387,7 @@ declare namespace LocalJSX {
 	interface OntarioHeader {
 		/**
 		 * Information pertaining to the application header. This is only necessary for the 'application' header type.  This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
-		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage",      "maxSubheaderDesktopLinks": "3",      "maxSubheaderTabletLinks": "2",      "maxSubheaderMobileLinks": "1"    }'>  </ontario-header>
+		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage", 	"maxSubheaderLinks": { 		"desktop": "3", 		"tablet": "2", 		"mobile": "1" 	}    }' >  </ontario-header>
 		 */
 		applicationHeaderInfo?: ApplicationHeaderInfo | string;
 		/**
@@ -4353,12 +4418,23 @@ declare namespace LocalJSX {
 		 * The items that will go inside the menu.
 		 */
 		menuItems?: MenuItem[] | string;
+		/**
+		 * This event is toggled when the menu button is pressed. The <ontario-header-overflow-menu> sub-component listens for this event To trigger the showing and hiding of the overflow menu.
+		 */
+		onMenuButtonToggled?: (event: OntarioHeaderCustomEvent<boolean>) => void;
 		/**
 		 * The type of header.
 		 * @default 'application'
 		 */
 		type?: OntarioHeaderType;
 	}
+	interface OntarioHeaderOverflowMenu {
+		/**
+		 * The items that will go inside the menu.
+		 * @example <ontario-header-overflow-menu 	menu-items='[{ 		"title": "Link 1", 		"href": "/link-1" 		"linkIsActive": "false" 	},{ 		"title": "Link 2", 		"href": "/link-2" 		"linkIsActive": "false" 	},{ 		"title": "Link 3", 		"href": "/link-3" 		"linkIsActive": "false" 	},{ 		"title": "Link 4", 		"href": "/link-4" 		"linkIsActive": "false" 	}]'> </ontario-header-overflow-menu>
+		 */
+		menuItems?: MenuItem[] | string;
+	}
 	interface OntarioHintExpander {
 		/**
 		 * Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component.
@@ -6273,6 +6349,7 @@ declare namespace LocalJSX {
 		'ontario-footer': OntarioFooter;
 		'ontario-form-container': OntarioFormContainer;
 		'ontario-header': OntarioHeader;
+		'ontario-header-overflow-menu': OntarioHeaderOverflowMenu;
 		'ontario-hint-expander': OntarioHintExpander;
 		'ontario-hint-text': OntarioHintText;
 		'ontario-icon-accessibility': OntarioIconAccessibility;
@@ -6427,6 +6504,8 @@ declare module '@stencil/core' {
 			'ontario-footer': LocalJSX.OntarioFooter & JSXBase.HTMLAttributes<HTMLOntarioFooterElement>;
 			'ontario-form-container': LocalJSX.OntarioFormContainer & JSXBase.HTMLAttributes<HTMLOntarioFormContainerElement>;
 			'ontario-header': LocalJSX.OntarioHeader & JSXBase.HTMLAttributes<HTMLOntarioHeaderElement>;
+			'ontario-header-overflow-menu': LocalJSX.OntarioHeaderOverflowMenu &
+				JSXBase.HTMLAttributes<HTMLOntarioHeaderOverflowMenuElement>;
 			'ontario-hint-expander': LocalJSX.OntarioHintExpander & JSXBase.HTMLAttributes<HTMLOntarioHintExpanderElement>;
 			/**
 			 * Use hint text to help users understand how to complete fields in a form.

package/src/index.html

@@ -15,13 +15,15 @@
 		</ontario-critical-alert>
 		<ontario-header
 			id="ontarioHeader"
-			type="serviceOntario"
+			type="application"
 			application-header-info='{
 				"title": "Application name",
 				"href": "/application-homepage",
-				"maxSubheaderDesktopLinks": "3",
-				"maxSubheaderTabletLinks": "2",
-				"maxSubheaderMobileLinks": "1"
+				"maxSubheaderLinks": {
+					"desktop": "3",
+					"tablet": "2",
+					"mobile": "1"
+				}
 			}'
 			language-toggle-options='{
 				"englishLink": "/",

package/src/styles/header.scss

@@ -0,0 +1,103 @@
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as
+	globalFunctions;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as
+	focusPlaceholders;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';
+@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
+
+$box-shadow-blur-radius-12: 12px;
+$font-size-18: globalFunctions.px-to-rem(18);
+$navigation-max-width: 72rem;
+$ontario-navigation-container-min-width: globalFunctions.px-to-rem(290); //18.125rem
+$ontario-header-button-font-size: $font-size-18;
+$ontario-header-button-line-height: 1.5;
+$ontario-header-button-with-outline-padding-top-bottom: globalFunctions.px-to-rem(6);
+$header-height: globalFunctions.px-to-rem(50);
+
+// General Header Styles
+%ontario-header,
+%ontario-application-header,
+%ontario-service-header {
+	position: relative;
+	display: flex;
+	align-items: center;
+	background-color: colours.$ontario-colour-black;
+	color: colours.$ontario-colour-white;
+	height: $header-height;
+	z-index: zIndex.$ontario-z-index-above-high;
+}
+
+// Common Navigation Container
+%ontario-navigation,
+%ontario-application-navigation {
+	position: absolute;
+	width: globalVariables.$full-width;
+
+	@media screen and (min-width: breakpoints.$medium-breakpoint) {
+		position: relative;
+		max-width: $navigation-max-width;
+		width: auto;
+		margin: spacing.$spacing-0 auto;
+	}
+}
+
+%ontario-application-navigation__container {
+	background: colours.$ontario-colour-white;
+	position: absolute;
+	transform: translateY(-100%);
+	width: 100%;
+	visibility: hidden;
+	z-index: zIndex.$ontario-z-index-above-high;
+
+	@media screen and (min-width: breakpoints.$medium-breakpoint) {
+		box-shadow: 0 globalVariables.$global-radius $box-shadow-blur-radius-12 rgba(0, 0, 0, 0.3);
+		border-radius: globalVariables.$global-radius;
+		display: none;
+		position: absolute;
+		right: spacing.$spacing-4;
+		top: calc(100% - #{spacing.$spacing-2});
+		min-width: $ontario-navigation-container-min-width; // this value is to control the min-width size the dropdown navigation list can be
+		max-width: 30%;
+		z-index: zIndex.$ontario-z-index-above-high;
+	}
+}
+
+%ontario-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.6);
+	width: globalVariables.$full-width;
+	z-index: zIndex.$ontario-z-index-above-medium;
+}
+
+%ontario-header-button {
+	background-color: colours.$ontario-colour-black;
+	border: none;
+	border-radius: globalVariables.$global-radius;
+	color: colours.$ontario-colour-white;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	font-size: $ontario-header-button-font-size;
+	font-weight: fontWeights.$ontario-font-weights-semi-bold;
+	font-family: fonts.$ontario-font-open-sans;
+	height: globalVariables.$standard-input-height;
+	line-height: $ontario-header-button-line-height;
+	text-align: center;
+	text-decoration: none;
+}
+
+%ontario-header-button--with-outline {
+	border: globalVariables.$border-size-standard solid colours.$ontario-colour-white;
+	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;
+	padding: $ontario-header-button-with-outline-padding-top-bottom spacing.$spacing-4;
+}

package/src/utils/common/common.enum.ts

@@ -0,0 +1,6 @@
+// Maps to devices associated with Screen Breakpoints
+export enum DeviceTypes {
+	Mobile = 'mobile',
+	Tablet = 'tablet',
+	Desktop = 'desktop',
+}

package/src/utils/common/common.interface.ts

@@ -104,3 +104,13 @@ export const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
  * https://steveholgado.com/typescript-types-from-arrays/
  */
 export type HeadingLevel = (typeof headingLevelDefinitions)[number];
+
+/**
+ * Used in both ontario-header and ontario-header-overflow-menu.
+ */
+export interface MenuItem {
+	title: string;
+	href: string;
+	linkIsActive?: boolean;
+	onClickHandler?: (event: Event) => void;
+}

package/src/utils/common/common.variables.ts

@@ -1,2 +1,38 @@
+// import {
+// 	OntarioBreakpointsSmall,
+// 	OntarioBreakpointsMedium,
+// 	OntarioBreakpointsLarge,
+// } from '@ongov/ontario-design-system-design-tokens/dist/ts/tokens';
+
+/**
+ * TODO: Investigate why importing tokens above is leading to compiler errors with Rollup.
+ *
+ * Temp fix for now is to define them seperately in this file.
+ */
+const OntarioBreakpointsSmall = '20em';
+const OntarioBreakpointsMedium = '40em';
+const OntarioBreakpointsLarge = '73em';
+
 export const minimumGridColumns = 1;
 export const maximumGridColumns = 12;
+
+/**
+ * Numeric screen breakpoint values pulled from the design tokens package.
+ * By default these come in as strings as they have units attached to them
+ * (e.g. '40em').
+ *
+ * However for comparision calculations we need the true numeric value.
+ *
+ * The Number() method only matches numerical values to begin with.
+ * However for further clarity I'm showing a replace on the
+ * regex /\D/g match, which matches againt any non-numeric characters,
+ * and is replacing it with nothing.
+ */
+export const ScreenBreakpoints = {
+	Small: Number(OntarioBreakpointsSmall.replace(/\D/g, '')),
+	Medium: Number(OntarioBreakpointsMedium.replace(/\D/g, '')),
+	Large: Number(OntarioBreakpointsLarge.replace(/\D/g, '')),
+};
+
+// standard font size in px (design tokens package has it as 1 em)
+export const standardFontSizePx = 16;

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