From 5af4c6dbf446f372370df7d766344812a3125234 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Wed, 27 Jan 2021 15:53:57 +0200
Subject: [PATCH] Refactor hy-hero structure [WIP]
---
src/components/heading/heading.tsx | 4 +-
src/components/hy-hero/hy-hero.scss | 770 ++++++++++++++++++----------
src/components/hy-hero/hy-hero.tsx | 80 ++-
3 files changed, 543 insertions(+), 311 deletions(-)
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index 5f33549f..ee5ccfae 100644
--- a/src/components/heading/heading.tsx
+++ b/src/components/heading/heading.tsx
@@ -68,7 +68,9 @@ export class Heading {
) : (
<div class={containerSectionClass}>
<HeadingVarians.default class={classAttributes.join(' ')}>
- <slot />
+ <span>
+ <slot />
+ </span>
</HeadingVarians.default>
<span class={sectionClassAttributes}></span>
diff --git a/src/components/hy-hero/hy-hero.scss b/src/components/hy-hero/hy-hero.scss
index 110d1457..2e482c92 100644
--- a/src/components/hy-hero/hy-hero.scss
+++ b/src/components/hy-hero/hy-hero.scss
@@ -3,150 +3,37 @@
}
.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;
- }
+ &--blue {
+ background-color: var(--brand-main-light);
- // No sidebar, large screens
- &__large {
- @include breakpoint($extrawide) {
- padding-bottom: 78px;
- padding-top: 48px;
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ span {
+ color: var(--grayscale-white);
+ }
}
- @include breakpoint($xlarge) {
- 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;
- 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);
+ h1 {
+ color: var(--grayscale-white);
+ }
- .hy-hero__title__overlay h1 {
- background-color: var(--brand-main-light);
- color: transparent !important;
+ &--overlay {
+ span {
+ 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__cta-link__container {
+ .hy-hero__actions {
background-color: var(--brand-main-light);
color: var(--grayscale-white);
}
@@ -155,14 +42,34 @@
&--black {
background-color: var(--grayscale-black);
- .hy-hero__title__overlay h1 {
- background-color: var(--grayscale-black);
- color: transparent !important;
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ 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__cta-link__container {
+ .hy-hero__actions {
background-color: var(--grayscale-black);
color: var(--grayscale-white);
}
@@ -171,169 +78,508 @@
&--white {
background-color: var(--grayscale-white);
- .hy-hero__title__overlay h1 {
- background-color: var(--grayscale-white);
- color: transparent !important;
+ .hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ 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__cta-link__container {
+ .hy-hero__actions {
background-color: var(--grayscale-white);
color: var(--grayscale-black);
}
}
+}
- &__title__container {
- position: relative;
- padding-bottom: 1rem;
-
- @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 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;
- }
+.hy-hero__image-container {
+ background-position: 50% 50%;
+ background-size: cover;
+ background: transparent;
+ margin: 0;
+ padding: 0;
+ position: relative;
- @include breakpoint($xlarge) {
- padding: 0 40px 32px 0;
- }
+ // @include breakpoint($wide) {
+ // background: white;
+ // order: 2;
+ // padding: 6px 0;
+ // width: 60%;
+ // z-index: 1;
+ // }
+}
- // No sidebar, large desktop screens
- &__large {
- @include breakpoint($extrawide) {
- padding: 0 40px 32px 0;
- }
+.hy-image__image {
+ display: block;
+ height: 100%;
+ min-height: 205px;
+ object-fit: cover;
+ width: 100%;
+}
- @include breakpoint($xlarge) {
- padding: 0 40px 36px 0;
- }
- }
- }
+.hy-hero__content {
+ padding: 0 1rem 2rem;
- &__cta-link__container {
- max-width: 100%;
- @include breakpoint($wide) {
- max-width: 87%;
- }
+ @include breakpoint($narrow) {
+ padding: 0 2rem 40px;
}
}
-.hy-hero__title {
- z-index: 2;
+.hy-hero__title-container {
+ position: relative;
}
-.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;
- }
+.hy-hero__title {
+ &:not(.hy-hero__title--overlay) {
+ position: relative;
+ z-index: 10;
- h1 {
- display: inline;
+ span {
+ color: var(--grayscale-black);
}
}
- .hy-hero__title__overlay h1 {
+ h1 {
+ @include font-weight($bold);
box-decoration-break: clone;
+ color: var(--grayscale-black);
+ display: inline-block !important;
display: inline;
- margin-left: -32px;
- padding: 16px 16px 16px 32px !important;
+ font-family: var(--main-font-family);
+ 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) {
- margin-left: -32px;
- padding: 16px 16px 16px 32px !important;
+ max-width: 87% !important;
}
- @include breakpoint($wide) {
- margin-left: 0;
- padding: 16px 16px 16px 0 !important;
+ span {
+ padding-top: 16px;
+
+ @include breakpoint($narrow) {
+ padding-top: 32px;
+ }
}
}
-}
-.hy-hero__title,
-.hy-hero__title__overlay h1 {
- @include font-weight($bold);
+ &--overlay {
+ left: 0;
+ position: absolute;
+ top: 0;
- 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%;
+ span {
+ display: inline;
+ position: relative;
+ }
}
}
-.hy-hero__title h1,
-.hy-hero__title__overlay > h1 {
- padding: 1rem;
+.hy-hero__description {
+ // Ingress Small
+ @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) {
- margin-bottom: 16px;
+ margin: 16px 0 24px 0;
+
+ // Ingress Medium
+ @include font-size(18px, 28px);
+ letter-spacing: -0.1px;
}
@include breakpoint($wide) {
- margin: 0;
+ @include font-size(18px, 28px);
+ letter-spacing: -0.1px;
+
max-width: 100%;
- padding: 16px 32px 16px 0;
+ margin: 9px 0 0;
+ padding: 0 24px 20px 0;
}
+
@include breakpoint($extrawide) {
- padding: 16px 32px 16px 0;
+ margin: 9px 0 0;
+ padding: 0 24px 20px 0;
}
+
@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;
+// }
+// }
diff --git a/src/components/hy-hero/hy-hero.tsx b/src/components/hy-hero/hy-hero.tsx
index c45c58b2..6155f6e8 100644
--- a/src/components/hy-hero/hy-hero.tsx
+++ b/src/components/hy-hero/hy-hero.tsx
@@ -67,10 +67,7 @@ export class HyHero {
render() {
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 classContentContainer = [
- 'hy-hero__content--container',
- `hy-hero__content--container__${this.headerstyle}`,
- ].join(' ');
+ const classContentContainer = ['hy-hero__content', `hy-hero__content--${this.headerstyle}`].join(' ');
const aspectRatioWidth = 8;
const aspectRatioHeight = 5;
@@ -90,52 +87,39 @@ export class HyHero {
return (
<Host>
<div class={classAttributes}>
- <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 class="hy-hero__container">
+ <figure class="hy-hero__image-container" style={aspectRatio}>
+ <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 class="hy-hero__content"></div>
- <div class="hy-hero__content-wrap-helper">
- <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>
- <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>
+ {this.description && <p class={classDescription}>{this.description}</p>}
+ {this.url && (
+ <div class="hy-hero__actions">
+ <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>
--
GitLab