From f7c929c3aebe69645d6153efa638c4d03d21a995 Mon Sep 17 00:00:00 2001
From: Ekaterina Kondareva <>
Date: Mon, 2 Nov 2020 12:27:14 +0200
Subject: [PATCH] banner and cta button styles
---
src/components.d.ts | 4 +
src/components/cta-button/cta-button.scss | 100 ++++++++++++++++++++--
src/components/cta-button/cta-button.tsx | 17 +++-
src/components/cta-button/readme.md | 1 +
src/components/hy-banner/hy-banner.scss | 75 +++++++++++-----
src/components/hy-banner/hy-banner.tsx | 16 +++-
src/components/hy-banner/readme.md | 1 +
7 files changed, 178 insertions(+), 36 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index ac648e79..b0bcc32f 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;
@@ -922,6 +924,7 @@ declare namespace LocalJSX {
variant?: 'primary' | 'warn' | 'success' | 'disabled';
}
interface HyBanner {
+ headerstyle?: string;
scLabel?: string;
textDescription?: string;
textTitle?: string;
@@ -1038,6 +1041,7 @@ declare namespace LocalJSX {
variant?: ButtonVariants;
}
interface HyCtaButton {
+ headerstyle?: string;
isExternal?: boolean;
linkContent?: string;
scLabel?: string;
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 317e7c29..8e12b0b1 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 e73564a7..89a6eed3 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 906059b9..fcf2aa95 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 2b74bef4..2798de35 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,24 +61,55 @@
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%;
}
+ }
+ }
+}
- @include breakpoint($overwide) {
+// Big screen, no sidebar
+.hy-banner.large {
+ @include breakpoint($extrawide) {
+ padding: 64px 0 48px 0;
+
+ &__info-container {
+ &__title {
+ @include font-size(36px, 36px);
+ letter-spacing: -1.2px;
+ max-width: 83%;
+ }
+ &__description {
+ @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 {
margin-bottom: 44px;
}
}
diff --git a/src/components/hy-banner/hy-banner.tsx b/src/components/hy-banner/hy-banner.tsx
index 2ea08b05..a7ae872b 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 1f7b5c1e..ca6a8824 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` |
--
GitLab