Merge pull request #326 from conversionxl/raphael/fix/dashboard/missi…

…ng-pointer
conversionxl · Sep 12, 2023 · b3c3b70 · b3c3b70
2 parents 7dc7e86 + 21f8bee
commit b3c3b70
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 23 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss b/packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss
@@ -15,9 +15,14 @@
   font-size: var(--lumo-icon-size-l);
   background-color: var(--lumo-tint);
   box-shadow: var(--lumo-box-shadow-s);
+  transition: box-shadow 0.3s;
 
   &:hover {
     color: var(--lumo-primary-color);
+    cursor: pointer;
+    box-shadow: var(--lumo-box-shadow-m);
+    transition: box-shadow 0.3s;
+    transform: scale(1.05);
   }
 }
 
@@ -67,8 +72,8 @@
   [part="tabs"] {
     padding-top: var(--cxl-space-sm);
     margin: 0;
-    overflow-y: hidden;
     overflow-x: auto;
+    overflow-y: hidden;
     scrollbar-width: none;
     -ms-overflow-style: none;
 

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss
@@ -174,6 +174,10 @@
 :host([theme~="cxl-dashboard-category"][opened]) {
   [part="summary"] {
     padding-bottom: 0;
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 }
 

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss
@@ -75,7 +75,6 @@ $vaadin-tab-horizontal-padding: 0.75rem;
     padding: 0;
     margin: 0;
     overflow-x: auto;
-    pointer-events: none;
     scrollbar-width: none;
     -ms-overflow-style: none;
 
@@ -86,6 +85,8 @@ $vaadin-tab-horizontal-padding: 0.75rem;
     ::slotted(*) {
       scroll-snap-align: start;
       scroll-snap-stop: always;
+      /* stylelint-disable-next-line declaration-no-important */
+      pointer-events: all !important;
     }
 
     &::-webkit-scrollbar {

diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -58,9 +58,9 @@
   display: flex;
   flex-direction: column;
   gap: var(--lumo-space-s);
+  justify-content: space-between;
   width: 100%;
   transition: all 0.3s ease;
-  justify-content: space-between;
 
   > .attributes {
     padding-top: 0;
@@ -176,4 +176,10 @@ header {
 
 :host(:hover) {
   border-color: var(--lumo-primary-color);
-} 
+}
+
+vaadin-button {
+  &:hover {
+    cursor: pointer;
+  }
+}
diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -122,29 +122,22 @@
     position: relative;
     z-index: 0;
     padding-top: var(--lumo-space-s);
+    padding-bottom: var(--lumo-space-m);
 
     .content {
       @include mixins.ellipsis-for-lines(5);
+      padding-bottom: var(--lumo-space-s);
     }
 
     .cta {
-      display: inline-block;
-      padding-bottom: var(--lumo-space-l);
-      margin-top: var(--lumo-space-m);
-      font-size: var(--lumo-font-size-m);
-      font-weight: 700;
-      line-height: var(--lumo-line-height-m);
-      color: var(--lumo-primary-color);
-      text-decoration: none;
-      pointer-events: all;
+      font-weight: 600;
 
       vaadin-icon {
         width: var(--lumo-icon-size-s);
         height: var(--lumo-icon-size-s);
         padding: calc(var(--lumo-space-xs) / 2);
-        margin-left: var(--lumo-space-s);
-        color: var(--lumo-primary-color);
-        background-color: var(--lumo-primary-color-10pct);
+        margin-left: var(--lumo-space-xs);
+        background: var(--lumo-primary-color-10pct);
         border-radius: 100%;
       }
 

diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -40,7 +40,13 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
             <slot name="more" @slotchange=${this._slotHasChildren}></slot>
           </vaadin-details>
           <a href=${this.ctaUrl}>
-            <vaadin-button class="cta" theme="tertiary" @click=${this.callToAction}>
+            <vaadin-button
+              class="cta"
+              theme="tertiary"
+              @click=${() => {
+                location.assign(this.ctaUrl);
+              }}
+            >
               ${this.ctaLabel} ${this.theme}
               <vaadin-icon icon="lumo:angle-right"></vaadin-icon>
             </vaadin-button>

diff --git a/packages/cxl-ui/src/components/cxl-featured-course-card.js b/packages/cxl-ui/src/components/cxl-featured-course-card.js
@@ -34,9 +34,16 @@ export class CXLFeaturedCourseCardElement extends CXLBaseCardElement {
           <div class="content">
             <slot name="content"></slot>
           </div>
-          <a class="cta" href="${this.ctaUrl}"
-            >${this.ctaLabel}<vaadin-icon icon="lumo:angle-right"></vaadin-icon
-          ></a>
+          <vaadin-button
+            class="cta"
+            theme="tertiary"
+            @click=${() => {
+              location.assign(this.ctaUrl);
+            }}
+          >
+            ${this.ctaLabel}
+            <vaadin-icon icon="lumo:angle-right"></vaadin-icon>
+          </vaadin-button>
         </section>
       </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,11 +29,15 @@ const args3 = {
 
 const Template = () => html`
   <cxl-tabs-slider theme="minimal cxl-featured-course-slider">
-    <vaadin-tab theme="cxl-featured-course-slider"
+    <vaadin-tab disabled theme="cxl-featured-course-slider"
       >${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}</vaadin-tab
     >
-    <vaadin-tab theme="cxl-featured-course-slider">${CXLFeatureadCourseCard(args2)}</vaadin-tab>
-    <vaadin-tab theme="cxl-featured-course-slider">${CXLFeatureadCourseCard(args3)}</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>
 `;