Implement new "Notification" block/pattern

keith-kaplan commented 1 year ago

Problems/Motivation

This ticket is part of the phase 3 effort, which is to migrate all of the remaining components/patterns in AEM over to Franklin. See EPIC for more detail (MERATIVE-765)
Section > Notification
Note: part of this work is to clean up the naming in Franklin to ensure it aligns with our Design Systems.

Sharepoint Doc Structure

https://merative.sharepoint.com/:w:/r/sites/Merative.comWebsite/_layouts/15/Doc.aspx?sourcedoc=%7B07BBC79A-1D9E-4B72-B1BF-BAE1AAAB22D7%7D&file=section-notification.docx&action=default&mobileredirect=true
https://main--merative2--hlxsites.hlx.page/block-library/sections/section-notification
The current notification is not our latest design and should be updated according to Figma. Location of current notification is here - https://main-merative2-hlxsites.hlx.page/block-library/sections/section-metadata-variations. We are moving this to the new document URL above.

Design/Specs

Figma link - https://www.figma.com/file/vw24IPXXt4vCh9BNumka9A/Web--Merative-Digital-Design-System-2.0?type=design&node-id=13894%3A70000&mode=design&t=IsiigUvRGTcztZ7I-1

Dev Checklist

Open a PR on the Franklin repo project - https://github.com/hlxsites/merative2
Follow the PR template and include written testing instructions
Once, the PR has been merged, make sure to update "Block Library" (see link) to include the block content entry structure for this variation.

Corresponding JIRA ticket

https://jira.sdlc.merative.com/browse/MERATIVE-786

helms-charity commented 1 year ago

@keith-kaplan is there a Franklin page that has the behavior you are looking for (looks like a popup/modal?) I saw the Word doc with the block in it, but no pages, so not sure if you just need the style changed or is it a block that needs to be developed? If this needs to be created, is there a live page of this component on your AEM you can paste here?

keith-kaplan commented 1 year ago

@helms-charity this is another one of the tasks for component migration in phase 3.

here are a few example pages in AEM that have it. https://www.merative.com/clinical-development https://www.merative.com/healthcare-analytics

sharathmrft commented 1 year ago

@sahmad-merative @proeung Notification block is tested its fine Icon is appearing properly and 12px at the breakpoint is verified responsiveness is checked in different browsers as well

hlxsites / merative2