Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(breadcrumb): Add breadcrumb block fragment #330

Merged
merged 9 commits into from
Sep 12, 2023
Merged

feat(breadcrumb): Add breadcrumb block fragment #330

merged 9 commits into from
Sep 12, 2023

Conversation

proeung
Copy link

@proeung proeung commented Sep 6, 2023 •
edited
Loading

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

Test URLs

MDX Sub Product page with a breadcrumb

Screenshot 2023-09-06 at 4 39 09 PM

Curam Contact page without the brand logo in the breadcrumb

Screenshot 2023-09-06 at 4 39 21 PM

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
Copy link

aem-code-sync bot commented Sep 6, 2023

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
Copy link

aem-code-sync bot commented Sep 6, 2023

Page Scores Audits Google
/clinical-decision-support PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 6, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@proeung proeung added Needs design QA PRs on feature requests and new components have to get design approval before merge. Content Entry Update This PR contains update that require content entry changes within Sharepoint Doc labels Sep 6, 2023
@aem-code-sync
Copy link

aem-code-sync bot commented Sep 6, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@proeung
Copy link
Author

proeung commented Sep 6, 2023

@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.

sachinmesh
sachinmesh suggested changes Sep 8, 2023
View reviewed changes
Copy link

@sachinmesh sachinmesh left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. Font style should be 16px Regular and not medium here
image
  1. Padding between the text and arrow should be 4px and not 8px.
image
  1. Padding between Arrow and next text should be 16px.
image
  1. Logo in mobile should be of 32X32 px.

@proeung
Merge branch 'main' of https://github.com/hlxsites/merative2 into fea…
e09f19d 
…t-breadcrumb

# Conflicts:
#	styles/styles.css
@aem-code-sync
Copy link

aem-code-sync bot commented Sep 8, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 8, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@proeung
Copy link
Author

proeung commented Sep 8, 2023

@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?

sharathmrft
sharathmrft suggested changes Sep 11, 2023
View reviewed changes
Copy link

@sharathmrft sharathmrft left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@proeung
Bread crumb with Logo its breaking in mobile device

image

sachinmesh
sachinmesh suggested changes Sep 11, 2023
View reviewed changes
Copy link

@sachinmesh sachinmesh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without logo, looks good to me. With logo is breaking

@proeung @sharathmrft

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 11, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@proeung
Copy link
Author

proeung commented Sep 11, 2023

@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

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 11, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@proeung proeung added Needs Re-review This PR requires a re-review from QA and Designers and removed Needs design QA PRs on feature requests and new components have to get design approval before merge. labels Sep 11, 2023
@sharathmrft
Copy link

@proeung Looks good to me
@sachinmesh

sachinmesh
sachinmesh approved these changes Sep 12, 2023
View reviewed changes
Copy link

@sachinmesh sachinmesh left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its good to go. Just one thing, the 3 ellipses should only appears when the text exceeds the character limit in mobile. Not everytime.
image

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 12, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@keith-kaplan
Copy link
Collaborator

@proeung here are two more pages to include in this
https://www.merative.com/offers/contact-micromedex
https://www.merative.com/offers/contact-zelta

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 12, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 12, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@aem-code-sync
Copy link

aem-code-sync bot commented Sep 12, 2023

Page Scores Audits Google
/clinical-decision-support/pharmacy-inventory-management PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
/offers/contact-curam PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

@proeung proeung merged commit 5c46bac into hlxsites:main Sep 12, 2023
2 checks passed
@proeung proeung removed the Needs Re-review This PR requires a re-review from QA and Designers label Sep 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sharathmrft sharathmrft sharathmrft approved these changes

@sachinmesh sachinmesh sachinmesh approved these changes

@keith-kaplan keith-kaplan Awaiting requested review from keith-kaplan

@aavilamer aavilamer Awaiting requested review from aavilamer

@nimithshetty17 nimithshetty17 Awaiting requested review from nimithshetty17

@sahmad-merative sahmad-merative Awaiting requested review from sahmad-merative

Assignees
No one assigned
Labels
Content Entry Update This PR contains update that require content entry changes within Sharepoint Doc
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@proeung @sharathmrft @keith-kaplan @sachinmesh