diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index c74122a0fad72df20f250907bcee2eeda40d0fbb..037ca8cc33e6a47994e85af90511af8cd5e327f9 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -3,14 +3,10 @@
}
.hy-accordion__item {
- margin-bottom: 1rem;
+ margin-bottom: 12px;
&__is-open {
- border-bottom: 2px solid var(--grayscale-medium);
- border-left: 1px solid var(--grayscale-medium);
- border-right: 1px solid var(--grayscale-medium);
- border-top: 2px solid var(--grayscale-medium);
- box-shadow: 0 2px 12px 1px rgba(#000000, 10%);
+ border: 1px solid var(--grayscale-dark);
.hy-accordion--heading {
margin: 0 auto;
@@ -71,19 +67,19 @@
}
.hy-accordion__button {
- @include font-size(22px, 28px);
+ @include font-size(18px, 22px);
+ @include font-weight($bold);
align-items: flex-start;
- border: none;
background-color: var(--grayscale-background-box);
+ border: none;
color: var(--brand-main-nearly-black);
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
- font-weight: bold;
height: 100%;
justify-content: flex-start;
- letter-spacing: -0.7px;
- padding: 1.125rem 1rem 1.125rem 1rem;
+ letter-spacing: -0.45px;
+ padding: 13px 20px 13px 16px;
transition: all 0.35s ease-in;
width: 100%;
@@ -92,11 +88,28 @@
}
@include breakpoint($narrow) {
- @include font-size(26px, 32px);
- letter-spacing: -0.8px;
padding: 1rem 2rem 1rem 1.25rem;
}
+ @include breakpoint($xlarge) {
+ @include font-size(20px, 24px);
+ letter-spacing: -0.5px;
+ }
+
+ &--large {
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 24px);
+ letter-spacing: -0.5px;
+ }
+
+ .hy-accordion--heading__icon svg {
+ @include breakpoint($extrawide) {
+ height: 20px;
+ width: 20px;
+ }
+ }
+ }
+
&[aria-expanded='true'] {
background: none;
}
@@ -110,33 +123,35 @@
position: relative;
&:after {
- background: linear-gradient(to right, var(--grayscale-medium), var(--grayscale-white));
+ background-color: var(--grayscale-medium-dark);
bottom: 0;
content: '';
- height: 2px;
- left: 0;
+ height: 1px;
+ left: 16px;
position: absolute;
- width: 100%;
+ right: 20px;
}
}
}
.hy-accordion--heading__icon {
- margin-right: 0.5rem;
- margin-top: 4px;
+ align-items: center;
+ display: inline-flex;
+ height: 22px; // Same as text line-height.
+ margin-right: 8px;
z-index: 0;
- @include breakpoint($narrow) {
- margin-right: 1rem;
- margin-top: 6px;
- }
-
svg {
fill: var(--brand-main);
@include breakpoint($narrow) {
- height: 24px;
- width: 24px;
+ height: 18px;
+ width: 18px;
+ }
+
+ @include breakpoint($xlarge) {
+ height: 20px;
+ width: 20px;
}
}
}
@@ -159,11 +174,12 @@
&[aria-expanded='true'] {
color: var(--grayscale-black);
-
margin-bottom: 20px;
+
@include breakpoint($narrow) {
margin-bottom: 28px;
}
+
@include breakpoint($wide) {
margin-bottom: 32px;
}
@@ -200,22 +216,25 @@
&--inner-wrapper {
display: block;
- padding: 20px 16px 0;
+ padding: 16px 12px;
+
@include breakpoint($narrow) {
- padding: 20px 24px 0;
+ padding: 15px 16px;
+ }
+
+ @include breakpoint($wide) {
+ padding: 16px;
}
+
@include breakpoint($extrawide) {
- // there is a sidebar
- &--common {
- padding: 20px 24px 0;
- }
// without sidebar
&--large {
- padding: 24px 32px 0;
+ padding: 24px 20px;
}
}
+
@include breakpoint($xlarge) {
- padding: 24px 32px 0;
+ padding: 24px 20px;
}
&--mini {
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index 7a68ff6d51d6dc9cc0b0babb7832dbf918a87a16..e8ccf5c0d3f0c8154466bec6b4665a919635a916 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -156,6 +156,9 @@ export class AccordionItem {
target.setAttribute('aria-expanded', 'true');
targetParent.classList.add('hy-accordion__item__is-open');
+ const targetElementRect = target.getBoundingClientRect();
+ window.scrollTo({top: window.scrollY + targetElementRect.top - 200, behavior: 'smooth'});
+
const containerId = targetParent.parentElement.parentElement.id;
if (containerId.length > 0) {
let accordion = document.querySelectorAll(`#${containerId}`)[0];
@@ -222,11 +225,11 @@ export class AccordionItem {
<button
aria-expanded="false"
aria-controls={`${titleAsId}--content`}
- class="hy-accordion__button"
+ class={`hy-accordion__button hy-accordion__button--${this.headerstyle}`}
id={`${titleAsId}--title`}
>
<span class="hy-accordion--heading__icon">
- <hy-icon icon={'hy-icon-caret-down'} size={20} />
+ <hy-icon icon={'hy-icon-caret-down'} size={16} />
</span>
<span>{this.accordiontitle}</span>
</button>
diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
index b0753195e0bdfbbecab87ad5aa7d5b9021e26492..c5f957b40c1a083c86f8d2c762509bbba75c0add 100644
--- a/src/components/hy-tabs/hy-tabs.scss
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -9,10 +9,10 @@
}
.hy-tab-scroll {
- background-color: var(--brand-main-light);
- border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.8);
border: 0;
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+ height: 100%;
+ margin: 0;
padding: 0;
position: absolute;
top: 50%;
@@ -23,6 +23,7 @@
display: none;
visibility: hidden;
}
+
&.is-disabled {
background-color: var(--grayscale-medium);
@@ -37,39 +38,37 @@
cursor: pointer;
}
- svg {
- fill: var(--grayscale-white);
- height: 16px;
- margin: 8px;
- position: relative;
- width: 16px;
+ span {
+ align-items: center;
+ background-color: var(--grayscale-black);
+ border-radius: 100%;
+ display: inline-flex;
+ height: 32px;
+ justify-content: center;
+ width: 32px;
- @include breakpoint($narrow) {
- height: 18px;
- margin: 9px; //36x36
- width: 18px;
- }
-
- @include breakpoint($wide) {
- height: 24px;
- margin: 10px; //44x44
- width: 24px;
+ svg {
+ fill: var(--grayscale-white);
+ height: 16px;
+ width: 16px;
}
}
&__left {
- left: 2px;
+ left: 0;
+ padding-right: 8px;
svg {
- left: -1.5px;
+ transform: translateX(-1px);
}
}
&__right {
- right: 2px;
+ padding-left: 8px;
+ right: 0;
svg {
- left: 1.5px;
+ transform: translateX(1px);
}
}
}
@@ -80,6 +79,7 @@
margin: 0 0 -0.1em;
overflow: scroll;
position: relative;
+ scrollbar-width: none;
white-space: nowrap;
&::-webkit-scrollbar {
@@ -87,63 +87,79 @@
}
}
- [role='tab'] {
- @include font-size(14px, 16px);
-
- align-items: center;
- background-color: var(--grayscale-background-box);
- border: 0;
- color: var(--grayscale-black);
+ [role='tablist'] a {
display: flex;
- flex-direction: row;
+ max-width: 47.56%;
+ text-decoration: none;
flex-shrink: 0;
- font-family: var(--main-font-family);
- font-weight: 600;
- hyphens: auto;
- justify-content: center;
- letter-spacing: -0.44px;
- margin: 0 4px 0 0;
- max-width: calc(100% / 12 * 3);
- min-height: 44px;
- min-width: 100px;
- padding: 8px;
- position: relative;
- white-space: normal;
- word-break: break-word;
- @supports (overflow-wrap: anywhere) {
- overflow-wrap: anywhere;
+ &:not(:first-of-type) {
+ margin-left: 6px;
}
- overflow-wrap: break-word;
-
- @supports (overflow-wrap: anywhere) {
- overflow-wrap: anywhere;
+ @include breakpoint($narrow) {
+ max-width: 35.37%;
}
- overflow-wrap: break-word;
+ @include breakpoint($wide) {
+ max-width: 23.13%;
+ }
- span.tab-title {
- padding: 8px;
+ @include breakpoint($extrawide) {
+ max-width: 23.03%;
}
+ }
- @include breakpoint($narrow) {
- @include font-size(18px, 24px);
- letter-spacing: -0.56px;
- margin: 0 8px 0 0;
- padding: 8px 12px;
+ [role='tab'] {
+ align-items: stretch;
+ background-color: transparent;
+ border: 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ margin-bottom: 6px;
+ padding: 0;
+
+ > span {
+ @include font-size(14px, 14px);
+ @include font-weight($bold);
+ align-items: center;
+ background-color: var(--grayscale-background-box);
+ border: 0;
+ color: var(--link-blue);
+ display: flex;
+ font-family: var(--main-font-family);
+ hyphens: auto;
+ letter-spacing: -0.5px;
+ padding: 8px 8px 7px;
+ pointer-events: none;
+ position: relative;
+ text-align: left;
+ white-space: normal;
+ word-break: break-word;
- span.tab-title {
- padding: 8px 12px;
+ @include breakpoint($narrow) {
+ @include font-size(16px, 18px);
+ padding: 16px 12px 10px;
}
- }
- @include breakpoint($wide) {
- padding: 8px 16px;
+ @include breakpoint($extrawide) {
+ @include font-size(18px, 20px);
+ letter-spacing: -0.6px;
+ padding: 16px 16px 14px;
+ }
+
+ @supports (overflow-wrap: anywhere) {
+ overflow-wrap: anywhere;
+ }
+
+ overflow-wrap: break-word;
- span.tab-title {
- padding: 8px 16px;
+ @supports (overflow-wrap: anywhere) {
+ overflow-wrap: anywhere;
}
+
+ overflow-wrap: break-word;
}
}
@@ -155,35 +171,72 @@
}
[role='tab'][aria-selected='true'] {
- background: var(--grayscale-white);
- border: 1px solid var(--grayscale-tabs-border);
border-bottom-width: 0;
- box-shadow: inset 0 1px 0 0 #d2d2d2, inset -1px 1px 0 0 #d2d2d2, inset 1px 1px 0 0 #d2d2d2,
- 0 -4px 8px -4px rgba(0, 0, 0, 0.1);
- font-weight: bold;
- margin-bottom: -1px;
- padding-bottom: 9px;
+ border: 1px solid var(--grayscale-dark);
+ margin-bottom: 0;
z-index: 3;
+
+ > span {
+ background-color: var(--grayscale-white);
+ color: var(--grayscale-black);
+ padding-bottom: 13px;
+
+ @include breakpoint($narrow) {
+ padding-bottom: 16px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-bottom: 20px;
+ }
+
+ &:before {
+ background-color: var(--grayscale-white);
+ bottom: 0;
+ content: '';
+ height: 4px;
+ left: 0;
+ position: absolute;
+ right: 0;
+ transform: translateY(50%);
+ }
+
+ &:after {
+ background-color: var(--grayscale-black);
+ bottom: 0;
+ content: '';
+ height: 4px;
+ left: 8px;
+ position: absolute;
+ right: 8px;
+ }
+ }
}
- [role='tab']:hover,
- [role='tab']:focus,
- [role='tab']:active {
+ [role='tab']:hover {
border-radius: 0;
color: inherit;
cursor: pointer;
text-decoration: none;
- }
- [role='tab']:hover::before,
- [role='tab']:focus::before {
+ span {
+ background-color: var(--hover-gray);
+ color: var(--brand-main-active);
+ }
}
[role='tabpanel'] {
- border-top: 1px solid var(--grayscale-medium);
- padding: 1.5em 0.5em 0.7em;
+ border: 1px solid var(--grayscale-dark);
+ padding: 28px 12px;
position: relative;
z-index: 2;
+
+ @include breakpoint($narrow) {
+ padding: 38px 15px;
+ }
+
+ @include breakpoint($wide) {
+ padding: 40px 20px;
+ }
}
[role='tabpanel']:focus {
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
index b20f472854137a610d5d168422f5dde437067405..67bcb36486ed084673086b03d54e4ac619305663 100644
--- a/src/components/hy-tabs/hy-tabs.tsx
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -316,32 +316,58 @@ export class HyTabs implements ComponentInterface {
const classComponentAttributes = ['hy-tabs__container', `hy-tabs__container__${this.headerstyle}`].join(' ');
const id = this.tabId.toLowerCase().replace(/\W/g, '-');
+ if (window.location.hash) {
+ const tabHash = window.location.hash.substring(1);
+ const isUrlHashed = this.tabButtonTitles.some((tab) => tab['id'] === tabHash);
+
+ if (isUrlHashed) {
+ const hashElement = document.getElementById(tabHash);
+
+ if (hashElement) {
+ this.activateTab(hashElement, true);
+ const hashElementRect = hashElement.getBoundingClientRect();
+ window.scrollTo({top: window.scrollY + hashElementRect.top - 200, behavior: 'smooth'});
+ }
+ }
+ }
+
return [
<hy-box pt="1.25, 1.25, 1.5, 2.5" />,
<div id={id} class={classComponentAttributes}>
<div class="hy-tablist-container">
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
- <hy-icon icon={'hy-icon-caret-left'} size={16} />
+ <span>
+ <hy-icon icon={'hy-icon-caret-left'} size={16} />
+ </span>
</button>
<div role="tablist" aria-label={this.tabListLabel}>
{this.tabButtonTitles &&
this.tabButtonTitles.map((item) => {
const title = Object.values(item)[0];
const id = title.toLowerCase().replace(/\W/g, '-');
+
+ const titleAsId = title.toLowerCase().replace(/\W/g, '-');
+ const tabItemHref = '#' + titleAsId;
+
return (
- <button
- aria-selected="false"
- aria-controls={`${id}-tab`}
- class={this.headerstyle}
- role="tab"
- id={id}
- innerHTML={title}
- ></button>
+ <a href={tabItemHref} tabindex="-1">
+ <button
+ aria-selected="false"
+ aria-controls={`${id}-tab`}
+ class={this.headerstyle}
+ role="tab"
+ id={id}
+ >
+ <span>{title}</span>
+ </button>
+ </a>
);
})}
</div>
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true">
- <hy-icon icon={'hy-icon-caret-right'} size={16} />
+ <span>
+ <hy-icon icon={'hy-icon-caret-right'} size={16} />
+ </span>
</button>
</div>
<slot></slot>