@aquera/nile-elements 2.0.18 → 2.0.19

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "2.0.18",
+  "version": "2.0.19",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-breadcrumb/nile-breadcrumb.test.ts

@@ -104,4 +104,61 @@ describe('NileBreadcrumb', () => {
   it('98. slot is default (no name)', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item></nile-breadcrumb>`); const slot = el.shadowRoot!.querySelector('slot'); expect(slot!.hasAttribute('name')).to.be.false; });
   it('99. no nile-divider', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item></nile-breadcrumb>`); expect(el.shadowRoot!.querySelector('nile-divider')).to.be.null; });
   it('100. full integration', async () => { const el = await fixture<NileBreadcrumb>(html`<nile-breadcrumb class="b" id="b1" role="navigation" aria-label="Breadcrumb"><nile-breadcrumb-item>Home</nile-breadcrumb-item><nile-breadcrumb-item>Settings</nile-breadcrumb-item><nile-breadcrumb-item>Profile</nile-breadcrumb-item></nile-breadcrumb>`); expect(el.id).to.equal('b1'); expect(el.getAttribute('role')).to.equal('navigation'); expect(el.querySelectorAll('nile-breadcrumb-item').length).to.equal(3); expect(el.textContent).to.contain('Home'); expect(el.textContent).to.contain('Profile'); });
+
+  describe('variant', () => {
+    const tpl = (variant?: string) => variant
+      ? html`<nile-breadcrumb variant=${variant}><nile-breadcrumb-item>A</nile-breadcrumb-item><nile-breadcrumb-item>B</nile-breadcrumb-item></nile-breadcrumb>`
+      : html`<nile-breadcrumb><nile-breadcrumb-item>A</nile-breadcrumb-item><nile-breadcrumb-item>B</nile-breadcrumb-item></nile-breadcrumb>`;
+    const items = (el: NileBreadcrumb) => [...el.querySelectorAll('nile-breadcrumb-item')];
+
+    it('defaults to "default" and reflects', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      expect(el.variant).to.equal('default');
+      expect(el.getAttribute('variant')).to.equal('default');
+      items(el).forEach(i => expect(i.variant).to.equal('default'));
+    });
+
+    it('propagates "outlined" to every item', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      await Promise.all(items(el).map(i => i.updateComplete));
+      items(el).forEach(i => {
+        expect(i.getAttribute('variant')).to.equal('outlined');
+        expect(i.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item--outlined')).to.be.true;
+      });
+    });
+
+    it('keeps the existing text-colour classes when outlined', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      const [a, b] = items(el);
+      await a.updateComplete; await b.updateComplete;
+      expect(a.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item__slot-text')).to.be.true;
+      expect(b.shadowRoot!.querySelector('[part="item"]')!.classList.contains('nile-breadcrumb-item__last-slot-text')).to.be.true;
+    });
+
+    it('updates items when variant changes at runtime', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      el.variant = 'outlined';
+      await el.updateComplete;
+      items(el).forEach(i => expect(i.variant).to.equal('outlined'));
+      el.variant = 'default';
+      await el.updateComplete;
+      items(el).forEach(i => expect(i.variant).to.equal('default'));
+    });
+
+    it('applies the variant to items added later', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl('outlined'));
+      const added = document.createElement('nile-breadcrumb-item');
+      added.textContent = 'C';
+      el.appendChild(added);
+      await new Promise(r => setTimeout(r));
+      expect(added.variant).to.equal('outlined');
+    });
+
+    it('no chip class in the default variant', async () => {
+      const el = await fixture<NileBreadcrumb>(tpl());
+      const [a] = items(el);
+      await a.updateComplete;
+      expect(a.shadowRoot!.querySelector('.nile-breadcrumb-item--outlined')).to.be.null;
+    });
+  });
 });

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -31,6 +31,12 @@ export class NileBreadcrumb extends NileElement {
     return [styles];
   }
 
+  /**
+   * Visual style of the items. `outlined` renders each item inside an outlined chip;
+   * text colours are unchanged. Propagated to every slotted `nile-breadcrumb-item`.
+   */
+  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';
+
   /* #endregion */
 
   /* #region Methods */
@@ -46,7 +52,20 @@ export class NileBreadcrumb extends NileElement {
     });
   }
 
+  protected updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('variant')) {
+      this.syncItemVariant();
+    }
+  }
+
+  private syncItemVariant() {
+    this.querySelectorAll('nile-breadcrumb-item').forEach(item => {
+      item.variant = this.variant;
+    });
+  }
+
   private changeLastItem() {
+    this.syncItemVariant();
     const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
     const itemslength = items.length;
     for (let i = 0; i < itemslength - 1; i++) {

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts

@@ -46,6 +46,18 @@ export const styles = css`
   .nile-breadcrumb-item__last-slot-text {
     color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
   }
+
+  .nile-breadcrumb-item--outlined {
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+  }
+
+  .nile-breadcrumb-item--outlined.nile-breadcrumb-item__slot-text:hover,
+  .nile-breadcrumb-item--outlined.nile-breadcrumb-item__last-slot-text {
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+  }
 `;
 
 export default [styles];

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -44,6 +44,12 @@ export class NileBreadcrumbItem extends NileElement {
 
   @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
 
+  /**
+   * Visual style of the item. `outlined` wraps the text in an outlined chip.
+   * Set automatically from the parent `nile-breadcrumb`'s `variant`.
+   */
+  @property({ type: String, reflect: true }) variant: 'default' | 'outlined' = 'default';
+
   private handleClick() {
     if (this.isLast) {
       return;
@@ -57,6 +63,7 @@ export class NileBreadcrumbItem extends NileElement {
         class=${classMap({
           'nile-breadcrumb-item__slot-text': !this.isLast,
           'nile-breadcrumb-item__last-slot-text': this.isLast,
+          'nile-breadcrumb-item--outlined': this.variant === 'outlined',
         })}
         @click=${this.handleClick}
         >