diff --git a/src/components.d.ts b/src/components.d.ts
index 1c10f0ae491a3333106db5ecc872709ff0856c49..8fc0c614712ce6ad824e996948622bc6a8f52b26 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -67,6 +67,7 @@ export namespace Components {
variant: 'primary' | 'warn' | 'success' | 'disabled';
}
interface HyBanner {
+ headerstyle: string;
scLabel?: string;
textDescription: string;
textTitle?: string;
@@ -183,6 +184,7 @@ export namespace Components {
variant: ButtonVariants;
}
interface HyCtaButton {
+ headerstyle: string;
isExternal: boolean;
linkContent: string;
scLabel?: string;
@@ -355,6 +357,7 @@ export namespace Components {
variant: LinkVariants;
}
interface HyLinkBox {
+ headerstyle: string;
imageAlt: string;
imageUrl: string;
isExternal: boolean;
@@ -438,6 +441,7 @@ export namespace Components {
}
interface HyParagraphText {
headerstyle: string;
+ placement: string;
variant: string;
}
interface HyProcess {
@@ -454,6 +458,7 @@ export namespace Components {
variant: ProcessFlowBoxVariants;
}
interface HyProminentImage {
+ headerstyle: string;
imageUrl?: string;
textTitle?: string;
}
@@ -503,6 +508,7 @@ export namespace Components {
size: number;
}
interface HyTabs {
+ headerstyle: string;
tabId?: string;
tabListLabel: string;
}
@@ -989,6 +995,7 @@ declare namespace LocalJSX {
variant?: 'primary' | 'warn' | 'success' | 'disabled';
}
interface HyBanner {
+ headerstyle?: string;
scLabel?: string;
textDescription?: string;
textTitle?: string;
@@ -1105,6 +1112,7 @@ declare namespace LocalJSX {
variant?: ButtonVariants;
}
interface HyCtaButton {
+ headerstyle?: string;
isExternal?: boolean;
linkContent?: string;
scLabel?: string;
@@ -1277,6 +1285,7 @@ declare namespace LocalJSX {
variant?: LinkVariants;
}
interface HyLinkBox {
+ headerstyle?: string;
imageAlt?: string;
imageUrl?: string;
isExternal?: boolean;
@@ -1366,6 +1375,7 @@ declare namespace LocalJSX {
}
interface HyParagraphText {
headerstyle?: string;
+ placement?: string;
variant?: string;
}
interface HyProcess {
@@ -1382,6 +1392,7 @@ declare namespace LocalJSX {
variant?: ProcessFlowBoxVariants;
}
interface HyProminentImage {
+ headerstyle?: string;
imageUrl?: string;
textTitle?: string;
}
@@ -1431,6 +1442,7 @@ declare namespace LocalJSX {
size?: number;
}
interface HyTabs {
+ headerstyle?: string;
tabId?: string;
tabListLabel?: string;
}
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index 615791f387b987fb4ecf05b4a104fb71fcf9905d..3ad458625556370f64208122a4cc0bb6ce2a619f 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -37,6 +37,7 @@
}
}
.hy-accordion__button {
+ @include font-size(22px, 28px);
align-items: center;
border: none;
background-color: var(--grayscale-background-box);
@@ -44,13 +45,11 @@
display: flex;
flex-direction: row;
font-family: var(--main-font-family);
- font-size: 26px;
- line-height: 32px;
- letter-spacing: -0.82px;
- font-weight: 600;
+ font-weight: bold;
height: 100%;
justify-content: flex-start;
- padding: 0.75rem 1.75rem 0.75rem 1.25rem;
+ letter-spacing: -0.7px;
+ padding: 1.125rem 1rem 1.125rem 1rem;
transition: all 0.35s ease-in;
width: 100%;
@@ -58,10 +57,10 @@
cursor: pointer;
}
- @include breakpoint($medium) {
- font-size: 26px;
- letter-spacing: -0.82px;
- line-height: 32px;
+ @include breakpoint($narrow) {
+ @include font-size(26px, 32px);
+ letter-spacing: -0.8px;
+ padding: 1rem 2rem 1rem 1.25rem;
}
&[aria-expanded='true'] {
@@ -70,11 +69,20 @@
}
.hy-accordion--heading__icon {
- margin-right: 0.95rem;
+ margin-right: 0.5rem;
z-index: 0;
+ @include breakpoint($narrow) {
+ margin-right: 1rem;
+ }
+
svg {
fill: var(--brand-main);
+
+ @include breakpoint($narrow) {
+ height: 24px;
+ width: 24px;
+ }
}
}
}
@@ -89,4 +97,10 @@
&--inner-wrapper {
display: block;
}
+
+ hy-box {
+ @include breakpoint($narrow) {
+ padding: 0 2rem;
+ }
+ }
}
diff --git a/src/components/accordion-item/accordion-item.tsx b/src/components/accordion-item/accordion-item.tsx
index a2491da369bfcca1b7a7af5484805a516a710d9d..fada4423e84338eef399d0263bab2fa2630478ab 100644
--- a/src/components/accordion-item/accordion-item.tsx
+++ b/src/components/accordion-item/accordion-item.tsx
@@ -3,7 +3,7 @@ import {Component, Listen, Prop, State, Element, h} from '@stencil/core';
@Component({
tag: 'hy-accordion-item',
styleUrl: 'accordion-item.scss',
- shadow: false
+ shadow: false,
})
export class AccordionItem {
@Element() el: HTMLElement;
@@ -208,7 +208,7 @@ export class AccordionItem {
aria-hidden="true"
style={{display: 'none'}}
>
- <hy-box pt="1.5" pb="3" pl="2" pr="2">
+ <hy-box pt="0" pb="0" pl="0.75" pr="0.75">
<div class="hy-accordion__content--inner-wrapper">
<slot></slot>
</div>
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 317e7c29a9e1941b28eb268acee0c8ed25077b37..8e12b0b104c9982e1d910c6a17115122a0eaf6c0 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -24,31 +24,115 @@
justify-content: center;
height: 100%;
max-width: 278px;
- width: 278px;
+
+ padding: 14px 12px;
+ @include breakpoint($narrow) {
+ padding: 15px 16px;
+ }
+ @include breakpoint($extrawide) {
+ // with sidebar on page
+ padding: 15px 16px;
+ }
+ @include breakpoint($overwide) {
+ // with sidebar on page
+ padding: 17px 16px;
+ }
.text {
+ @include font-size(16px, 16px); //button small
color: var(--grayscale-white);
- font-size: 18px;
- letter-spacing: -0.6px;
- line-height: 20px;
- margin: 18px 0 18px 14px;
+
+ @include breakpoint($narrow) {
+ @include font-size(18px, 18px); //button medium
+ }
+ @include breakpoint($extrawide) {
+ // with sidebar on page
+ @include font-size(18px, 18px); //button medium
+ }
+ @include breakpoint($overwide) {
+ // with sidebar on page
+ @include font-size(20px, 20px); //button large
+ }
}
+
.link-icon {
- margin-left: 12px;
+ margin-left: 8px; //button small
+
+ @include breakpoint($narrow) {
+ margin-left: 10px; //button medium
+ }
+ @include breakpoint($extrawide) {
+ margin-left: 10px; //button medium
+ }
+ @include breakpoint($overwide) {
+ margin-left: 12px; //button large
+ }
svg {
background-color: var(--brand-main-light);
fill: var(--grayscale-white);
- padding: 15.91px 16px 16.09px 0;
+ height: 16px;
+ width: 16px;
+
+ @include breakpoint($narrow) {
+ //button medium
+ height: 18px;
+ width: 18px;
+ }
+ @include breakpoint($extrawide) {
+ //button medium
+ height: 18px;
+ width: 18px;
+ }
+ @include breakpoint($overwide) {
+ //button large
+ height: 22px;
+ width: 22px;
+ }
}
}
}
&.blue-background {
- border: 4px solid var(--grayscale-white);
+ border: 3px solid var(--grayscale-white);
+ @include breakpoint($overwide) {
+ border: 4px solid var(--grayscale-white);
+ }
}
&.white-background {
border: none;
}
}
+
+.hy-cta-button.large {
+ @include breakpoint($extrawide) {
+ padding: 17px 16px;
+ }
+
+ .text {
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 20px); //button large
+ }
+ }
+
+ .link-icon {
+ @include breakpoint($extrawide) {
+ margin-left: 12px; //button large
+ }
+
+ svg {
+ @include breakpoint($extrawide) {
+ //button large
+ height: 22px;
+ width: 22px;
+ }
+ }
+ }
+
+ &.blue-background {
+ @include breakpoint($extrawide) {
+ border: 4px solid var(--grayscale-white);
+ }
+ }
+}
diff --git a/src/components/cta-button/cta-button.tsx b/src/components/cta-button/cta-button.tsx
index e73564a76bade2de9c42f8db3c5bf4faf49388be..89a6eed38ec0066796ef33b6a599e78ae1755bc8 100644
--- a/src/components/cta-button/cta-button.tsx
+++ b/src/components/cta-button/cta-button.tsx
@@ -1,10 +1,10 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Element, Prop, h} from '@stencil/core';
import {CtaLinkButtonVariants} from '../../utils/utils';
@Component({
tag: 'hy-cta-button',
styleUrl: 'cta-button.scss',
- shadow: true
+ shadow: true,
})
export class CtaButton implements ComponentInterface {
@Prop() variant: CtaLinkButtonVariants = CtaLinkButtonVariants.onBlueBkgd;
@@ -12,9 +12,20 @@ export class CtaButton implements ComponentInterface {
@Prop() url?: string;
@Prop() scLabel?: string;
@Prop() isExternal: boolean = false;
+ @Prop() headerstyle: string = 'common';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
render() {
- const classAttributes = ['hy-cta-button', this.variant].join(' ');
+ const classAttributes = ['hy-cta-button', this.variant, this.headerstyle].join(' ');
const containerClassAttributes = ['hy-cta-button-container'].join(' ');
diff --git a/src/components/cta-button/readme.md b/src/components/cta-button/readme.md
index 906059b95632927aaa237a2020e1e31847d3cb30..fcf2aa95391fc52c9a31d9eb2da0165986cc0ea9 100644
--- a/src/components/cta-button/readme.md
+++ b/src/components/cta-button/readme.md
@@ -6,6 +6,7 @@
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `isExternal` | `is-external` | | `boolean` | `false` |
| `linkContent` | `link-content` | | `string` | `''` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
diff --git a/src/components/hy-banner/hy-banner.scss b/src/components/hy-banner/hy-banner.scss
index 2b74bef4ad0e84f6725bfd8e0b53dc6bbc17b402..d6571f8be39c039e69f20d50d175d0404506ac0e 100644
--- a/src/components/hy-banner/hy-banner.scss
+++ b/src/components/hy-banner/hy-banner.scss
@@ -6,50 +6,48 @@
background-color: var(--brand-main-light);
padding: 28px 0 24px 0;
- // >480px
@include breakpoint($narrow) {
padding: 40px 0 32px 0;
}
-
- // >960px
@include breakpoint($wide) {
padding: 48px 0 40px 0;
}
-
- // >1200px
@include breakpoint($extrawide) {
- padding: 64px 0 48px 0;
+ padding: 48px 0 40px 0;
+ }
+ @include breakpoint($overwide) {
+ //padding: 64px 0 48px 0;
+ padding: 64px 32px 48px 32px;
}
&__info-container {
&__title {
+ @include font-size(24px, 24px);
color: var(--grayscale-white);
font-family: var(--main-font-family);
- font-size: 24px;
font-weight: 600;
letter-spacing: -0.8px;
- line-height: 24px;
margin-bottom: 16px;
text-transform: uppercase;
@include breakpoint($narrow) {
- font-size: 32px;
+ @include font-size(32px, 32px);
letter-spacing: -1.07px;
- line-height: 32px;
margin-bottom: 24px;
+ max-width: 92%;
}
@include breakpoint($extrawide) {
- font-size: 36px;
- letter-spacing: -1.2px;
- line-height: 36px;
+ @include font-size(32px, 32px);
+ letter-spacing: -1.07px;
+ margin-bottom: 24px;
+ max-width: 92%;
}
@include breakpoint($overwide) {
- font-size: 40px;
- letter-spacing: -1.33px;
- line-height: 40px;
- margin-bottom: 32px;
+ @include font-size(36px, 36px);
+ letter-spacing: -1.2px;
+ max-width: 83%;
}
}
@@ -63,23 +61,52 @@
margin-bottom: 24px;
@include breakpoint($narrow) {
- font-size: 16px;
+ @include font-size(16px, 24px);
letter-spacing: -0.08px;
- line-height: 24px;
margin-bottom: 28px;
+ max-width: 92%;
}
@include breakpoint($wide) {
margin-bottom: 32px;
}
- @include breakpoint($extrawide) {
- font-size: 18px;
+ @include breakpoint($overwide) {
+ @include font-size(18px, 24px);
letter-spacing: -0.09px;
- line-height: 24px;
margin-bottom: 36px;
+ max-width: 83%;
}
+ }
+ }
+}
+
+// Big screen, no sidebar
+.hy-banner.large {
+ @include breakpoint($extrawide) {
+ padding: 64px 0 48px 0;
+ }
+ .hy-banner__info-container {
+ &__title {
+ @include breakpoint($extrawide) {
+ @include font-size(36px, 36px);
+ letter-spacing: -1.2px;
+ max-width: 83%;
+ }
+ @include breakpoint($overwide) {
+ @include font-size(40px, 40px);
+ letter-spacing: -1.33px;
+ margin-bottom: 32px;
+ }
+ }
+ &__description {
+ @include breakpoint($extrawide) {
+ @include font-size(18px, 24px);
+ letter-spacing: -0.09px;
+ margin-bottom: 36px;
+ max-width: 83%;
+ }
@include breakpoint($overwide) {
margin-bottom: 44px;
}
diff --git a/src/components/hy-banner/hy-banner.tsx b/src/components/hy-banner/hy-banner.tsx
index 2ea08b05e848a5c639f54391ef739219bf93a249..a7ae872bb2fcdcac38345b470c6fef30c94c799c 100644
--- a/src/components/hy-banner/hy-banner.tsx
+++ b/src/components/hy-banner/hy-banner.tsx
@@ -1,4 +1,4 @@
-import {Component, Prop, h, Host} from '@stencil/core';
+import {Component, Element, Prop, h, Host} from '@stencil/core';
import {CtaLinkButtonVariants} from '../../utils/utils';
@Component({
@@ -12,15 +12,27 @@ export class HyBanner {
@Prop() url?: string;
@Prop() scLabel?: string;
@Prop() urlTitle?: string;
+ @Prop() headerstyle: string = 'common';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
render() {
+ const hyBannerClass = ['hy-banner', this.headerstyle].join(' ');
const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
const variant = CtaLinkButtonVariants.onBlueBkgd;
return (
<Host>
<hy-box pt="4" />
- <div class="hy-banner">
+ <div class={hyBannerClass}>
<hy-main-content-wrapper>
<div class={hyBannerWrapperClass}>
<div class="hy-banner__info-container__title">{this.textTitle}</div>
diff --git a/src/components/hy-banner/readme.md b/src/components/hy-banner/readme.md
index 1f7b5c1ecfa910e3903f2d2537db82df75106e70..ca6a88240d0d4b2349b5aecf53998da0a6de3713 100644
--- a/src/components/hy-banner/readme.md
+++ b/src/components/hy-banner/readme.md
@@ -6,6 +6,7 @@
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------- | -------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
| `textDescription` | `text-description` | | `string` | `null` |
| `textTitle` | `text-title` | | `string` | `undefined` |
diff --git a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
index b9a13e6550956747f91d1c3e2bc3715e22cc3316..cd153db203be2605b99ccd695d3febe339e0d437 100644
--- a/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
+++ b/src/components/hy-large-process-flow-phase/hy-large-process-flow-phase.scss
@@ -36,7 +36,7 @@
height: 24px;
left: 26.5px;
position: absolute;
- width: 10px;
+ width: 8px;
@include breakpoint($narrow) {
display: inline-block;
diff --git a/src/components/hy-large-process-flow/hy-large-process-flow.scss b/src/components/hy-large-process-flow/hy-large-process-flow.scss
index 833f8911c482dc3386e6b964fef25023e32ecb12..f1e62be85154656cccffc7b70e60ba1bc8314ce3 100644
--- a/src/components/hy-large-process-flow/hy-large-process-flow.scss
+++ b/src/components/hy-large-process-flow/hy-large-process-flow.scss
@@ -4,11 +4,15 @@
.hy-large-process-flow {
max-width: 100%;
+ padding-top: 8px;
+ margin-bottom: 24px;
width: 100%;
@include breakpoint($narrow) {
//tablet up till 768 (including 768px)
+ margin-bottom: 32px;
max-width: calc(100% / 8 * 7 + var(--gutter-narrow)); // 7 columns out of 8
+ padding-top: 0;
}
@include breakpoint($medium + 1) {
//small desktop; > 768
@@ -53,7 +57,7 @@
height: 100%;
left: 26.5px;
position: absolute;
- width: 10px;
+ width: 8px;
z-index: -1;
@include breakpoint($narrow) {
@@ -75,7 +79,7 @@
padding: 8px 0 !important;
@include breakpoint($narrow) {
- margin: 40px 0 48px 0;
+ margin: 48px 0;
padding: 16px 0 !important;
}
}
diff --git a/src/components/hy-prominent-image/hy-prominent-image.scss b/src/components/hy-prominent-image/hy-prominent-image.scss
index f38955a23baa999af29728c2acb4ce37039eaa9a..f0fd6ce062f9dc2e87082014fea2cc505dba6f33 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.scss
+++ b/src/components/hy-prominent-image/hy-prominent-image.scss
@@ -45,6 +45,34 @@
@include breakpoint($overwide) {
// >= 1441px
// font: h3 medium size
+ //@include font-size(26px, 32px);
+ //bottom: 28px;
+ //left: -16px;
+ //letter-spacing: -0.8px;
+ //padding: 20px 24px;
+ //position: absolute;
+ }
+ }
+}
+
+// no sidebar
+.hy-prominent-image.large {
+ &__text {
+ @include breakpoint($overwide) {
+ // >= 1441px no sidebar
+ // font: h3 medium size
+ @include font-size(26px, 32px);
+ bottom: 28px;
+ left: -16px;
+ letter-spacing: -0.8px;
+ padding: 20px 24px;
+ position: absolute;
+ }
+ }
+ .hy-prominent-image__text {
+ @include breakpoint($overwide) {
+ // >= 1441px no sidebar
+ // font: h3 medium size
@include font-size(26px, 32px);
bottom: 28px;
left: -16px;
diff --git a/src/components/hy-prominent-image/hy-prominent-image.tsx b/src/components/hy-prominent-image/hy-prominent-image.tsx
index b0b945917b4bedd5b234c843c67d0fea3a275c5f..9e68adfda9af7b3d1f74e737c72ee4bfce0c4ba9 100644
--- a/src/components/hy-prominent-image/hy-prominent-image.tsx
+++ b/src/components/hy-prominent-image/hy-prominent-image.tsx
@@ -1,4 +1,4 @@
-import {Component, Host, h, Prop} from '@stencil/core';
+import {Component, Element, Host, h, Prop} from '@stencil/core';
@Component({
tag: 'hy-prominent-image',
@@ -8,11 +8,23 @@ import {Component, Host, h, Prop} from '@stencil/core';
export class HyProminentImage {
@Prop() textTitle?: string;
@Prop() imageUrl?: string;
+ @Prop() headerstyle: string = 'common';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
render() {
+ const prominentImageClass = ['hy-prominent-image', this.headerstyle].join(' ');
return (
<Host>
- <div class="hy-prominent-image">
+ <div class={prominentImageClass}>
<div class="hy-prominent-image__image">
<hy-image image-url={this.imageUrl} aspectRatioWidth={2} aspectRatioHeight={1} />
</div>
diff --git a/src/components/hy-prominent-image/readme.md b/src/components/hy-prominent-image/readme.md
index 1f050f149e308c359280c72cd0f44b7075a878aa..4cf958a610c5d0308148d8f1b9d732d08ddbc5b2 100644
--- a/src/components/hy-prominent-image/readme.md
+++ b/src/components/hy-prominent-image/readme.md
@@ -4,10 +4,11 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------- | ------------ | ----------- | -------- | ----------- |
-| `imageUrl` | `image-url` | | `string` | `undefined` |
-| `textTitle` | `text-title` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `imageUrl` | `image-url` | | `string` | `undefined` |
+| `textTitle` | `text-title` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
index a1c87fd55045c7b064d8679854c451b351a006eb..9d7f156493111a004cd2c86dbc969878356457f5 100644
--- a/src/components/hy-tabs/hy-tabs.scss
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -58,7 +58,7 @@
}
&__left {
- left: 8px;
+ left: 2px;
svg {
left: -1.5px;
@@ -66,7 +66,7 @@
}
&__right {
- right: 8px;
+ right: 2px;
svg {
left: 1.5px;
@@ -101,7 +101,7 @@
font-weight: 600;
justify-content: center;
letter-spacing: -0.44px;
- margin: 0 8px 0 0;
+ margin: 0 4px 0 0;
max-width: calc(100% / 12 * 3);
min-height: 44px;
min-width: 100px;
@@ -116,12 +116,14 @@
@include breakpoint($narrow) {
@include font-size(18px, 24px);
letter-spacing: -0.56px;
+ margin: 0 8px 0 0;
padding: 8px 12px;
span.tab-title {
padding: 8px 12px;
}
}
+
@include breakpoint($medium) {
padding: 8px 16px;
@@ -129,8 +131,12 @@
padding: 8px 16px;
}
}
+ }
+
+ // No sidebar
+ [role='tab'].large {
@include breakpoint($overwide) {
- margin-right: 12px;
+ margin: 0 12px 0 0;
}
}
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
index bc8ff9a849b2d0442f42733e94791d4eac7c1717..5d62b0ef6f78b1db999968d9d78887d5ee23a067 100644
--- a/src/components/hy-tabs/hy-tabs.tsx
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -35,6 +35,7 @@ export class HyTabs implements ComponentInterface {
@State() tabButtons: NodeListOf<Element>[];
@State() tabList: NodeListOf<Element>[];
@Element() el: HTMLElement;
+ @Prop() headerstyle: string = 'common';
componentWillLoad() {
const tabItems = this.el.querySelectorAll('hy-tabs-item');
@@ -49,6 +50,13 @@ export class HyTabs implements ComponentInterface {
}
componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+
const tabContainer = this.el.children[0];
if (tabContainer) {
this.generateArrays(tabContainer);
@@ -319,7 +327,7 @@ export class HyTabs implements ComponentInterface {
const title = Object.values(item)[0];
const id = title.toLowerCase().replace(/\W/g, '-');
return (
- <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id}>
+ <button role="tab" aria-selected="false" aria-controls={`${id}-tab`} id={id} class={this.headerstyle}>
{title}
</button>
);
diff --git a/src/components/hy-tabs/readme.md b/src/components/hy-tabs/readme.md
index a44b7a525147022f09654e7ddb6432068dc0e6b4..3e1e52b91d2b97b2537d8cb16aee0832bb4b2ea8 100644
--- a/src/components/hy-tabs/readme.md
+++ b/src/components/hy-tabs/readme.md
@@ -6,6 +6,7 @@
| Property | Attribute | Description | Type | Default |
| -------------- | ---------------- | ----------- | -------- | ----------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `tabId` | `tab-id` | | `string` | `undefined` |
| `tabListLabel` | `tab-list-label` | | `string` | `''` |
diff --git a/src/components/link-box/link-box.tsx b/src/components/link-box/link-box.tsx
index da8a39baf0acf239a127bc085d029f1d94f89d68..55f7dc915120f8fad313726ebd5bcf88d44b004f 100644
--- a/src/components/link-box/link-box.tsx
+++ b/src/components/link-box/link-box.tsx
@@ -1,10 +1,10 @@
-import {Component, ComponentInterface, Prop, h} from '@stencil/core';
+import {Component, ComponentInterface, Element, Prop, h} from '@stencil/core';
import {LinkBoxVariants} from '../../utils/utils';
@Component({
tag: 'hy-link-box',
styleUrl: 'link-box.scss',
- shadow: true
+ shadow: true,
})
export class LinkBox implements ComponentInterface {
@Prop() variant: LinkBoxVariants = LinkBoxVariants.default;
@@ -14,37 +14,63 @@ export class LinkBox implements ComponentInterface {
@Prop() textDescription: string = null;
@Prop() url?: string;
@Prop() isExternal: boolean = false;
+ @Prop() headerstyle: string = 'common';
+ @Element() el: HTMLElement;
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+ }
render() {
- const classAttributes = ['hy-link-box', this.variant, this.imageUrl ? 'hy-link-box--with-image' : null].join(' ');
+ const classAttributes = [
+ 'hy-link-box',
+ this.variant,
+ this.headerstyle,
+ this.imageUrl ? 'hy-link-box--with-image' : null,
+ ].join(' ');
+
+ const classLinkAttributes = ['hy-link-box__link', this.headerstyle].join(' ');
const classTextContainer = ['hy-link-box__text-container', this.imageUrl ? 'hy-link-box--with-image' : null].join(
' '
);
const target = this.isExternal ? '_blank' : '_self';
- const aspectRatioWidth = 3;
- const aspectRatioHeight = 2;
+ const aspectRatioWidth = 16;
+ const aspectRatioHeight = 10;
const aspect = (aspectRatioHeight / aspectRatioWidth) * 100;
const aspectRatio = {
- '--aspectRatio': `${aspect}%` as 'aspectRatio'
+ '--aspectRatio': `${aspect}%` as 'aspectRatio',
};
return [
<article>
<a class={classAttributes} href={this.url} target={target}>
- <div class="hy-link-box__image-container" style={aspectRatio}>
- {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
- </div>
+ {this.imageUrl && (
+ <div class="hy-link-box__image-container" style={aspectRatio}>
+ <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />
+ </div>
+ )}
<div class={classTextContainer}>
<h3 class="hy-link-box__text-container__title">{this.textTitle}</h3>
{this.textDescription && <div class="hy-link-box__text-container__description">{this.textDescription}</div>}
</div>
</a>
</article>,
- <div class="hy-link-box__link" aria-hidden="true">
+ <div class={classLinkAttributes} aria-hidden="true">
<hy-icon icon={'hy-icon-arrow-right'} size={48} />
- </div>
+ </div>,
];
}
}
+
+/*
+<div class="hy-link-box__image-container" style={aspectRatio}>
+ {this.imageUrl && <img aria-hidden="true" src={this.imageUrl} alt={this.imageAlt} />}
+ </div>
+* */
diff --git a/src/components/link-box/readme.md b/src/components/link-box/readme.md
index dc6c651db5d69b9046a6e6d0b3e3d11afcbbb5ab..031c1e8b969bb50bd0bb9a9b10fbff083c4c22f4 100644
--- a/src/components/link-box/readme.md
+++ b/src/components/link-box/readme.md
@@ -6,6 +6,7 @@
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------- | -------------------------------------------------------- | ------------------------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `imageAlt` | `image-alt` | | `string` | `null` |
| `imageUrl` | `image-url` | | `string` | `null` |
| `isExternal` | `is-external` | | `boolean` | `false` |
diff --git a/src/components/navigation/menu-language-item/menu-language-item.scss b/src/components/navigation/menu-language-item/menu-language-item.scss
index c380d25f58b9d171b293a503fb4e2eef5ed199ed..06f5c9e03c0e8bd5c20c0d0c7e234e5157ed8b09 100644
--- a/src/components/navigation/menu-language-item/menu-language-item.scss
+++ b/src/components/navigation/menu-language-item/menu-language-item.scss
@@ -14,6 +14,28 @@ a {
text-decoration: none;
text-transform: uppercase;
+ @include breakpoint($wide) {
+ @include font-size(15px, 20px);
+ color: var(--brand-main-light);
+ font-weight: 700;
+ padding: 0 40px 32px;
+
+ &:hover {
+ background-color: var(--grayscale-background-box);
+ color: var(--brand-main);
+ }
+ }
+ @include breakpoint($extrawide) {
+ @include font-size(15px, 20px);
+ color: var(--brand-main-light);
+ font-weight: 700;
+ padding: 0 32px 22px;
+ }
+ @include breakpoint($overwide) {
+ @include font-size(18px, 22px);
+ padding: 0 40px 32px;
+ }
+
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: 2px;
@@ -21,17 +43,27 @@ a {
&.is-active {
.hy-menu-language-item__label {
- border-bottom-color: var(--additional-orange);
+ color: var(--grayscale-black);
+ font-weight: 700;
+ border-bottom: 2px solid var(--additional-orange);
+
+ @include breakpoint($wide) {
+ border-bottom: 3px solid var(--grayscale-black);
+ padding-bottom: 6px;
+ }
+ @include breakpoint($extrawide) {
+ border-bottom: 3px solid var(--grayscale-black);
+ padding-bottom: 6px;
+ }
+ @include breakpoint($overwide) {
+ padding-bottom: 8px;
+ }
}
}
&:not(.is-mobile) {
- @include font-size(16px, 20px);
- margin: 0 0 5px;
- }
-
- .hy-menu-language-item__label {
- border-bottom: 2px solid transparent;
- padding-bottom: 5px;
+ //@include font-size(16px, 20px);
+ margin: 0;
+ // margin: 0 0 5px;
}
}
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 4656338280035fd0215a51dac0121a2ed42c73ee..f41bf241ba4fd1a6036a239eb82a12053eea27a4 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -42,10 +42,29 @@
outline-offset: 2px;
}
+ &:hover {
+ cursor: pointer;
+ }
+
&.is-open {
.menu--language__toggle__caret {
transform: rotate(180deg);
}
+ background-color: var(--grayscale-background-box);
+ @include breakpoint($wide) {
+ margin-bottom: -28px;
+ margin-top: -26px;
+ padding: 26px 8px 28px;
+ }
+ @include breakpoint($extrawide) {
+ margin-bottom: -38px;
+ margin-top: -26px;
+ padding: 26px 8px 38px;
+ }
+ @include breakpoint($overwide) {
+ margin-bottom: -50px;
+ padding: 26px 12px 50px;
+ }
}
> * {
@@ -71,6 +90,17 @@
top: 40px;
visibility: hidden;
+ @include breakpoint($wide) {
+ padding: 32px 0 0;
+ top: 70px;
+ }
+ @include breakpoint($extrawide) {
+ top: 80px;
+ }
+ @include breakpoint($overwide) {
+ top: 90px;
+ }
+
&.is-open {
visibility: visible;
z-index: 100;
@@ -96,3 +126,19 @@
width: 16px;
}
}
+
+.hy-menu-backdrop {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ visibility: hidden;
+
+ &.is-active {
+ background-color: rgba(0, 0, 0, 0.4);
+ transition: background-color 300ms;
+ visibility: visible;
+ z-index: 99;
+ }
+}
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 52c6fd7f5b837ff007e477da3b36d04b050b1300..6af1f0e7d552ec7a62012bb43ea20b13dc12ff40 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -34,6 +34,44 @@ export class MenuLanguage {
@Listen('languageMenuToggle') languageMenuToggle() {
this.isMenuOpen = !this.isMenuOpen;
+
+ let hyHeader = this.el.closest('.hy-site-header');
+ let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+ if (hyBackdropDiv) {
+ if (this.isMenuOpen) {
+ (hyBackdropDiv as HTMLElement).classList.add('is-active');
+ (hyBackdropDiv as HTMLElement).style.top = '90px';
+ } else {
+ (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+ (hyBackdropDiv as HTMLElement).style.top = '0';
+ }
+ }
+ }
+
+ @Listen('click')
+ handleComponentClick(event) {
+ event.stopPropagation();
+ }
+
+ @Listen('click', {target: 'window'})
+ handleClick(event) {
+ if (this.isMenuOpen) {
+ const target = event.target as HTMLTextAreaElement;
+ const targetElement = target.tagName.toLowerCase();
+
+ if (targetElement !== 'hy-menu-language') {
+ const hyHeader = this.el.closest('.hy-site-header');
+ const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+ if (hyBackdropDiv && hyBackdropDiv.classList.contains('is-active')) {
+ (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+ (hyBackdropDiv as HTMLElement).style.top = '0';
+ this.isMenuOpen = !this.isMenuOpen;
+ }
+ }
+ }
+ event.stopPropagation();
}
componentWillRender() {
@@ -43,6 +81,7 @@ export class MenuLanguage {
render() {
const black = 'var(--brand-main-nearly-black)';
+ const menuLanguageContainerClass = ['menu--language'].join(' ');
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -60,7 +99,7 @@ export class MenuLanguage {
})}
</Host>
) : (
- <Host class={'menu--language'}>
+ <Host class={menuLanguageContainerClass}>
<button
onClick={() => this.languageMenuToggle()}
class={{
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 0138078e25c99efae0ac807ba038eaa6efd6c574..b84677bdc159f5b61815e64bdc07583702f782c6 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -120,7 +120,7 @@
min-height: 35px;
}
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
.menu--language {
display: none;
visibility: hidden;
diff --git a/src/components/paragraph-text/paragraph-text-content.scss b/src/components/paragraph-text/paragraph-text-content.scss
index 94ed6b7cf4a75438a01e6906c9140509ab77b6f8..6edae7cae222b71f65ae2b57fd574c25b96c3651 100644
--- a/src/components/paragraph-text/paragraph-text-content.scss
+++ b/src/components/paragraph-text/paragraph-text-content.scss
@@ -4,23 +4,42 @@
* Common styles for text plus mobile & tablet & small desktop
* in Content Pages and Field of science pages.
*/
-.hy-paragraph-text.content_page,
-.hy-paragraph-text.field_of_science {
- h2 {
- // text H2 small
- @include font-size(26px, 32px);
- letter-spacing: -0.8px;
- padding-bottom: 40px;
+.hy-paragraph-text.content_page.external,
+.hy-paragraph-text.field_of_science.external {
+ margin-top: 24px; //total gap between heading h2 and paragraph content is 48px
- @include breakpoint($wide) {
- // text H2 Medium size ?? also for 1200-1440 with sidebar !!!
- @include font-size(32px, 38px);
- letter-spacing: -1px;
+ @include breakpoint($narrow) {
+ margin-top: 16px; //total gap 40px
+ }
+ @include breakpoint($wide) {
+ margin-top: 32px; //total gap 56px
+ }
+}
- padding-bottom: 56px;
- }
+// There is a sidebar on the Content page
+.hy-paragraph-text.content_page.external.default,
+.hy-paragraph-text.field_of_science.external.default {
+ @include breakpoint($extrawide) {
+ margin-top: 32px; //total gap 56px
}
+ @include breakpoint($overwide) {
+ margin-top: 40px; //total gap 64px
+ }
+}
+
+// No sidebar on the Content page
+.hy-paragraph-text.content_page.external.wide,
+.hy-paragraph-text.field_of_science.external.wide {
+ @include breakpoint($extrawide) {
+ margin-top: 40px; //total gap 64px
+ }
+ @include breakpoint($overwide) {
+ margin-top: 40px; //total gap 64px
+ }
+}
+.hy-paragraph-text.content_page,
+.hy-paragraph-text.field_of_science {
h3 {
// text H3 small
@include font-size(22px, 28px);
@@ -107,35 +126,9 @@
padding-top: 28px;
}
- @include breakpoint($overwide) {
+ @include breakpoint($wide) {
padding-bottom: 16px;
padding-top: 32px;
}
}
}
-
-// There is a sidebar on the Content page
-.hy-paragraph-text.content_page.default,
-.hy-paragraph-text.field_of_science.default {
- h2 {
- @include breakpoint($extrawide) {
- padding-bottom: 56px;
- }
- @include breakpoint($overwide) {
- padding-bottom: 64px;
- }
- }
-}
-
-// No sidebar on the Content page
-.hy-paragraph-text.content_page.wide,
-.hy-paragraph-text.field_of_science.default {
- h2 {
- @include breakpoint($extrawide) {
- padding-bottom: 64px;
- }
- @include breakpoint($overwide) {
- padding-bottom: 64px;
- }
- }
-}
diff --git a/src/components/paragraph-text/paragraph-text.tsx b/src/components/paragraph-text/paragraph-text.tsx
index 2f33196493df775521e7956e510da255ac5c65ed..9f3b4a501721ef7e216798e0e7e82b2b32523682 100644
--- a/src/components/paragraph-text/paragraph-text.tsx
+++ b/src/components/paragraph-text/paragraph-text.tsx
@@ -11,6 +11,7 @@ import {Component, Element, h, Host, Prop} from '@stencil/core';
})
export class ParagraphText {
@Prop() variant: string;
+ @Prop() placement: string = 'internal';
@Prop() headerstyle: string = 'default';
@Element() el: HTMLElement;
@@ -24,7 +25,9 @@ export class ParagraphText {
}
render() {
- const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.headerstyle}`].join(' ');
+ const classAttributes = ['hy-paragraph-text', `${this.variant}`, `${this.placement}`, `${this.headerstyle}`].join(
+ ' '
+ );
return (
<Host>
diff --git a/src/components/paragraph-text/readme.md b/src/components/paragraph-text/readme.md
index 9ae4383ffec8f5816666e481fc7374912239d97c..f763b0bedcb64ce616f5f422a0d7a4d4e0792e5c 100644
--- a/src/components/paragraph-text/readme.md
+++ b/src/components/paragraph-text/readme.md
@@ -31,10 +31,11 @@ Basic text paragraph.
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------- | ------------- | ----------- | -------- | ----------- |
-| `headerstyle` | `headerstyle` | | `string` | `'default'` |
-| `variant` | `variant` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | -------- | ------------ |
+| `headerstyle` | `headerstyle` | | `string` | `'default'` |
+| `placement` | `placement` | | `string` | `'internal'` |
+| `variant` | `variant` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 53542c52aaf83f04708bf97e1cbe531eae1935cd..6ffe0687fb51016e12006eee2e058616419e4997 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -90,7 +90,7 @@ export class SiteHeader {
applySizeClasses(size: number) {
// Set the menu-type based on the width of the browser.
- if (size < 1200 && size > 960) {
+ if (size <= 1200 && size > 960) {
this.menuType = MenuType.tablet;
} else if (size <= 960) {
this.menuType = MenuType.mobile;
@@ -113,6 +113,7 @@ export class SiteHeader {
case MenuType.desktop:
return (
<header class={classAttributes.join(' ')}>
+ <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
<div class={'hy-site-header__logo-container'}>
<hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
</div>