From 936b9e92c5dd8c2f1f03ecd6097eb5e203503fd7 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Wed, 29 Nov 2023 18:06:13 -0300 Subject: [PATCH] refactor(cxl-ui): cxl-section - improve hero responsiveness and visual balance --- packages/cxl-lumo-styles/scss/_mixins.scss | 35 ++++++++++++++++--- packages/cxl-ui/scss/cxl-section.scss | 21 +++++++++-- packages/cxl-ui/scss/global/cxl-section.scss | 19 ++++++++-- .../cxl-ui/cxl-section/cxl-section.stories.js | 24 ++++++++++--- 4 files changed, 85 insertions(+), 14 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/_mixins.scss b/packages/cxl-lumo-styles/scss/_mixins.scss index 1071e65a..2a9364b9 100644 --- a/packages/cxl-lumo-styles/scss/_mixins.scss +++ b/packages/cxl-lumo-styles/scss/_mixins.scss @@ -66,8 +66,7 @@ background-position: bottom right calc(50vw + clamp(48px,5%,100px)) !important; &::before { - right: 47%; - height: 60%; + right: 50%; border-top-left-radius: 0; border-bottom-left-radius: 0; } @@ -77,13 +76,41 @@ background-position: bottom left calc(50vw + clamp(48px,5%,100px)) !important; &::before { - left: 47%; - height: 60%; + left: 50%; border-top-right-radius: 0; border-bottom-right-radius: 0; } } +@mixin wide-background-header { + &::before { + height: clamp(164px, calc(2 * var(--figure-height-factor)), calc(100 * var(--figure-height-factor))/2); + bottom: 50%; + transform: translateY(50%); + } +} + +// Use ::after pseudo element to add hero background image. url must be set to CSS custom property --hero-image +@mixin wide-background-header-image { + &::after { + content: ""; + position: absolute; + left: 55%; + width: 100%; + height: clamp(calc(50% + 82px), calc(50% + var(--figure-height-factor)), calc(50% + var(--figure-height-factor))); + max-height: calc(50% + var(--figure-height-factor)); + background-image: var(--hero-image); + background-repeat: no-repeat !important; + background-size: auto clamp(65%, 40vw, 100%) !important; + background-position-x: left !important; + background-position-y: bottom; + overflow: visible; + z-index: -1; + bottom: 50%; + transform: translateY(var(--figure-height-factor)); + } +} + @mixin wide-background-color($background-color: var(--lumo-base-color)) { &::before { background-color: $background-color; diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss index 1a9b2b48..5a440fb4 100644 --- a/packages/cxl-ui/scss/cxl-section.scss +++ b/packages/cxl-ui/scss/cxl-section.scss @@ -3,6 +3,8 @@ :host { display: block; + --figure-height-multiplier: 0.10; + --figure-height-factor: calc(var(--figure-height-multiplier) * var(--cxl-content-max-width-wide)); } :host([theme~="cxl-section-dashboard-team-content"]) { @@ -64,17 +66,32 @@ } @media #{mq.$large} { - :host(#view-hero), - :host([theme~="cxl-header"]) { + :host(#view-hero) { @include mixins.wide-background(); @include mixins.extend-background-right(); + @include mixins.wide-background-header(); + @include mixins.wide-background-header-image(); + } + :host([theme~="cxl-header"]) { + @include mixins.wide-background(); + @include mixins.extend-background-right(); + @include mixins.wide-background-header(); + @include mixins.wide-background-header-image(); } :host(.wide-background) { @include mixins.wide-background(); } + :host(.wide-background-header) { + @include mixins.wide-background-header(); + } + + :host(.wide-background-header-image) { + @include mixins.wide-background-header-image(); + } + :host(.wide-background-left) { @include mixins.extend-background-left(); } diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss index 6473ce54..f005b88c 100644 --- a/packages/cxl-ui/scss/global/cxl-section.scss +++ b/packages/cxl-ui/scss/global/cxl-section.scss @@ -1,10 +1,16 @@ /* stylelint-disable selector-no-qualifying-type */ @use "~@conversionxl/cxl-lumo-styles/scss/mq"; + +// Use more specific selector to hide cxl-section background-image. +cxl-section.wp-block-group.wp-block-cxl-section#view-hero { + background: none !important; +} + cxl-section#view-hero, cxl-section[theme~="cxl-header"] { .column-1 { @media #{mq.$large} { - max-width: 40%; + max-width: 45%; } } @@ -19,8 +25,15 @@ cxl-section#view-hero, cxl-section[theme~="cxl-header"] { } &.wide-background-light-blue { - .column-2 * { - color: var(--lumo-shade); + #view-hero .cxl-hero-titles { + bottom: 0; + transform: translateY(50%); + } + + .column-2 { + * { + color: var(--lumo-shade); + } } } diff --git a/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js b/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js index 33e0d44c..8ffd78ef 100644 --- a/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js +++ b/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js @@ -1,3 +1,4 @@ +/* eslint-disable no-multi-str */ import { html } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import '@conversionxl/cxl-lumo-styles'; @@ -6,6 +7,21 @@ import '@vaadin/button'; export default { title: 'CXL UI/cxl-section', + parameters: { + docs: { + description: { + component: 'Use `` to create a section header component. \ + `cxl-section` components with id="view-hero" are automatically themed as hero headers. \ + Additionally, it is necessary to add CSS code in wordpress block-editor: \ + \ + \ + `#view-hero::after { \ + background-image: url([wpv-post-featured-image size="xx-large" output="url"]); \ + }` \ + ', + }, + } + } }; export const CXLSectionHeader = (args) => html` @@ -50,15 +66,13 @@ export const CXLSectionHeader = (args) => html` } @media screen and (min-width: 1024px) { - cxl-section { - background: url(https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-1024x1024.png) no-repeat bottom right; - background-size: auto 100%; - background-position: bottom right 30%; + cxl-section#view-hero::after { + background-image: url("https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-1024x1024.png"); } } - +

${unsafeHTML(args.title)}