feat(ld-breadcrumbs): add ld-breadcrumbs component

screenshot/builds/master.json

@@ -381,6 +381,58 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "eff4f911",
+      "image": "a37d4364febc6a1c279bb675ea0eb056.png",
+      "userAgent": "default",
+      "desc": "ld-breadcrumbs renders as CSS Component",
+      "testPath": "./src/liquid/components/ld-breadcrumbs/test/ld-breadcrumbs.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "f91c2718",
+      "image": "a37d4364febc6a1c279bb675ea0eb056.png",
+      "userAgent": "default",
+      "desc": "ld-breadcrumbs renders as Web Component",
+      "testPath": "./src/liquid/components/ld-breadcrumbs/test/ld-breadcrumbs.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "94e3f635",
+      "image": "053c6df29d132a360ae66ba7abd42795.png",
+      "userAgent": "default",
+      "desc": "ld-breadcrumbs renders with icons as CSS component",
+      "testPath": "./src/liquid/components/ld-breadcrumbs/test/ld-breadcrumbs.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "cdf7649b",
+      "image": "053c6df29d132a360ae66ba7abd42795.png",
+      "userAgent": "default",
+      "desc": "ld-breadcrumbs renders with icons as Web Component",
+      "testPath": "./src/liquid/components/ld-breadcrumbs/test/ld-breadcrumbs.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "c5c7582a",
       "image": "e0193ce006e37fabf36900daaadd0712.png",
@@ -7377,7 +7429,7 @@
     },
     {
       "id": "11c3a598",
-      "image": "f63a4918e6f270256c006b1df8b99d6c.png",
+      "image": "796d9b032fbdbcef50000743d0889bc8.png",
       "userAgent": "default",
       "desc": "ld-link css component with chevron end",
       "testPath": "./src/liquid/components/ld-link/test/ld-link.e2e.ts",
@@ -7390,7 +7442,7 @@
     },
     {
       "id": "ebcd4fea",
-      "image": "f9c3e4ef4d16627a54a6ec0640ca4c50.png",
+      "image": "2507876c594192cb4fb29e004ae599df.png",
       "userAgent": "default",
       "desc": "ld-link css component with chevron start",
       "testPath": "./src/liquid/components/ld-link/test/ld-link.e2e.ts",
@@ -7429,7 +7481,7 @@
     },
     {
       "id": "a51ed960",
-      "image": "025b40f6e717937da79d23075f94454a.png",
+      "image": "6f0fe7041f6573b8a71a8622b40e7c22.png",
       "userAgent": "default",
       "desc": "ld-link web component with chevron end",
       "testPath": "./src/liquid/components/ld-link/test/ld-link.e2e.ts",
@@ -7442,7 +7494,7 @@
     },
     {
       "id": "235718a5",
-      "image": "db0056903ab347b75e15880aeed38984.png",
+      "image": "e180cf4b6a412aedb2a005aa9df45864.png",
       "userAgent": "default",
       "desc": "ld-link web component with chevron start",
       "testPath": "./src/liquid/components/ld-link/test/ld-link.e2e.ts",

src/docs/components/docs-main/docs-main.css

@@ -5,6 +5,12 @@
     }
 
     main {
+      > header {
+        ld-breadcrumbs {
+          filter: none;
+        }
+      }
+
       > p,
       > ol,
       > ul,
@@ -77,6 +83,12 @@
     }
 
     main {
+      > header {
+        ld-breadcrumbs {
+          filter: invert(1) hue-rotate(180deg);
+        }
+      }
+
       > p,
       > ol,
       > ul,
@@ -179,9 +191,14 @@
       display: flex;
       justify-content: flex-end;
       flex-wrap: wrap;
+      align-items: center;
+    }
 
-      > * + *:not(.docs-breadcrumbs) {
-        margin-top: var(--ld-sp-16);
+    > header {
+      ld-breadcrumbs {
+        flex-grow: 1;
+        margin-inline: 0 var(--ld-sp-24);
+        margin-block: var(--ld-sp-16);
       }
     }
 

src/docs/includes/layout.njk

@@ -112,18 +112,14 @@ title: Introduction
     <docs-main>
       <header>
         {% if 'Introduction' not in title and not '404' in title and not 'legal' in page.url %}
-          <docs-breadcrumbs>
+          <ld-breadcrumbs class="ld-theme-bubblegum">
             {% set navPages = collections.all | eleventyNavigationBreadcrumb(title) %}
             {% macro renderBreadcrumb(entry) %}
-              <li>
-                <a href="{{ env.base }}{{ entry.url }}">{{ entry.title }}</a>
-              </li>
+              <ld-crumb href="{{ env.base }}{{ entry.url }}">{{ entry.title }}</ld-crumb>
             {% endmacro %}
             {% for entry in navPages %}{{ renderBreadcrumb(entry) }}{% endfor %}
-            <li>
-              <a href="{{ env.base }}{{ page.url }}" aria-current="page">{{ title }}</a>
-            </li>
-          </docs-breadcrumbs>
+            <ld-crumb href="{{ env.base }}{{ page.url }}">{{ title }}</ld-crumb>
+          </ld-breadcrumbs>
         {% endif %}
         <docs-edit-on-github path="{{ page.inputPath }}"></docs-edit-on-github>
       </header>

src/liquid/components/ld-breadcrumbs/ld-breadcrumbs.css

@@ -0,0 +1,15 @@
+:host,
+.ld-breadcrumbs {
+  --ld-crumb-icon-gap: 0.5em;
+  --ld-crumb-gap: 0.6em;
+
+  line-height: 1.5;
+}
+
+.ld-breadcrumbs > ol {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}

src/liquid/components/ld-breadcrumbs/ld-breadcrumbs.tsx

@@ -0,0 +1,52 @@
+import '../../components' // type definitions for type checks and intelliSense
+import { Component, h, Element } from '@stencil/core'
+
+/**
+ * @part list - Breadcrumbs list
+ * @virtualProp ref - reference to component
+ * @virtualProp {string | number} key - for tracking the node's identity when working with lists
+ */
+
+@Component({
+  tag: 'ld-breadcrumbs',
+  styleUrl: 'ld-breadcrumbs.css',
+  shadow: true,
+})
+export class LdBreadcrumbs {
+  @Element() el: HTMLElement
+
+  private observer: MutationObserver
+
+  private updateCurrent = () => {
+    const crumbs = this.el.querySelectorAll('ld-crumb')
+    crumbs.forEach((crumb) => {
+      crumb.current = undefined
+    })
+    crumbs[crumbs.length - 1].current = true
+  }
+
+  componentDidLoad() {
+    this.observer = new MutationObserver(this.updateCurrent)
+    this.observer.observe(this.el, {
+      subtree: true,
+      childList: true,
+      attributes: false,
+    })
+
+    this.updateCurrent()
+  }
+
+  disconnectedCallback() {
+    if (this.observer) this.observer.disconnect()
+  }
+
+  render() {
+    return (
+      <nav aria-label="Breadcrumbs" class="ld-breadcrumbs">
+        <ol class="ld-breadcrumbs__list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    )
+  }
+}

src/liquid/components/ld-breadcrumbs/ld-crumb/ld-crumb.css

@@ -0,0 +1,32 @@
+.ld-breadcrumbs .ld-link,
+.ld-crumb__link::part(anchor) {
+  --ld-link-gap: var(--ld-crumb-icon-gap);
+  --ld-link-chevron-gap: var(--ld-crumb-gap);
+  display: inline-flex;
+}
+
+.ld-breadcrumbs li:not(:last-of-type) .ld-link,
+.ld-crumb__link:not(.ld-crumb__link--current)::part(anchor) {
+  --ld-link-col: var(--ld-col-neutral-600);
+
+  font-weight: normal;
+  margin-right: calc(var(--ld-crumb-gap) + 0.5em);
+
+  &:hover {
+    --ld-link-col: var(--ld-thm-primary-hover);
+  }
+
+  &:focus:focus-visible {
+    --ld-link-col: var(--ld-thm-primary-focus);
+  }
+
+  &:active {
+    --ld-link-col: var(--ld-thm-primary-active);
+  }
+}
+
+.ld-breadcrumbs li:last-of-type .ld-link,
+.ld-crumb__link--current {
+  cursor: default;
+  pointer-events: none;
+}

src/liquid/components/ld-breadcrumbs/ld-crumb/ld-crumb.tsx

@@ -0,0 +1,40 @@
+import '../../../components' // type definitions for type checks and intelliSense
+import { Component, h, Prop } from '@stencil/core'
+import { getClassNames } from '../../../utils/getClassNames'
+
+/**
+ * @part link - Breadcrumb link
+ * @virtualProp ref - reference to component
+ * @virtualProp {string | number} key - for tracking the node's identity when working with lists
+ */
+@Component({
+  tag: 'ld-crumb',
+  styleUrl: 'ld-crumb.css',
+  shadow: true,
+})
+export class LdCrumb {
+  /** @internal */
+  @Prop() current?: boolean
+
+  /** The URL that the hyperlink points to. */
+  @Prop() href?: string
+
+  render() {
+    return (
+      <li class="ld-crumb">
+        <ld-link
+          href={this.href}
+          class={getClassNames([
+            'ld-crumb__link',
+            this.current && 'ld-crumb__link--current',
+          ])}
+          part="link"
+          aria-current={this.current ? 'page' : undefined}
+          chevron={this.current ? undefined : 'end'}
+        >
+          <slot></slot>
+        </ld-link>
+      </li>
+    )
+  }
+}