ADAPT-578: initial Alert component implementation

[andrewbaraniuk]

READY FOR REVIEW

• (Edit the above to reflect status)

Summary

• implementation of Alert component

Review By (Date)

• April 2, 2021

Criticality

• High

Review Tasks

Setup tasks and/or behavior to test

1. 2 new Components were created in Storyblok - https://www.awesomescreenshot.com/image/7007614?key=8fb80a7e9a15e85eb89a04804f958bae
2. "Alerts" folder was created inside "Global components" folder in Storyblok - https://www.awesomescreenshot.com/image/7007639?key=f8fe13413ce8ae8e5add72f6d300dea2
3. 3 sample "Alerts" (with different background color, link etc.) were created for testing inside "Alerts" folder - https://www.awesomescreenshot.com/image/7007663?key=4bc5e798cb1d7a93bfc29b8f7dd88e8d
4. Feel free to check one of them (or create new one) and play with field data - https://app.storyblok.com/#!/me/spaces/78141/stories/0/0/44019608
5. This is how sample Alert with basic styling looks like - https://prnt.sc/111p1n2

@todo: Where (in which content types) should these Alerts be injected and does this need additional configuration in Storyblok in scope of this task?

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• Design is approved by @ user?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

• JIRA ticket(s)
• Other PRs
• Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.)
• Anyone who should be notified? (@mention them here)

Resources

• AMP Tool
• Accessibility Manual Test Script
• HTML Validator
• Browserstack and link to Browserstack Credentials

[yvonnetangsu]

Thank you for your work, @andrewbaraniuk! Added a few suggestions - please take a look. This is getting really close.

[yvonnetangsu]

Sorry - forgot one more, please check the hover/focus state for the dismiss button (just adding underline is good, please see example here:
https://decanter-react.netlify.app/?path=/story/composite-alert--default)
Thank you, @andrewbaraniuk !

[sherakama]

This is looking good. Nice work you two. Keep it up.

[yvonnetangsu]

@andrewbaraniuk I have merged the Decanter v6 changes into master and asked Shea to punch a release. After that we can use the new release for Decanter to pull in the updated styles and see what's left to do (probably just a tiny bit of clean up). Thanks! Please add the alert picker to all page types - I saw you added it to the story (oodStoryFullView) and we need it on the other page types as well.

[yvonnetangsu]

Please move alert.js and alertPicker.js from the /components/identity folder to /components/composite also. Thanks!

[andrewbaraniuk]

Hi @yvonnetangsu ! Thank you! Changes applied!

[yvonnetangsu]

Pushed up some final tweaks after using Decanter v.6.2.3 - I think this is GTG. Thanks!