diff --git a/src/components.d.ts b/src/components.d.ts
index 3243c042e94a61bc6fdc18276e29d2e40bc03732..5fc495d25604d7f991b8a8f028f42da01069c4ab 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -196,6 +196,7 @@ export namespace Components {
}
interface HyGridRow {}
interface HyHeading {
+ headerstyle: string;
/**
* @type {*}
*/
@@ -929,6 +930,7 @@ declare namespace LocalJSX {
}
interface HyGridRow {}
interface HyHeading {
+ headerstyle?: string;
/**
* @type {*}
*/
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index 64baf6290b31dac598c28de2af4f3392a0324dbe..7e49c1a8f57237607c41c6def07d8ea3cf061983 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -101,17 +101,45 @@ h2.hy-heading__landingsection {
@include font-size(40px, 40px);
letter-spacing: -1.25px;
}
+}
- @include breakpoint($extrawide) {
- // > 1200px
- @include font-size(48px, 48px);
- letter-spacing: -1.6px;
+// Applied when there is a sidebar
+.hy-heading__container__common {
+ h2.hy-heading__introduction,
+ h2.hy-heading__landingsection {
+ @include breakpoint($extrawide) {
+ // > 1200px
+ // ex. Side menu layout on Mid-sized desktop; Medium font
+ @include font-size(40px, 40px);
+ letter-spacing: -1.25px;
+ }
+
+ @include breakpoint($overwide) {
+ // > 1400px
+ // ex. Side menu layout on Large desktop; Large font
+ @include font-size(48px, 48px);
+ letter-spacing: -1.6px;
+ }
}
+}
- @include breakpoint($overwide) {
- // > 1400px
- @include font-size(54px, 54px);
- letter-spacing: -1.8px;
+// Applied when there is NO sidebar
+.hy-heading__container__large {
+ h2.hy-heading__introduction,
+ h2.hy-heading__landingsection {
+ @include breakpoint($extrawide) {
+ // > 1200px
+ // ex. Full width layout on Mid-sized desktop; Large font
+ @include font-size(48px, 48px);
+ letter-spacing: -1.6px;
+ }
+
+ @include breakpoint($overwide) {
+ // > 1400px
+ // ex. Full width layout on Large desktop; X-large font
+ @include font-size(54px, 54px);
+ letter-spacing: -1.8px;
+ }
}
}
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index bf01b2bf1353861d870f0b6c3aeee941c39a21df..a4487163b692dee5fa058a1a827dcf6f82f1b7b0 100644
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -1,4 +1,4 @@
-import {Component, Prop, Host, h} from '@stencil/core';
+import {Component, Element, Prop, Host, h} from '@stencil/core';
import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
@Component({
@@ -17,6 +17,17 @@ export class Heading {
*/
@Prop() section: HeadingSectionVariants = HeadingSectionVariants.default as any;
@Prop() negative: 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 headingInVariants = this.heading in HeadingVarians;
@@ -24,7 +35,12 @@ export class Heading {
const sectionClassAttributes = [`hy-heading__${this.section}--divider`].join(' ');
- const containerSectionClass = ['hy-heading__container', `hy-heading__container__${this.section}`].join(' ');
+ const containerSectionClass = [
+ 'hy-heading__container',
+ `hy-heading__container__${this.section}`,
+ `hy-heading__container__${this.headerstyle}`,
+ ].join(' ');
+
return (
<Host>
{headingInVariants ? (
diff --git a/src/components/heading/readme.md b/src/components/heading/readme.md
index 1aaa8854991be4eae6f2d10ab1fb0d682f38592e..e9c25ecac7e59cb44958610173688f3cc67a0f45 100644
--- a/src/components/heading/readme.md
+++ b/src/components/heading/readme.md
@@ -87,11 +87,12 @@ Provide heading attribute for the component to choose what type of heading to us
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------- | ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
-| `heading` | `heading` | | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default as any` |
-| `negative` | `negative` | | `boolean` | `false` |
-| `section` | `section` | | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | ------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
+| `headerstyle` | `headerstyle` | | `string` | `"normal"` |
+| `heading` | `heading` | | `HeadingVarians.default \| HeadingVarians.h2 \| HeadingVarians.h3 \| HeadingVarians.h4 \| HeadingVarians.h5 \| HeadingVarians.h6` | `HeadingVarians.default as any` |
+| `negative` | `negative` | | `boolean` | `false` |
+| `section` | `section` | | `HeadingSectionVariants.contentPageHeader \| HeadingSectionVariants.default \| HeadingSectionVariants.introduction \| HeadingSectionVariants.landingPageHeader \| HeadingSectionVariants.subSection` | `HeadingSectionVariants.default as any` |
## Dependencies
diff --git a/src/components/hy-introduction/hy-introduction.scss b/src/components/hy-introduction/hy-introduction.scss
index 19ae8f918da240592c84619e5267ab3f997889da..9178f9e99c3f4dd891fda344f5acc8c4c8f12e2b 100644
--- a/src/components/hy-introduction/hy-introduction.scss
+++ b/src/components/hy-introduction/hy-introduction.scss
@@ -26,7 +26,7 @@
@include breakpoint($narrow) {
box-shadow: 10px -10px 20px -10px rgba(14, 104, 139, 0.1);
- margin-top: -83px;
+ margin-top: -40px;
padding: 0 32px 0 0;
width: 90%;
}
@@ -34,7 +34,9 @@
@include breakpoint($wide) {
box-shadow: none;
margin-top: 0;
- padding: 0 32px 0 0;
+ //padding: 0 32px 0 0;
+ padding: 0 5.52% 0 0;
+ width: 48.75%;
}
}
@@ -46,7 +48,7 @@
@include breakpoint($narrow) {
box-shadow: -10px -10px 20px -10px rgba(14, 104, 139, 0.1);
- margin-top: -83px;
+ margin-top: -40px;
padding: 0 0 0 32px;
width: 90%;
}
@@ -54,7 +56,9 @@
@include breakpoint($wide) {
box-shadow: none;
margin-top: 0;
- padding: 0 0 0 32px;
+ //padding: 0 0 0 32px;
+ padding: 0 0 0 5.52%;
+ width: 48.75%;
}
}
}
@@ -95,11 +99,14 @@
}
.hy-introduction__link {
- background: var(--grayscale-white);
- color: var(--brand-main-light);
+ //background: var(--grayscale-white);
+ background: var(--brand-main-active);
+ //color: var(--brand-main-light);
+ color: var(--grayscale-white);
&__icon svg {
- fill: var(--brand-main-light);
+ //fill: var(--brand-main-light);
+ fill: var(--grayscale-white);
}
}
}
@@ -125,8 +132,12 @@
}
.hy-introduction__link {
- background: var(--grayscale-black);
+ background: var(--brand-main-light);
color: var(--grayscale-white);
+
+ &__icon svg {
+ fill: var(--grayscale-white);
+ }
}
}
}
@@ -148,28 +159,37 @@
width: 100%;
@include breakpoint($wide) {
- width: calc(100% / 12 * 10 - var(--gutter-medium));
+ width: 91.46%;
+ }
+ @include breakpoint($extrawide) {
+ width: 82.89%;
+ }
+ @include breakpoint($overwide) {
+ width: 74.2%;
}
}
&__content--with-image {
margin-left: -16px;
- margin-top: -60px;
- padding: 60px 16px 32px;
+ margin-top: -64px;
+ padding: 64px 16px 40px;
width: calc(100% + 32px);
@include breakpoint($narrow) {
margin-left: -32px;
- padding: 60px 32px 32px;
+ margin-top: -120px;
+ padding: 120px 32px 48px;
width: calc(100% + 64px);
}
@include breakpoint($wide) {
margin: 0;
padding: 0;
- width: calc(100% / 12 * 6);
+ //width: calc(100% / 12 * 6);
+ width: 45.73%;
}
}
+
&__title {
.hy-heading__container {
@include breakpoint($wide) {
@@ -182,12 +202,18 @@
width: 100%;
@include breakpoint($wide) {
- width: calc(100% / 12 * 5 - var(--gutter-medium));
+ //width: calc(100% / 12 * 5 - var(--gutter-medium));
+ width: 45.73%;
}
.hy-image,
.hy-image .hy-image__image-container {
height: 100% !important;
+
+ --aspectRatio: 66.5% !important;
+ @include breakpoint($wide) {
+ --aspectRatio: 71.42857142857143% !important;
+ }
}
}
@@ -212,7 +238,8 @@
}
&__link {
- @include font-size(18px);
+ @include font-size(16px, 20px);
+ letter-spacing: -0.5px;
background-color: var(--brand-main-light);
border: 2px solid var(--grayscale-white);
@@ -222,14 +249,26 @@
cursor: pointer;
display: inline-block;
font-family: var(--main-font-family);
- font-weight: 600;
+ font-weight: 700;
height: 100%;
- padding: 16px 70px 16px 19px;
+ padding: 12px 60px 12px 12px;
position: relative;
text-decoration: none;
+ @include breakpoint($narrow) {
+ @include font-size(16px, 20px);
+ letter-spacing: -0.6px;
+ padding: 14px 62px 14px 16px;
+ }
+
@include breakpoint($wide) {
- @include font-size(18px);
+ @include font-size(18px, 20px);
+ }
+
+ @include breakpoint($extrawide) {
+ @include font-size(20px, 20px);
+ letter-spacing: -0.7px;
+ padding: 16px 70px 16px 18px;
}
&__icon {
diff --git a/src/components/hy-introduction/hy-introduction.tsx b/src/components/hy-introduction/hy-introduction.tsx
index 6788317d614ef9b8da3ff48db5a3c63ee352a6f4..ff40a56e7b830570ca9559954f3d4fdffeef3ebc 100644
--- a/src/components/hy-introduction/hy-introduction.tsx
+++ b/src/components/hy-introduction/hy-introduction.tsx
@@ -58,7 +58,7 @@ export class HyIntroduction {
</div>
{this.imageUrl && (
<div class="hy-introduction__image">
- <hy-image image-url={this.imageUrl} aspectRatioWidth={3} aspectRatioHeight={2} />
+ <hy-image image-url={this.imageUrl} aspectRatioWidth={7} aspectRatioHeight={5} />
</div>
)}
</div>