Create ctaGroup component for displaying groups of links

[yvonnetangsu]

READY FOR REVIEW

• (Edit the above to reflect status)

Summary

• Add ctaGroup component for group multiple ctaLink components (link buttons and CTA links)
• Option to display cta links next to each other or each in its own row
• Since client wants the button link group to look like the filter buttons on the Areas to Support page, I made some adjustments to make them look/behave mostly the same. Note: on the Areas to Support page, it's a bit more custom on the XS/SM breakpoint - 2 buttons on each line. But for the ctaGroup component, the buttons just auto wrap to next line.

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

1. Check out this branch
2. npm run develop
3. Look at the test page Test Copy Contact Us- http://app.storyblok.com/#!/me/spaces/78141/stories/0/0/38485379
4. Look at the anchor links button at the top and check all breakpoints.
5. Look at the Areas to Support page and make sure that things still look ok
   https://deploy-preview-170--adapt-giving.netlify.app/areas-to-support/

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]

Looks good to me.

[sherakama]

Just a quick question but no url changes when clicking the tabs? This prevents deep linking and it would be better if we could have deep linking.

[yvonnetangsu]

Just a quick question but no url changes when clicking the tabs? This prevents deep linking and it would be better if we could have deep linking.

You mean the URL with the anchor attached at the end after clicking the buttons? I think it would happen - a bit harder to test since I can't publish the test page. Eg, clicking the anchor link in "Make a Bequest" section on this page would change the URL
https://giving.stanford.edu/planned-giving/estate-planning/#sample-bequest-language

[yvonnetangsu]

@sherakama I think I'm going to merge this in - I believe we do get the URL change when clicking on the anchor links. Once we merge and make the update on the live site, we'll find out for sure.

[yvonnetangsu]

Confirming that the URL does change (anchor get attached to end of URL when clicking the button links) so we're good.