@repobit/dex-system-design 0.25.12 → 0.26.0

package/src/components/breadcrumb/breadcrumb.js

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
-import { tokens } from '../../tokens/tokens.js';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import '../link/link.js';
 import '../paragraph/paragraph.js';
 import breadcrumbCSS from './breadcrumb.css.js';
@@ -23,14 +24,25 @@ export class Breadcrumb extends LitElement {
     this._checkMobile();
     this._setupResizeListener();
     this._updateChildItems();
+    /* Items slotted later still have to be told, or they render with the
+       constructor default. */
+    this.shadowRoot?.querySelector('slot')
+      ?.addEventListener('slotchange', () => this._updateChildItems());
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('noTrailingSlash')) {
+    /* _isMobile is the orientation, so a change to it has to reach the items
+       as well as the nav; without this the class on the nav flipped and the
+       items kept the styling of the layout they had left. */
+    if (changedProperties.has('noTrailingSlash') || changedProperties.has('_isMobile')) {
       this._updateChildItems();
     }
   }
 
+  get _orientation() {
+    return this._isMobile ? 'vertical' : 'horizontal';
+  }
+
   _updateChildItems() {
     const slot = this.shadowRoot?.querySelector('slot');
     if (!slot) return;
@@ -40,11 +52,22 @@ export class Breadcrumb extends LitElement {
       if (item.updateNoTrailingSlash) {
         item.updateNoTrailingSlash(this.noTrailingSlash);
       }
+      /* The state path across the boundary. Setting the property rather than
+         the attribute keeps Lit's reflection in charge of the DOM. */
+      if ('orientation' in item) {
+        item.orientation = this._orientation;
+      }
     });
   }
 
   _checkMobile() {
-    this._isMobile = window.innerWidth <= this.mobileBreakpoint;
+    /* Strictly narrower, which is what the rest of the package means by a
+       breakpoint: shared/token-scales.js derives below('md') as
+       max-width 767.98px so that exactly 768px is the wider layout. With <=
+       this element was the one component that read 768 as mobile, so at that
+       one width a page could show a vertical breadcrumb above a desktop
+       anchor nav. */
+    this._isMobile = window.innerWidth < this.mobileBreakpoint;
   }
 
   _setupResizeListener() {
@@ -72,10 +95,10 @@ export class Breadcrumb extends LitElement {
   }
 
   render() {
-    const orientation = this._isMobile ? 'vertical' : 'horizontal';
+    const orientation = this._orientation;
 
     return html`
-      <nav class="bd-breadcrumb bd-breadcrumb--${orientation}" 
+      <nav class="bd-breadcrumb bd-breadcrumb--${orientation}"
            aria-label="Breadcrumb">
         <div class="bd-breadcrumb__items">
           <slot></slot>
@@ -84,14 +107,21 @@ export class Breadcrumb extends LitElement {
     `;
   }
 
-  static styles = [tokens, breadcrumbCSS];
+  static styles = [breadcrumbCSS];
 }
 
 export class BreadcrumbItem extends LitElement {
   static properties = {
     href           : { type: String },
     current        : { type: Boolean, reflect: true },
-    noTrailingSlash: { type: Boolean }
+    noTrailingSlash: { type: Boolean },
+    /**
+     * Set by the parent bd-breadcrumb, reflected so the item's own stylesheet
+     * can read it. The item does not work this out for itself: the breakpoint
+     * belongs to the breadcrumb, and two elements detecting the same viewport
+     * separately is how they drift apart.
+     */
+    orientation    : { type: String, reflect: true }
   };
 
   constructor() {
@@ -99,6 +129,7 @@ export class BreadcrumbItem extends LitElement {
     this.href = '';
     this.current = false;
     this.noTrailingSlash = false;
+    this.orientation = 'horizontal';
   }
 
   updateNoTrailingSlash(value) {
@@ -109,16 +140,30 @@ export class BreadcrumbItem extends LitElement {
   render() {
     const showDivider = !this.current && !this.noTrailingSlash;
 
+    /* Three shapes, one type size.
+
+       The links used to be written `size="small"`. bd-link has no `size`
+       property -- its type step is `font-size`, resolved through the closed set
+       in shared/token-scales.js -- so the attribute sat in the DOM doing
+       nothing and the links rendered at 16px beside a 14px current item.
+       Measured: 43x24 and 64x24 link boxes against an 86x37 current one, in a
+       row that is meant to read as one line of text.
+
+       The current item's weight is on bd-p rather than on the span around it,
+       for the same reason: --typography-fontWeight-medium was declared on the
+       host and the text is inside bd-p's own paragraph, which sets its own
+       weight and won. So the one cue that was not colour did not render, and
+       the current location was smaller and no heavier than its ancestors. */
     const content = this.current
       ? html`<span class="bd-breadcrumb__item bd-breadcrumb__item--current" aria-current="page">
-          <bd-p kind="small"><slot></slot></bd-p>
+          <bd-p variant="small" font-weight="medium"><slot></slot></bd-p>
         </span>`
       : this.href
-        ? html`<bd-link href="${this.href}" size="small" class="bd-breadcrumb__item">
+        ? html`<bd-link href="${this.href}" font-size="sm" class="bd-breadcrumb__item">
             <slot></slot>
           </bd-link>`
         : html`<span class="bd-breadcrumb__item">
-            <bd-p kind="small"><slot></slot></bd-p>
+            <bd-p variant="small"><slot></slot></bd-p>
           </span>`;
 
     return html`
@@ -129,7 +174,7 @@ export class BreadcrumbItem extends LitElement {
     `;
   }
 
-  static styles = [tokens, breadcrumbCSS];
+  static styles = [breadcrumbCSS];
 }
 
 customElements.define('bd-breadcrumb', Breadcrumb);