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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ongov/ontario-design-system-component-library",
-	"version": "6.0.0-alpha.4",
+	"version": "6.0.0-alpha.5",
 	"type": "module",
 	"private": false,
 	"description": "Ontario Design System Component Library",
@@ -73,7 +73,8 @@
 		"test:unit": "stencil test --spec"
 	},
 	"dependencies": {
-		"@ongov/ontario-design-system-global-styles": "6.0.0-alpha.4",
+		"@ongov/ontario-design-system-design-tokens": "6.0.0-alpha.4",
+		"@ongov/ontario-design-system-global-styles": "6.0.0-alpha.5",
 		"@stencil/core": "^4.33.1",
 		"dotenv": "^16.4.5",
 		"uuid": "^11.0.5"
@@ -139,5 +140,5 @@
 	"collection:main": "dist/collection/index.js",
 	"es2015": "dist/esm/index.mjs",
 	"es2017": "dist/esm/index.mjs",
-	"gitHead": "77c251f1a3bf57cd74ea5f857064a92b532b6cb5"
+	"gitHead": "0a0896ee0e66931e57accd348b3e8cf39c0c17ba"
 }

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

@@ -15,20 +15,21 @@
 @use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';
 
 @use '../../styles/text-inputs.scss';
+@use '../../styles/header.scss';
 
 $navigation-link-bg--hover: #e5e5e5;
-$navigation-max-width: 72rem;
-
-$ontario-application-header-menu-button-icon--margin-right: 6px;
-
+$application-subheader-heading-padding-top-bottom: globalFunctions.px-to-rem(6);
+$application-subheader-heading-max-width: 65%;
+$application-header-logo-width: 100px;
+$application-header-logo-height: 25px;
+$application-header-lang-toggle-font-size: globalFunctions.px-to-rem(16);
+$application-header-lang-toggle-line-height: globalFunctions.px-to-rem(22);
+$menu-button-icon-margin-right: 6px;
+$border-width-2: 2px;
+
+/* Ontario Application Header */
 .ontario-application-header {
-	display: flex;
-	align-items: center;
-	background-color: colours.$ontario-colour-black;
-	color: colours.$ontario-colour-white;
-	height: 3.125rem !important;
-	position: relative;
-	z-index: calc(zIndex.$ontario-z-index-above-high + 1);
+	@extend %ontario-application-header;
 
 	> .ontario-row {
 		display: flex;
@@ -38,198 +39,66 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 
 .ontario-application-header-container {
 	position: relative;
-	width: 100%;
+	width: globalVariables.$full-width;
+	z-index: zIndex.$ontario-z-index-above-high;
 }
 
-.ontario-header-button.ontario-application-navigation--open {
-	&:hover {
-		background-color: colours.$ontario-greyscale-60;
-	}
-}
+/* Header Buttons */
+.ontario-header-button {
+	@extend %ontario-header-button;
+	border: $border-width-2 solid colours.$ontario-colour-white;
+	padding: spacing.$spacing-2 spacing.$spacing-4;
 
-.ontario-header-button.ontario-application-navigation--closed {
-	&:active {
-		background-color: colours.$ontario-colour-black;
+	&:hover,
+	&:focus {
+		@extend %ontario-focus;
+		background-color: colours.$ontario-greyscale-70;
+		color: colours.$ontario-colour-white;
 	}
 }
 
 .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: 0.375rem spacing.$spacing-4;
+	@extend %ontario-header-button--with-outline;
 }
 
-.ontario-application-subheader .ontario-header-button,
-.ontario-application-navigation .ontario-header-button {
-	background-color: colours.$ontario-greyscale-70;
-}
-
-.ontario-header-button--closed {
-	&:focus {
-		box-shadow: none;
-		outline: none;
-		transition: none;
+.ontario-header-button--without-outline {
+	&:hover {
+		background-color: colours.$ontario-greyscale-70;
 	}
-}
-
-.ontario-application-header__logo,
-.ontario-application-header__logo a,
-.ontario-application-header__lang-toggle,
-.ontario-application-subheader__container,
-.ontario-application-subheader__menu-container,
-.ontario-application-subheader__menu {
-	display: flex;
-	align-items: center;
-	outline: none;
-}
 
-.ontario-application-header__logo a {
 	&:focus {
 		box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
+		outline: 4px solid transparent;
 		transition: all 0.1s ease-in-out;
 	}
 }
 
-.ontario-application-header__logo svg,
-.ontario-application-header__logo img {
-	width: 100px;
-	height: 25px;
-}
-
-.ontario-application-header__lang-toggle {
-	justify-content: flex-end;
-
-	a {
-		font-size: globalFunctions.px-to-rem(16);
-		line-height: globalFunctions.px-to-rem(22);
-		height: auto;
-		outline: none;
-		padding: spacing.$spacing-2 spacing.$spacing-3;
-	}
-}
-
-/* Ontario application subheader styles */
+/* Subheader */
 .ontario-application-subheader {
 	padding: (spacing.$spacing-2 + spacing.$spacing-3) 0;
 	background-color: darken(colours.$ontario-colour-white, 75);
-	overflow: visible;
 	position: relative;
-	z-index: calc(zIndex.$ontario-z-index-above-high + 1);
+	z-index: zIndex.$ontario-z-index-above-high;
 
 	@media screen and (min-width: breakpoints.$medium-breakpoint) {
 		z-index: zIndex.$ontario-z-index-neutral;
 	}
 
-	& > .ontario-row {
-		position: relative;
-	}
-}
-
-.ontario-application-header-container {
-	position: relative;
-	z-index: calc(zIndex.$ontario-z-index-above-high + 1);
-}
-
-.ontario-application-header > .ontario-row {
-	display: flex;
-	align-items: center;
-}
-
-.ontario-application-subheader .ontario-header-button {
-	visibility: visible;
-}
-
-.ontario-application-subheader .ontario-header-button,
-.ontario-application-navigation .ontario-header-button {
-	background-color: colours.$ontario-greyscale-70;
-
-	&:hover {
-		background-color: colours.$ontario-greyscale-60;
-	}
-
-	&:active {
-		background-color: colours.$ontario-colour-black;
-	}
-}
-
-.ontario-header-button--without-outline {
-	&:hover {
+	.ontario-header-button {
 		background-color: colours.$ontario-greyscale-70;
-	}
+		visibility: visible;
 
-	&:focus {
-		box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
-		outline: 4px solid transparent;
-		transition: all 0.1s ease-in-out;
-	}
-}
-
-.ontario-application-subheader__heading {
-	padding: 0.375rem spacing.$spacing-0;
-	@extend %h4-styles;
-	margin-bottom: spacing.$spacing-0;
-	max-width: 65%;
-
-	a {
-		color: colours.$ontario-colour-white;
-		font-weight: fontWeights.$ontario-font-weights-semi-bold;
-		text-decoration: none;
-
-		&:focus {
-			box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
-			transition: all 0.1s ease-in-out;
+		&:hover {
+			background-color: colours.$ontario-greyscale-60;
 		}
 
-		&:hover,
-		&:active,
-		&:visited {
-			color: colours.$ontario-colour-white;
-			text-decoration: underline;
+		&:active {
+			background-color: colours.$ontario-colour-black;
 		}
 	}
 }
 
-.ontario-application-subheader .ontario-header-button {
-	visibility: visible;
-	background-color: colours.$ontario-greyscale-70;
-
-	&:hover {
-		background-color: colours.$ontario-greyscale-60;
-	}
-
-	&:active {
-		background-color: colours.$ontario-colour-black;
-	}
-}
-
-.ontario-header__menu-toggler {
-	span {
-		display: flex;
-
-		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
-			&:last-of-type {
-				display: none;
-			}
-		}
-	}
-
-	svg {
-		margin-right: $ontario-application-header-menu-button-icon--margin-right;
-
-		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
-			margin-right: spacing.$spacing-0;
-		}
-	}
-}
-
-.ontario-application-subheader__container {
-	align-items: center;
-	justify-content: space-between;
-}
-
 .ontario-application-subheader__menu {
-	display: flex;
-	align-items: center;
 	list-style: none;
 	margin: spacing.$spacing-0;
 	padding-left: spacing.$spacing-0;
@@ -278,363 +147,109 @@ $ontario-application-header-menu-button-icon--margin-right: 6px;
 	}
 }
 
-.ontario-application-navigation {
-	position: absolute;
-	width: 100%;
-
-	@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 .ontario-header-button {
-	visibility: hidden;
-	position: absolute;
-	top: (-(spacing.$spacing-9) + -(spacing.$spacing-1));
-	right: spacing.$spacing-4;
-	z-index: calc(zIndex.$ontario-z-index-above-high + 2);
-}
-
-.ontario-application-navigation__container {
-	background: colours.$ontario-colour-white;
-	position: absolute;
-	top: 0;
-	width: 100%;
-	z-index: zIndex.$ontario-z-index-above-high;
-
-	@media screen and (min-width: breakpoints.$small-breakpoint) {
-		background: colours.$ontario-colour-white;
-		position: absolute;
-		z-index: zIndex.$ontario-z-index-above-high;
-	}
-
-	@media screen and (min-width: breakpoints.$medium-breakpoint) {
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-		border-radius: globalVariables.$global-radius;
-		position: absolute;
-		right: spacing.$spacing-3;
-		top: -0.6rem;
-		min-width: 290px;
-		max-width: 30%;
-		z-index: calc(zIndex.$ontario-z-index-above-medium + 1);
-		transition: none !important;
-	}
-}
-
-.ontario-application-navigation ul {
-	list-style: none;
-	padding: spacing.$spacing-2 spacing.$spacing-0;
-	margin: spacing.$spacing-0;
-	border-bottom: 1px solid colours.$ontario-greyscale-20;
-
-	@media screen and (min-width: breakpoints.$medium-breakpoint) {
-		border-bottom: none;
-	}
-}
-
-.ontario-application-navigation li {
-	border-top: 1px solid colours.$ontario-greyscale-20;
-	padding: spacing.$spacing-0;
+.ontario-application-subheader__heading {
+	padding: $application-subheader-heading-padding-top-bottom spacing.$spacing-0;
+	@extend %h4-styles;
 	margin-bottom: spacing.$spacing-0;
+	max-width: $application-subheader-heading-max-width;
 
-	&:last-of-type {
-		border-bottom: 1px solid colours.$ontario-greyscale-20;
-	}
-}
-
-.ontario-application-navigation a {
-	color: colours.$ontario-colour-black;
-	display: block;
-	font-size: 1.125rem;
-	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: fonts.$ontario-font-open-sans;
-	text-decoration: none;
-	padding: calc(spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;
-
-	&:hover {
-		text-decoration: underline;
-		background-color: $navigation-link-bg--hover;
-	}
-
-	&:active {
-		text-decoration: underline;
-		background-color: colours.$ontario-greyscale-20;
-	}
-
-	&:focus,
-	&:active {
-		@extend %ontario-focus;
-		box-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;
-	}
-
-	&.ontario-link--active {
-		border-left: 6px solid colours.$ontario-colour-black;
-		background-color: colours.$ontario-greyscale-5;
-	}
-}
-
-.ontario-navigation--open {
-	visibility: visible;
-	transform: translateY(0);
-	transition: transform 0.4s ease-in-out;
-
-	@media screen and (min-width: breakpoints.$medium-breakpoint) {
-		z-index: calc(zIndex.$ontario-z-index-above-high + 1);
-	}
-}
-
-.ontario-navigation--closed {
-	background: colours.$ontario-colour-white;
-	position: absolute;
-	transform: translateY(-100%);
-	transition:
-		transform 0.3s ease-in-out,
-		visibility 0.1s ease;
-	width: 100%;
-	visibility: hidden;
-	z-index: zIndex.$ontario-z-index-above-high;
-}
-
-.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
-	visibility: visible;
-	transform: translateY(0);
-	transition: transform 0.4s ease-in-out;
-
-	@media screen and (min-width: breakpoints.$medium-breakpoint) {
-		transition: none;
-		display: block;
-	}
-}
-
-.ontario-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.6);
-	width: 100%;
-	height: 100%;
-	z-index: zIndex.$ontario-z-index-above-medium;
-}
+	a {
+		color: colours.$ontario-colour-white;
+		font-weight: fontWeights.$ontario-font-weights-semi-bold;
+		text-decoration: none;
 
-.ontario-header-button.ontario-navigation--open {
-	&:hover {
-		background-color: colours.$ontario-greyscale-60;
-	}
+		&:focus {
+			@extend %ontario-focus;
+		}
 
-	&:active {
-		background-color: colours.$ontario-colour-black;
+		&:hover,
+		&:active,
+		&:visited {
+			color: colours.$ontario-colour-white;
+			text-decoration: underline;
+		}
 	}
 }
 
-.ontario-header-button.ontario-navigation--closed {
-	&:active {
-		background-color: colours.$ontario-colour-black;
-	}
+.ontario-application-subheader__container {
+	align-items: center;
+	justify-content: space-between;
 }
 
-/* Header buttons */
-.ontario-header-button {
-	background-color: colours.$ontario-colour-black;
-	border: none;
-	border-radius: globalVariables.$global-radius;
-	box-sizing: border-box;
-	box-shadow: none;
-	color: colours.$ontario-colour-white;
-	cursor: pointer;
-
+/* Logo */
+.ontario-application-header__logo,
+.ontario-application-header__logo a,
+.ontario-application-header__lang-toggle,
+.ontario-application-subheader__container,
+.ontario-application-subheader__menu-container,
+.ontario-application-subheader__menu {
 	display: flex;
 	align-items: center;
-
-	font-size: 1.125rem;
-	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: fonts.$ontario-font-open-sans;
-	height: globalVariables.$standard-input-height;
-	line-height: math.div(14, 9);
-	text-align: center;
-	text-decoration: none;
-
-	&:focus {
-		@extend %ontario-focus;
-	}
-
-	&:hover,
-	&:focus,
-	&:visited {
-		color: colours.$ontario-colour-white;
-	}
-}
-
-.ontario-header-button--with-outline,
-.ontario-header-button--without-outline {
-	background-color: colours.$ontario-colour-black;
-	color: colours.$ontario-colour-white;
-
-	&:hover {
-		background-color: colours.$ontario-greyscale-70;
-	}
-
-	&:active {
-		background-color: colours.$ontario-greyscale-60;
-	}
-
-	&:focus {
-		background-color: colours.$ontario-greyscale-70;
-	}
-}
-
-.ontario-header-button--with-outline {
-	border: 2px solid colours.$ontario-colour-white;
-	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;
-	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;
-
-	&:hover {
-		border: 2px solid colours.$ontario-colour-white;
-		color: colours.$ontario-colour-white;
-	}
-
-	&:focus {
-		background-color: colours.$ontario-greyscale-70;
-	}
-
-	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
-		padding: math.div(spacing.$spacing-3, 2);
-	}
+	outline: none;
 }
 
-.ontario-header__menu-toggler {
-	padding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;
-
-	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
-		padding-left: spacing.$spacing-2;
-		padding-right: spacing.$spacing-2;
-	}
-
+.ontario-application-header__logo {
 	span {
 		display: flex;
 
 		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
-			display: none;
+			&:last-of-type {
+				display: none;
+			}
 		}
 	}
-
 	svg {
-		margin-right: 6px;
+		margin-right: $menu-button-icon-margin-right;
 
 		@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
 			margin-right: spacing.$spacing-0;
 		}
 	}
-}
-
-.ontario-application-navigation__container {
-	background: colours.$ontario-colour-white;
-	position: absolute;
-	transform: translateY(-100%);
-	transition:
-		transform 0.3s ease-in-out,
-		visibility 0.1s ease;
-	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 12px 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: 290px; // this value is to control the min-width size the dropdown navigation list can be
-		max-width: 30%;
-		z-index: calc(zIndex.$ontario-z-index-above-high + 1);
-	}
-}
-
-.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {
-	background: colours.$ontario-colour-white;
-	visibility: visible;
-	transform: translateY(0);
-	transition: transform 0.4s ease-in-out;
-
-	@media screen and (min-width: breakpoints.$medium-breakpoint) {
-		transition: none;
-		display: block;
-	}
-}
 
-.ontario-application-navigation.ontario-navigation--open {
-	background: colours.$ontario-colour-white;
-	z-index: zIndex.$ontario-z-index-above-high;
-}
-
-.ontario-application-navigation ul {
-	list-style: none;
-	padding: spacing.$spacing-2 spacing.$spacing-0;
-	margin: spacing.$spacing-0;
-	border-bottom: 1px solid colours.$ontario-greyscale-20;
-
-	@media screen and (min-width: breakpoints.$medium-breakpoint) {
-		border-bottom: none;
+	a {
+		&:focus {
+			box-shadow: focusPlaceholders.$ontario-focus-box-shadow;
+			transition: all 0.1s ease-in-out;
+		}
 	}
 }
 
-.ontario-application-navigation li {
-	border-top: 1px solid colours.$ontario-greyscale-20;
-	padding: spacing.$spacing-0;
-	margin-bottom: spacing.$spacing-0;
-
-	&:last-of-type {
-		border-bottom: 1px solid colours.$ontario-greyscale-20;
-	}
+.ontario-application-header__logo svg,
+.ontario-application-header__logo img {
+	width: $application-header-logo-width;
+	height: $application-header-logo-height;
 }
 
-.ontario-application-navigation a {
-	color: colours.$ontario-colour-black;
-	display: block;
-	font-size: 1.125rem;
-	font-weight: fontWeights.$ontario-font-weights-semi-bold;
-	font-family: fonts.$ontario-font-open-sans;
-	text-decoration: none;
-	padding: (spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;
-
-	&:hover {
-		text-decoration: underline;
-		background-color: $navigation-link-bg--hover;
-	}
-
-	&:active {
-		text-decoration: underline;
-		background-color: colours.$ontario-greyscale-20;
-	}
+/* Menu Toggler */
+.ontario-header__menu-toggler {
+	display: flex;
+	align-items: center;
+	padding: spacing.$spacing-2 spacing.$spacing-4;
 
-	&:focus,
-	&:active {
-		@extend %ontario-focus;
-		box-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;
+	@media screen and (max-width: breakpoints.$xsmall-breakpoint) {
+		padding-left: spacing.$spacing-2;
+		padding-right: spacing.$spacing-2;
 	}
 
-	&.ontario-link--active {
-		border-left: 6px solid colours.$ontario-colour-black;
-		background-color: colours.$ontario-greyscale-5;
+	svg {
+		margin-right: $menu-button-icon-margin-right;
 	}
 }
 
-/* Ontario application header overlay styles */
-.ontario-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.6);
-	width: 100%;
-	height: 100%;
-	z-index: zIndex.$ontario-z-index-above-medium;
-}
-
-/* Ontario header helper styles */
+/* Icon Container */
 .ontario-header__icon-container {
 	display: flex;
 	align-items: center;
 }
+
+.ontario-application-header__lang-toggle {
+	justify-content: flex-end;
+
+	a {
+		font-size: $application-header-lang-toggle-font-size;
+		line-height: $application-header-lang-toggle-line-height;
+		height: auto;
+		outline: none;
+		padding: spacing.$spacing-2 spacing.$spacing-3;
+	}
+}