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

Merge branch 'development'

parents 29dc8e5c 53cf5ad1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/heading/heading.scss
+ 20
− 22
View file @ 4a42b93b
......@@ -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 @ 4a42b93b
......@@ -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
+ 36
− 31
View file @ 4a42b93b
......@@ -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>
);
}
......
src/components/icon/Home.tsx
+ 2
− 6
View file @ 4a42b93b
......@@ -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/paragraph-text/paragraph-text.scss
+ 4
− 2
View file @ 4a42b93b
......@@ -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 @ 4a42b93b
......@@ -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