ADAPT-957 Use responsive spacing, Tile Card finetune, Column Grid option

[yvonnetangsu]

READY FOR REVIEW

Summary

Note: Kerri has visually QA'ed the Tile Cards/Column Grid changes for all breakpoints in this PR (might be different from current specs in Figma)

• Tile cards (I want to cards) responsive behavior and finetuning for all breakpoints.
• Column Grid component (faux masonry grid) option to go 1-column at MD breakpoint; Add proper spacing when things are stacked.
• Use Decanter 6.2.0, replace all instances of @modular-spacing mixin with @responsive-spacing; remove redundant code and finetune after replacing the mixin

Review By (Date)

• When does this need to be reviewed by?

Criticality

• How critical is this PR on a 1-10 scale? Also see Severity Assessment.
• E.g., it affects one site, or every site and product?

Review Tasks

Setup tasks and/or behavior to test

Note: Kerri has visually QA'ed the Tile Cards/Column Grid changes for all breakpoints in this PR (might be different from current specs in Figma)

1. Go to https://deploy-preview-95--adapt-giving.netlify.app/
2. Look at the "I want to" cards section, resize browser to see that the cards and the whole section looks good on all breakpoints. No images on all tile cards for XS-SM breakpoints.
3. Go to https://deploy-preview-95--adapt-giving.netlify.app/about/contact-us/
4. Look at sections "Support Undergraduates", "Join your reunion class campaign", "Get started with a planned gift", they now uses the Column Grid option to go 1-column at MD breakpoint. Check that things do go 1-column at MD. Check that the spacing between things look consistent when they stack vertically.
5. Go to https://deploy-preview-95--adapt-giving.netlify.app/how-to-make-a-gift/planned-giving/compare-life-income-gifts/
6. Verify that the table styles are unchanged from the current live version.

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

[sherakama]

GTG