Nxstage 617 intro sprint18

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 {*}
      */

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;
+    }
   }
 }
 

src/components/heading/heading.tsx

-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 ? (

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
 

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 {

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>