Skip to content
Snippets Groups Projects
Commit f7c929c3 authored by Ekaterina Kondareva's avatar Ekaterina Kondareva
Browse files

banner and cta button styles

parent 2c400a70
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components.d.ts
+ 4
− 0
View file @ f7c929c3
......@@ -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;
......
src/components/cta-button/cta-button.scss
+ 92
− 8
View file @ f7c929c3
......@@ -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);
}
}
}
src/components/cta-button/cta-button.tsx
+ 14
− 3
View file @ f7c929c3
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(' ');
......
src/components/cta-button/readme.md
+ 1
− 0
View file @ f7c929c3
......@@ -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` |
......
src/components/hy-banner/hy-banner.scss
+ 52
− 23
View file @ f7c929c3
......@@ -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;
}
}
......
src/components/hy-banner/hy-banner.tsx
+ 14
− 2
View file @ f7c929c3
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>
......
src/components/hy-banner/readme.md
+ 1
− 0
View file @ f7c929c3
......@@ -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` |
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment