feat(cxl-ui): cxl-section - implement header design facelift

packages/cxl-lumo-styles/scss/_mixins.scss

@@ -43,3 +43,44 @@
     max-width: $max-width;
   }
 }
+
+@mixin wide-background {
+  position: relative;
+  overflow-x: hidden;
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border-radius: calc(6 * var(--lumo-border-radius-l));
+  }
+}
+
+@mixin extend-background-left {
+  &::before {
+    right: 47%;
+    height: 60%;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+@mixin extend-background-right {
+  position: relative;
+
+  &::before {
+    left: 47%;
+    height: 60%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@mixin wide-background-color($background-color: var(--lumo-base-color)) {
+  &::before {
+    background-color: $background-color;
+  }
+}

packages/cxl-lumo-styles/scss/color.scss

@@ -1,12 +1,17 @@
 html,
 :host {
+  --cxl-brand-color-black: #1a1a1a;
+  --cxl-brand-color-green: #007951;
+  --cxl-brand-color-light-blue: #cce7ff;
+  --cxl-brand-color-blue: #65abc3;
+
   /**
    * Primary
    *
    * @see https://github.com/vaadin/vaadin-lumo-styles/blob/v1.5.0/color.html#L57
    */
   --lumo-primary-color: hsl(355.8, 74.7%, 48%);
-  --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02);
+  --lumo-primary-color-2pct: hsla(0, 0%, 4%, 0.02);
   --lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1);
   --lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2);
   --lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5);

packages/cxl-ui/scss/cxl-section.scss

@@ -56,3 +56,44 @@
     --lumo-header-text-color: var(--lumo-tint);
   }
 }
+
+:host(#view-hero),
+:host([theme~="cxl-header"]) {
+  margin-top: var(--lumo-space-xl);
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+
+  @include mixins.wide-background();
+  @include mixins.extend-background-right();
+}
+
+:host(.wide-background) {
+  @include mixins.wide-background();
+}
+
+:host(.wide-background-left) {
+  @include mixins.extend-background-left();
+}
+
+:host(.wide-background-right) {
+  @include mixins.extend-background-right();
+}
+
+:host(.wide-background-black) {
+  @include mixins.wide-background-color(var(--cxl-brand-color-black));
+}
+
+:host(.wide-background-red) {
+  @include mixins.wide-background-color(var(--lumo-primary-color));
+}
+
+:host(.wide-background-blue) {
+  @include mixins.wide-background-color(var(--cxl-brand-color-blue));
+}
+
+:host(.wide-background-light-blue) {
+  @include mixins.wide-background-color(var(--cxl-brand-color-light-blue));
+}
+
+:host(.wide-background-green) {
+  @include mixins.wide-background-color(var(--cxl-brand-color-green));
+}

packages/cxl-ui/scss/global/cxl-section.scss

@@ -0,0 +1,7 @@
+/* stylelint-disable selector-no-qualifying-type */
+
+cxl-section#view-hero {
+  .column-1 {
+    max-width: 40%;
+  }
+}

packages/cxl-ui/src/components/cxl-section.js

@@ -1,8 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
+import cxlSectionGlobalStyles from '../styles/global/cxl-section-css';
 
 @customElement('cxl-section')
 export class CXLSectionElement extends LitElement {
@@ -17,4 +19,15 @@ export class CXLSectionElement extends LitElement {
       </section>
     `;
   }
+
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    /**
+     * Global styles.
+     */
+    registerGlobalStyles(cxlSectionGlobalStyles, {
+      moduleId: 'cxl-section',
+    });
+  }
 }

packages/storybook/cxl-lumo-styles/typography.stories.js

@@ -79,6 +79,29 @@ export const CXLComExamples = () => html`
       --cxl-content-max-width: 60em;
     }
 
+    #view-hero {
+      margin-bottom: 4em;
+    }
+
+    .pure-u-lg-1-2 {
+      width: 40%;
+      display: inline-block;
+      letter-spacing: normal;
+      word-spacing: normal;
+      vertical-align: top;
+      text-rendering: auto;
+    }
+
+    .wp-block-cxl-section#view-hero {
+      --cxl-content-max-width: 85em;
+
+      background: url(http://localhost:8080/wp-content/uploads/2023/07/ben-labay_team_headshot-1x1-bw-min.png) no-repeat bottom right var(--lumo-shade-5pct);
+      background-size: auto 85%;
+      background-position: bottom right calc( 45% - 200px );
+
+      padding: unset;
+    }
+
     .flex {
       display: flex;
     }
@@ -100,8 +123,8 @@ export const CXLComExamples = () => html`
     }
   </style>
 
-  <cxl-section class="hero has-black-background-color">
-    <div>
+  <cxl-section id="view-hero" class="wide hero wp-block-cxl-section wide-background-black">
+    <div class="pure-u-lg-1-2">
       <h1><strong>Top 1% marketers</strong> teach you what they know.</h1>
       <h3>Master the most in-demand marketing skills with our online courses created by marketers with a proven record of driving real growth.</h3>
       <vaadin-button id="cxl-onboarding" class="cxl-homepage-button" role="button" theme="primary x-large">

packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js

@@ -0,0 +1,102 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-lumo-styles';
+import '@conversionxl/cxl-ui';
+import '@vaadin/button';
+
+export default {
+  title: 'CXL UI/cxl-section',
+};
+
+export const CXLSectionHeader = (args) => html`
+  <style>
+    @media only screen and (min-width: 1440px) {
+      #view-hero .cxl-hero-titles { bottom: -10px; gap: 0; margin: 0; position: absolute; width: 50%; }
+    }
+
+    @media only screen and (min-width: 1280px) and (max-width: 1440px) {
+      #view-hero .cxl-hero-titles { bottom: 0; gap: 0; margin: 0; position: absolute; width: 55%; }
+    }
+
+    @media only screen and (min-width: 782px) and (max-width: 1280px) {
+      #view-hero .cxl-hero-titles { gap: 0; margin: 0; position: absolute; top: 24em; width: 50%; }
+    }
+
+    .wp-block-columns {
+      align-items: normal !important;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap !important;
+      margin-bottom: 1.import { column } from '@wordpress/icons' 75em;
+    }
+
+    .wp-clock-column {
+      flex-grow: 1;
+      min-width: 0;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+
+    .first {
+      flex-basis: 45%;
+    }
+
+    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.wide {
+      --cxl-content-max-width: var(--cxl-content-max-width-wide);
+    }
+  </style>
+
+  <cxl-section theme="cxl-header" class="${args.class} wide">
+    <div class="wp-block-columns">
+      <div class="wp-block-column first">
+        <h1><strong>Top 1% marketers</strong> teach you what they know.</h1>
+        <h3>
+          Master the most in-demand marketing skills with our online courses created by marketers
+          with a proven record of driving real growth.
+        </h3>
+        <vaadin-button
+          id="cxl-onboarding"
+          class="cxl-homepage-button"
+          role="button"
+          theme="primary x-large"
+        >
+          Sign up now
+        </vaadin-button>
+      </div>
+      <div
+        class="column column-2 column-span-1 column-push-0 pure-u-lg-1-2 pure-hidden-xs pure-hidden-sm pure-hidden-md column-last pure-u-1"
+        style="position: absolute; right: 0em; top: 10.5em;text-align:right; color: white"
+      >
+        <div class="wrap">
+          <div>
+            <strong style="display: block;">Ben Labay</strong>
+            <small style="display: block;">Managing Director @ Speero</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </cxl-section>
+`;
+
+CXLSectionHeader.args = {
+  class: '',
+};
+
+CXLSectionHeader.argTypes = {
+  class: {
+    name: 'Class',
+    control: 'select',
+    options: [
+      'wide-background-red',
+      'wide-background-blue',
+      'wide-background-light-blue',
+      'wide-background-green',
+      'wide-background-black',
+    ],
+  },
+};