Skip to content
Snippets Groups Projects
Commit 82087182 authored by katja's avatar katja
Browse files

Merge branch 'development' into NXSTAGE-1493-header 

merging with dev
parents 8dc9d23a ab637ada
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 269 additions and 207 deletions
src/components/heading/heading.scss
+ 20
− 22
View file @ 82087182
......@@ -101,15 +101,10 @@
// These styles are applied if there is a Sidebar on the page in Desktop sizes
h2.hy-heading__introduction,
h2.hy-heading__landingsection {
@include font-size(28px, 28px);
@include font-size(28px, 32px);
@include font-weight($bold);
letter-spacing: -1px;
letter-spacing: -0.7px;
text-transform: uppercase;
@include breakpoint($narrow) {
@include font-size(40px, 40px);
letter-spacing: -1.3px;
}
}
/*
......@@ -154,12 +149,13 @@ h1.hy-heading__introduction {
h2.hy-heading__introduction,
h2.hy-heading__landingsection {
@include breakpoint($extrawide) {
@include font-size(40px, 40px);
letter-spacing: -1.3px;
@include font-size(34px, 40px);
letter-spacing: -0.85px;
}
@include breakpoint($xlarge) {
@include font-size(48px, 48px);
letter-spacing: -1.6px;
@include font-size(42px, 48px);
letter-spacing: -1.05px;
}
}
......@@ -193,12 +189,13 @@ h1.hy-heading__introduction {
h2.hy-heading__introduction,
h2.hy-heading__landingsection {
@include breakpoint($extrawide) {
@include font-size(48px, 48px);
letter-spacing: -1.6px;
@include font-size(34px, 40px);
letter-spacing: -0.85px;
}
@include breakpoint($xlarge) {
@include font-size(48px, 48px);
letter-spacing: -1.6px;
@include font-size(42px, 48px);
letter-spacing: -1.05px;
}
}
......@@ -302,18 +299,19 @@ h1 {
// default h2 used in content pages
h2 {
@include font-size(26px, 32px);
letter-spacing: -0.8px;
@include font-weight($bold);
letter-spacing: -0.52px;
@include breakpoint($narrow) {
// > 480px
@include font-size(32px, 32px);
letter-spacing: -1px;
@include breakpoint($wide) {
// > 960px
@include font-size(30px, 36px);
letter-spacing: -0.6px;
}
@include breakpoint($extrawide) {
// > 1200px
@include font-size(40px, 48px);
letter-spacing: -1.2px;
@include font-size(34px, 40px);
letter-spacing: -0.68px;
}
}
......
src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+ 126
− 102
View file @ 82087182
......@@ -5,6 +5,7 @@
// Default variant
.hy-breadcrumbs {
display: inline-block;
position: relative;
width: auto;
&.is-condensed {
......@@ -23,18 +24,14 @@
font-family: var(--main-font-family);
list-style-type: none;
margin: 0;
min-height: 72px;
overflow: hidden;
padding: 0;
padding: 20px 0 16px;
@include breakpoint($narrow) {
min-height: 76px;
}
@include breakpoint($wide) {
min-height: 86px;
padding: 24px 0 20px;
}
@include breakpoint($extrawide) {
min-height: 94px;
padding: 32px 0 24px;
}
}
......@@ -45,47 +42,24 @@
flex: 0 0 auto;
a {
color: var(--brand-main-light);
align-items: center;
color: var(--link-blue);
display: flex;
flex-direction: row;
align-items: center;
margin-right: 20px;
height: 44px;
padding-left: 6px;
padding-right: 6px;
position: relative;
text-decoration: none;
@include breakpoint($narrow) {
margin-right: 28px;
}
@include breakpoint($wide) {
margin-right: 30px;
}
.breadcrumb-item-caret {
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
@include breakpoint($narrow) {
right: -18px;
}
@include breakpoint($wide) {
right: -19px;
}
&:hover {
cursor: default;
}
}
}
a.default {
@include font-size(14px, 20px);
@include font-size(14px, 18px);
@include font-weight($semibold);
letter-spacing: -0.5px;
@include breakpoint($narrow) {
@include font-size(16px, 24px);
@include breakpoint($extrawide) {
@include font-size(16px, 20px);
}
}
......@@ -107,6 +81,8 @@
.breadcrumb-item.home {
hy-icon.default {
margin-bottom: 4px;
svg {
fill: var(--brand-main-light);
stroke: var(--brand-main-light);
......@@ -123,47 +99,25 @@
.breadcrumb-item.main {
min-width: 0;
a {
display: flex;
}
}
.breadcrumb-item__more {
display: none;
flex-direction: row;
align-items: center;
position: relative;
margin-right: 20px;
@include breakpoint($narrow) {
margin-right: 25px;
}
@include breakpoint($wide) {
margin-right: 30px;
}
&.visible {
display: flex;
}
.breadcrumb-item-caret {
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
@include breakpoint($narrow) {
right: -18px;
}
&:hover {
cursor: default;
}
&__drop {
position: absolute;
right: 5.5px;
top: 50%;
transform: translateY(-50%);
}
}
}
......@@ -174,60 +128,110 @@
}
.breadcrumb-item-dropdown-button {
align-items: center;
background-color: transparent;
border: 0;
display: flex;
flex-direction: row;
color: var(--brand-main-light);
height: 44px;
margin: 0;
padding-left: 6px;
padding-right: 6px;
cursor: pointer;
border: 1.5px solid var(--brand-main-light);
font-size: 1.5rem;
line-height: 10px;
border-radius: 3px;
background-color: var(--grayscale-white);
box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.3);
padding: 0 25px 9px 10px;
position: relative;
hy-icon {
svg {
fill: var(--brand-main-light);
margin: 0 0 -3px 10px;
transform: rotate(90deg);
.breadcrumb-item-dropdown-button__content {
align-items: center;
background-color: var(--grayscale-white);
border-radius: 3px;
border: 2px solid var(--brand-main-light);
color: var(--brand-main-light);
display: flex;
height: 20px;
padding: 0 6px;
pointer-events: none;
> span {
position: relative;
width: 20px;
height: 10px;
&:after {
background-color: var(--grayscale-black);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--grayscale-black), -6px 0 0 1px var(--grayscale-black),
6px 0 0 1px var(--grayscale-black);
content: '';
height: 2px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
}
}
hy-icon {
svg {
fill: var(--brand-main-light);
margin-left: 3px;
transform: rotate(90deg);
}
}
}
}
.breadcrumb-item-dropdown-button.is-open {
background-color: var(--brand-main-light);
color: var(--grayscale-white);
&.is-open {
.breadcrumb-item-dropdown-button__content {
background-color: var(--brand-main-light);
color: var(--grayscale-white);
> span {
&:after {
background-color: var(--grayscale-white);
box-shadow: 0 0 0 1px var(--grayscale-white), -6px 0 0 1px var(--grayscale-white),
6px 0 0 1px var(--grayscale-white);
width: 2px;
}
}
}
svg {
fill: var(--grayscale-white);
margin: 0 0 -3px 10px;
transform: rotate(270deg);
hy-icon svg {
fill: var(--grayscale-white);
transform: rotate(270deg);
}
}
}
.breadcrumb-hidden-items {
display: none;
list-style: none;
visibility: hidden;
&__is-open {
background: var(--grayscale-white);
box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.2);
display: block;
margin-top: -9px;
padding: 32px 16px 6px 16px;
left: 0;
padding: 16px 0 20px;
position: absolute;
right: 0;
top: calc(100% - 11px);
visibility: visible;
z-index: 5;
@include breakpoint($narrow) {
padding: 32px 64px 6px 32px;
left: 12px;
right: auto;
}
a {
a.default {
display: flex;
height: 44px;
margin: 0;
padding-bottom: 26px;
width: 100%;
padding: 0 16px;
@include breakpoint($narrow) {
padding: 0 64px 0 32px;
}
}
}
}
......@@ -250,15 +254,12 @@
font-family: var(--main-font-family);
text-decoration: none;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: auto;
}
.intermediate {
display: flex;
text-overflow: initial;
}
.intermediate.hidden {
......@@ -270,7 +271,7 @@
.breadcrumb-item.intermediate,
.breadcrumb-item.home {
a {
min-height: 44px;
// min-height: 44px;
}
}
.breadcrumb-item.breadcrumb-item__current {
......@@ -297,9 +298,24 @@
visibility: visible;
a.large {
@include font-size(26px, 26px);
@include font-size(20px, 26px);
color: var(--grayscale-black);
font-weight: 700;
letter-spacing: -0.6px;
@include breakpoint($narrow) {
@include font-size(26px, 26px);
letter-spacing: -0.8px;
font-weight: 700;
}
}
.breadcrumb-item__divider {
@include font-size(20px, 26px);
@include breakpoint($narrow) {
@include font-size(26px, 26px);
}
}
.breadcrumb-item-caret {
......@@ -326,8 +342,16 @@
.breadcrumb-item.home {
svg {
fill: var(--grayscale-black);
height: 18px;
margin-bottom: 4px;
stroke: var(--grayscale-black);
stroke-width: 30;
width: 18px;
@include breakpoint($narrow) {
height: 24px;
margin-bottom: 2px;
width: 24px;
}
}
}
}
......
src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
+ 38
− 32
View file @ 82087182
......@@ -42,8 +42,13 @@ export class HyBreadcrumbs {
// Set breadcumbs width + paddings.
breadcrumbsWidth = this.el.offsetWidth + 64;
if (breadcrumbsWidth >= document.body.scrollWidth) {
this.adjustBreadcrumbsMenuVisibility();
const layoutContentElement = document.getElementsByClassName('layout-content')[0] as HTMLElement;
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
if (layoutContentElement) {
if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
moreButton.setAttribute('aria-hidden', 'false');
this.adjustBreadcrumbsMenuVisibility();
}
}
}
......@@ -85,24 +90,23 @@ export class HyBreadcrumbs {
return (
<li class="breadcrumb-item home">
<a href={url} class={homeItemClass}>
<hy-icon icon={'hy-icon-home'} class={`${this.variant}`} size={20} />
<hy-icon icon={'hy-icon-caret-right'} class={'breadcrumb-item-caret'} size={10} />
<hy-icon icon={'hy-icon-home'} class={`${this.variant}`} size={16} />
</a>
<span class="breadcrumb-item__divider">/</span>
</li>
);
}
BreadcrumbItem(label, url, className = '', withCaret = true) {
const breadcrumbClass = ['breadcrumb-item', className].join(' ');
const caretClass = ['breadcrumb-item-caret', this.variant].join(' ');
if (url) {
if (withCaret) {
return (
<li class={breadcrumbClass}>
<a href={url} class={`${this.variant}`}>
{label}
<hy-icon icon={'hy-icon-caret-right'} class={caretClass} size={10} />
</a>
<span class="breadcrumb-item__divider">/</span>
</li>
);
} else {
......@@ -118,7 +122,7 @@ export class HyBreadcrumbs {
return (
<li class={`${breadcrumbClass} breadcrumb-item__current`}>
<a aria-current="page" href={url} class={`${this.variant}`}>
{label}
{label.length > 20 ? `${label.substring(0, 19)}...` : label}
</a>
</li>
);
......@@ -130,7 +134,7 @@ export class HyBreadcrumbs {
return <li class={breadcrumbClass}>{label}</li>;
}
DropdownMenuItem() {
DropdownMenuItem(items) {
return (
<li class="breadcrumb-item__more">
<button
......@@ -140,15 +144,22 @@ export class HyBreadcrumbs {
id="more"
key="more"
class="breadcrumb-item-dropdown-button"
aria-label="Open breadcrumb navigation"
>
...
<hy-icon
icon={'hy-icon-caret-right'}
class={'breadcrumb-item-caret__drop breadcrumb-item__more__icon'}
size={10}
/>
<span class="breadcrumb-item-dropdown-button__content">
{/* Span is for ... */}
<span></span>
<hy-icon
icon={'hy-icon-caret-right'}
class={'breadcrumb-item-caret__drop breadcrumb-item__more__icon'}
size={10}
/>
</span>
</button>
<hy-icon icon={'hy-icon-caret-right'} class={'breadcrumb-item-caret'} size={10} />
<ol class="breadcrumb-hidden-items" aria-hidden="true">
{items}
</ol>
<span class="breadcrumb-item__divider">/</span>
</li>
);
}
......@@ -209,20 +220,14 @@ export class HyBreadcrumbs {
if (moreMenu) {
if (this.menuOpen) {
moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
moreMenu.setAttribute('aria-hidden', 'true');
moreButton.classList.remove('is-open');
moreButton.setAttribute('aria-expanded', 'false');
} else {
moreMenu.classList.add('breadcrumb-hidden-items__is-open');
moreButton.classList.add('is-open');
moreMenu.setAttribute('aria-hidden', 'false');
moreButton.setAttribute('aria-expanded', 'true');
if (document.body.scrollWidth < 480) {
(moreMenu as HTMLElement).style.left = '16px';
} else {
var rect = (moreButton as HTMLElement).getBoundingClientRect();
(moreMenu as HTMLElement).style.left = (rect.left - 64).toString().concat('px');
this.adjustHiddenMenuWidth();
}
}
this.menuOpen = !this.menuOpen;
}
......@@ -239,10 +244,14 @@ export class HyBreadcrumbs {
if (!event) return;
const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
if (breadcrumbsElement) {
if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
this.adjustBreadcrumbsMenuVisibility(true);
moreButton.setAttribute('aria-hidden', 'false');
this.adjustBreadcrumbsMenuVisibility();
} else {
moreButton.setAttribute('aria-hidden', 'true');
this.adjustBreadcrumbsMenuVisibility(false);
}
}
......@@ -265,7 +274,6 @@ export class HyBreadcrumbs {
if (index == 0) {
itemsBreadcrumbs.push(this.HomeItem(x.url));
} else {
//itemsBreadcrumbs.push(this.BreadcrumbTextItem(x.text, 'main'));
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, '', 'main'));
}
}
......@@ -275,12 +283,8 @@ export class HyBreadcrumbs {
this._dataItems.map((x, index) => {
let breadcrumbEl = this.BreadcrumbItem(x.text, x.url, '', false);
if (isMenuNeeded && index > 1 && index < TOTAL_ITEMS - 1) {
itemsToShowInMenu.push(<div>{breadcrumbEl}</div>);
if (index === 2) {
itemsBreadcrumbs.push(this.DropdownMenuItem());
}
if (isMenuNeeded && index > 0 && index < TOTAL_ITEMS - 1) {
itemsToShowInMenu.push(<li>{breadcrumbEl}</li>);
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'intermediate'));
return;
} else {
......@@ -293,12 +297,14 @@ export class HyBreadcrumbs {
});
}
// Add items to show in breadcrumb popup in correct DOM position.
itemsBreadcrumbs.splice(1, 0, this.DropdownMenuItem(itemsToShowInMenu));
const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
return (
<nav aria-label="Breadcrumb" role="navigation" aria-labelledby="system-breadcrumb" class={breadcrumbsClass}>
<ol class="breadcrumb-container">{itemsBreadcrumbs}</ol>
{itemsToShowInMenu && <ol class="breadcrumb-hidden-items">{itemsToShowInMenu}</ol>}
</nav>
);
}
......
src/components/icon/Home.tsx
+ 2
− 6
View file @ 82087182
......@@ -2,12 +2,8 @@ import {h} from '@stencil/core';
function SvgHome(props) {
return (
<svg viewBox="0 0 1000 1000" {...props} stroke="black" stroke-width="1">
<path
d="M345.3,998.7c-30.3,0-55.4-25.2-55.4-55.6c0-30.4,25.1-55.6,55.4-55.6h479.9l0-509.9L500,114.2L174.8,377.6
v565.5c0,30.4-25.1,55.6-55.4,55.6c-30.3,0-55.4-25.2-55.4-55.6l0-567.6c0-31.5,14.6-61.9,38.7-81.9L434.1,25
c37.7-30.4,93-30.4,130.7,0l332.5,268.6c25.1,19.9,38.7,49.3,38.7,81.9v568.7c0,29.4-25.1,54.6-55.4,54.6L345.3,998.7z"
/>
<svg viewBox="0 0 56 65" {...props} stroke="black" stroke-width="1">
<path d="M29.3106262,0.81816473 L55.3106262,23.6051927 C55.7484916,23.9889485 56,24.5457471 56,25.1313539 L56,62.3034274 C56,63.4192907 55.1045695,64.3238767 54,64.3238767 L2,64.3238767 C0.8954305,64.3238767 0,63.4192907 0,62.3034274 L0,25.1313539 C0,24.5457471 0.251508395,23.9889485 0.6893738,23.6051927 L26.6893738,0.81816473 C27.4413507,0.159114007 28.5586493,0.159114007 29.3106262,0.81816473 Z M28,10.3657587 L8,27.8911356 L8,56.2420796 L48,56.2420796 L48,27.8951765 L28,10.3657587 Z"></path>
</svg>
);
}
......
src/components/navigation/menu-item-sidebar/menu-item-sidebar.scss
+ 77
− 42
View file @ 82087182
.hy-menu-sidebar--container.sidebar-open {
.hy-menu-item-sidebar:not(.is-parent) {
.hy-menu-sidebar--container.sidebar-open,
.hy-menu-sidepanel--container.sidepanel-open {
.hy-menu-item-sidebar:not(.is-parent):not(.is-parent--sub-level) {
.hy-menu-item-sidebar__label,
.hy-menu-item__label__icon {
background: linear-gradient(270deg, #f5f5f5 0%, #f8f8f8 100%);
......@@ -7,7 +8,63 @@
}
.hy-menu-item-sidebar.is-parent {
.hy-menu-item-sidebar__label {
background: none;
background-color: none !important;
}
}
.hy-menu-item-sidebar:not(.is-parent) {
.hy-menu-item-sidebar__label {
&:hover {
background: var(--hover-gray) !important;
text-decoration: underline;
}
}
.hy-menu-item__label__icon {
&:not([aria-expanded='true']):hover {
background: var(--hover-gray) !important;
cursor: pointer;
svg {
width: 22px;
height: 22px;
}
}
&[aria-expanded='true']:hover {
background: var(--brand-main);
cursor: pointer;
transition: all 0.25s ease;
.hy-menu-item__label__icon__svg {
transform: rotate(180deg) translateX(2px);
}
svg {
width: 22px;
height: 22px;
}
}
}
}
}
.hy-menu-sidebar--container:not(.sidebar-open) {
.hy-menu-item-sidebar:not(.is-parent) {
.hy-menu-item-sidebar__label {
&:hover {
border: 1px solid var(--brand-main);
margin: -1px;
text-decoration: underline;
}
}
.hy-menu-item__label__icon {
&:hover {
border: 1px solid var(--brand-main);
margin: -1px;
text-decoration: underline;
cursor: pointer;
}
}
}
}
......@@ -18,9 +75,7 @@
&--label-container {
@include font-size(14px, 20px);
@include font-weight($bold);
background-color: var(--grayscale-white);
border: 0.5px solid rgba(16, 126, 171, 0.1);
@include font-weight($semibold);
box-sizing: border-box;
color: var(--brand-main-light);
display: flex;
......@@ -40,9 +95,9 @@
outline-offset: 4px;
}
&:hover {
/* &:hover {
color: var(--brand-main-nearly-black);
}
} */
> .hy-menu-level-container.hy-menu-level-container--sidepanel {
display: none;
}
......@@ -90,6 +145,7 @@
&__label {
align-items: center;
background-color: var(--grayscale-white);
color: var(--brand-main-light);
display: flex;
hyphens: auto;
......@@ -98,11 +154,6 @@
width: 100%;
word-break: break-word;
&:hover {
background: var(--hover-gray) !important;
text-decoration: underline;
}
&:focus {
outline: none;
box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
......@@ -114,12 +165,13 @@
border-top: 0;
border-right: 0;
border-bottom: 0;
background: none;
border-left: 1px dotted var(--brand-main-light);
background: var(--grayscale-white);
border-left: 1px solid var(--brand-main-light);
color: var(--brand-main-light);
display: inline-block;
position: relative;
width: 61.5px;
margin-left: 6px;
min-height: 48px;
svg {
......@@ -129,30 +181,6 @@
transform: translate(-50%, -50%);
}
&:not([aria-expanded='true']):hover {
background: var(--hover-gray) !important;
cursor: pointer;
svg {
width: 22px;
height: 22px;
}
}
&[aria-expanded='true']:hover {
background: var(--brand-main);
cursor: pointer;
transition: all 0.25s ease;
.hy-menu-item__label__icon__svg {
transform: rotate(180deg) translateX(2px);
}
svg {
width: 22px;
height: 22px;
}
}
&:focus {
outline: none;
box-shadow: 0 0 1px 1px rgba(55, 148, 224, 0.5);
......@@ -162,7 +190,6 @@
&.is-parent {
align-items: flex-start;
background: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
......@@ -180,10 +207,10 @@
.hy-menu-item-sidebar__label {
@include font-size(26px, 26px);
background-color: transparent !important;
font-family: var(--main-font-family);
font-weight: bold;
letter-spacing: -0.81px;
margin: 0 0 0 0.5rem;
padding: 0;
text-decoration: none;
text-transform: uppercase;
......@@ -191,9 +218,17 @@
}
&:hover {
span {
background: none;
border: none;
margin: 0;
}
a {
border: none;
color: var(--brand-main) !important;
text-decoration: underline;
margin: 0;
}
.hy-menu-item__parent__icon__svg {
fill: var(--brand-main-nearly-black);
......@@ -242,7 +277,7 @@
> .hy-menu-item-sidebar--label-container {
align-items: flex-end;
margin: 0;
margin: 0 0 0 0.5rem;
padding: 0;
}
}
......
src/components/paragraph-text/paragraph-text.scss
+ 4
− 2
View file @ 82087182
......@@ -7,8 +7,8 @@
// General styles for text paragraph
.hy-paragraph-text {
@include font-size(14px, 20px); // Paragraph Small size
color: var(--grayscale-dark);
@include font-size(15px, 22px); // Paragraph Small size
color: var(--grayscale-dark-text);
font-family: var(--main-font-family);
letter-spacing: 0;
width: 100%;
......@@ -20,11 +20,13 @@
width: 91.46%; // 11 col
}
@include breakpoint($xlarge) {
@include font-size(17px, 26px); // Paragraph Large size
width: 82.89%; // 10 col
}
&__large {
@include breakpoint($extrawide) {
@include font-size(17px, 26px); // Paragraph Large size
width: 82.89%; // 10 col
}
@include breakpoint($xlarge) {
......
src/global/_colors.scss
+ 2
− 1
View file @ 82087182
......@@ -4,7 +4,7 @@
--brand-main-active: #005379;
--brand-main-dark: #003146;
--brand-main-nearly-black: #000222;
--link-blue: #0479a5;
--link-blue: #0479a4;
--link-disabled: #767676;
--grayscale-white: #fff;
--grayscale-slightly-gray: #fefefe;
......@@ -15,6 +15,7 @@
--grayscale-background-arrow: #dfdfdf;
--grayscale-medium-dark: #979797;
--grayscale-dark: #555555;
--grayscale-dark-text: #222222;
--grayscale-black: #000000;
--additional-red-light: #e5053a;
--additional-red-dark: #a31621;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment