From c1768bd65e1b11487b4216d0d63aabc894131533 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Mon, 2 Nov 2020 17:44:59 +0200
Subject: [PATCH] prominent image and banner styles

---
 src/components.d.ts                           |  2 ++
 src/components/hy-banner/hy-banner.scss       | 28 +++++++++----------
 .../hy-prominent-image.scss                   | 28 +++++++++++++++++++
 .../hy-prominent-image/hy-prominent-image.tsx | 16 +++++++++--
 src/components/hy-prominent-image/readme.md   |  9 +++---
 5 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index b0bcc32f..64d26f19 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -457,6 +457,7 @@ export namespace Components {
     variant: ProcessFlowBoxVariants;
   }
   interface HyProminentImage {
+    headerstyle: string;
     imageUrl?: string;
     textTitle?: string;
   }
@@ -1320,6 +1321,7 @@ declare namespace LocalJSX {
     variant?: ProcessFlowBoxVariants;
   }
   interface HyProminentImage {
+    headerstyle?: string;
     imageUrl?: string;
     textTitle?: string;
   }
diff --git a/src/components/hy-banner/hy-banner.scss b/src/components/hy-banner/hy-banner.scss
index 2798de35..d6571f8b 100644
--- a/src/components/hy-banner/hy-banner.scss
+++ b/src/components/hy-banner/hy-banner.scss
@@ -85,31 +85,29 @@
 .hy-banner.large {
   @include breakpoint($extrawide) {
     padding: 64px 0 48px 0;
+  }
 
-    &__info-container {
-      &__title {
+  .hy-banner__info-container {
+    &__title {
+      @include breakpoint($extrawide) {
         @include font-size(36px, 36px);
         letter-spacing: -1.2px;
         max-width: 83%;
       }
-      &__description {
+      @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) {
-    padding: 64px 0 48px 0;
-    &__info-container {
-      &__title {
-        @include font-size(40px, 40px);
-        letter-spacing: -1.33px;
-        margin-bottom: 32px;
-        max-width: 83%; //10col
-      }
-      &__description {
+      @include breakpoint($overwide) {
         margin-bottom: 44px;
       }
     }
diff --git a/src/components/hy-prominent-image/hy-prominent-image.scss b/src/components/hy-prominent-image/hy-prominent-image.scss
index f38955a2..f0fd6ce0 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 b0b94591..9e68adfd 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 1f050f14..4cf958a6 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
 
-- 
GitLab