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

packages/cxl-ui/scss/cxl-filter-item.scss

@@ -0,0 +1,24 @@
+: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);
+    }
+  }
+
+}

packages/cxl-ui/scss/cxl-filter-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;
+      color: var(--lumo-contrast);
+      font-size: var(--lumo-font-size-s);
+    }
+
+    &::part(toggle) {
+      background-color: unset;
+    }
+  }
+}

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;
+  }
+}

packages/cxl-ui/src/components/cxl-filter-item.js

@@ -0,0 +1,25 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import '@vaadin/checkbox';
+import cxlDashboardFilterItemStyles from '../styles/cxl-filter-item-css.js';
+
+@customElement('cxl-filter-item')
+export class CXLFilterItemElement extends LitElement {
+  static get styles() {
+    return [cxlDashboardFilterItemStyles];
+  }
+
+  @property({ type: String }) label = '';
+
+  @property({ type: String }) value = '';
+
+  @property({ type: Number }) count = 0;
+
+  render () {
+    return html`
+      <vaadin-checkbox value=${this.value} label="${this.label}"></vaadin-checkbox>
+      <span class="count">(${this.count})</span>
+    `
+  }
+}

packages/cxl-ui/src/components/cxl-filter-panel.js

@@ -0,0 +1,30 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './cxl-vaadin-accordion';
+import '@vaadin/accordion/vaadin-accordion-panel'
+import cxlDashboardFilterPanelStyles from '../styles/cxl-filter-panel-css.js';
+
+@customElement('cxl-filter-panel')
+export class CXLFilterPanelElement extends LitElement {
+  static get styles() {
+    return [cxlDashboardFilterPanelStyles];
+  }
+
+  @property({ type: Boolean }) opened = '';
+
+  @property({ type: String }) label = '';
+
+  @property({ type: String }) value = '';
+
+  render () {
+    return html`
+      <vaadin-accordion-panel theme="reverse">
+        <div slot="summary">${this.label}</div>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </vaadin-accordion-panel>
+    `
+  }
+}

packages/cxl-ui/src/components/cxl-search-filters.js

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import './cxl-vaadin-accordion';
+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;
+
+  render () {
+    return html`
+        <header>
+          <span class="label">${this.label}</span>
+          <span class="count">(${this.count})</span>
+        </header>
+        <cxl-vaadin-accordion>
+          <slot></slot>
+        </cxl-vaadin-accordion>
+        <vaadin-button theme="tertiary small" >
+          <vaadin-icon icon="lumo:cross" slot="prefix"></vaadin-icon>
+          <span>Reset filters</span>
+        </vaadin-button>
+    `
+  }
+}

packages/storybook/cxl-ui/cxl-search-filters/cxl-filter-panel.stories.js

@@ -0,0 +1,30 @@
+import { html } from 'lit';
+import '@conversionxl/cxl-ui/src/components/cxl-filter-panel.js';
+import '@conversionxl/cxl-ui/src/components/cxl-filter-item.js';
+
+export default {
+  title: 'CXL UI/cxl-search-filters',
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'CXL Search Filters Panels',
+      },
+    },
+  },
+}
+
+export const CXLFilterPanel = ({ label, filters }) => html`
+  <cxl-filter-panel label=${label} >
+    ${filters.map(filter => html`<cxl-filter-item label="${filter.label}" count="${filter.count}"></cxl-filter-item>`)}
+  </cxl-filter-panel>
+`;
+
+CXLFilterPanel.args = {
+  label: 'Categories',
+  filters: [
+    { label: 'Brand Marketing', count: '10' },
+    { label: 'Convertion Optimization', count: '20' },
+    { label: 'Digital psychology and persuasion', count: '30' },
+  ],
+}

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 '@conversionxl/cxl-ui/src/components/cxl-filter-panel.js';
+import { CXLFilterPanel } from './cxl-filter-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`
+  <cxl-search-filters>
+    ${CXLFilterPanel(CXLFilterPanel.args)}
+    ${CXLFilterPanel(tagsPanelArgs)}
+  </cxl-search-filters>
+`;