diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
index a7553c617db196e35dcabbaf3899f20306f04a21..e8d7eaa7038bbfb61879dfb6c96b93ad22a13e89 100644
--- a/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.scss
@@ -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;
+ }
}
}
}
diff --git a/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx b/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
index a3321f64218989f98e975fe376fa8db6bd668f2a..b51dc916b76da6dddfa399f03ab2a35b15b058c1 100644
--- a/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
+++ b/src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
@@ -42,7 +42,11 @@ export class HyBreadcrumbs {
// Set breadcumbs width + paddings.
breadcrumbsWidth = this.el.offsetWidth + 64;
- if (breadcrumbsWidth >= document.body.scrollWidth) {
+ const layoutContentElement = document.getElementsByClassName('layout-content')[0] as HTMLElement;
+ const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
+
+ if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
+ moreButton.setAttribute('aria-hidden', 'false');
this.adjustBreadcrumbsMenuVisibility();
}
}
@@ -85,24 +89,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 +121,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 +133,7 @@ export class HyBreadcrumbs {
return <li class={breadcrumbClass}>{label}</li>;
}
- DropdownMenuItem() {
+ DropdownMenuItem(items) {
return (
<li class="breadcrumb-item__more">
<button
@@ -140,15 +143,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 +219,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 +243,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 +273,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 +282,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 +296,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>
);
}
diff --git a/src/components/icon/Home.tsx b/src/components/icon/Home.tsx
index 2473ea70b58f219f66c1a2085fdb9604caf5ba3b..539fbb16782d57bb6903f339e33e2d4ebf13ecaf 100644
--- a/src/components/icon/Home.tsx
+++ b/src/components/icon/Home.tsx
@@ -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>
);
}
diff --git a/src/global/_colors.scss b/src/global/_colors.scss
index e3fd88fe8091d9bc7c36d3bad7150ae176c9fd0c..a62843c026704585089b131f8e2600dbdf3eea84 100644
--- a/src/global/_colors.scss
+++ b/src/global/_colors.scss
@@ -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;