feat(cxl-ui): add cxl-search-filters and related components

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

@@ -7,6 +7,11 @@
   color: var(--lumo-primary-text-color);
 }
 
+[theme~="badge"][theme~="secondary"] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--cxl-color-brand-blue);
+}
+
 .course-skills {
   [theme~="badge"] {
     margin-right: var(--lumo-space-s);

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

@@ -6,6 +6,9 @@ html {
   --cxl-content-width: 36em;
   --cxl-wrap-width: 72rem;
   --cxl-wrap-padding: var(--lumo-space-m);
+  --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
+  --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);
+  --cxl-color-brand-blue: hsla(214, 61%, 25%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss

@@ -1,4 +1,5 @@
 @use "../mixins";
+@use "../mq";
 
 ::slotted(vaadin-tab) {
   align-items: stretch; // Equal height elements.
@@ -31,3 +32,80 @@
     display: initial;
   }
 }
+
+/**
+  * Theme "cxl-course-slider"
+*/
+
+:host([theme~="cxl-course-slider"][theme~="minimal"]) {
+  ::slotted(vaadin-tab) {
+    padding: 0 calc(var(--lumo-space-s) / 2) calc(var(--lumo-space-s) / 2);
+  }
+
+  ::slotted(vaadin-tab:first-of-type) {
+    margin-inline-start: calc(var(--lumo-space-m) - var(--lumo-space-xs));
+
+    @media #{mq.$small} {
+      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-xs));
+    }
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: calc(var(--lumo-space-m) * -1);
+    bottom: calc(var(--lumo-space-m) * -1);
+    width: 68px;
+    content: "";
+    background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0%;
+  }
+
+  [part="tabs"] {
+    margin: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [part="back-button"],
+  [part="forward-button"] {
+    width: var(--lumo-space-xl);
+    height: var(--lumo-space-xl);
+    color: var(--lumo-primary-color);
+    border-radius: 100%;
+
+    &::after {
+      font-size: var(--lumo-font-size-xxl);
+    }
+  }
+
+  [part="back-button"] {
+    margin-left: var(--lumo-space-s);
+  }
+
+  [part="forward-button"] {
+    margin-right: var(--lumo-space-s);
+  }
+}
+
+:host([theme~="cxl-course-slider"][overflow="start end"]) {
+  &::before {
+    left: 0;
+    z-index: 1;
+    rotate: 180deg;
+    opacity: 100%;
+  }
+}
+
+:host([theme~="cxl-course-slider"][overflow="end"]),
+:host([theme~="cxl-course-slider"][overflow="start end"]) {
+  &::after {
+    right: 0;
+    opacity: 100%;
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss

@@ -5,3 +5,7 @@
 :host([theme~="cxl-marketing-nav"][hidden]) {
   visibility: hidden;
 }
+
+:host([theme~="cxl-featured-course-slider"]) {
+  padding: 0;
+}

packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss

@@ -1,4 +1,5 @@
 @use "../mixins";
+@use "../mq";
 
 // Collapse margins.
 :host([orientation="vertical"][theme~="cxl-marketing-nav"]) {
@@ -65,3 +66,65 @@ $vaadin-tab-horizontal-padding: 0.75rem;
   margin-right: auto;
   margin-left: auto;
 }
+
+// Featured course slider
+:host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
+  background-color: var(--cxl-color-light-gray);
+
+  [part="tabs"] {
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [part="back-button"],
+  [part="forward-button"] {
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    color: var(--lumo-primary-color);
+    border-radius: 100%;
+
+    &::after {
+      font-size: var(--lumo-font-size-xl);
+    }
+
+    @media #{mq.$medium} {
+      width: var(--lumo-space-xl);
+      height: var(--lumo-space-xl);
+
+      &::after {
+        font-size: var(--lumo-font-size-xxl);
+      }
+    }
+  }
+
+  @media #{mq.$medium} {
+    [part="back-button"] {
+      margin-left: var(--lumo-space-s);
+    }
+
+    [part="forward-button"] {
+      margin-right: var(--lumo-space-s);
+    }
+  }
+
+  ::slotted(vaadin-tab) {
+    padding: 0 var(--lumo-space-m);
+
+    @media #{mq.$medium} {
+      padding: 0;
+    }
+  }
+
+  ::slotted(vaadin-tab:not(:first-child)) {
+    @media #{mq.$medium} {
+      padding-left: var(--lumo-size-xl);
+    }
+  }
+}

packages/cxl-ui/package.json

@@ -10,7 +10,8 @@
     "directory": "packages/cxl-ui"
   },
   "dependencies": {
-    "@conversionxl/cxl-lumo-styles": "^1.6.4"
+    "@conversionxl/cxl-lumo-styles": "^1.6.4",
+    "@lit-labs/observers": "^2.0.0"
   },
   "devDependencies": {
     "@conversionxl/normalize-wheel": "^1.0.1",

packages/cxl-ui/scss/cxl-base-card.scss

@@ -0,0 +1,170 @@
+/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-width: calc(100% - 2 * var(--lumo-space-l));
+  height: max-content;
+  min-height: 270px;
+  padding: var(--lumo-space-m) var(--lumo-space-l);
+  font-size: var(--lumo-font-size-s);
+  background: var(--lumo-tint);
+  border: 1px solid var(--lumo-contrast-10pct);
+  border-radius: var(--lumo-border-radius-l);
+  box-shadow: var(--lumo-box-shadow-xs);
+  break-inside: avoid;
+  transform: translateZ(0); // CSS columns @see https://stackoverflow.com/a/55110789/35946
+
+  // @see https://github.com/conversionxl/aybolit/pull/293
+  --video-background: hsla(355.8, 74.7%, 48%, 0.03); // --lumo-primary-color-3pct does not exist
+  --training-background: hsla(0, 0%, 10%, 0.03); // --lumo-shade-3pct does not exist
+  --playbook-background: hsla(213, 100%, 62%, 0.03); // No similar base color exists
+
+  // Container / Media queries
+  @media #{mq.$small} {
+    max-width: unset;
+    margin: unset;
+
+    .container > .attributes {
+      display: none;
+    }
+
+    header .info .attributes {
+      display: flex;
+    }
+  }
+
+  [empty] {
+    visibility: hidden;
+    user-select: none;
+  }
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host(:first-child) {
+  margin-top: unset;
+}
+
+:host(:last-child) {
+  margin-bottom: unset;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lumo-space-s);
+  width: 100%;
+  transition: all 0.3s ease;
+
+  > .attributes {
+    padding-top: 0;
+  }
+
+  footer {
+    margin-top: var(--lumo-space-s);
+  }
+}
+
+.tags {
+  display: flex;
+  gap: var(--lumo-space-s);
+  max-width: 100%;
+  min-height: 1.6em;
+}
+
+.attributes {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+  padding: var(--lumo-space-s) 0;
+  gap: var(--lumo-space-m);
+  color: var(--lumo-shade-60pct);
+}
+
+header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--lumo-space-m);
+
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--lumo-space-xs);
+    align-self: stretch;
+    max-width: calc(100% - var(--lumo-space-m) - 80px);
+    overflow: hidden;
+
+    .name {
+      font-family: var(--lumo-font-family);
+      font-size: var(--lumo-font-size-xl);
+      font-style: normal;
+      font-weight: 700;
+      line-height: var(--lumo-line-height-xs);
+      color: #1a1a1a;
+    }
+
+    .attributes {
+      display: none;
+    }
+
+    .tags {
+      flex-wrap: nowrap;
+
+      ::slotted(.tag),
+      .tag:not(:first-child):not(.new) {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tag {
+        &:first-child,
+        &.new {
+          color: var(--lumo-primary-color);
+        }
+
+        &:first-child {
+          text-transform: capitalize;
+        }
+      }
+    }
+  }
+
+  .instructor-image {
+    width: 80px;
+    height: 92px;
+
+    img {
+      height: 80px;
+      overflow: hidden;
+      border-radius: 100px;
+    }
+  }
+}
+
+.badge-new {
+  display: none;
+}
+
+:host([new]) {
+  .badge-new {
+    position: absolute;
+    top: calc(-1 * var(--lumo-space-s));
+    right: calc(-1 * var(--lumo-space-s));
+    display: block;
+    width: calc(2 * var(--lumo-space-m));
+    height: calc(2 * var(--lumo-space-m));
+    padding: 6px;
+    color: var(--lumo-primary-contrast-color);
+    background: var(--lumo-primary-color);
+    border-radius: 100%;
+  }
+}