MWPW-158014 - [Notification] bugs

[Sartxi]

As an author, I would like to be able to have the current Aside notification functionalities to be available in the new Notification block.

Bugs:
1 & 2 the notification.ribbon block (when nested in section with .sticky-bottom style) is not using the same default functionality as the original aside.promobar block that it was created to replace.

1. The notification ribbon block should hide when the user scrolls to the bottom of the page.
2. The notification ribbon block should only show up once the user scrolls to the element position in the document.
3. The multi view port decorator wasn't setup to differentiate between a two column layout and a three column layout.

Solutions:

1. Adjusted selector in the section for sticky functionality to query for all notifications where the class list does not contain the no-hide class name.
2. Same as 1.
3. Adjusted multi viewport decorator to consider number of columns in layout and subsequently use proper viewport logic in setting child content.

Resolves: MWPW-158014

Test URLs Bug 1 and 2:

• Before: https://main--milo--adobecom.hlx.page/drafts/klee/test-aside-notification-sticky-bottom?martech=off
• After: https://sartxi-mwpw-158014-notifies--milo--adobecom.hlx.page/drafts/klee/test-aside-notification-sticky-bottom?martech=off

Test URLs for the 'no-hide' variant:

• Before: https://main--milo--adobecom.hlx.page/drafts/sarchibeque/test-sticky-notification-nohide?martech=off
• After: https://sartxi-mwpw-158014-notifies--milo--adobecom.hlx.page/drafts/sarchibeque/test-sticky-notification-nohide?martech=off

Test URLs Bug 3:

• Before: https://main--milo--adobecom.hlx.page/drafts/klee/test-notification?martech=off
• After: https://sartxi-mwpw-158014-notifies--milo--adobecom.hlx.page/drafts/klee/test-notification?martech=off

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 7ba2881 ✅ (latest)
• 1ec8752 ✅
• b1317b3 ✅
• bcba476 ✅

[aem-code-sync]

	Page	Scores	Audits	Google
📱	/drafts/klee/test-aside-notification-sticky-bottom?martech=off
🖥️	/drafts/klee/test-aside-notification-sticky-bottom?martech=off
📱	/drafts/klee/test-notification?martech=off
🖥️	/drafts/klee/test-notification?martech=off
📱	/drafts/sarchibeque/test-sticky-notification-nohide?martech=off
🖥️	/drafts/sarchibeque/test-sticky-notification-nohide?martech=off

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.33%. Comparing base (067f609) to head (7ba2881).
Report is 23 commits behind head on stage.

Additional details and impacted files

@@            Coverage Diff             @@
##            stage    #2996      +/-   ##
==========================================
- Coverage   96.36%   96.33%   -0.03%     
==========================================
  Files         243      243              
  Lines       55122    55287     +165     
==========================================
+ Hits        53119    53263     +144     
- Misses       2003     2024      +21     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ryanmparrish]

Looks good.
Not related to this PR but I noticed some odd default icon-area img sizes in smaller viewports on the ex. 3... (its on main too), just a heads up if you think we need a follow up on that.

[github-actions]

This PR is currently in the needs-verification state. Please assign a QA engineer to verify the changes.

[Sartxi]

@NadiiaSokolova I have added some testing URLs for the no-hide variant functionality in the PR description for your review. Thanks!

[NadiiaSokolova]

Verified. Ready for Stage.
Testing details https://jira.corp.adobe.com/browse/MWPW-158014