@1024pix/pix-ui 54.13.0 → 54.14.0

package/addon/components/pix-breadcrumb.hbs

@@ -0,0 +1,18 @@
+<nav class="pix-breadcrumb" ...attributes>
+  <ol>
+    {{#each this.links as |link|}}
+      {{#if link.route}}
+        <li>
+          <LinkTo @route={{this.route}} @models={{if @model (array @model) this.defaultModel}}>
+            {{link.label}}
+          </LinkTo>
+          <PixIcon @name="chevronRight" @ariaHidden={{true}} />
+        </li>
+      {{else}}
+        <li aria-current="page">
+          <p>{{link.label}}</p>
+        </li>
+      {{/if}}
+    {{/each}}
+  </ol>
+</nav>

package/addon/components/pix-breadcrumb.js

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+
+export default class PixBreadcrumb extends Component {
+  defaultModel = [];
+
+  get links() {
+    return this.args.links.map((link) => ({
+      ...link,
+      label: link.label.trim(),
+    }));
+  }
+}

package/addon/styles/_pix-breadcrumb.scss

@@ -0,0 +1,37 @@
+@use "pix-design-tokens/typography";
+
+.pix-breadcrumb {
+  @extend %pix-body-s;
+
+  > ol {
+    display: flex;
+
+    > li {
+      display: flex;
+      align-items: center;
+
+      a {
+        color: inherit;
+        font-weight: inherit;
+        text-decoration: none;
+        border-bottom: 1px solid transparent;
+        transition: all ease 0.5s;
+      }
+
+      a:hover {
+        color: var(--pix-primary-500);
+        border-bottom: 1px solid var(--pix-primary-500);
+        transition: all ease 0.5s;
+      }
+
+      p {
+        font-weight: var(--pix-font-medium);
+      }
+
+      svg {
+        width: 1rem;
+        margin: 0 0.5rem;
+      }
+    }
+  }
+}

package/addon/styles/addon.scss

@@ -5,6 +5,7 @@
 @use 'pix-background-header';
 @use 'pix-banner-alert';
 @use 'pix-block';
+@use 'pix-breadcrumb';
 @use 'pix-button-base';
 @use 'pix-button';
 @use 'pix-accordions';

package/app/components/pix-breadcrumb.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-breadcrumb';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1024pix/pix-ui",
-  "version": "54.13.0",
+  "version": "54.14.0",
   "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
   "keywords": [
     "ember-addon"
@@ -73,9 +73,9 @@
   },
   "devDependencies": {
     "@1024pix/ember-testing-library": "^3.0.6",
-    "@1024pix/eslint-plugin": "^2.0.4",
+    "@1024pix/eslint-plugin": "^2.1.0",
     "@1024pix/stylelint-config": "^5.1.27",
-    "@babel/eslint-parser": "^7.26.5",
+    "@babel/eslint-parser": "^7.26.8",
     "@babel/plugin-proposal-decorators": "^7.24.7",
     "@ember/optional-features": "^2.2.0",
     "@ember/string": "^4.0.0",
@@ -102,22 +102,22 @@
     "ember-cli": "^6.0.0",
     "ember-cli-dependency-checker": "^3.3.3",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-eslint-parser": "^0.5.7",
+    "ember-eslint-parser": "^0.5.9",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^8.2.3",
     "ember-qunit": "^8.1.0",
     "ember-resolver": "^12.0.0",
     "ember-sinon": "^5.0.0",
     "ember-source": "^5.11.0",
-    "ember-template-lint": "^6.0.0",
+    "ember-template-lint": "^7.0.1",
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "ember-try": "^3.0.0",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-ember": "^12.3.3",
+    "eslint": "^9.21.0",
+    "eslint-config-prettier": "^10.0.2",
+    "eslint-plugin-ember": "^12.5.0",
     "eslint-plugin-i18n-json": "^4.0.1",
-    "eslint-plugin-n": "^17.15.1",
-    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-n": "^17.16.2",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-qunit": "^8.1.2",
     "fs-extra": "^11.0.0",
     "globals": "^15.14.0",
@@ -125,13 +125,13 @@
     "loader.js": "^4.7.0",
     "lodash": "^4.17.21",
     "npm-run-all2": "^7.0.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "qunit": "^2.23.1",
     "qunit-dom": "^3.4.0",
     "sass": "^1.83.1",
     "storybook": "^8.4.7",
     "storybook-addon-tag-badges": "^1.4.0",
-    "stylelint": "^16.13.2",
+    "stylelint": "^16.15.0",
     "svg-sprite": "^2.0.4",
     "svgo": "^3.3.2",
     "webpack": "^5.97.1"