feat(cxl-ui): cxl-featured-course-card v2q

https://app.clickup.com/t/86aya2ta8
conversionxl · Oct 4, 2023 · c7bcb88 · c7bcb88
1 parent d97af34
commit c7bcb88
Show file tree

Hide file tree

Showing 10 changed files with 130 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ packages/**/pkg
 coverage
 tmp
 test/visual/screenshots
+.idea
diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss
@@ -8,6 +8,7 @@ html,
   --lumo-primary-color: hsl(355.8, 74.7%, 48%);
   --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 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);
 
   /**

diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -9,6 +9,7 @@ html {
   --cxl-space-sm: 12px;
   --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
   --cxl-color-dark-gray: hsla(240, 1%, 24%, 1);
+  --cxl-color-black: hsl(0, 0%, 0%);
   --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);
   --cxl-color-brand-blue: hsla(214, 61%, 25%, 1);
   --cxl-color-light-pink: hsl(353, 73%, 96%, 1);

diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -67,24 +67,48 @@
   }
 }
 
-// Featured course slider
+/**
+  * Theme "featured-course-slider"
+*/
+
 :host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
-  background-color: var(--cxl-color-light-gray);
+  position: relative;
+  background-color: var(--cxl-color-black);
+
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    z-index: 0;
+    width: 100vw;
+    content: "";
+    background-color: var(--cxl-color-black);
+    transform: translateX(-50%);
+  }
 
   [part="back-button"],
   [part="forward-button"] {
+    display: none;
     top: calc(50% - 2 * var(--lumo-space-xl));
     width: var(--lumo-size-s);
     height: var(--lumo-size-s);
     color: var(--lumo-primary-color);
     border-radius: 100%;
+    border: 1px solid transparent;
+    background-color: var(--lumo-primary-color-20pct);
+
+    &:hover {
+      border-color: var(--lumo-primary-color);
+    }
 
     &::after {
       font-size: var(--lumo-font-size-xl);
     }
 
     @media #{mq.$medium} {
       top: unset;
+      display: flex;
       width: var(--lumo-space-xl);
       height: var(--lumo-space-xl);
 

diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -4,11 +4,10 @@
 :host {
   .container {
     padding: 0 var(--lumo-space-m);
-    color: var(--lumo-primary-contrast-color);
-    background-color: var(--lumo-shade);
+    background-color: var(--cxl-color-light-gray);
 
     @media #{mq.$medium} {
-      padding: 0;
+      padding: 0 var(--lumo-space-l);
     }
   }
 
@@ -33,7 +32,6 @@
     .subtitle {
       font-size: var(--lumo-font-size-xs);
       line-height: 1;
-      color: var(--lumo-tint-30pct);
       text-transform: uppercase;
     }
 

diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -3,32 +3,45 @@
 
 :host {
   position: relative;
-  max-width: unset;
+  display: flex;
+  align-items: center;
+  width: auto;
   height: auto;
-  padding: 0;
+  min-height: 400px;
+  max-width: unset;
+  margin: 0 calc(var(--lumo-space-m) * -1);
+  padding: 0 0 var(--lumo-space-m) 0;
+  line-height: var(--lumo-line-height-m);
   border: 0;
   box-shadow: none;
+  border-radius: 0;
+  background-color: var(--cxl-color-black);
+
+  @media #{mq.$large} {
+    width: 100%;
+    margin: 0;
+    padding: 0 var(--lumo-space-s);
+  }
 
   .container {
-    position: relative;
     display: block;
-    height: 100%;
-    padding: 0 var(--lumo-space-m);
-    background-color: var(--cxl-color-light-gray);
-
-    @media #{mq.$medium} {
-      display: grid;
-      grid-template-columns: repeat(12, 1fr);
-      grid-template-rows: min-content auto;
-      gap: 0;
-      padding: var(--lumo-space-l) 0 0 var(--lumo-space-l);
+    margin: 0 auto;
+    padding: 0;
+    color: var(--lumo-tint);
+
+    @media #{mq.$large} {
+      padding-right: 400px;
     }
 
     > .attributes {
       display: none;
       padding: 0;
     }
 
+    .name {
+      font-size: 40px;
+    }
+
     .name strong {
       color: var(--lumo-primary-color);
     }
@@ -53,6 +66,7 @@
         align-items: center;
         grid-row-gap: var(--lumo-space-xs);
         padding: 0;
+        color: var(--lumo-tint);
       }
     }
   }
@@ -62,10 +76,12 @@
     z-index: 0;
 
     .instructor-image {
+      display: block;
+      margin: 0 auto;
       max-height: calc(var(--lumo-space-xl) * 6);
       object-fit: contain;
 
-      @media #{mq.$medium} {
+      @media #{mq.$large} {
         display: none;
       }
     }
@@ -81,7 +97,7 @@
       margin-top: calc(var(--lumo-space-m) * -2);
     }
 
-    @media #{mq.$medium} {
+    @media #{mq.$large} {
       display: none;
     }
   }
@@ -90,28 +106,35 @@
     position: relative;
     z-index: 0;
     display: block;
+    max-width: 650px;
+    padding: 0 var(--lumo-space-m);
 
-    @media #{mq.$medium} {
+    @media #{mq.$large} {
       position: initial;
+      padding: 0;
       grid-column: span 7 / span 7;
     }
 
     .instructor-image {
       display: none;
+      border-radius: 0;
 
       img {
-        height: 100%;
+        width: 100%;
+        height: auto;
+        margin-top: auto;
         border-radius: 0;
+        object-fit: contain;
       }
 
-      @media #{mq.$medium} {
+      @media #{mq.$large} {
         position: absolute;
         top: 0;
         right: var(--lumo-space-l);
         display: flex;
         justify-content: flex-end;
         width: auto;
-        max-width: 100%;
+        max-width: 400px;
         height: 100%;
         max-height: none;
       }
@@ -121,15 +144,23 @@
   .content-after {
     position: relative;
     z-index: 0;
-    padding-top: var(--lumo-space-s);
-    padding-bottom: var(--lumo-space-m);
+    max-width: 500px;
+    margin-top: var(--lumo-space-s);
+    padding: 0 var(--lumo-space-m);
+
+    @media #{mq.$large} {
+      grid-column: span 7 / span 7;
+      padding-right: 0;
+      padding-left: 0;
+    }
 
     .content {
       @include mixins.ellipsis-for-lines(5);
       margin-bottom: var(--lumo-space-s);
     }
 
     .cta {
+      margin: var(--lumo-space-s) 0 0;
       font-weight: 600;
 
       vaadin-icon {
@@ -145,10 +176,5 @@
         text-decoration: underline;
       }
     }
-
-    @media #{mq.$medium} {
-      grid-column: span 7 / span 7;
-      padding-top: var(--lumo-space-s);
-    }
   }
 }
diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-header.scss b/packages/cxl-ui/scss/global/cxl-dashboard-header.scss
@@ -3,18 +3,6 @@ cxl-dashboard-header {
   z-index: 1;
   display: block;
 
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    z-index: -1;
-    width: 100vw;
-    content: "";
-    background-color: var(--lumo-shade);
-    transform: translateX(-50%);
-  }
-
   .edit-roadmap {
     display: flex;
     align-items: center;

diff --git a/packages/cxl-ui/src/components/cxl-featured-course-card.js b/packages/cxl-ui/src/components/cxl-featured-course-card.js
@@ -17,35 +17,47 @@ export class CXLFeaturedCourseCardElement extends CXLBaseCardElement {
 
   @property({ type: String, attribute: 'cta-url' }) ctaUrl = '';
 
+  _renderContentBefore() {
+    return html`
+      <section class="content-before">
+        <img class="instructor-image" src=${this.avatar} alt="${this.instructor}" />
+        <svg class="swoosh" viewBox="0 0 360 199" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill="var(--cxl-color-black)"
+            d="M1199.64 104.027C1113.56 105.678 1029.17 107.177 943.442 114.375C832.023 123.729 722.816 117.784 614.335 95.3047C457.633 62.838 336.264 14.1676 141.043 11.5174C-1.67221 9.57723 -248.398 6.15004 -458 0V199H1608C1555.37 176.893 1506.06 147.493 1450.34 130.627C1371.01 106.653 1284.33 102.401 1199.64 104.027Z"
+          />
+        </svg>
+      </section>
+    `;
+  }
+
+  _renderContentAfter() {
+    return html`
+      <section class="content-after">
+        <div class="content">
+          <slot name="content"></slot>
+        </div>
+        <vaadin-button
+          class="cta"
+          theme="tertiary"
+          @click=${(e) => {
+            e.stopImmediatePropagation();
+            this._goToLink(this.ctaUrl);
+          }}
+        >
+          ${this.ctaLabel}
+          <vaadin-icon icon="lumo:angle-right"></vaadin-icon>
+        </vaadin-button>
+      </section>
+    `;
+  }
+
   render() {
     return html`
       <div class="container">
-        <section class="content-before">
-          <img class="instructor-image" src=${this.avatar} alt="${this.instructor}" />
-          <svg class="swoosh" viewBox="0 0 360 199" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path
-              fill="var(--cxl-color-light-gray)"
-              d="M1199.64 104.027C1113.56 105.678 1029.17 107.177 943.442 114.375C832.023 123.729 722.816 117.784 614.335 95.3047C457.633 62.838 336.264 14.1676 141.043 11.5174C-1.67221 9.57723 -248.398 6.15004 -458 0V199H1608C1555.37 176.893 1506.06 147.493 1450.34 130.627C1371.01 106.653 1284.33 102.401 1199.64 104.027Z"
-            />
-          </svg>
-        </section>
+        ${this._renderContentBefore()}
         ${this._renderHeader()}
-        <section class="content-after">
-          <div class="content">
-            <slot name="content"></slot>
-          </div>
-          <vaadin-button
-            class="cta"
-            theme="tertiary"
-            @click=${(e) => {
-              e.stopImmediatePropagation();
-              this._goToLink(this.ctaUrl);
-            }}
-          >
-            ${this.ctaLabel}
-            <vaadin-icon icon="lumo:angle-right"></vaadin-icon>
-          </vaadin-button>
-        </section>
+        ${this._renderContentAfter()}
       </div>
     `;
   }

diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js
@@ -29,15 +29,15 @@ const args3 = {
 
 const Template = () => html`
   <cxl-tabs-slider theme="minimal cxl-featured-course-slider">
-    <vaadin-tab disabled theme="cxl-featured-course-slider"
-      >${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}</vaadin-tab
-    >
-    <vaadin-tab disabled theme="cxl-featured-course-slider"
-      >${CXLFeatureadCourseCard(args2)}</vaadin-tab
-    >
-    <vaadin-tab disabled theme="cxl-featured-course-slider"
-      >${CXLFeatureadCourseCard(args3)}</vaadin-tab
-    >
+    <vaadin-tab disabled theme="cxl-featured-course-slider">
+      ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
+    </vaadin-tab>
+    <vaadin-tab disabled theme="cxl-featured-course-slider">
+      ${CXLFeatureadCourseCard(args2)}
+    </vaadin-tab>
+    <vaadin-tab disabled theme="cxl-featured-course-slider">
+      ${CXLFeatureadCourseCard(args3)}
+    </vaadin-tab>
   </cxl-tabs-slider>
 `;
 

diff --git a/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js b/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js
@@ -32,7 +32,7 @@ export const CXLFeatureadCourseCard = FeaturedCourseCardTemplate.bind({});
 
 CXLFeatureadCourseCard.args = {
   id: 'cxl-featured-course-1',
-  theme: 'Featured course',
+  theme: 'featured-course',
   name: 'Get ahead with <strong>Google Analytics 4</strong>',
   time: '5h 04min',
   instructor: 'Fred Pike',
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ packages/**/pkg @@
     coverage
     tmp
     test/visual/screenshots
+    .idea