CHEMH-77: A fullpill banner

[jenbreese]

READY FOR REVIEW

Summary

• Adding a new banner variant

Review By (Date)

• 9/22

Criticality

• Normal

Urgency

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Rebuild Cache and import config drush cr ; drush ci
3. Navigate to a page.
4. Add a banner and select the fullpill behavior option
5. The design only has a headline and button with a small image.
6. Verify the banner looks like the design. The responsive version eventually becomes a circle. There weren't responsive designs so this might need some changes.

Site Configuration Sync

• Is there a config:export in this PR that changes the config sync directory? NO

Front End Validation

• Design is approved by @ user?
• HTML validation: Is the markup using the appropriate semantic tags and passes validation? Or, QA request ticket created?
• Cross-browser testing: Has been performed? Or, QA request ticket created?
• Automated accessibility: Scans performed? Or, QA request ticket created?
• Manual accessibility: Manually tested? Or, QA request ticket created?

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

- CHEMH-77

Resources

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

[jdwjdwjdw]

Looking great overall! Two things:

• Can you address the image getting cut off while stacked on mobile? It looks like that's being caused by the su-hero__media aspect ratio
  
• How do you feel about the image going from a circle to more of an oval right before stacking? I don't mind it too much, but if you think it's an issue, maybe stacking before it goes to the oval would be another possibility
  

[jenbreese]

@jdwjdwjdw I agree with you. I made these changes. Let me know what you think. Maybe we need to move around the background image to cover the edges better.

[jdwjdwjdw]

It looks like this max-width constraint is causing some issues for mobile, can you address that?

[jdwjdwjdw]

Everything looking great! 🚀