feat: Added breadcrumb container and breadcrumbs elements

src/components/breadcrumb/breadcrumb.ts

@@ -0,0 +1,86 @@
+import { css, html, LitElement, type PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { addInternalsController } from '../common/controllers/internals.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcIconComponent from '../icon/icon.js';
+
+/**
+ * @element igc-breadcrumb
+ *
+ * @slot - Default slot for the breadcrumb item. One will usually put an anchor tag here.
+ * @slot prefix - Renders content before the default content of the breadcrumb item.
+ * @slot suffix - Renders content after the default content of the breadcrumb item.
+ * @slot separator - Renders a custom separator content after the breadcrumb item.
+ */
+export default class IgcBreadcrumbComponent extends LitElement {
+  public static readonly tagName = 'igc-breadcrumb';
+
+  static override styles = css`
+    :host {
+      display: inline-flex;
+      flex: 0 0 auto;
+      gap: 0.5rem;
+
+      ::slotted(a) {
+        color: var(--ig-primary-500);
+        text-decoration: none;
+      }
+    }
+
+    [part='separator'] {
+      &:dir(rtl) igc-icon,
+      &:dir(rtl) ::slotted(igc-icon) {
+        transform: rotateY(180deg);
+      }
+    }
+
+    :host([current]) {
+      ::slotted(a) {
+        color: var(--ig-gray-900);
+      }
+    }
+
+    :host(:last-of-type) [part='separator'] {
+      display: none;
+    }
+  `;
+
+  /* blazorSuppress */
+  public static register(): void {
+    registerComponent(IgcBreadcrumbComponent, IgcIconComponent);
+  }
+
+  private readonly _internals = addInternalsController(this, {
+    initialARIA: { role: 'listitem' },
+  });
+
+  @property({ type: Boolean, reflect: true })
+  public current = false;
+
+  protected override updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('current')) {
+      this._internals.setARIA({ ariaCurrent: this.current ? 'page' : null });
+    }
+  }
+
+  protected override render() {
+    return html`
+      <span part="label">
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+      </span>
+      <span part="separator">
+        <slot name="separator">
+          <igc-icon name="tree_expand" collection="default"></igc-icon>
+        </slot>
+      </span>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-breadcrumb': IgcBreadcrumbComponent;
+  }
+}

src/components/breadcrumb/breadcrumbs.ts

@@ -0,0 +1,48 @@
+import { css, html, LitElement } from 'lit';
+import { addInternalsController } from '../common/controllers/internals.js';
+import { registerComponent } from '../common/definitions/register.js';
+import IgcBreadcrumbComponent from './breadcrumb.js';
+
+/**
+ * @element igc-breadcrumbs
+ *
+ * @slot - Default slot where igc-breadcrumbs are slotted.
+ */
+export default class IgcBreadcrumbsComponent extends LitElement {
+  public static readonly tagName = 'igc-breadcrumbs';
+
+  static override styles = css`
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  `;
+
+  /* blazorSuppress */
+  public static register(): void {
+    registerComponent(IgcBreadcrumbsComponent, IgcBreadcrumbComponent);
+  }
+
+  constructor() {
+    super();
+
+    addInternalsController(this, {
+      initialARIA: {
+        role: 'list',
+        ariaLabel: 'breadcrumbs',
+      },
+    });
+  }
+
+  protected override render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'igc-breadcrumbs': IgcBreadcrumbsComponent;
+  }
+}

src/index.ts

@@ -69,6 +69,8 @@ export { default as IgcTreeItemComponent } from './components/tree/tree-item.js'
 export { default as IgcStepperComponent } from './components/stepper/stepper.js';
 export { default as IgcStepComponent } from './components/stepper/step.js';
 export { default as IgcTooltipComponent } from './components/tooltip/tooltip.js';
+export { default as IgcBreadcrumbsComponent } from './components/breadcrumb/breadcrumbs.js';
+export { default as IgcBreadcrumbComponent } from './components/breadcrumb/breadcrumb.js';
 
 // definitions
 export { defineComponents } from './components/common/definitions/defineComponents.js';

stories/breadcrumbs.stories.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+import {
+  type IgcBreadcrumbComponent,
+  IgcBreadcrumbsComponent,
+  defineComponents,
+} from 'igniteui-webcomponents';
+import { html } from 'lit';
+
+defineComponents(IgcBreadcrumbsComponent);
+
+// region default
+const metadata: Meta<IgcBreadcrumbsComponent> = {
+  title: 'Breadcrumbs',
+  component: 'igc-breadcrumbs',
+  parameters: { docs: { description: { component: '' } } },
+};
+
+export default metadata;
+
+type Story = StoryObj;
+
+// endregion
+
+function setBreadCrumpCurrentState(anchor: HTMLAnchorElement, state: boolean) {
+  (anchor.parentElement as IgcBreadcrumbComponent).current = state;
+}
+
+function breadcrumbsStoryState() {
+  const anchors = document.querySelectorAll('a');
+
+  const handler = (event: Event) => {
+    const current = event.target as HTMLAnchorElement;
+    event.preventDefault();
+
+    for (const anchor of anchors) {
+      setBreadCrumpCurrentState(anchor, false);
+    }
+    setBreadCrumpCurrentState(current, true);
+  };
+
+  for (const anchor of anchors) {
+    anchor.addEventListener('click', handler);
+  }
+}
+
+export const Default: Story = {
+  play: breadcrumbsStoryState,
+  render: () => html`
+    <div>
+      <p>Default look</p>
+      <igc-breadcrumbs>
+        <igc-breadcrumb>
+          <a href="#grandparent">Grandparent</a>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+          <a href="#parent">Parent</a>
+        </igc-breadcrumb>
+        <igc-breadcrumb current>
+          <a href="#child">Child</a>
+        </igc-breadcrumb>
+      </igc-breadcrumbs>
+    </div>
+
+    <div>
+      <p>Custom separators</p>
+      <igc-breadcrumbs>
+        <igc-breadcrumb>
+          <a href="#">First</a>
+          <span slot="separator">👉</span>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+          <a href="#">Second</a>
+          <span slot="separator">👉</span>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+          <a href="#">Third</a>
+          <span slot="separator">👉</span>
+        </igc-breadcrumb>
+      </igc-breadcrumbs>
+    </div>
+    <div>
+      <p>Custom separators & slotted items in breadcrumbs</p>
+      <igc-breadcrumbs>
+        <igc-breadcrumb>
+          <span slot="prefix">💖</span>
+          <a href="#">First</a>
+          <span slot="separator">/</span>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+          <a href="#">Second</a>
+          <span slot="separator">/</span>
+        </igc-breadcrumb>
+        <igc-breadcrumb>
+          <span slot="prefix">⚠️</span>
+          <span slot="suffix">⚠️</span>
+          <a href="#">Third</a>
+          <span slot="separator">/</span>
+        </igc-breadcrumb>
+      </igc-breadcrumbs>
+    </div>
+  `,
+};