feat(breadcrumb): Add breadcrumb block fragment

proeung commented 10 months ago

Issue

Fixes https://jira.sdlc.merative.com/browse/MERATIVE-790

Description

New

Add new block blocks/breadcrumb - The content of this block is currently being managed in the /fragment/breadcrumbs directory of SharePoint.
Breadcrumb can be added to a page using the Metadata table block (see attached). Additionally, you can optionally hide the brand logo/image for certain pages that already have the band logo in the leadspace.

Screenshot 2023-09-06 at 4 26 49 PM

Screenshot 2023-09-06 at 4 27 43 PM

Design Specs

Figma Link - https://www.figma.com/file/SPC6Jyf0RA8K29vTNkFXwg/Contact-us-%2B-success-message?type=design&node-id=943%3A10868&mode=design&t=EEDWQ99E5AjJyma3-1

Test URLs

MDX Sub Product page with a breadcrumb

Screenshot 2023-09-06 at 4 39 09 PM

Before (Changes from main): https://main--merative2--hlxsites.hlx.page/clinical-decision-support/pharmacy-inventory-management
After (Changes from this PR): https://feat-breadcrumb--merative2--proeung.hlx.page/clinical-decision-support/pharmacy-inventory-management

Curam Contact page without the brand logo in the breadcrumb

Screenshot 2023-09-06 at 4 39 21 PM

Before (Changes from main): https://main--merative2--hlxsites.hlx.page/offers/contact-curam
After (Changes from this PR): https://feat-breadcrumb--merative2--proeung.hlx.page/offers/contact-curam

Testing Instruction

Visit the test pages above and ensure that the breadcrumb renders correctly on all breakpoints.
Ensure that if the breadcrumb image is set to false within the page metadata, the brand logo/image should be hidden.

aem-code-sync[bot] commented 10 months ago

Hello, I'm Franklin Bot and I will run some test suites that validate the page speed. In case there are problems, just click the checkbox below to rerun the respective action.

[ ] Re-run PSI Checks

aem-code-sync[bot] commented 10 months ago

Page	Scores	Audits	Google
/clinical-decision-support
/offers/contact-curam
/clinical-decision-support/pharmacy-inventory-management

aem-code-sync[bot] commented 10 months ago

Page	Scores	Audits	Google
/clinical-decision-support/pharmacy-inventory-management
/offers/contact-curam

aem-code-sync[bot] commented 10 months ago

Page	Scores	Audits	Google
/clinical-decision-support/pharmacy-inventory-management
/offers/contact-curam

proeung commented 10 months ago

@keith-kaplan @scottbridgeman Just a heads up, I've updated some of the contact/offer pages with the breadcrumb and brand leadspace that we outlined in the design (see - Figma Link). Feel free to edit and publish the changes once this PR has been tested and merged.

aem-code-sync[bot] commented 10 months ago

Page	Scores	Audits	Google
/clinical-decision-support/pharmacy-inventory-management
/offers/contact-curam

aem-code-sync[bot] commented 10 months ago

Page	Scores	Audits	Google
/clinical-decision-support/pharmacy-inventory-management
/offers/contact-curam

proeung commented 10 months ago

@sachinmesh Thanks for conducting design QA for this PR. I just pushed up a commit that should address all of your feedback. Can you take a look?

aem-code-sync[bot] commented 10 months ago

Page	Scores	Audits	Google
/clinical-decision-support/pharmacy-inventory-management
/offers/contact-curam

proeung commented 10 months ago

@sharathmrft @sachinmesh Thanks for the review! I just pushed up a commit that adds the ellipsis, similar to what we have right now in AEM. Please take a look again.

Screenshot 2023-09-11 at 11 15 46 AM