Skip to content
Snippets Groups Projects
Commit 53cf5ad1 authored by Tuukka Turu's avatar Tuukka Turu
Browse files

Merge branch 'NXSTAGE-939-breadcrumbs' into 'development' 

NXSTAGE-939: Breadcrumbs improvements

See merge request julkiset-sivut/design-system-lib!155
parents 70265859 77c29541
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+ 126
− 102
View file @ 53cf5ad1
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
// Default variant // Default variant
.hy-breadcrumbs { .hy-breadcrumbs {
display: inline-block; display: inline-block;
position: relative;
width: auto; width: auto;
&.is-condensed { &.is-condensed {
...@@ -23,18 +24,14 @@ ...@@ -23,18 +24,14 @@
font-family: var(--main-font-family); font-family: var(--main-font-family);
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
min-height: 72px; padding: 20px 0 16px;
overflow: hidden;
padding: 0;
@include breakpoint($narrow) { @include breakpoint($narrow) {
min-height: 76px; padding: 24px 0 20px;
}
@include breakpoint($wide) {
min-height: 86px;
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
min-height: 94px; padding: 32px 0 24px;
} }
} }
...@@ -45,47 +42,24 @@ ...@@ -45,47 +42,24 @@
flex: 0 0 auto; flex: 0 0 auto;
a { a {
color: var(--brand-main-light); align-items: center;
color: var(--link-blue);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; height: 44px;
margin-right: 20px; padding-left: 6px;
padding-right: 6px;
position: relative; position: relative;
text-decoration: none; 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 { a.default {
@include font-size(14px, 20px); @include font-size(14px, 18px);
@include font-weight($semibold);
letter-spacing: -0.5px;
@include breakpoint($narrow) { @include breakpoint($extrawide) {
@include font-size(16px, 24px); @include font-size(16px, 20px);
} }
} }
...@@ -107,6 +81,8 @@ ...@@ -107,6 +81,8 @@
.breadcrumb-item.home { .breadcrumb-item.home {
hy-icon.default { hy-icon.default {
margin-bottom: 4px;
svg { svg {
fill: var(--brand-main-light); fill: var(--brand-main-light);
stroke: var(--brand-main-light); stroke: var(--brand-main-light);
...@@ -123,47 +99,25 @@ ...@@ -123,47 +99,25 @@
.breadcrumb-item.main { .breadcrumb-item.main {
min-width: 0; min-width: 0;
a {
display: flex;
}
} }
.breadcrumb-item__more { .breadcrumb-item__more {
display: none; display: none;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
position: relative;
margin-right: 20px;
@include breakpoint($narrow) {
margin-right: 25px;
}
@include breakpoint($wide) {
margin-right: 30px;
}
&.visible { &.visible {
display: flex; display: flex;
} }
.breadcrumb-item-caret { .breadcrumb-item-caret {
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
@include breakpoint($narrow) {
right: -18px;
}
&:hover { &:hover {
cursor: default; cursor: default;
} }
&__drop {
position: absolute;
right: 5.5px;
top: 50%;
transform: translateY(-50%);
}
} }
} }
...@@ -174,60 +128,110 @@ ...@@ -174,60 +128,110 @@
} }
.breadcrumb-item-dropdown-button { .breadcrumb-item-dropdown-button {
align-items: center;
background-color: transparent;
border: 0;
display: flex; display: flex;
flex-direction: row; height: 44px;
color: var(--brand-main-light); margin: 0;
padding-left: 6px;
padding-right: 6px;
cursor: pointer; cursor: pointer;
border: 1.5px solid var(--brand-main-light);
font-size: 1.5rem; .breadcrumb-item-dropdown-button__content {
line-height: 10px; align-items: center;
border-radius: 3px; background-color: var(--grayscale-white);
background-color: var(--grayscale-white); border-radius: 3px;
box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.3); border: 2px solid var(--brand-main-light);
padding: 0 25px 9px 10px; color: var(--brand-main-light);
position: relative; display: flex;
height: 20px;
hy-icon { padding: 0 6px;
svg { pointer-events: none;
fill: var(--brand-main-light);
margin: 0 0 -3px 10px; > span {
transform: rotate(90deg); 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 { &.is-open {
background-color: var(--brand-main-light); .breadcrumb-item-dropdown-button__content {
color: var(--grayscale-white); 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 { hy-icon svg {
fill: var(--grayscale-white); fill: var(--grayscale-white);
margin: 0 0 -3px 10px; transform: rotate(270deg);
transform: rotate(270deg); }
} }
} }
.breadcrumb-hidden-items { .breadcrumb-hidden-items {
display: none; display: none;
list-style: none;
visibility: hidden; visibility: hidden;
&__is-open { &__is-open {
background: var(--grayscale-white); background: var(--grayscale-white);
box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.2); box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.2);
display: block; display: block;
margin-top: -9px; left: 0;
padding: 32px 16px 6px 16px; padding: 16px 0 20px;
position: absolute; position: absolute;
right: 0;
top: calc(100% - 11px);
visibility: visible; visibility: visible;
z-index: 5; z-index: 5;
@include breakpoint($narrow) { @include breakpoint($narrow) {
padding: 32px 64px 6px 32px; left: 12px;
right: auto;
} }
a { a.default {
display: flex;
height: 44px;
margin: 0; margin: 0;
padding-bottom: 26px; width: 100%;
padding: 0 16px;
@include breakpoint($narrow) {
padding: 0 64px 0 32px;
}
} }
} }
} }
...@@ -250,15 +254,12 @@ ...@@ -250,15 +254,12 @@
font-family: var(--main-font-family); font-family: var(--main-font-family);
text-decoration: none; text-decoration: none;
display: block; display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
min-height: auto; min-height: auto;
} }
.intermediate { .intermediate {
display: flex; display: flex;
text-overflow: initial;
} }
.intermediate.hidden { .intermediate.hidden {
...@@ -270,7 +271,7 @@ ...@@ -270,7 +271,7 @@
.breadcrumb-item.intermediate, .breadcrumb-item.intermediate,
.breadcrumb-item.home { .breadcrumb-item.home {
a { a {
min-height: 44px; // min-height: 44px;
} }
} }
.breadcrumb-item.breadcrumb-item__current { .breadcrumb-item.breadcrumb-item__current {
...@@ -297,9 +298,24 @@ ...@@ -297,9 +298,24 @@
visibility: visible; visibility: visible;
a.large { a.large {
@include font-size(26px, 26px); @include font-size(20px, 26px);
color: var(--grayscale-black); color: var(--grayscale-black);
font-weight: 700; 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 { .breadcrumb-item-caret {
...@@ -326,8 +342,16 @@ ...@@ -326,8 +342,16 @@
.breadcrumb-item.home { .breadcrumb-item.home {
svg { svg {
fill: var(--grayscale-black); fill: var(--grayscale-black);
height: 18px;
margin-bottom: 4px;
stroke: var(--grayscale-black); 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
+ 36
− 31
View file @ 53cf5ad1
...@@ -42,7 +42,11 @@ export class HyBreadcrumbs { ...@@ -42,7 +42,11 @@ export class HyBreadcrumbs {
// Set breadcumbs width + paddings. // Set breadcumbs width + paddings.
breadcrumbsWidth = this.el.offsetWidth + 64; 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(); this.adjustBreadcrumbsMenuVisibility();
} }
} }
...@@ -85,24 +89,23 @@ export class HyBreadcrumbs { ...@@ -85,24 +89,23 @@ export class HyBreadcrumbs {
return ( return (
<li class="breadcrumb-item home"> <li class="breadcrumb-item home">
<a href={url} class={homeItemClass}> <a href={url} class={homeItemClass}>
<hy-icon icon={'hy-icon-home'} class={`${this.variant}`} size={20} /> <hy-icon icon={'hy-icon-home'} class={`${this.variant}`} size={16} />
<hy-icon icon={'hy-icon-caret-right'} class={'breadcrumb-item-caret'} size={10} />
</a> </a>
<span class="breadcrumb-item__divider">/</span>
</li> </li>
); );
} }
BreadcrumbItem(label, url, className = '', withCaret = true) { BreadcrumbItem(label, url, className = '', withCaret = true) {
const breadcrumbClass = ['breadcrumb-item', className].join(' '); const breadcrumbClass = ['breadcrumb-item', className].join(' ');
const caretClass = ['breadcrumb-item-caret', this.variant].join(' ');
if (url) { if (url) {
if (withCaret) { if (withCaret) {
return ( return (
<li class={breadcrumbClass}> <li class={breadcrumbClass}>
<a href={url} class={`${this.variant}`}> <a href={url} class={`${this.variant}`}>
{label} {label}
<hy-icon icon={'hy-icon-caret-right'} class={caretClass} size={10} />
</a> </a>
<span class="breadcrumb-item__divider">/</span>
</li> </li>
); );
} else { } else {
...@@ -118,7 +121,7 @@ export class HyBreadcrumbs { ...@@ -118,7 +121,7 @@ export class HyBreadcrumbs {
return ( return (
<li class={`${breadcrumbClass} breadcrumb-item__current`}> <li class={`${breadcrumbClass} breadcrumb-item__current`}>
<a aria-current="page" href={url} class={`${this.variant}`}> <a aria-current="page" href={url} class={`${this.variant}`}>
{label} {label.length > 20 ? `${label.substring(0, 19)}...` : label}
</a> </a>
</li> </li>
); );
...@@ -130,7 +133,7 @@ export class HyBreadcrumbs { ...@@ -130,7 +133,7 @@ export class HyBreadcrumbs {
return <li class={breadcrumbClass}>{label}</li>; return <li class={breadcrumbClass}>{label}</li>;
} }
DropdownMenuItem() { DropdownMenuItem(items) {
return ( return (
<li class="breadcrumb-item__more"> <li class="breadcrumb-item__more">
<button <button
...@@ -140,15 +143,22 @@ export class HyBreadcrumbs { ...@@ -140,15 +143,22 @@ export class HyBreadcrumbs {
id="more" id="more"
key="more" key="more"
class="breadcrumb-item-dropdown-button" class="breadcrumb-item-dropdown-button"
aria-label="Open breadcrumb navigation"
> >
... <span class="breadcrumb-item-dropdown-button__content">
<hy-icon {/* Span is for ... */}
icon={'hy-icon-caret-right'} <span></span>
class={'breadcrumb-item-caret__drop breadcrumb-item__more__icon'} <hy-icon
size={10} icon={'hy-icon-caret-right'}
/> class={'breadcrumb-item-caret__drop breadcrumb-item__more__icon'}
size={10}
/>
</span>
</button> </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> </li>
); );
} }
...@@ -209,20 +219,14 @@ export class HyBreadcrumbs { ...@@ -209,20 +219,14 @@ export class HyBreadcrumbs {
if (moreMenu) { if (moreMenu) {
if (this.menuOpen) { if (this.menuOpen) {
moreMenu.classList.remove('breadcrumb-hidden-items__is-open'); moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
moreMenu.setAttribute('aria-hidden', 'true');
moreButton.classList.remove('is-open'); moreButton.classList.remove('is-open');
moreButton.setAttribute('aria-expanded', 'false'); moreButton.setAttribute('aria-expanded', 'false');
} else { } else {
moreMenu.classList.add('breadcrumb-hidden-items__is-open'); moreMenu.classList.add('breadcrumb-hidden-items__is-open');
moreButton.classList.add('is-open'); moreButton.classList.add('is-open');
moreMenu.setAttribute('aria-hidden', 'false');
moreButton.setAttribute('aria-expanded', 'true'); 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; this.menuOpen = !this.menuOpen;
} }
...@@ -239,10 +243,14 @@ export class HyBreadcrumbs { ...@@ -239,10 +243,14 @@ export class HyBreadcrumbs {
if (!event) return; if (!event) return;
const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0]; const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
if (breadcrumbsElement) { if (breadcrumbsElement) {
if (breadcrumbsWidth + 64 >= document.body.scrollWidth) { if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
this.adjustBreadcrumbsMenuVisibility(true); moreButton.setAttribute('aria-hidden', 'false');
this.adjustBreadcrumbsMenuVisibility();
} else { } else {
moreButton.setAttribute('aria-hidden', 'true');
this.adjustBreadcrumbsMenuVisibility(false); this.adjustBreadcrumbsMenuVisibility(false);
} }
} }
...@@ -265,7 +273,6 @@ export class HyBreadcrumbs { ...@@ -265,7 +273,6 @@ export class HyBreadcrumbs {
if (index == 0) { if (index == 0) {
itemsBreadcrumbs.push(this.HomeItem(x.url)); itemsBreadcrumbs.push(this.HomeItem(x.url));
} else { } else {
//itemsBreadcrumbs.push(this.BreadcrumbTextItem(x.text, 'main'));
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, '', 'main')); itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, '', 'main'));
} }
} }
...@@ -275,12 +282,8 @@ export class HyBreadcrumbs { ...@@ -275,12 +282,8 @@ export class HyBreadcrumbs {
this._dataItems.map((x, index) => { this._dataItems.map((x, index) => {
let breadcrumbEl = this.BreadcrumbItem(x.text, x.url, '', false); let breadcrumbEl = this.BreadcrumbItem(x.text, x.url, '', false);
if (isMenuNeeded && index > 1 && index < TOTAL_ITEMS - 1) { if (isMenuNeeded && index > 0 && index < TOTAL_ITEMS - 1) {
itemsToShowInMenu.push(<div>{breadcrumbEl}</div>); itemsToShowInMenu.push(<li>{breadcrumbEl}</li>);
if (index === 2) {
itemsBreadcrumbs.push(this.DropdownMenuItem());
}
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'intermediate')); itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'intermediate'));
return; return;
} else { } else {
...@@ -293,12 +296,14 @@ export class HyBreadcrumbs { ...@@ -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(' '); const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
return ( return (
<nav aria-label="Breadcrumb" role="navigation" aria-labelledby="system-breadcrumb" class={breadcrumbsClass}> <nav aria-label="Breadcrumb" role="navigation" aria-labelledby="system-breadcrumb" class={breadcrumbsClass}>
<ol class="breadcrumb-container">{itemsBreadcrumbs}</ol> <ol class="breadcrumb-container">{itemsBreadcrumbs}</ol>
{itemsToShowInMenu && <ol class="breadcrumb-hidden-items">{itemsToShowInMenu}</ol>}
</nav> </nav>
); );
} }
......
src/components/icon/Home.tsx
+ 2
− 6
View file @ 53cf5ad1
...@@ -2,12 +2,8 @@ import {h} from '@stencil/core'; ...@@ -2,12 +2,8 @@ import {h} from '@stencil/core';
function SvgHome(props) { function SvgHome(props) {
return ( return (
<svg viewBox="0 0 1000 1000" {...props} stroke="black" stroke-width="1"> <svg viewBox="0 0 56 65" {...props} stroke="black" stroke-width="1">
<path <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>
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> </svg>
); );
} }
......
src/global/_colors.scss
+ 1
− 1
View file @ 53cf5ad1
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
--brand-main-active: #005379; --brand-main-active: #005379;
--brand-main-dark: #003146; --brand-main-dark: #003146;
--brand-main-nearly-black: #000222; --brand-main-nearly-black: #000222;
--link-blue: #0479a5; --link-blue: #0479a4;
--link-disabled: #767676; --link-disabled: #767676;
--grayscale-white: #fff; --grayscale-white: #fff;
--grayscale-slightly-gray: #fefefe; --grayscale-slightly-gray: #fefefe;
......
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