Content tree - Content tree base component

src/components/modus-wc-button/readme.md

@@ -18,7 +18,7 @@ The component supports a `<slot>` for injecting content within the button, simil
 | `disabled`    | `disabled`     | If true, the button will be disabled.                                | `boolean \| undefined`                                            | `false`       |
 | `fullWidth`   | `full-width`   | If true, the button will take the full width of its container.       | `boolean \| undefined`                                            | `false`       |
 | `pressed`     | `pressed`      | If true, the button will be in a pressed state (for toggle buttons). | `boolean \| undefined`                                            | `false`       |
-| `shape`       | `shape`        | The shape of the button.                                             | `"circle" \| "rectangle" \| "square"`                             | `'rectangle'` |
+| `shape`       | `shape`        | The shape of the button.                                             | `"circle" \| "ellipse" \| "rectangle" \| "square"`                | `'rectangle'` |
 | `size`        | `size`         | The size of the button.                                              | `"lg" \| "md" \| "sm" \| "xs"`                                    | `'md'`        |
 | `type`        | `type`         | The type of the button.                                              | `"button" \| "reset" \| "submit"`                                 | `'button'`    |
 | `variant`     | `variant`      | The variant of the button.                                           | `"borderless" \| "filled" \| "outlined"`                          | `'filled'`    |
@@ -37,6 +37,7 @@ The component supports a `<slot>` for injecting content within the button, simil
 
  - [modus-wc-alert](../modus-wc-alert)
  - [modus-wc-autocomplete](../modus-wc-autocomplete)
+ - [modus-wc-content-tree](../modus-wc-content-tree)
  - [modus-wc-date](../modus-wc-date)
  - [modus-wc-dropdown-menu](../modus-wc-dropdown-menu)
  - [modus-wc-modal](../modus-wc-modal)
@@ -47,6 +48,7 @@ The component supports a `<slot>` for injecting content within the button, simil
 graph TD;
   modus-wc-alert --> modus-wc-button
   modus-wc-autocomplete --> modus-wc-button
+  modus-wc-content-tree --> modus-wc-button
   modus-wc-date --> modus-wc-button
   modus-wc-dropdown-menu --> modus-wc-button
   modus-wc-modal --> modus-wc-button

src/components/modus-wc-content-tree/__snapshots__/modus-wc-content-tree.spec.ts.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`modus-wc-content-tree should render with custom props 1`] = `
+<modus-wc-content-tree custom-class="test-class" expand-all="true" multi-select="true" selected-values="[&quot;item1&quot;, &quot;item2&quot;]">
+  <!---->
+  <div class="modus-wc-content-tree-wrapper test-class">
+    <div class="modus-wc-content-tree-header">
+      <div class="modus-wc-content-tree-search">
+        <modus-wc-text-input customclass="modus-wc-content-tree-search-input" include-clear="" include-search="" placeholder="Search..." value=""></modus-wc-text-input>
+      </div>
+      <div class="modus-wc-content-tree-actions">
+        <modus-wc-button aria-label="Expand all" shape="circle" size="sm" variant="borderless">
+          <modus-wc-icon customclass="modus-wc-content-tree-action-icon" decorative="" name="unfold_more" size="sm" variant="solid"></modus-wc-icon>
+        </modus-wc-button>
+      </div>
+    </div>
+    <div class="modus-wc-content-tree-content" role="tree">
+      <div class="modus-wc-content-tree-empty">
+        <modus-wc-icon customclass="modus-wc-content-tree-empty-icon" name="folder_open" variant="solid"></modus-wc-icon>
+        <modus-wc-typography customclass="modus-wc-content-tree-empty-text" hierarchy="p" label="Empty Content Tree" size="lg" weight="normal"></modus-wc-typography>
+      </div>
+    </div>
+  </div>
+</modus-wc-content-tree>
+`;
+
+exports[`modus-wc-content-tree should render with default props 1`] = `
+<modus-wc-content-tree>
+  <!---->
+  <div class="modus-wc-content-tree-wrapper">
+    <div class="modus-wc-content-tree-header">
+      <div class="modus-wc-content-tree-search">
+        <modus-wc-text-input customclass="modus-wc-content-tree-search-input" include-clear="" include-search="" placeholder="Search..." value=""></modus-wc-text-input>
+      </div>
+      <div class="modus-wc-content-tree-actions">
+        <modus-wc-button aria-label="Expand all" shape="circle" size="sm" variant="borderless">
+          <modus-wc-icon customclass="modus-wc-content-tree-action-icon" decorative="" name="unfold_more" size="sm" variant="solid"></modus-wc-icon>
+        </modus-wc-button>
+      </div>
+    </div>
+    <div class="modus-wc-content-tree-content" role="tree">
+      <div class="modus-wc-content-tree-empty">
+        <modus-wc-icon customclass="modus-wc-content-tree-empty-icon" name="folder_open" variant="solid"></modus-wc-icon>
+        <modus-wc-typography customclass="modus-wc-content-tree-empty-text" hierarchy="p" label="Empty Content Tree" size="lg" weight="normal"></modus-wc-typography>
+      </div>
+    </div>
+  </div>
+</modus-wc-content-tree>
+`;

src/components/modus-wc-content-tree/modus-wc-content-tree.scss

@@ -0,0 +1,74 @@
+/**
+ * This component uses menu items for the tree structure.
+ * Only add styles here that should not be applied by Tailwind, Daisy, or the theme.
+ */
+
+modus-wc-content-tree {
+  background-color: var(--modus-wc-color-base-page);
+  border: 1px solid var(--modus-wc-color-base-100);
+  display: block;
+  min-width: 320px;
+  width: 100%;
+
+  .modus-wc-content-tree-actions {
+    align-items: center;
+    display: flex;
+    gap: var(--modus-wc-spacing-xs, 0.5rem);
+    justify-content: flex-end;
+    margin-top: var(--modus-wc-spacing-md, 1rem);
+    padding-bottom: var(--modus-wc-spacing-sm, 0.75rem);
+
+    .modus-wc-content-tree-action-icon {
+      color: var(--modus-wc-color-black);
+      cursor: pointer;
+    }
+  }
+
+  .modus-wc-content-tree-add-node {
+    margin-bottom: var(--modus-wc-spacing-md, 1rem);
+  }
+
+  .modus-wc-content-tree-content {
+    align-items: center;
+    display: block;
+    min-height: 500px;
+  }
+
+  li.modus-wc-tree-item-selected:not(.modus-wc-tree-dropdown-show li) {
+    border-inline-start: 2px solid var(--modus-wc-color-primary);
+  }
+
+  .modus-wc-content-tree-header {
+    padding: var(--modus-wc-spacing-md, 1rem);
+  }
+
+  .modus-wc-content-tree-empty {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    gap: var(--modus-wc-spacing-md, 1rem);
+    justify-content: center;
+    min-height: 500px;
+    padding: 1rem;
+
+    .modus-wc-content-tree-empty-icon {
+      color: var(--modus-wc-color-text-secondary, #6b7280);
+    }
+
+    .modus-wc-content-tree-empty-text {
+      color: var(--modus-wc-color-text-secondary, #6b7280);
+      font-size: var(--modus-wc-font-size-md, 1rem);
+      text-align: center;
+    }
+  }
+}
+
+[data-theme='modus-classic-dark'],
+[data-theme='modus-modern-dark'],
+[data-theme='connect-dark'] modus-wc-content-tree {
+  .modus-wc-content-tree-actions {
+    .modus-wc-content-tree-action-icon {
+      color: var(--modus-wc-color-gray-light);
+    }
+  }
+}

src/components/modus-wc-content-tree/modus-wc-content-tree.spec.ts

@@ -0,0 +1,82 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { ModusWcContentTree } from './modus-wc-content-tree';
+
+describe('modus-wc-content-tree', () => {
+  it('should render with default props', async () => {
+    const page = await newSpecPage({
+      components: [ModusWcContentTree],
+      html: '<modus-wc-content-tree></modus-wc-content-tree>',
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should render with custom props', async () => {
+    const page = await newSpecPage({
+      components: [ModusWcContentTree],
+      html: `<modus-wc-content-tree
+                    custom-class="test-class"
+                    expand-all="true"
+                    multi-select="true"
+                    selected-values='["item1", "item2"]'>
+                    </modus-wc-content-tree>`,
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should filter nodes based on search input', async () => {
+    const page = await newSpecPage({
+      components: [ModusWcContentTree],
+      html: `<modus-wc-content-tree include-search="true">
+                <modus-wc-tree-item value="item1">Item 1</modus-wc-tree-item>
+                <modus-wc-tree-item value="item2">Item 2</modus-wc-tree-item>
+                <modus-wc-tree-item value="item3">Item 3</modus-wc-tree-item>
+              </modus-wc-content-tree>`,
+    });
+
+    const searchInput = page.root!.querySelector('input[type="search"]');
+    expect(searchInput as HTMLInputElement).toBeDefined();
+    if (searchInput) {
+      (searchInput as HTMLInputElement).value = 'Item 2';
+      searchInput.dispatchEvent(new Event('input'));
+      await page.waitForChanges();
+      const visibleItems = page.root!.querySelectorAll(
+        'modus-wc-tree-item:not([hidden])'
+      );
+      expect(visibleItems.length).toBe(1);
+      expect(visibleItems[0].getAttribute('value')).toBe('item2');
+    }
+  });
+
+  it('clears filter on Escape key', async () => {
+    const page = await newSpecPage({
+      components: [ModusWcContentTree],
+      html: `
+      <modus-wc-content-tree>
+        <modus-wc-tree-item label="Alpha"></modus-wc-tree-item>
+        <modus-wc-tree-item label="Beta"></modus-wc-tree-item>
+      </modus-wc-content-tree>
+    `,
+    });
+
+    const input = page.root!.querySelector('modus-wc-text-input')!;
+
+    input.dispatchEvent(
+      new CustomEvent('inputChange', {
+        bubbles: true,
+        composed: true,
+      })
+    );
+
+    await page.waitForChanges();
+
+    // Now press Escape
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await page.waitForChanges();
+
+    // Assert all items visible
+    const items = page.root!.querySelectorAll('modus-wc-tree-item');
+    items.forEach((item) => {
+      expect((item as HTMLElement).style.display).toBe('');
+    });
+  });
+});