diff --git a/src/components.d.ts b/src/components.d.ts
index 6def33e989af422b6669b92e361f7d68a52e9de0..7c8dbdc5fc069c6d060fa1d48738ee97bf6c9105 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -297,6 +297,7 @@ export namespace Components {
interface HyHero {
colorVariant: HeroColorVariant;
description: string;
+ headerstyle: string;
heading: string;
image: string;
scLabel?: string;
@@ -1156,6 +1157,7 @@ declare namespace LocalJSX {
interface HyHero {
colorVariant?: HeroColorVariant;
description?: string;
+ headerstyle?: string;
heading?: string;
image?: string;
scLabel?: string;
diff --git a/src/components/cta-button/cta-button.scss b/src/components/cta-button/cta-button.scss
index 8e12b0b104c9982e1d910c6a17115122a0eaf6c0..962bb86403eb012b306c8b3f85b834bb7f228928 100644
--- a/src/components/cta-button/cta-button.scss
+++ b/src/components/cta-button/cta-button.scss
@@ -13,13 +13,69 @@
position: relative;
text-decoration: none;
+ &.transparent-background {
+ background-color: var(--grayscale-white);
+ color: var(--grayscale-black);
+
+ .link-icon svg {
+ background-color: var(--grayscale-white);
+ fill: var(--grayscale-black);
+ }
+
+ .text {
+ color: var(--grayscale-black);
+ }
+ }
+
+ &.black-background {
+ background-color: var(--grayscale-black);
+ color: var(--grayscale-white);
+
+ .link-icon svg {
+ background-color: var(--grayscale-black);
+ fill: var(--grayscale-white);
+ }
+
+ .text {
+ color: var(--grayscale-white);
+ }
+ }
+
+ &.blue-background {
+ background-color: var(--brand-main-light);
+ color: var(--grayscale-white);
+
+ .link-icon svg {
+ background-color: var(--brand-main-light);
+ fill: var(--grayscale-white);
+ }
+
+ .text {
+ color: var(--grayscale-white);
+ }
+ }
+
+ &.white-background {
+ background-color: var(--brand-main-light);
+ color: var(--grayscale-white);
+
+ .link-icon svg {
+ background-color: var(--brand-main-light);
+ fill: var(--grayscale-white);
+ }
+
+ .text {
+ color: var(--grayscale-white);
+ }
+ }
+
+ &.transparent-background,
+ &.black-background,
&.blue-background,
&.white-background {
align-items: center;
- background-color: var(--brand-main-light);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
- color: var(--grayscale-white);
display: flex;
justify-content: center;
height: 100%;
@@ -40,7 +96,6 @@
.text {
@include font-size(16px, 16px); //button small
- color: var(--grayscale-white);
@include breakpoint($narrow) {
@include font-size(18px, 18px); //button medium
@@ -69,8 +124,6 @@
}
svg {
- background-color: var(--brand-main-light);
- fill: var(--grayscale-white);
height: 16px;
width: 16px;
@@ -93,13 +146,21 @@
}
}
- &.blue-background {
+ &.blue-background,
+ &.black-background {
border: 3px solid var(--grayscale-white);
@include breakpoint($overwide) {
border: 4px solid var(--grayscale-white);
}
}
+ &.transparent-background {
+ border: 3px solid var(--grayscale-black);
+ @include breakpoint($overwide) {
+ border: 4px solid var(--grayscale-black);
+ }
+ }
+
&.white-background {
border: none;
}
@@ -130,9 +191,16 @@
}
}
- &.blue-background {
+ &.blue-background,
+ &.black-background {
@include breakpoint($extrawide) {
border: 4px solid var(--grayscale-white);
}
}
+
+ &.transparent-background {
+ @include breakpoint($extrawide) {
+ border: 4px solid var(--grayscale-black);
+ }
+ }
}
diff --git a/src/components/cta-button/readme.md b/src/components/cta-button/readme.md
index fcf2aa95391fc52c9a31d9eb2da0165986cc0ea9..912fbf5b3a87d9ac215450c0713cd4e69948ec25 100644
--- a/src/components/cta-button/readme.md
+++ b/src/components/cta-button/readme.md
@@ -4,20 +4,21 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------- | -------------- | ----------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------- |
-| `headerstyle` | `headerstyle` | | `string` | `'common'` |
-| `isExternal` | `is-external` | | `boolean` | `false` |
-| `linkContent` | `link-content` | | `string` | `''` |
-| `scLabel` | `sc-label` | | `string` | `undefined` |
-| `url` | `url` | | `string` | `undefined` |
-| `variant` | `variant` | | `CtaLinkButtonVariants.default \| CtaLinkButtonVariants.onBlueBkgd \| CtaLinkButtonVariants.onWhiteBkgd` | `CtaLinkButtonVariants.onBlueBkgd` |
+| Property | Attribute | Description | Type | Default |
+| ------------- | -------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
+| `isExternal` | `is-external` | | `boolean` | `false` |
+| `linkContent` | `link-content` | | `string` | `''` |
+| `scLabel` | `sc-label` | | `string` | `undefined` |
+| `url` | `url` | | `string` | `undefined` |
+| `variant` | `variant` | | `CtaLinkButtonVariants.default \| CtaLinkButtonVariants.onBlackBkgd \| CtaLinkButtonVariants.onBlueBkgd \| CtaLinkButtonVariants.onTransparentBkgd \| CtaLinkButtonVariants.onWhiteBkgd` | `CtaLinkButtonVariants.onBlueBkgd` |
## Dependencies
### Used by
- [hy-banner](../hy-banner)
+- [hy-hero](../hy-hero)
### Depends on
@@ -29,6 +30,7 @@
graph TD;
hy-cta-button --> hy-icon
hy-banner --> hy-cta-button
+ hy-hero --> hy-cta-button
style hy-cta-button fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/heading/heading.scss b/src/components/heading/heading.scss
index f3f579a7495062596c26bf8f03519e9c2ae0f6a1..65f08668dae08f53a45712ae2e9db19cb977472d 100644
--- a/src/components/heading/heading.scss
+++ b/src/components/heading/heading.scss
@@ -103,6 +103,43 @@ h2.hy-heading__landingsection {
}
}
+/*
+ H1 used in Hero paragraph.
+*/
+h1.hy-heading__introduction {
+ @include font-size(32px, 32px);
+ @include font-weight($bold);
+
+ color: inherit;
+ font-family: var(--main-font-family);
+ letter-spacing: -1px;
+ margin-bottom: 0;
+
+ @include breakpoint($narrow) {
+ // Medium
+ @include font-size(48px, 48px);
+ letter-spacing: -1.5px;
+ }
+
+ @include breakpoint($wide) {
+ // Medium with sidebar
+ @include font-size(48px, 48px);
+ letter-spacing: -1.5px;
+ }
+
+ @include breakpoint($extrawide) {
+ // Medium with sidebar
+ @include font-size(48px, 48px);
+ letter-spacing: -1.5px;
+ }
+
+ @include breakpoint($overwide) {
+ // Large with sidebar
+ @include font-size(56px, 56px);
+ letter-spacing: -1.8px;
+ }
+}
+
// Applied when there is a sidebar
.hy-heading__container__common {
h2.hy-heading__introduction,
@@ -141,6 +178,21 @@ h2.hy-heading__landingsection {
letter-spacing: -1.8px;
}
}
+
+ //Hero h1
+ h1.hy-heading__introduction {
+ @include breakpoint($extrawide) {
+ // > 1200px Large
+ @include font-size(56px, 56px);
+ letter-spacing: -1.8px;
+ }
+
+ @include breakpoint($overwide) {
+ // > 1400px X-Large
+ @include font-size(72px, 72px);
+ letter-spacing: -2.5px;
+ }
+ }
}
// h3 on landing pages use the same fonts as h2 on content pages; no line; no caps
@@ -167,37 +219,6 @@ h3.hy-heading__landingsection {
}
}
-/*
- H1 used in Hero paragraph.
-*/
-h1.hy-heading__introduction {
- @include font-size(32px, 32px);
- @include font-weight($bold);
-
- color: inherit;
- font-family: var(--main-font-family);
- letter-spacing: -1px;
- margin-bottom: 0;
-
- @include breakpoint($narrow) {
- // > 480px
- @include font-size(48px, 48px);
- letter-spacing: -1.5px;
- }
-
- @include breakpoint($extrawide) {
- // > 1200px
- @include font-size(60px, 60px);
- letter-spacing: -1.9px;
- }
-
- @include breakpoint($overwide) {
- // > 1400px
- @include font-size(80px, 80px);
- letter-spacing: -2.5px;
- }
-}
-
h1,
h2,
h3,
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 4f5f75afa4f5352a7af44ab49a1d1f2100194ed0..0b9e5a637af8301828285b57ed5887986932d740 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -6,8 +6,14 @@
position: relative;
@include breakpoint($wide) {
- display: flex;
- margin: 32px 0 56px 0;
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ &__desktop-container {
+ @include breakpoint($wide) {
+ display: flex;
+ }
}
&__image-container {
@@ -18,11 +24,9 @@
@include breakpoint($wide) {
background: white;
- margin-left: 30%;
- min-height: 600px;
- padding: 6px 0;
order: 2;
- width: auto;
+ padding: 6px 0;
+ width: 60%;
z-index: 1;
}
@@ -35,43 +39,83 @@
}
&__content {
+ margin-right: 24px;
+ margin-top: -24px;
+ min-height: 24px;
+ max-width: 100%;
position: relative;
- margin-top: -32px;
- min-height: 32px;
- max-width: 100px;
-
- @include breakpoint($medium) {
- margin-top: -48px;
- min-height: 48px;
- max-width: 100px;
+ @include breakpoint($narrow) {
+ margin-right: 48px;
+ margin-top: -40px;
+ min-height: 40px;
+ max-width: 87%; //7col (out of 8) - 32px (1 margin)
}
@include breakpoint($wide) {
display: none;
}
+ }
- &-wrap-helper {
- margin-top: -32px;
- position: relative;
+ &__content--bottom {
+ @include breakpoint($extrawide) {
+ margin-right: 32px;
+ }
+ }
- @include breakpoint($medium) {
- margin-top: -48px;
- }
+ &__content--container {
+ //@todo left is now calculated in js. Find a css solution
+ position: relative;
- @include breakpoint($wide) {
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- left: 0;
- margin: 0;
- order: 1;
- position: absolute;
- top: 0;
- width: 100%;
- z-index: 2;
- }
+ @include breakpoint($wide) {
+ margin-left: 32px;
+ margin-right: -32px;
+ padding-bottom: 44px;
+ padding-top: 20px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-bottom: 44px;
+ padding-top: 20px;
+ margin-left: 0;
+ margin-right: 0;
+
+ //without sidebar
+ //padding-bottom: 78px;
+ //padding-top: 48px;
+ }
+ @include breakpoint($overwide) {
+ padding-bottom: 78px;
+ padding-top: 48px;
+
+ //without sidebar
+ //padding-bottom: 92px;
+ //padding-top: 56px;
+ }
+ }
+
+ &__content-wrap-helper {
+ padding: 0 1rem;
+ padding-bottom: 32px;
+
+ @include breakpoint($narrow) {
+ padding: 0 2rem;
+ padding-bottom: 40px;
+ }
+ @include breakpoint($wide) {
+ padding: 0;
+
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ left: 0;
+ margin: 0;
+ order: 1;
+ position: relative;
+ top: 0;
+ width: 40%;
+ z-index: 2;
}
}
@@ -80,16 +124,10 @@
.hy-hero__content,
.hy-hero__title,
- .hy-hero__description {
- background-color: var(--brand-main-light);
- }
-
- .hy-hero__content--bottom {
+ .hy-hero__description,
+ .hy-hero__cta-link__container {
background-color: var(--brand-main-light);
-
- @include breakpoint($wide) {
- background-color: transparent;
- }
+ color: var(--grayscale-white);
}
}
@@ -103,14 +141,6 @@
background-color: var(--grayscale-black);
color: var(--grayscale-white);
}
-
- .hy-hero__content--bottom {
- background-color: var(--grayscale-black);
-
- @include breakpoint($wide) {
- background-color: transparent;
- }
- }
}
&--white {
@@ -123,127 +153,135 @@
background-color: var(--grayscale-white);
color: var(--grayscale-black);
}
+ }
- .hy-hero__cta-link {
- border-color: var(--grayscale-black);
-
- &__icon svg {
- fill: var(--grayscale-black);
- }
- }
-
- .hy-hero__content--bottom {
- background-color: var(--grayscale-white);
-
- @include breakpoint($wide) {
- background-color: transparent;
- }
+ &__title__container {
+ position: relative;
+ @include breakpoint($wide) {
+ width: 110%;
}
}
&__title {
- @include font-size(32px, 32px);
-
+ @include font-weight($bold);
+ box-decoration-break: clone;
color: var(--grayscale-white);
+ display: inline;
font-family: var(--main-font-family);
font-weight: bold;
- hyphens: auto;
- letter-spacing: -1.88px;
- margin-top: -32px;
- max-width: 80%;
- padding: 32px 32px 0 0;
+ letter-spacing: -0.75px;
+
+ margin-bottom: 12px;
+ max-width: 100%;
+ position: relative;
text-transform: uppercase;
- z-index: 2;
- @include breakpoint($medium) {
- @include font-size(48px, 54px);
- margin-top: -48px;
- padding: 48px 40px 0 0;
+ @include breakpoint($narrow) {
+ margin-bottom: 16px;
}
@include breakpoint($wide) {
- @include font-size(60px, 60px);
-
margin: 0;
- max-width: 56.94%;
- padding: 24px 24px 0 0;
- width: fit-content;
+ max-width: 100%;
+ padding: 24px 32px 16px 0;
+ }
+ @include breakpoint($extrawide) {
+ padding: 24px 32px 16px 0;
+ }
+ @include breakpoint($overwide) {
+ padding: 30px 40px 16px 0;
}
}
&__description {
- @include font-size(16px, 20px);
+ // Ingress Small
+ @include font-size(16px, 24px);
color: var(--grayscale-white);
font-family: var(--main-font-family);
font-weight: 600;
letter-spacing: -0.1px;
- padding: 24px 24px 32px 0;
+ margin: 12px 0 24px 0;
+ padding: 0;
@include breakpoint($narrow) {
- padding: 28px 24px 40px 0;
+ margin: 16px 0 24px 0;
+ max-width: 87%;
+
+ // Ingress Medium
+ @include font-size(18px, 28px);
+ letter-spacing: -0.1px;
}
@include breakpoint($wide) {
- @include font-size(18px, 24px);
+ @include font-size(18px, 28px);
+ letter-spacing: -0.1px;
- line-height: 32px;
- max-width: 48.33%;
- width: fit-content;
+ max-width: 100%;
+ margin: 0;
+ padding: 0 24px 20px 0;
}
- }
- &__cta-link {
- @include font-size(16px);
+ @include breakpoint($extrawide) {
+ margin: 0;
+ padding: 0 24px 20px 0;
+ }
- align-items: center;
- background-color: transparent;
- border: 2px solid var(--grayscale-white);
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
- box-sizing: border-box;
- color: inherit;
- cursor: pointer;
- display: flex;
- font-family: var(--main-font-family);
- font-weight: 600;
- height: 100%;
- justify-content: center;
- padding: 8px 12px 8px 12px;
- position: relative;
- text-decoration: none;
+ @include breakpoint($overwide) {
+ margin: 0;
+ padding: 0 40px 32px 0;
+ }
+ }
+ &__cta-link__container {
+ max-width: 100%;
@include breakpoint($wide) {
- @include font-size(18px);
+ max-width: 87%;
+ }
+ }
+}
- padding: 16px 24px 16px 24px;
+.hy-hero.large {
+ .hy-hero__content--container {
+ @include breakpoint($extrawide) {
+ padding-bottom: 78px;
+ padding-top: 48px;
+ }
+ @include breakpoint($overwide) {
+ padding-bottom: 92px;
+ padding-top: 56px;
}
+ }
- &__icon {
- margin-left: 1rem;
+ .hy-hero__content--container {
+ @include breakpoint($extrawide) {
+ //without sidebar
+ padding-bottom: 78px;
+ padding-top: 48px;
+ }
+ @include breakpoint($overwide) {
+ padding-bottom: 92px;
+ padding-top: 56px;
+ }
+ }
- svg {
- fill: var(--grayscale-white);
- }
+ .hy-hero__title {
+ @include breakpoint($extrawide) {
+ padding: 30px 40px 16px 0;
+ }
+ @include breakpoint($overwide) {
+ padding: 36px 48px 20px 0;
}
+ }
- &__container {
- background-color: var(--brand-main-light);
- color: var(--grayscale-white);
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- max-width: 320px;
- padding: 32px 0 40px 0;
- width: fit-content;
-
- @include breakpoint($narrow) {
- padding: 0 24px 48px 0;
- }
-
- @include breakpoint($wide) {
- align-self: flex-start;
- padding: 0 24px 56px 0;
- }
+ .hy-hero__description {
+ @include breakpoint($extrawide) {
+ margin: 0;
+ padding: 0 40px 32px 0;
+ }
+
+ @include breakpoint($overwide) {
+ padding: 0 40px 36px 0;
}
}
}
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index 4d6eb02681757cc1822b8feeee9132211ef62a71..8c9a6bb6d5707a7abb4eee37cb7d665583e515af 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -1,6 +1,7 @@
-import {Component, Host, h, Prop, Element} from '@stencil/core';
+import {Component, Host, h, Listen, Prop, Element} from '@stencil/core';
import {HeroColorVariant} from '../../utils/utils';
import {HeadingVarians, HeadingSectionVariants} from '../../utils/utils';
+import {CtaLinkButtonVariants} from '../../utils/utils';
@Component({
tag: 'hy-hero',
@@ -16,9 +17,71 @@ export class HyHero {
@Prop() url: string;
@Prop() urlTitle: string;
@Prop() scLabel?: string;
+ @Prop() headerstyle: string = 'common';
+
+ componentDidLoad() {
+ let hyMainDiv = this.el.closest('.hy-main');
+ if (hyMainDiv) {
+ if (!hyMainDiv.classList.contains('with-sidebar')) {
+ this.headerstyle = 'large';
+ }
+ }
+
+ this.setContentDivPosition();
+ }
+
+ setContentDivPosition() {
+ const contentDiv = document.querySelectorAll('.hy-hero__content--container')[0];
+ if (contentDiv) {
+ if (document.body.scrollWidth <= 480) {
+ // mobile
+ (contentDiv as HTMLElement).style.left = '0px';
+ return;
+ } else if (document.body.scrollWidth <= 960) {
+ //tablet
+ (contentDiv as HTMLElement).style.left = '0px';
+ return;
+ } else if (document.body.scrollWidth <= 1200) {
+ //small desktop
+ (contentDiv as HTMLElement).style.left = '0px';
+ return;
+ } else if (document.body.scrollWidth >= 1201) {
+ const contentWrapper = document.querySelectorAll('div.hy-main-content-wrapper')[0];
+ if (contentWrapper) {
+ if (document.body.scrollWidth >= 1441) {
+ var ml = window.getComputedStyle(contentWrapper).getPropertyValue('margin-left');
+
+ if (ml !== '0px') {
+ (contentDiv as HTMLElement).style.left = ml;
+ return;
+ } else {
+ (contentDiv as HTMLElement).style.left = '32px';
+ const hyHero = document.querySelectorAll('.hy-hero')[0];
+ if (hyHero) {
+ (hyHero as HTMLElement).style.marginLeft = '-32px';
+ (hyHero as HTMLElement).style.marginRight = '-32px';
+ }
+ return;
+ }
+ } else {
+ var pl = window.getComputedStyle(contentWrapper).getPropertyValue('padding-left');
+ (contentDiv as HTMLElement).style.left = pl;
+ return;
+ }
+ }
+ }
+ }
+ }
+
+ @Listen('resize', {target: 'window'})
+ resizeEventListener(event) {
+ if (!event) return;
+
+ this.setContentDivPosition();
+ }
render() {
- const classAttributes = ['hy-hero', `hy-hero--${this.colorVariant}`].join(' ');
+ const classAttributes = ['hy-hero', `hy-hero--${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
const aspectRatioWidth = 8;
const aspectRatioHeight = 5;
@@ -27,38 +90,55 @@ export class HyHero {
'--aspectRatio': `${aspect}%` as 'aspectRatio',
};
+ var variant = CtaLinkButtonVariants.onBlueBkgd;
+
+ if (this.colorVariant == HeroColorVariant.black) {
+ variant = CtaLinkButtonVariants.onBlackBkgd;
+ } else if (this.colorVariant == HeroColorVariant.white) {
+ variant = CtaLinkButtonVariants.onTransparentBkgd;
+ }
+
return (
<Host>
<div class={classAttributes}>
- <div class="hy-hero__image-container" style={aspectRatio}>
- <img alt={this.scLabel} class="hy-image__image" src={this.image} />
- </div>
- <div class="hy-hero__content"></div>
- <div class="hy-hero__content-wrap-helper">
- <hy-main-content-wrapper>
- <div class="hy-hero__content--container">
- <hy-heading
- class="hy-hero__title"
- heading={HeadingVarians.default}
- section={HeadingSectionVariants.introduction}
- >
- {this.heading}
- </hy-heading>
- <div class="hy-hero__content--bottom">
- {this.description && <div class="hy-hero__description">{this.description}</div>}
- {this.url && (
- <div class="hy-hero__cta-link__container">
- <a href={this.url} class="hy-hero__cta-link" aria-label={this.scLabel}>
- {this.urlTitle}
- <span class="hy-hero__cta-link__icon">
- <hy-icon icon={'hy-icon-arrow-right'} size={26} />
- </span>
- </a>
- </div>
- )}
+ <div>
+ <div class="hy-hero__desktop-container">
+ <div class="hy-hero__image-container" style={aspectRatio}>
+ <img alt={this.scLabel} class="hy-image__image" src={this.image} />
+ </div>
+ <div class="hy-hero__content"></div>
+ <div class="hy-hero__content-wrap-helper">
+ <div class="hy-hero__content--container">
+ <div class="hy-hero__title__container">
+ <hy-heading
+ class="hy-hero__title"
+ heading={HeadingVarians.default}
+ section={HeadingSectionVariants.introduction}
+ >
+ {this.heading}
+ </hy-heading>
+ </div>
+ <div class="hy-hero__content--bottom">
+ {this.description && (
+ <div class="hy-hero__description__container">
+ <div class="hy-hero__description">{this.description}</div>
+ </div>
+ )}
+ {this.url && (
+ <div class="hy-hero__cta-link__container">
+ <hy-cta-button
+ link-content={this.urlTitle}
+ sc-label={this.scLabel}
+ url={this.url}
+ is-external="false"
+ variant={variant}
+ />
+ </div>
+ )}
+ </div>
</div>
</div>
- </hy-main-content-wrapper>
+ </div>
</div>
</div>
</Host>
diff --git a/src/components/hy-hero/readme.md b/src/components/hy-hero/readme.md
index 70bfe359cfc292c670176a36213acb7bc586c97a..0c0a5a0967b4586d91ccbe4d70fd1e52b9f3fb26 100644
--- a/src/components/hy-hero/readme.md
+++ b/src/components/hy-hero/readme.md
@@ -8,6 +8,7 @@
| -------------- | --------------- | ----------- | --------------------------------------------------------------------------- | ----------------------- |
| `colorVariant` | `color-variant` | | `HeroColorVariant.black \| HeroColorVariant.blue \| HeroColorVariant.white` | `HeroColorVariant.blue` |
| `description` | `description` | | `string` | `undefined` |
+| `headerstyle` | `headerstyle` | | `string` | `'common'` |
| `heading` | `heading` | | `string` | `undefined` |
| `image` | `image` | | `string` | `undefined` |
| `scLabel` | `sc-label` | | `string` | `undefined` |
@@ -18,17 +19,16 @@
### Depends on
-- [hy-main-content-wrapper](../hy-main-content-wrapper)
- [hy-heading](../heading)
-- [hy-icon](../icon)
+- [hy-cta-button](../cta-button)
### Graph
```mermaid
graph TD;
- hy-hero --> hy-main-content-wrapper
hy-hero --> hy-heading
- hy-hero --> hy-icon
+ hy-hero --> hy-cta-button
+ hy-cta-button --> hy-icon
style hy-hero fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/hy-main-content-wrapper/readme.md b/src/components/hy-main-content-wrapper/readme.md
index e15d1902331c992acf50f10e53f829c6f2c91df4..81487d091584727d5093d2790443439d2edef8b6 100644
--- a/src/components/hy-main-content-wrapper/readme.md
+++ b/src/components/hy-main-content-wrapper/readme.md
@@ -7,7 +7,6 @@
### Used by
- [hy-banner](../hy-banner)
-- [hy-hero](../hy-hero)
- [hy-introduction](../hy-introduction)
### Graph
@@ -15,7 +14,6 @@
```mermaid
graph TD;
hy-banner --> hy-main-content-wrapper
- hy-hero --> hy-main-content-wrapper
hy-introduction --> hy-main-content-wrapper
style hy-main-content-wrapper fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 82e396ca8c7f096fe8db7b0202ec8d1ae892407c..7249c6c86eb29895489365e779e39cb628608a87 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -22,7 +22,6 @@
- [hy-footer-action](../footer/hy-footer-action)
- [hy-footer-base](../footer/hy-footer-base)
- [hy-footer-link-item](../footer/hy-footer-link-item)
-- [hy-hero](../hy-hero)
- [hy-introduction](../hy-introduction)
- [hy-link-box](../link-box)
- [hy-menu-item](../navigation/menu-item)
@@ -47,7 +46,6 @@ graph TD;
hy-footer-action --> hy-icon
hy-footer-base --> hy-icon
hy-footer-link-item --> hy-icon
- hy-hero --> hy-icon
hy-introduction --> hy-icon
hy-link-box --> hy-icon
hy-menu-item --> hy-icon
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 5b2c68b2b70afd7dc4d49826457ec50b81d5f8a8..7a2b0cbe8d23345111cd7bc0c7e340fa8c9be22b 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -48,6 +48,8 @@ export enum CtaLinkButtonVariants {
default = 'default',
onBlueBkgd = 'blue-background',
onWhiteBkgd = 'white-background',
+ onBlackBkgd = 'black-background',
+ onTransparentBkgd = 'transparent-background',
}
export enum ProcessFlowBoxVariants {