feat(pie-breadcrumb): DSW-2831 implement scrim and default variants and implement isCompact mode

[thejfreitas]

Added default variant and back variant. The back variant will render only the last item from items prop.
Added scrim prop. The Scrim mode will enhance the contrast of the breadcrumb and change the background color, navigation items and separators.

Author Checklist (complete before requesting a review, do not delete any)

• I have performed a self-review of my code.
• I have added thorough tests where applicable (unit / component / visual).
• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have reviewed visual test updates properly before approving.
• If changes will affect consumers of the package, I have created a changeset entry.
• If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.
• I have filled out the DS Review Tracker checklist (Moving PR to "Ready to Review")

Not-applicable Checklist items

Please move any Author checklist items that do not apply to this pull request here.

---

Testing

How do I test my changes?

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1 - @jamieomaguire

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

Reviewer 2 - @fernandofranca

• I have reviewed the PIE Storybook/PIE Docs PR preview.
• I have verified that all acceptance criteria for this ticket have been completed.
• N/A I have reviewed the Aperture changes (if added)
• If there are visual test updates, I have reviewed them.

[changeset-bot]

🦋 Changeset detected

Latest commit: a0c2414

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@justeattakeaway/pie-breadcrumb	Minor
pie-storybook	Minor
@justeattakeaway/pie-webc	Patch
wc-nuxt2	Patch
wc-react17	Patch
wc-react18	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[thejfreitas]

/test-aperture

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

[pie-design-system-bot]

@thejfreitas Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-breadcrumb@0.0.0-snapshot-release-20250404172537 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20250404172537 --mode=update-lockfile

Then finally:

yarn install

[raoufswe]

please see #2314 (comment) and let me know if you need any help with that 🤞

[thejfreitas]

please see #2314 (comment) and let me know if you need any help with that 🤞

Please refer the design docs which I scoped this pattern which is clear that variations are default and scrim: https://www.figma.com/design/pPSC73rPin4csb8DiK1CRr/branch/46d9YJsbVPA9fEuC5C2EuT/%E2%9C%A8--Core--Web-Components--PIE-3-?node-id=21145-12749&m=dev

This kind of thing should be picked on the refinement phase and if I follow your suggestion, should we change the design docs as well?

[raoufswe]

/snapit

[pie-design-system-bot]

Starting a new snapshot build. You can view the logs here.

outdated

[pie-design-system-bot]

@raoufswe Your snapshots have been published to npm!

Test the snapshots by updating your package.json with the newly-published versions:

Note

If you have more than one of these packages installed, we suggest using the new snapshots for all of them to help avoid version conflicts.

yarn up @justeattakeaway/pie-breadcrumb@0.0.0-snapshot-release-20250429143843 --mode=update-lockfile

yarn up @justeattakeaway/pie-webc@0.0.0-snapshot-release-20250429143843 --mode=update-lockfile

Then finally:

yarn install