+
diff --git a/packages/cxl-ui/package.json b/packages/cxl-ui/package.json
index 1a9b361b6..beb6f73ba 100644
--- a/packages/cxl-ui/package.json
+++ b/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",
diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
new file mode 100644
index 000000000..2324bce4d
--- /dev/null
+++ b/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%;
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
new file mode 100644
index 000000000..339b70511
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -0,0 +1,89 @@
+/* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */
+
+:host([theme~="dark"]) {
+ background-color: var(--lumo-contrast);
+}
+
+:host([theme~="video"]) {
+ background-color: var(--video-background);
+}
+
+:host([theme~="training"]) {
+ background-color: var(--training-background);
+}
+
+:host([theme~="playbook"]) {
+ background-color: var(--playbook-background);
+}
+
+.content-wrapper {
+ min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights
+ line-height: var(--lumo-line-height-s);
+
+ .content {
+ min-height: calc(
+ var(--lumo-line-height-s) * 3 + 1.25em
+ ); // Four standard line-heights plus global inherited block margins
+ }
+
+ .tags {
+ flex-wrap: wrap;
+ margin-top: var(--lumo-space-s);
+ transition: height 0.3s ease-in-out;
+
+ ::slotted(span) {
+ font-style: italic;
+ line-height: 1;
+ }
+ }
+}
+
+footer {
+ position: relative;
+
+ vaadin-details[theme="reverse"] {
+ &::part(summary) {
+ justify-content: flex-start;
+ gap: var(--lumo-space-s);
+ font-size: var(--lumo-font-size-s);
+ }
+
+ &::part(toggle) {
+ padding: calc(var(--lumo-space-xs) / 4);
+ margin-left: initial;
+ font-size: var(--lumo-font-size-m);
+ transform: rotate(90deg);
+ }
+
+ &[opened]::part(toggle) {
+ transform: rotate(-90deg);
+ }
+
+ &::part(summary-content) {
+ font-weight: 600;
+ color: var(--lumo-contrast);
+ }
+
+ &::part(content) {
+ padding-bottom: 0;
+ font-size: var(--lumo-font-size-s);
+ line-height: var(--lumo-line-height-s);
+ }
+ }
+
+ .cta {
+ position: absolute;
+ top: 0;
+ right: 0;
+ 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-xs);
+ background: var(--lumo-primary-color-10pct);
+ border-radius: 100%;
+ }
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
new file mode 100644
index 000000000..f62261174
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -0,0 +1,149 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+ position: relative;
+ max-width: unset;
+ height: auto;
+ padding: 0;
+ border: 0;
+ box-shadow: none;
+
+ .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);
+ gap: 0;
+ padding: var(--lumo-space-l) 0 0 var(--lumo-space-l);
+ }
+
+ > .attributes {
+ display: none;
+ padding: 0;
+ }
+
+ .name strong {
+ color: var(--lumo-primary-color);
+ }
+
+ .info {
+ max-width: unset;
+ gap: var(--lumo-space-s);
+
+ .tags {
+ flex-wrap: wrap;
+ }
+
+ .tag {
+ white-space: nowrap;
+ }
+
+ .attributes {
+ display: flex;
+ align-items: center;
+ padding: 0;
+ }
+ }
+ }
+
+ .content-before {
+ position: relative;
+ z-index: 0;
+
+ .instructor-image {
+ max-height: calc(var(--lumo-space-xl) * 6);
+ object-fit: contain;
+
+ @media #{mq.$medium} {
+ display: none;
+ }
+ }
+
+ .swoosh {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 0;
+ max-height: 100%;
+ margin-top: calc(var(--lumo-space-m) * -2);
+ }
+
+ @media #{mq.$medium} {
+ display: none;
+ }
+ }
+
+ header {
+ position: relative;
+ z-index: 0;
+ display: block;
+
+ @media #{mq.$medium} {
+ position: initial;
+ grid-column: span 7 / span 7;
+ }
+
+ .instructor-image {
+ display: none;
+
+ img {
+ height: 100%;
+ border-radius: 0;
+ }
+
+ @media #{mq.$medium} {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: block;
+ width: auto;
+ max-width: 100%;
+ height: 100%;
+ max-height: none;
+ }
+ }
+ }
+
+ .content-after {
+ position: relative;
+ z-index: 0;
+ padding-top: var(--lumo-space-s);
+
+ .cta {
+ display: 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;
+
+ 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);
+ border-radius: 100%;
+ }
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ @media #{mq.$medium} {
+ grid-column: span 7 / span 7;
+ padding-top: 0;
+ }
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-filter-header-item.scss b/packages/cxl-ui/scss/cxl-filter-header-item.scss
new file mode 100644
index 000000000..6ea5bb76f
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-filter-header-item.scss
@@ -0,0 +1,29 @@
+:host {
+ font-weight: 400;
+
+ vaadin-button {
+ background-color: transparent;
+ border-radius: var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0 0 ;
+ margin-bottom: 0;
+
+ &::part(label) {
+ color: var(--lumo-shade);
+ }
+ }
+
+ .label {
+ font-weight: 600;
+ }
+}
+
+:host(.checked) {
+ color: var(--lumo-contrast);
+
+ vaadin-button, vaadin-button {
+ background-color: var(--lumo-primary-color);
+
+ &::part(label) {
+ color: var(--lumo-base-color);
+ }
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-filter-header.scss b/packages/cxl-ui/scss/cxl-filter-header.scss
new file mode 100644
index 000000000..7aa70d834
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-filter-header.scss
@@ -0,0 +1,114 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+ display: block;
+ font-weight: 400;
+
+ .container {
+ width: 100%;
+ }
+
+ .tabs {
+ display: flex;
+ position: relative;
+ width: 100%;
+
+ .scroll-control {
+ position: absolute;
+
+ &:first-child {
+ left: -2px;
+ background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--lumo-base-color));
+ z-index: 1;
+ }
+
+ &:last-child {
+ right: -2px;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--lumo-base-color));
+ z-index: 1;
+ }
+ }
+ }
+
+ .filters {
+ display: flex;
+ border-bottom: 1px solid var(--lumo-shade-20pct);
+ max-width: 100%;
+ overflow-x: scroll;
+ scroll-snap-type: x mandatory;
+ -webkit-overflow-scrolling: touch;
+ scroll-behavior: smooth;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+
+ /* This seems more future-proof than \`overflow: -moz-scrollbars-none\` which is marked obsolete
+ and is no longer guaranteed to work:
+ https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Mozilla_Extensions
+ */
+ @-moz-document url-prefix() {
+ overflow: hidden;
+ }
+
+ ::slotted(*) {
+ scroll-snap-align: start;
+ scroll-snap-stop: always;
+ }
+
+ }
+
+ .controls {
+ display: flex;
+ flex-direction: row-reverse;
+ flex-wrap: wrap-reverse;
+ justify-content: stretch;
+ padding-top: var(--lumo-space-l);
+ gap: var(--lumo-space-m);
+
+ .flex-group {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: stretch;
+ width: 100%;
+ gap: var(--lumo-space-m);
+
+ > ::slotted(*) {
+ flex: 1;
+ width: auto !important;
+ }
+
+ #show-filters {
+ --lumo-button-size: var(--lumo-size-l);
+ display: block;
+ margin: 0;
+ text-align: start;
+ flex-basis: 50%;
+ }
+ }
+
+ ::slotted([slot="search"]) {
+ width: 100%;
+ line-height: var(--lumo-size-l);
+ }
+ }
+
+ @media #{mq.$small} {
+ .controls {
+ flex-direction: row;
+ flex-wrap: nowrap;
+
+ .flex-group {
+ width: auto;
+
+ #show-filters {
+ display: none;
+ }
+ }
+
+ .search {
+ line-height: normal;
+ }
+ }
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss
new file mode 100644
index 000000000..77c9b7f09
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-light-card.scss
@@ -0,0 +1,47 @@
+:host {
+ max-width: 300px;
+ height: auto;
+ min-height: auto;
+ padding: var(--lumo-space-m);
+
+ .container > .attributes {
+ display: none;
+ }
+
+ header {
+ .info {
+ .name {
+ font-size: var(--lumo-font-size-m);
+ font-weight: 600;
+ }
+
+ .attributes {
+ display: flex;
+ flex-direction: column;
+ padding-top: var(--lumo-space-xs);
+ padding-bottom: 0;
+ gap: var(--lumo-space-xs);
+ }
+ }
+
+ .instructor-image {
+ height: 80px;
+ }
+ }
+}
+
+:host([completed]) {
+ opacity: 0.6;
+
+ [icon="lumo:checkmark"] {
+ display: inline-block;
+ margin-top: calc(var(--lumo-space-xs) * -1);
+ color: var(--lumo-primary-color);
+ }
+}
+
+::slotted(footer) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--lumo-space-xs);
+}
diff --git a/packages/cxl-ui/scss/cxl-search-filters-item.scss b/packages/cxl-ui/scss/cxl-search-filters-item.scss
new file mode 100644
index 000000000..72bbc7a71
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-search-filters-item.scss
@@ -0,0 +1,25 @@
+:host {
+ display: flex;
+ justify-content: space-between;
+ font-size: var(--lumo-font-size-s);
+ gap: var(--lumo-space-s);
+
+ .count {
+ color: var(--lumo-shade-60pct);
+ }
+
+ vaadin-checkbox {
+ font-size: var(--lumo-font-size-s);
+
+ --vaadin-checkbox-size: var(--lumo-font-size-s);
+
+ // Checkbox style can't be matched with current design tokens
+ &::part(checkbox) {
+ // border-radius: calc(var(--lumo-border-radius-s) / 2);
+ // background-color: transparent;
+ // border: 1px solid var(--lumo-shade-60pct);
+ margin-right: var(--lumo-space-s);
+ }
+ }
+
+}
diff --git a/packages/cxl-ui/scss/cxl-search-filters-panel.scss b/packages/cxl-ui/scss/cxl-search-filters-panel.scss
new file mode 100644
index 000000000..f885fc7f1
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-search-filters-panel.scss
@@ -0,0 +1,23 @@
+
+:host {
+ display: block;
+ min-width: 240px;
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ }
+ vaadin-accordion-panel {
+ font-size: var(--lumo-font-size-s);
+
+ &::part(summary-content) {
+ font-weight: 600;
+ font-size: var(--lumo-font-size-s);
+ color: var(--lumo-contrast);
+ }
+
+ &::part(toggle) {
+ background-color: unset;
+ }
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-search-filters.scss b/packages/cxl-ui/scss/cxl-search-filters.scss
new file mode 100644
index 000000000..43e6e0e7f
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-search-filters.scss
@@ -0,0 +1,13 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ gap: var(--lumo-space-m);
+
+ header {
+ color: var(--lumo-shade-60pct);
+ font-size: var(--lumo-font-size-s);
+ font-weight: 300;
+ text-transform: uppercase;
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
new file mode 100644
index 000000000..98e7ae826
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-stats.scss
@@ -0,0 +1,17 @@
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+:host {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--lumo-space-m);
+ padding: var(--lumo-space-xl) var(--lumo-space-m) var(--lumo-space-m);
+ border-bottom: 1px solid var(--cxl-color-light-gray);
+
+ @media #{mq.$small} {
+ padding: var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
+ }
+
+ @media #{mq.$medium} {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
diff --git a/packages/cxl-ui/scss/cxl-time.scss b/packages/cxl-ui/scss/cxl-time.scss
new file mode 100644
index 000000000..73d826b4e
--- /dev/null
+++ b/packages/cxl-ui/scss/cxl-time.scss
@@ -0,0 +1,6 @@
+:host {
+ display: flex;
+ align-items: center;
+ gap: var(--lumo-space-xs);
+ color: var(--lumo-shade-60pct);
+}
diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss
new file mode 100644
index 000000000..7baa05f50
--- /dev/null
+++ b/packages/cxl-ui/scss/global/cxl-stats.scss
@@ -0,0 +1,16 @@
+cxl-stats {
+ .stats-title {
+ margin-top: 0;
+ font-size: var(--lumo-font-size-xs);
+ font-weight: 400;
+ line-height: 1;
+ color: var(--cxl-color-black-50pct);
+ text-transform: uppercase;
+ }
+
+ .stats-count {
+ margin: 0;
+ font-size: var(--lumo-font-size-xxl);
+ font-weight: 700;
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-base-card.js b/packages/cxl-ui/src/components/cxl-base-card.js
new file mode 100644
index 000000000..db5b0bfd4
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-base-card.js
@@ -0,0 +1,98 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { property, state } from 'lit/decorators.js';
+import '@vaadin/details';
+import '@vaadin/button';
+import './cxl-time.js';
+import cxlBaseCardStyles from '../styles/cxl-base-card-css.js';
+
+export class CXLBaseCardElement extends LitElement {
+ static get styles() {
+ return [cxlBaseCardStyles];
+ }
+
+ separator = html` | `;
+
+ @state() _tagsHasChildren = false;
+
+ @property({ type: String }) id = '';
+
+ @property({ type: String }) theme = '';
+
+ @property({ type: String }) name = '';
+
+ @property({ type: String }) time = '';
+
+ @property({ type: String }) instructor = '';
+
+ @property({ type: String }) avatar = '';
+
+ @property({ type: Boolean }) showTags = true;
+
+ @property({ type: Boolean, reflect: true }) new = false;
+
+ @property({ type: Boolean, reflect: true }) completed = false;
+
+ @property({ type: Boolean, reflect: true, attribute: 'show-time-icon' }) showTimeIcon = false;
+
+ _slotHasChildren(e) {
+ const slot = e.target;
+ const { name } = slot;
+ const children = slot.assignedNodes();
+ this[`_${name}HasChildren`] = !!children.length;
+ }
+
+ _renderHeaderTags() {
+ return html`
+
+ ${this.theme ? html`${this.theme}` : ''}
+ ${this.theme && this._tagsHasChildren ? this.separator : ''}
+
+ ${this.new ? html`${this.theme ? this.separator : ''}NEW` : ''}
+
+ `;
+ }
+
+ _renderHeaderName() {
+ return html`
+
+ ${unsafeHTML(this.name)}${this.completed
+ ? html``
+ : nothing}
+
+ `;
+ }
+
+ _renderHeaderAttributes() {
+ return html`
+
+
+
By: ${this.instructor}
+
`;
+ }
+
+ /**
+ * Renders the header of the component. Note that _renderHeaderAttributes is
+ * called in two places, inside and after header, to accomodate to
+ * responsiveness of the component on very narrow containers, handled in CSS
+ * @return {string} The rendered header HTML.
+ */
+ _renderHeader() {
+ return html`
+
+ ${this._renderHeaderAttributes()}
+ `;
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-card.js b/packages/cxl-ui/src/components/cxl-card.js
index 5df7a37d1..1de4fcc21 100644
--- a/packages/cxl-ui/src/components/cxl-card.js
+++ b/packages/cxl-ui/src/components/cxl-card.js
@@ -12,7 +12,7 @@ export class CXLCardElement extends LitElement {
}
render() {
- return html` `;
+ return html``;
}
firstUpdated(_changedProperties) {
diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
new file mode 100644
index 000000000..737a405d1
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -0,0 +1,56 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '@vaadin/details';
+import '@vaadin/button';
+import cxlCourseCardStyles from '../styles/cxl-course-card-css.js';
+import { CXLBaseCardElement } from './cxl-base-card.js';
+
+@customElement('cxl-course-card')
+export class CXLCourseCardElement extends CXLBaseCardElement {
+ static get styles() {
+ return [...super.styles, cxlCourseCardStyles];
+ }
+
+ @state() _moreHasChildren = false;
+
+ @property({ type: String, attribute: 'cta-label' }) ctaLabel = 'View';
+
+ @property({ type: String, attribute: 'cta-url' }) ctaUrl = '';
+
+ _slotHasChildren(e) {
+ const slot = e.target;
+ const { name } = slot;
+ const children = slot.assignedNodes();
+ this[`_${name}HasChildren`] = !!children.length;
+ }
+
+ render() {
+ return html`
+
+ ${this._renderHeader()}
+
+
+
+
+
+
+
+
+ ${this._renderHeader()}
+
+
+
+
+
{ this.requestUpdate() }}>
+
+
+
+
+
+
+
+
+
+
+
+
+ Filters
+
+
+
+
+ ${this._renderHeader()}
+
+
+
+ `;
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-search-filters-item.js b/packages/cxl-ui/src/components/cxl-search-filters-item.js
new file mode 100644
index 000000000..7cd19662e
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-search-filters-item.js
@@ -0,0 +1,39 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import '@vaadin/checkbox';
+import cxlSearchFiltersItemStyles from '../styles/cxl-search-filters-item-css.js';
+
+@customElement('cxl-search-filters-item')
+export class CXLSearchFiltersItemElement extends LitElement {
+ static get styles() {
+ return [cxlSearchFiltersItemStyles];
+ }
+
+ @property({ type: String }) label = '';
+
+ @property({ type: String }) value = '';
+
+ @property({ type: Number }) count = 0;
+
+ @property({ type: Boolean, reflect: true }) checked = false;
+
+ get checked () {
+ return this.checkbox?.checked
+ }
+
+ set checked (value) {
+ if (this.checkbox) {
+ this.checkbox.checked = !!value
+ }
+ }
+
+ @query('#checkbox') checkbox = null
+
+ render () {
+ return html`
+
+ (${this.count})
+ `
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-search-filters-panel.js b/packages/cxl-ui/src/components/cxl-search-filters-panel.js
new file mode 100644
index 000000000..56d7ec950
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-search-filters-panel.js
@@ -0,0 +1,30 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './cxl-vaadin-accordion';
+import '@vaadin/accordion/vaadin-accordion-panel'
+import cxlSearchFilterPanelStyles from '../styles/cxl-search-filters-panel-css.js';
+
+@customElement('cxl-search-filters-panel')
+export class CXLSearchFilterPanelElement extends LitElement {
+ static get styles() {
+ return [cxlSearchFilterPanelStyles];
+ }
+
+ @property({ type: Boolean }) opened = '';
+
+ @property({ type: String }) label = '';
+
+ @property({ type: String }) value = '';
+
+ render () {
+ return html`
+
+ ${this.label}
+
+
+
+
+ `
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-search-filters.js b/packages/cxl-ui/src/components/cxl-search-filters.js
new file mode 100644
index 000000000..32b168901
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-search-filters.js
@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import './cxl-vaadin-accordion';
+import '@vaadin/button';
+import cxlSearchFiltersStyles from '../styles/cxl-search-filters-css.js';
+
+@customElement('cxl-search-filters')
+export class CXLSearchFiltersElement extends LitElement {
+ static get styles() {
+ return [cxlSearchFiltersStyles];
+ }
+
+ @property({ type: String }) label = 'FILTER CONTENTS';
+
+ @property({ type: Number }) count = 0;
+
+ _resetFWP () {
+ if (window.FWP) window.FWP.reset()
+ this.dispatchEvent(new CustomEvent('reset', { bubbles: true, composed: true }))
+ }
+
+ render () {
+ return html`
+
+ ${this.label}
+ (${this.count})
+
+
+
+
+
+
+ Reset filters
+
+ `
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-stats.js b/packages/cxl-ui/src/components/cxl-stats.js
new file mode 100644
index 000000000..324bfaef6
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-stats.js
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { LitElement, html } from 'lit';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { customElement } from 'lit/decorators.js';
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
+import '@conversionxl/cxl-lumo-styles';
+import cxlStatsStyles from '../styles/cxl-stats-css.js';
+import cxlStatsGlobalStyles from '../styles/global/cxl-stats-css.js';
+
+@customElement('cxl-stats')
+export class CXLStatsElement extends LitElement {
+ static get styles() {
+ return [cxlStatsStyles];
+ }
+
+ render() {
+ return html``;
+ }
+
+ firstUpdated(_changedProperties) {
+ super.firstUpdated(_changedProperties);
+
+ // Global styles.
+ registerGlobalStyles(cxlStatsGlobalStyles, {
+ moduleId: 'cxl-stats',
+ });
+ }
+}
diff --git a/packages/cxl-ui/src/components/cxl-time.js b/packages/cxl-ui/src/components/cxl-time.js
new file mode 100644
index 000000000..e34e5542f
--- /dev/null
+++ b/packages/cxl-ui/src/components/cxl-time.js
@@ -0,0 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import cxlTimeStyles from '../styles/cxl-time-css.js';
+
+@customElement('cxl-time')
+export class CxlTime extends LitElement {
+ static get styles() {
+ return [cxlTimeStyles];
+ }
+
+ @property({ type: String }) time = '';
+
+ @property({ type: Boolean, attribute: 'show-icon' }) showIcon = false;
+
+ render() {
+ return html`
+ ${this.showIcon ? html`` : ''} ${this.time}
+ `;
+ }
+}
diff --git a/packages/cxl-ui/src/index-core.js b/packages/cxl-ui/src/index-core.js
index 6ce2a0833..45d8856cc 100644
--- a/packages/cxl-ui/src/index-core.js
+++ b/packages/cxl-ui/src/index-core.js
@@ -14,9 +14,11 @@ import * as Headroom from 'headroom.js';
// CXL.
export { CXLAppLayoutElement } from './components/cxl-app-layout.js';
export { CXLCardElement } from './components/cxl-card.js';
+export { CXLCourseCardElement } from './components/cxl-course-card.js';
export { CXLCheckoutDetailsElement } from './components/cxl-checkout-details.js';
export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';
export { CXLSectionElement } from './components/cxl-section.js';
+export { CXLStatsElement } from './components/cxl-stats.js';
export { CXLTabsSliderElement } from './components/cxl-tabs-slider.js';
export { CXLNotification } from './components/cxl-notification.js';
diff --git a/packages/cxl-ui/src/index-storybook.js b/packages/cxl-ui/src/index-storybook.js
index 58042c9c5..0e071ca35 100644
--- a/packages/cxl-ui/src/index-storybook.js
+++ b/packages/cxl-ui/src/index-storybook.js
@@ -4,8 +4,10 @@ import * as Headroom from 'headroom.js';
export { CXLAppLayoutElement } from './components/cxl-app-layout.js';
export { CXLCardElement } from './components/cxl-card.js';
+export { CXLCourseCardElement } from './components/cxl-course-card.js';
export { CXLMarketingNavElement } from './components/cxl-marketing-nav.js';
export { CXLSectionElement } from './components/cxl-section.js';
+export { CXLStatsElement } from './components/cxl-stats.js';
export { CXLTabsSliderElement } from './components/cxl-tabs-slider.js';
// Order matters.
diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=course].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=course].stories.js
new file mode 100644
index 000000000..aa3edc1da
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=course].stories.js
@@ -0,0 +1,15 @@
+import { CourseCardTemplate, args } from './template.js'
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-course-card',
+ parameters: {
+ layout: 'centered'
+ }
+};
+
+
+export const CXLCourseCard = CourseCardTemplate.bind({});
+
+CXLCourseCard.args = args;
diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js
new file mode 100644
index 000000000..085874089
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=playbook].stories.js
@@ -0,0 +1,24 @@
+import { CourseCardTemplate, args } from './template.js';
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-course-card',
+ parameters: {
+ layout: 'centered',
+ },
+};
+
+export const CXLCourseCardPlaybook = CourseCardTemplate.bind({});
+
+CXLCourseCardPlaybook.args = {
+ ...args,
+ theme: 'playbook',
+ name: 'The Why’s and How’s of Marketing Attribution',
+ time: '12 days ago',
+ description:
+ 'Master the strategies, tactics, metrics, and wisdom you need to become an ABM leader and accelerate the growth of your company and of your career.',
+ contentTags: [],
+ tags: ['Growth Marketing'],
+ showTimeIcon: false,
+};
diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js
new file mode 100644
index 000000000..02ea9e819
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=training].stories.js
@@ -0,0 +1,24 @@
+import { CourseCardTemplate, args } from './template.js';
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-course-card',
+ parameters: {
+ layout: 'centered',
+ },
+};
+
+export const CXLCourseCardTraining = CourseCardTemplate.bind({});
+
+CXLCourseCardTraining.args = {
+ ...args,
+ theme: 'training',
+ name: 'A/B testing mastery',
+ description:
+ 'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.',
+ tags: ['CRO', 'Branding'],
+ contentTags: [],
+ more: '',
+ showTimeIcon: false,
+};
diff --git a/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js b/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js
new file mode 100644
index 000000000..22a081c3e
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/[theme=video].stories.js
@@ -0,0 +1,25 @@
+import { CourseCardTemplate, args } from './template.js';
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-course-card',
+ parameters: {
+ layout: 'centered',
+ },
+};
+
+export const CXLCourseCardVideo = CourseCardTemplate.bind({});
+
+CXLCourseCardVideo.args = {
+ ...args,
+ theme: 'video',
+ name: 'A/B testing mastery',
+ description:
+ 'Understand testing approaches that work (and pitfalls that don’t) to get more wins and insights from optimization efforts.',
+ tags: ['CRO'],
+ contentTags: ['running experiments', 'customer base studies', 'prioritization'],
+ time: '4 days ago',
+ new: true,
+ showTimeIcon: false,
+};
diff --git a/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js b/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js
new file mode 100644
index 000000000..67dcfe103
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/course-dashboard-varying-heights.stories.js
@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-lumo-styles';
+import { CXLCourseCard } from './[theme=course].stories.js';
+import { CXLCourseCardVideo } from './[theme=video].stories.js';
+import { CXLCourseCardPlaybook } from './[theme=playbook].stories.js';
+import { CXLCourseCardTraining } from './[theme=training].stories.js';
+import { sectionStyles } from './template.js';
+
+export default {
+ title: 'CXL UI/cxl-course-card',
+};
+
+const ExtraCardVideoArgs = {
+ ...CXLCourseCardVideo.args,
+ contentTags: [...CXLCourseCardVideo.args.contentTags, 'Another tag', 'Much longer content tag' ],
+ description: `${CXLCourseCardVideo.args.description} One more line to test the layout behavior on longer descriptions, with at least four line of text.`
+}
+
+const ExtraCardTrainingArgs = {
+ ...CXLCourseCardTraining.args,
+ description: 'Short description',
+ more: 'More',
+}
+
+const Template = () => html`
+ ${sectionStyles}
+
+
+ ${CXLCourseCard(CXLCourseCard.args)}
+ ${CXLCourseCardPlaybook(CXLCourseCardPlaybook.args)}
+ ${CXLCourseCardTraining(ExtraCardTrainingArgs)}
+ ${CXLCourseCardVideo(ExtraCardVideoArgs)}
+ ${CXLCourseCardVideo(CXLCourseCardVideo.args)}
+ ${CXLCourseCardTraining(CXLCourseCardTraining.args)}
+
+`;
+
+export const CoursesDashboardDifferentHeights = Template.bind({});
diff --git a/packages/storybook/cxl-ui/cxl-course-card/course-dashboard.stories.js b/packages/storybook/cxl-ui/cxl-course-card/course-dashboard.stories.js
new file mode 100644
index 000000000..abee5d0a5
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/course-dashboard.stories.js
@@ -0,0 +1,25 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-course-card.js';
+import '@conversionxl/cxl-lumo-styles';
+import { CXLCourseCard } from './[theme=course].stories.js';
+import { CXLCourseCardVideo } from './[theme=video].stories.js';
+import { CXLCourseCardPlaybook } from './[theme=playbook].stories.js';
+import { CXLCourseCardTraining } from './[theme=training].stories.js';
+import { sectionStyles } from './template.js';
+
+export default {
+ title: 'CXL UI/cxl-course-card',
+};
+
+const Template = () => html`
+ ${sectionStyles}
+
+
+ ${CXLCourseCard(CXLCourseCard.args)}
+ ${CXLCourseCardPlaybook(CXLCourseCardPlaybook.args)}
+ ${CXLCourseCardTraining(CXLCourseCardTraining.args)}
+ ${CXLCourseCardVideo(CXLCourseCardVideo.args)}
+
+`;
+
+export const CoursesDashboard = Template.bind({});
diff --git a/packages/storybook/cxl-ui/cxl-course-card/template.js b/packages/storybook/cxl-ui/cxl-course-card/template.js
new file mode 100644
index 000000000..2aee1f7ca
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-course-card/template.js
@@ -0,0 +1,80 @@
+import { html } from 'lit';
+
+const renderTags = (tags, slot) =>
+ tags.map(
+ (tag, i) =>
+ html`${i > 0 ? html` | ` : ''}${tag}`
+ );
+
+export const CourseCardTemplate = (course) => html`
+
+ ${course.tags ? renderTags(course.tags, 'tags') : ''}
+ ${course.description}
+ ${course.contentTags ? renderTags(course.contentTags, 'content-tags') : ''}
+ ${course.more ? html`${course.more}
` : ''}
+
+`;
+
+export const args = {
+ id: 'cxl-course-1',
+ name: 'Account based marketing',
+ time: '3h 00min',
+ instructor: 'Tom Wesseling',
+ description:
+ 'Master the strategies, tactics, metrics, and wisdom you need to become an ABM leader and accelerate the growth of your company and of your career.',
+ contentTags: ['B2B', 'campaigns', 'pilot planning'],
+ theme: 'course',
+ tags: ['Marketing', 'Analytics'],
+ avatar:
+ 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+ more: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+ new: false,
+ showTimeIcon: true,
+};
+
+export const sectionStyles = html`
+
+`;
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
new file mode 100644
index 000000000..de240ec2e
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-featured-course-card/dashboard-slider.stories.js
@@ -0,0 +1,31 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-featured-course-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider.js';
+import '@conversionxl/cxl-lumo-styles';
+import { CXLFeatureadCourseCard } from './default.stories.js';
+
+export default {
+ title: 'CXL UI/cxl-featured-course-card',
+};
+
+const Template = () => html`
+
+
+
+ ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
+ ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
+ ${CXLFeatureadCourseCard(CXLFeatureadCourseCard.args)}
+
+`;
+
+export const DashboardSlider = Template.bind({});
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
new file mode 100644
index 000000000..bb3385efb
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-featured-course-card/default.stories.js
@@ -0,0 +1,45 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@conversionxl/cxl-ui/src/components/cxl-featured-course-card.js';
+
+export default {
+ title: 'CXL UI/cxl-featured-course-card',
+};
+
+const renderTags = (tags, slot) =>
+ tags.map(
+ (tag, i) =>
+ html`${i > 0 ? html` | ` : ''}${tag}`
+ );
+
+const FeaturedCourseCardTemplate = (course) => html`
+
+ ${course.tags ? renderTags(course.tags, 'tags') : ''}
+ ${unsafeHTML(course.description)}
+
+`;
+
+export const CXLFeatureadCourseCard = FeaturedCourseCardTemplate.bind({});
+
+CXLFeatureadCourseCard.args = {
+ id: 'cxl-featured-course-1',
+ theme: 'Featured course',
+ name: 'Get ahead with Google Analytics 4',
+ time: '5h 04min',
+ instructor: 'Fred Pike',
+ description:
+ "GA4 is packed with new capabilities that help you improve acquisition, engagement, revenue, and retention for your website.
In five hours, we'll have you confident, capable, and armed with new insights into your business and your website. This course pays back for you real quick.
",
+ tags: ['Marketing', 'Analytics'],
+ ctaUrl: 'https://cxl.com',
+ avatar:
+ 'https://cxl.com/institute/wp-content/uploads/2020/04/fred-pike-instructor-headshot-1x1-color-bw-min-1024x1024.png',
+};
diff --git a/packages/storybook/cxl-ui/cxl-light-card/default.stories.js b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js
new file mode 100644
index 000000000..b12ad6736
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-light-card/default.stories.js
@@ -0,0 +1,46 @@
+import { html, nothing } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@conversionxl/cxl-ui/src/components/cxl-light-card.js';
+import '@conversionxl/cxl-lumo-styles';
+
+export default {
+ title: 'CXL UI/cxl-light-card',
+ parameters: {
+ layout: 'centered',
+ },
+};
+
+const Template = (card) => html`
+
+ ${card.footer ? html` ` : nothing}
+
+`;
+
+export const CXLLightCard = Template.bind({});
+export const CXLLightCardFooter = Template.bind({});
+
+CXLLightCard.args = {
+ theme: 'light-card',
+ new: false,
+ completed: false,
+ name: 'Account based marketing',
+ time: '3h 00min',
+ instructor: 'Ton Wesseling',
+ avatar:
+ 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+ footer: '',
+};
+
+CXLLightCardFooter.args = {
+ ...CXLLightCard.args,
+ footer:
+ 'Team Roadmap Personal Roadmap',
+};
diff --git a/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js b/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js
new file mode 100644
index 000000000..10e59c6c1
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-light-card/light-card-slider.stories.js
@@ -0,0 +1,39 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-light-card.js';
+import '@conversionxl/cxl-ui/src/components/cxl-tabs-slider.js';
+import '@conversionxl/cxl-lumo-styles';
+import { CXLLightCard } from './default.stories.js';
+
+export default {
+ title: 'CXL UI/cxl-light-card',
+};
+
+const Template = ({ numberOfCards }) => html`
+
+ ${Array.from(
+ { length: numberOfCards },
+ () => html`
+ ${CXLLightCard({
+ ...CXLLightCard.args,
+ })}
+ `
+ )}
+
+`;
+
+export const LightCardSlider = Template.bind({});
+
+LightCardSlider.args = {
+ numberOfCards: 3,
+};
+
+CXLLightCard.args = {
+ theme: 'light-card',
+ name: 'Account based marketing',
+ time: '3h 00min',
+ instructor: 'Ton Wesseling',
+ avatar:
+ 'https://cxl.com/institute/wp-content/uploads/2020/05/48192546_10156982340630746_8127333122065825792_n-wpv_400pxx400px_center_center.jpg',
+};
diff --git a/packages/storybook/cxl-ui/cxl-search-filters/cxl-filter-header.stories.js b/packages/storybook/cxl-ui/cxl-search-filters/cxl-filter-header.stories.js
new file mode 100644
index 000000000..dbaaf3047
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-search-filters/cxl-filter-header.stories.js
@@ -0,0 +1,63 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-filter-header.js';
+import '@conversionxl/cxl-ui/src/components/cxl-filter-header-item.js';
+
+export default {
+ title: 'CXL UI/cxl-search-filters',
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'CXL Search Filter Header',
+ },
+ },
+ },
+}
+
+const mockMarkAsChecked = (e) => {
+ const el = e.currentTarget
+ const parent = el.parentElement
+ const children = [...parent.children]
+
+ children.forEach(child => {
+ if (child.nodeName === 'CXL-FILTER-HEADER-ITEM') {
+ child.classList.remove('checked')
+ }
+ });
+ el.classList.add('checked')
+}
+
+export const CXLFilterHeader = ({ filters }) => html`
+
+
+
+ ${filters.map((filter, i) => html``)}
+
+
+
+`;
+
+CXLFilterHeader.args = {
+ filters: [
+ { label: 'All contents', count: '108' },
+ { label: 'Deep marketing', count: '32' },
+ { label: 'Broad marketing', count: '40' },
+ { label: 'Fast marketing', count: '36' },
+ ],
+}
diff --git a/packages/storybook/cxl-ui/cxl-search-filters/cxl-search-filters-panel.stories.js b/packages/storybook/cxl-ui/cxl-search-filters/cxl-search-filters-panel.stories.js
new file mode 100644
index 000000000..b08007f04
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-search-filters/cxl-search-filters-panel.stories.js
@@ -0,0 +1,30 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-search-filters-panel.js';
+import '@conversionxl/cxl-ui/src/components/cxl-search-filters-item.js';
+
+export default {
+ title: 'CXL UI/cxl-search-filters',
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'CXL Search Filters Panels',
+ },
+ },
+ },
+}
+
+export const CXLSearchFiltersPanel = ({ label, filters }) => html`
+
+ ${filters.map(filter => html``)}
+
+`;
+
+CXLSearchFiltersPanel.args = {
+ label: 'Categories',
+ filters: [
+ { label: 'Brand Marketing', count: '10' },
+ { label: 'Convertion Optimization', count: '20' },
+ { label: 'Digital psychology and persuasion', count: '30' },
+ ],
+}
diff --git a/packages/storybook/cxl-ui/cxl-search-filters/cxl-search-filters.stories.js b/packages/storybook/cxl-ui/cxl-search-filters/cxl-search-filters.stories.js
new file mode 100644
index 000000000..6543b605d
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-search-filters/cxl-search-filters.stories.js
@@ -0,0 +1,34 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-vaadin-accordion';
+import '@conversionxl/cxl-ui/src/components/cxl-search-filters.js';
+import { CXLSearchFiltersPanel } from './cxl-search-filters-panel.stories';
+
+
+export default {
+ title: 'CXL UI/cxl-search-filters',
+ parameters: {
+ layout: 'centered',
+ docs: {
+ description: {
+ component: 'CXL Search Filters',
+ },
+ },
+ },
+}
+const tagsPanelArgs = {
+ label: 'Tags',
+ filters: [
+ { label: 'A' },
+ { label: 'B' },
+ { label: 'C' },
+ { label: 'D' },
+ { label: 'E' },
+ ]
+}
+
+export const CXLSearchFilters = () => html`
+
+ ${CXLSearchFiltersPanel(CXLSearchFiltersPanel.args)}
+ ${CXLSearchFiltersPanel(tagsPanelArgs)}
+
+`;
diff --git a/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
new file mode 100644
index 000000000..54eaef5c9
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-stats/cxl-stats.data.json
@@ -0,0 +1,18 @@
+[
+ {
+ "title": "Categories
completed",
+ "count": "1"
+ },
+ {
+ "title": "Courses
completed",
+ "count": "30"
+ },
+ {
+ "title": "Lessons
completed",
+ "count": "95"
+ },
+ {
+ "title": "Complete
library",
+ "count": "12%"
+ }
+]
diff --git a/packages/storybook/cxl-ui/cxl-stats/default.stories.js b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
new file mode 100644
index 000000000..06f94aba2
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-stats/default.stories.js
@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@conversionxl/cxl-lumo-styles';
+import '@conversionxl/cxl-ui/src/components/cxl-stats.js';
+import statsData from './cxl-stats.data.json';
+
+export default {
+ title: 'CXL UI/cxl-stats',
+};
+
+export const CXLStats = ({ statsCount }) => {
+ for (let i = 0; i < statsCount; i += 1) {
+ const newItem = {
+ title: 'Complete
library',
+ count: '12%',
+ };
+
+ statsData.push(newItem);
+ }
+
+ return html`
+
+ ${statsData.slice(0, statsCount).map(
+ (el) => html`
+
+
${unsafeHTML(el.title)}
+
${el.count}
+