feat(breadcrumbs): breadcrumbs component

packages/breadcrumbs/.npmignore

@@ -0,0 +1,2 @@
+stories
+test

packages/breadcrumbs/README.md

@@ -0,0 +1,178 @@
+## Description
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/breadcrumbs?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/breadcrumbs)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/breadcrumbs?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/breadcrumbs)
+
+```
+yarn add @spectrum-web-components/breadcrumbs
+```
+
+Import the side effectful registration of `<sp-breadcrumbs>` and `<sp-breadcrumb-item>`via:
+
+```
+import '@spectrum-web-components/breadcrumbs/sp-breadcrumbs.js';
+import '@spectrum-web-components/breadcrumbs/sp-breadcrumb-item.js';
+```
+
+When looking to leverage the `Breadcrumbs` or `BreadcrumbItem`base class as a type and/or for extension purposes, do so via:
+
+```
+import { Breadcrumbs } from '@spectrum-web-components/breadcrumbs';
+```
+
+## Example
+
+```html
+<sp-breadcrumbs >
+       <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 1
+        </sp-breadcrumb-item>
+         <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 2
+        </sp-breadcrumb-item>
+         <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 3
+        </sp-breadcrumb-item>
+</sp-breadcrumbs>
+```
+
+As recommended by [Spectrum Design](https://spectrum.adobe.com/page/breadcrumbs/#Don%E2%80%99t-show-too-many-breadcrumbs-at-once), by default the maximum visible breadcrumbs is 4. If you want to override this, you can use the `max-visible` attribute.
+
+## Variants
+
+### Default
+Setting no variant will render the default `<sp-breadcrumbs>` component. 
+
+```html
+<sp-breadcrumbs>
+       <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 1
+        </sp-breadcrumb-item>
+         <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 2
+        </sp-breadcrumb-item>
+         <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 3
+        </sp-breadcrumb-item>
+</sp-breadcrumbs>
+```
+
+
+### Compact
+When needing to optimize for functional space, the compact option is useful for reducing the height of the breadcrumbs while still maintaining the proper user context.
+The compact variant will render an inline list of breadcrumb elements with a smaller font size. 
+
+```html
+<sp-breadcrumbs compact>
+       <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 1
+        </sp-breadcrumb-item>
+         <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 2
+        </sp-breadcrumb-item>
+         <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                    Breadcrumb 3
+        </sp-breadcrumb-item>
+</sp-breadcrumbs>
+```
+
+### Multiline
+The multiline variation places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location. 
+
+```html
+        <sp-breadcrumbs multiline>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 1
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 2
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 3
+                </sp-breadcrumb-item>
+        </sp-breadcrumbs>
+```
+
+## Overflowing
+When the space is limited or the maximum number of visible items is reached, the component will render the first breadcrumbs inside an action menu. If needed, the last breadcrumb item will be truncated and will render a tooltip with the full text.
+
+```html
+        <sp-breadcrumbs compact>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 1
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 2
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 3
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 4
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 5
+                </sp-breadcrumb-item>
+        </sp-breadcrumbs>
+```
+
+### Show Root 
+The `show-root` attribute will always render the root breadcrumb item, even if the breadcrumbs are overflowing. 
+
+```html
+        <sp-breadcrumbs compact show-root>
+        <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 1
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 2
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 3
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 4
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 5
+                </sp-breadcrumb-item>
+        </sp-breadcrumbs>
+```
+
+## Custom Action Menu
+The component offers the possibility to replace the action menu's icon with a custom one using the `icon` slot. Moreover, for accesibility purposes you can provide an internationalized string for the menu label using the `menu-label` attribute.
+
+```html
+        <sp-breadcrumbs>
+            <sp-icon-settings slot="icon" menu-label="More Items"></sp-icon-settings>
+
+              <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 1
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 2
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 3
+                </sp-breadcrumb-item>
+        </sp-breadcrumbs>
+```
+
+## Disabled state
+The `<sp-breadcrumbs>` component supports a disabled state that will prevent the user from tabbing through the list. This state informs the user that the navigation is not possible at the moment. 
+
+```html
+        <sp-breadcrumbs disabled multiline>
+        <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 1
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 2
+                </sp-breadcrumb-item>
+                <sp-breadcrumb-item href="https://opensource.adobe.com/spectrum-web-components/components/breadcrumbs/">
+                        Breadcrumb 3
+                </sp-breadcrumb-item>
+        </sp-breadcrumbs>
+```

packages/breadcrumbs/exports.json

@@ -0,0 +1,4 @@
+{
+    "./src/*": "./src/*.js",
+    "./sp-breadcrumbs.js": "./sp-breadcrumbs.js"
+}

packages/breadcrumbs/package.json

@@ -0,0 +1,82 @@
+{
+    "name": "@spectrum-web-components/breadcrumbs",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Breadcrumbs",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/breadcrumbs"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/breadcrumbs",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/BreadcrumbItem.js": {
+            "development": "./src/BreadcrumbItem.dev.js",
+            "default": "./src/BreadcrumbItem.js"
+        },
+        "./src/Breadcrumbs.js": {
+            "development": "./src/Breadcrumbs.dev.js",
+            "default": "./src/Breadcrumbs.js"
+        },
+        "./src/breadcrumb-item.css.js": "./src/breadcrumb-item.css.js",
+        "./src/breadcrumbs.css.js": "./src/breadcrumbs.css.js",
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./sp-breadcrumbs.js": {
+            "development": "./sp-breadcrumbs.dev.js",
+            "default": "./sp-breadcrumbs.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "lit": "^2.5.0",
+        "@spectrum-web-components/action-menu": "^0.41.2",
+        "@spectrum-web-components/base": "^0.41.2",
+        "@spectrum-web-components/icons-workflow": "^0.41.2",
+        "@spectrum-web-components/link": "^0.41.2",
+        "@spectrum-web-components/menu": "^0.41.2",
+        "@spectrum-web-components/truncated": "^0.0.1"
+    },
+    "devDependencies": {
+        "@spectrum-css/breadcrumb": "^8.2.3"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

packages/breadcrumbs/sp-breadcrumb-item.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { BreadcrumbItem } from './src/BreadcrumbItem';
+
+customElements.define('sp-breadcrumb-item', BreadcrumbItem);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-breadcrumb-item': BreadcrumbItem;
+    }
+}

packages/breadcrumbs/sp-breadcrumbs.ts

@@ -0,0 +1,20 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+import { Breadcrumbs } from './src/Breadcrumbs.js';
+
+customElements.define('sp-breadcrumbs', Breadcrumbs);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-breadcrumbs': Breadcrumbs;
+    }
+}

packages/breadcrumbs/src/BreadcrumbItem.ts

@@ -0,0 +1,82 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import {
+    CSSResultArray,
+    html,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import {
+    classMap,
+    ifDefined,
+} from '@spectrum-web-components/base/src/directives.js';
+import {
+    property,
+    query,
+} from '@spectrum-web-components/base/src/decorators.js';
+import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
+import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
+import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
+
+import styles from './breadcrumb-item.css.js';
+
+import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
+
+export class BreadcrumbItem extends LikeAnchor(Focusable) {
+    public static override get styles(): CSSResultArray {
+        return [styles, chevronStyles];
+    }
+
+    @query('#anchor')
+    anchorElement!: HTMLAnchorElement;
+
+    @property({ attribute: 'is-menu', type: Boolean })
+    public isMenu = false;
+
+    public override get focusElement(): HTMLElement & {
+        disabled?: boolean | undefined;
+    } {
+        return this.anchorElement || this;
+    }
+
+    protected renderLink(): TemplateResult {
+        return html`
+            <a
+                id="anchor"
+                part="link"
+                class=${classMap({
+                    link: true,
+                    'is-disabled': this.disabled,
+                })}
+                aria-disabled=${this.disabled}
+                href=${ifDefined(this.href)}
+            >
+                <slot></slot>
+            </a>
+        `;
+    }
+
+    protected override render(): TemplateResult {
+        return html`
+            ${this.isMenu
+                ? html`
+                      <slot></slot>
+                  `
+                : this.renderLink()}
+            <sp-icon-chevron100
+                part="separator"
+                size="xs"
+                class="separator spectrum-UIIcon-ChevronRight100"
+            ></sp-icon-chevron100>
+        `;
+    }
+}