Skip to content
Snippets Groups Projects
Commit 5af4c6db authored by shamalainen's avatar shamalainen
Browse files

Refactor hy-hero structure [WIP]

parent f7d16ce2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/heading/heading.tsx
+ 3
− 1
View file @ 5af4c6db
...@@ -68,7 +68,9 @@ export class Heading { ...@@ -68,7 +68,9 @@ export class Heading {
) : ( ) : (
<div class={containerSectionClass}> <div class={containerSectionClass}>
<HeadingVarians.default class={classAttributes.join(' ')}> <HeadingVarians.default class={classAttributes.join(' ')}>
<slot /> <span>
<slot />
</span>
</HeadingVarians.default> </HeadingVarians.default>
<span class={sectionClassAttributes}></span> <span class={sectionClassAttributes}></span>
......
src/components/hy-hero/hy-hero.scss
+ 508
− 262
View file @ 5af4c6db
...@@ -3,150 +3,37 @@ ...@@ -3,150 +3,37 @@
} }
.hy-hero { .hy-hero {
position: relative; &--blue {
background-color: var(--brand-main-light);
@include breakpoint($wide) {
margin-left: 0;
margin-right: 0;
}
@include breakpoint($xlarge) {
margin-left: -32px;
padding-left: 32px;
}
// No sidebar, >1200px styles
&__large {
@include breakpoint($xlarge) {
margin-left: 0;
padding-left: 0;
}
}
&__desktop-container {
@include breakpoint($wide) {
display: flex;
}
}
&__image-container {
background: transparent;
background-position: 50% 50%;
background-size: cover;
position: relative;
@include breakpoint($wide) {
background: white;
order: 2;
padding: 6px 0;
width: 60%;
z-index: 1;
}
img.hy-image__image {
height: 100%;
min-height: 205px;
object-fit: cover;
width: 100%;
}
}
&__content {
display: none;
margin-right: 24px;
margin-top: -24px;
min-height: 24px;
max-width: 100%;
position: relative;
@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;
}
}
&__content--bottom {
@include breakpoint($extrawide) {
margin-right: 32px;
}
}
&__content--container {
position: relative;
@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;
}
@include breakpoint($xlarge) {
padding-bottom: 78px;
padding-top: 48px;
}
// No sidebar, large screens .hy-hero__title {
&__large { &:not(.hy-hero__title--overlay) {
@include breakpoint($extrawide) { span {
padding-bottom: 78px; color: var(--grayscale-white);
padding-top: 48px; }
} }
@include breakpoint($xlarge) {
padding-bottom: 92px;
padding-top: 56px;
}
}
}
&__content-wrap-helper {
padding: 0 1rem;
padding-bottom: 32px;
@include breakpoint($narrow) { h1 {
padding: 0 2rem; color: var(--grayscale-white);
padding-bottom: 40px; }
}
@include breakpoint($wide) {
padding: 0;
align-self: center;
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;
}
}
&--blue {
background-color: var(--brand-main-light);
.hy-hero__title__overlay h1 { &--overlay {
background-color: var(--brand-main-light); span {
color: transparent !important; background-color: var(--brand-main-light);
box-shadow: 24px 0 0 var(--brand-main-light), -24px 0 0 var(--brand-main-light);
color: var(--brand-main-light);
display: inline;
position: relative;
@include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--brand-main-light), -48px 0 0 var(--brand-main-light);
}
}
}
} }
.hy-hero__content,
.hy-hero__description, .hy-hero__description,
.hy-hero__cta-link__container { .hy-hero__actions {
background-color: var(--brand-main-light); background-color: var(--brand-main-light);
color: var(--grayscale-white); color: var(--grayscale-white);
} }
...@@ -155,14 +42,34 @@ ...@@ -155,14 +42,34 @@
&--black { &--black {
background-color: var(--grayscale-black); background-color: var(--grayscale-black);
.hy-hero__title__overlay h1 { .hy-hero__title {
background-color: var(--grayscale-black); &:not(.hy-hero__title--overlay) {
color: transparent !important; span {
color: var(--grayscale-white);
}
}
h1 {
color: var(--grayscale-white);
}
&--overlay {
span {
background-color: var(--grayscale-black);
box-shadow: 24px 0 0 var(--grayscale-black), -24px 0 0 var(--grayscale-black);
color: var(--grayscale-black);
display: inline;
position: relative;
@include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--grayscale-black), -48px 0 0 var(--grayscale-black);
}
}
}
} }
.hy-hero__content,
.hy-hero__description, .hy-hero__description,
.hy-hero__cta-link__container { .hy-hero__actions {
background-color: var(--grayscale-black); background-color: var(--grayscale-black);
color: var(--grayscale-white); color: var(--grayscale-white);
} }
...@@ -171,169 +78,508 @@ ...@@ -171,169 +78,508 @@
&--white { &--white {
background-color: var(--grayscale-white); background-color: var(--grayscale-white);
.hy-hero__title__overlay h1 { .hy-hero__title {
background-color: var(--grayscale-white); &:not(.hy-hero__title--overlay) {
color: transparent !important; span {
color: var(--grayscale-black);
}
}
h1 {
color: var(--grayscale-black);
}
&--overlay {
span {
background-color: var(--grayscale-white);
box-shadow: 24px 0 0 var(--grayscale-white), -24px 0 0 var(--grayscale-white);
color: var(--grayscale-white);
display: inline;
position: relative;
@include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--grayscale-white), -48px 0 0 var(--grayscale-white);
}
}
}
} }
.hy-hero__content,
.hy-hero__description, .hy-hero__description,
.hy-hero__cta-link__container { .hy-hero__actions {
background-color: var(--grayscale-white); background-color: var(--grayscale-white);
color: var(--grayscale-black); color: var(--grayscale-black);
} }
} }
}
&__title__container { .hy-hero__image-container {
position: relative; background-position: 50% 50%;
padding-bottom: 1rem; background-size: cover;
background: transparent;
@include breakpoint($wide) { margin: 0;
width: 110%; padding: 0;
} position: relative;
}
&__description {
// Ingress Small
@include font-size(16px, 24px);
color: var(--grayscale-white);
font-family: var(--main-font-family);
font-weight: 600;
letter-spacing: -0.1px;
margin: 12px 0 24px 0;
padding: 0;
@include breakpoint($narrow) {
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, 28px);
letter-spacing: -0.1px;
max-width: 100%;
margin: 9px 0 0;
padding: 0 24px 20px 0;
}
@include breakpoint($extrawide) {
margin: 9px 0 0;
padding: 0 24px 20px 0;
}
@include breakpoint($xlarge) { // @include breakpoint($wide) {
padding: 0 40px 32px 0; // background: white;
} // order: 2;
// padding: 6px 0;
// width: 60%;
// z-index: 1;
// }
}
// No sidebar, large desktop screens .hy-image__image {
&__large { display: block;
@include breakpoint($extrawide) { height: 100%;
padding: 0 40px 32px 0; min-height: 205px;
} object-fit: cover;
width: 100%;
}
@include breakpoint($xlarge) { .hy-hero__content {
padding: 0 40px 36px 0; padding: 0 1rem 2rem;
}
}
}
&__cta-link__container { @include breakpoint($narrow) {
max-width: 100%; padding: 0 2rem 40px;
@include breakpoint($wide) {
max-width: 87%;
}
} }
} }
.hy-hero__title { .hy-hero__title-container {
z-index: 2; position: relative;
} }
.hy-hero__title__overlay--container { .hy-hero__title {
left: 0; &:not(.hy-hero__title--overlay) {
opacity: 1; position: relative;
position: absolute; z-index: 10;
top: 0;
.hy-hero__title__overlay {
.hy-heading__container.hy-heading__container__common,
.hy-heading__container.sc-hy-heading-wide {
display: block;
}
h1 { span {
display: inline; color: var(--grayscale-black);
} }
} }
.hy-hero__title__overlay h1 { h1 {
@include font-weight($bold);
box-decoration-break: clone; box-decoration-break: clone;
color: var(--grayscale-black);
display: inline-block !important;
display: inline; display: inline;
margin-left: -32px; font-family: var(--main-font-family);
padding: 16px 16px 16px 32px !important; font-weight: bold;
hyphens: auto;
letter-spacing: -0.75px;
margin-bottom: 12px;
max-width: 100%;
position: relative;
text-transform: uppercase;
word-wrap: break-word;
@include breakpoint($narrow) { @include breakpoint($narrow) {
margin-left: -32px; max-width: 87% !important;
padding: 16px 16px 16px 32px !important;
} }
@include breakpoint($wide) { span {
margin-left: 0; padding-top: 16px;
padding: 16px 16px 16px 0 !important;
@include breakpoint($narrow) {
padding-top: 32px;
}
} }
} }
}
.hy-hero__title, &--overlay {
.hy-hero__title__overlay h1 { left: 0;
@include font-weight($bold); position: absolute;
top: 0;
box-decoration-break: clone; span {
display: inline; display: inline;
color: var(--grayscale-white); position: relative;
font-family: var(--main-font-family); }
font-weight: bold;
letter-spacing: -0.75px;
word-wrap: break-word;
hyphens: auto;
margin-bottom: 12px;
max-width: 100%;
position: relative;
text-transform: uppercase;
@include breakpoint($narrow) {
margin-bottom: 16px;
}
@include breakpoint($wide) {
margin: 0;
max-width: 100%;
} }
} }
.hy-hero__title h1, .hy-hero__description {
.hy-hero__title__overlay > h1 { // Ingress Small
padding: 1rem; @include font-size(16px, 24px);
color: var(--grayscale-black);
font-family: var(--main-font-family);
font-weight: 600;
letter-spacing: -0.1px;
margin: 12px 0 20px 0;
padding: 0;
@include breakpoint($narrow) { @include breakpoint($narrow) {
margin-bottom: 16px; margin: 16px 0 24px 0;
// Ingress Medium
@include font-size(18px, 28px);
letter-spacing: -0.1px;
} }
@include breakpoint($wide) { @include breakpoint($wide) {
margin: 0; @include font-size(18px, 28px);
letter-spacing: -0.1px;
max-width: 100%; max-width: 100%;
padding: 16px 32px 16px 0; margin: 9px 0 0;
padding: 0 24px 20px 0;
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
padding: 16px 32px 16px 0; margin: 9px 0 0;
padding: 0 24px 20px 0;
} }
@include breakpoint($xlarge) { @include breakpoint($xlarge) {
padding: 16px 40px 16px 0; padding: 0 40px 32px 0;
}
// No sidebar, large desktop screens
&__large {
@include breakpoint($extrawide) {
padding: 0 40px 32px 0;
}
@include breakpoint($xlarge) {
padding: 0 40px 36px 0;
}
} }
} }
// .hy-hero {
// position: relative;
// @include breakpoint($wide) {
// margin-left: 0;
// margin-right: 0;
// }
// @include breakpoint($xlarge) {
// margin-left: -32px;
// padding-left: 32px;
// }
// // No sidebar, >1200px styles
// &__large {
// @include breakpoint($xlarge) {
// margin-left: 0;
// padding-left: 0;
// }
// }
// &__desktop-container {
// @include breakpoint($wide) {
// display: flex;
// }
// }
// &__image-container {
// background: transparent;
// background-position: 50% 50%;
// background-size: cover;
// position: relative;
// @include breakpoint($wide) {
// background: white;
// order: 2;
// padding: 6px 0;
// width: 60%;
// z-index: 1;
// }
// img.hy-image__image {
// height: 100%;
// min-height: 205px;
// object-fit: cover;
// width: 100%;
// }
// }
// &__content {
// display: none;
// margin-right: 24px;
// margin-top: -24px;
// min-height: 24px;
// max-width: 100%;
// position: relative;
// @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;
// }
// }
// &__content--bottom {
// @include breakpoint($extrawide) {
// margin-right: 32px;
// }
// }
// &__content--container {
// position: relative;
// @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;
// }
// @include breakpoint($xlarge) {
// padding-bottom: 78px;
// padding-top: 48px;
// }
// // No sidebar, large screens
// &__large {
// @include breakpoint($extrawide) {
// padding-bottom: 78px;
// padding-top: 48px;
// }
// @include breakpoint($xlarge) {
// padding-bottom: 92px;
// padding-top: 56px;
// }
// }
// }
// &__content-wrap-helper {
// padding: 1rem;
// padding-bottom: 32px;
// @include breakpoint($narrow) {
// padding: 0 32px 40px;
// }
// @include breakpoint($wide) {
// align-self: center;
// display: flex;
// flex-direction: column;
// height: 100%;
// justify-content: center;
// left: 0;
// margin: 0;
// order: 1;
// padding: 0;
// position: relative;
// top: 0;
// width: 40%;
// z-index: 2;
// }
// }
// &--blue {
// background-color: var(--brand-main-light);
// .hy-hero__title__overlay h1 {
// background-color: var(--brand-main-light);
// color: transparent !important;
// }
// .hy-hero__content,
// .hy-hero__description,
// .hy-hero__cta-link__container {
// background-color: var(--brand-main-light);
// color: var(--grayscale-white);
// }
// }
// &--black {
// background-color: var(--grayscale-black);
// .hy-hero__title__overlay h1 {
// background-color: var(--grayscale-black);
// color: transparent !important;
// }
// .hy-hero__content,
// .hy-hero__description,
// .hy-hero__cta-link__container {
// background-color: var(--grayscale-black);
// color: var(--grayscale-white);
// }
// }
// &--white {
// background-color: var(--grayscale-white);
// .hy-hero__title__overlay h1 {
// background-color: var(--grayscale-white);
// color: transparent !important;
// }
// .hy-hero__content,
// .hy-hero__description,
// .hy-hero__cta-link__container {
// background-color: var(--grayscale-white);
// color: var(--grayscale-black);
// }
// }
// &__title__container {
// position: relative;
// @include breakpoint($wide) {
// width: 110%;
// }
// }
// &__description {
// // Ingress Small
// @include font-size(16px, 24px);
// color: var(--grayscale-white);
// font-family: var(--main-font-family);
// font-weight: 600;
// letter-spacing: -0.1px;
// margin: 12px 0 20px 0;
// padding: 0;
// @include breakpoint($narrow) {
// 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, 28px);
// letter-spacing: -0.1px;
// max-width: 100%;
// margin: 9px 0 0;
// padding: 0 24px 20px 0;
// }
// @include breakpoint($extrawide) {
// margin: 9px 0 0;
// padding: 0 24px 20px 0;
// }
// @include breakpoint($xlarge) {
// padding: 0 40px 32px 0;
// }
// // No sidebar, large desktop screens
// &__large {
// @include breakpoint($extrawide) {
// padding: 0 40px 32px 0;
// }
// @include breakpoint($xlarge) {
// padding: 0 40px 36px 0;
// }
// }
// }
// &__cta-link__container {
// max-width: 100%;
// @include breakpoint($wide) {
// max-width: 87%;
// }
// }
// }
// .hy-hero__title {
// z-index: 2;
// }
// .hy-hero__title__overlay--container {
// left: 0;
// opacity: 1;
// position: absolute;
// top: 0;
// .hy-hero__title__overlay {
// .hy-heading__container.hy-heading__container__common,
// .hy-heading__container.sc-hy-heading-wide {
// display: block;
// }
// h1 {
// display: inline;
// }
// }
// .hy-hero__title__overlay h1 {
// box-decoration-break: clone;
// display: inline;
// // margin-left: -32px;
// // padding: 16px 16px 16px 32px !important;
// @include breakpoint($narrow) {
// margin-left: -32px;
// padding: 16px 16px 16px 32px !important;
// }
// @include breakpoint($wide) {
// margin-left: 0;
// padding: 16px 16px 16px 0 !important;
// }
// }
// }
// .hy-hero__title,
// .hy-hero__title__overlay h1 {
// @include font-weight($bold);
// box-decoration-break: clone;
// display: inline;
// color: var(--grayscale-white);
// font-family: var(--main-font-family);
// font-weight: bold;
// letter-spacing: -0.75px;
// word-wrap: break-word;
// hyphens: auto;
// margin-bottom: 12px;
// max-width: 100%;
// position: relative;
// text-transform: uppercase;
// @include breakpoint($narrow) {
// // margin-bottom: 16px;
// }
// @include breakpoint($wide) {
// margin: 0;
// max-width: 100%;
// }
// }
// .hy-hero__title h1,
// .hy-hero__title__overlay > h1 {
// padding: 1rem;
// @include breakpoint($narrow) {
// // margin-bottom: 16px;
// }
// @include breakpoint($wide) {
// margin: 0;
// max-width: 100%;
// padding: 16px 32px 16px 0;
// }
// @include breakpoint($extrawide) {
// padding: 16px 32px 16px 0;
// }
// @include breakpoint($xlarge) {
// padding: 16px 40px 16px 0;
// }
// }
src/components/hy-hero/hy-hero.tsx
+ 32
− 48
View file @ 5af4c6db
...@@ -67,10 +67,7 @@ export class HyHero { ...@@ -67,10 +67,7 @@ export class HyHero {
render() { render() {
const classAttributes = ['hy-hero', `hy-hero__${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' '); const classAttributes = ['hy-hero', `hy-hero__${this.headerstyle}`, `hy-hero--${this.colorVariant}`].join(' ');
const classDescription = ['hy-hero__description', `hy-hero__description__${this.headerstyle}`].join(' '); const classDescription = ['hy-hero__description', `hy-hero__description__${this.headerstyle}`].join(' ');
const classContentContainer = [ const classContentContainer = ['hy-hero__content', `hy-hero__content--${this.headerstyle}`].join(' ');
'hy-hero__content--container',
`hy-hero__content--container__${this.headerstyle}`,
].join(' ');
const aspectRatioWidth = 8; const aspectRatioWidth = 8;
const aspectRatioHeight = 5; const aspectRatioHeight = 5;
...@@ -90,52 +87,39 @@ export class HyHero { ...@@ -90,52 +87,39 @@ export class HyHero {
return ( return (
<Host> <Host>
<div class={classAttributes}> <div class={classAttributes}>
<div> <div class="hy-hero__container">
<div class="hy-hero__desktop-container"> <figure class="hy-hero__image-container" style={aspectRatio}>
<div class="hy-hero__image-container" style={aspectRatio}> <img alt={this.scLabel} class="hy-image__image" src={this.image} />
<img alt={this.scLabel} class="hy-image__image" src={this.image} /> </figure>
<div class={classContentContainer}>
<div class="hy-hero__title-container">
<hy-heading
class="hy-hero__title"
heading={HeadingVarians.default}
section={HeadingSectionVariants.introduction}
>
{this.heading}
</hy-heading>
<hy-heading
class="hy-hero__title hy-hero__title--overlay"
heading={HeadingVarians.default}
section={HeadingSectionVariants.introduction}
>
{this.heading}
</hy-heading>
</div> </div>
<div class="hy-hero__content"></div> {this.description && <p class={classDescription}>{this.description}</p>}
<div class="hy-hero__content-wrap-helper"> {this.url && (
<div class={classContentContainer}> <div class="hy-hero__actions">
<div class="hy-hero__title__container"> <hy-cta-button
<hy-heading link-content={this.urlTitle}
class="hy-hero__title" sc-label={this.scLabel}
heading={HeadingVarians.default} url={this.url}
section={HeadingSectionVariants.introduction} is-external={this.isExternal}
> variant={variant}
{this.heading} />
</hy-heading>
<div class="hy-hero__title__overlay--container">
<hy-heading
class="hy-hero__title__overlay"
heading={HeadingVarians.default}
section={HeadingSectionVariants.introduction}
>
{this.heading}
</hy-heading>
</div>
</div>
<div class="hy-hero__content--bottom">
{this.description && (
<div class="hy-hero__description__container">
<div class={classDescription}>{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={this.isExternal}
variant={variant}
/>
</div>
)}
</div>
</div> </div>
</div> )}
</div> </div>
</div> </div>
</div> </div>
......
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