refactor(cxl-ui): cxl-section - improve hero responsiveness and visua…

…l balance
conversionxl · Nov 29, 2023 · 936b9e9 · 936b9e9
1 parent f23d523
commit 936b9e9
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 `<cxl-section theme="cxl-header">` 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");
       }
     }
   </style>
 
-  <cxl-section theme="cxl-header" class="${args.backgroundColor} wide">
+  <cxl-section id="view-hero" class="${args.backgroundColor} wide">
     <div class="wp-block-columns">
       <div class="wp-block-column column-1 column-span-1 column-push-0">
         <h1>${unsafeHTML(args.title)}</h1>