Integrate Donation Circle Component with Join Us Donate include

[roslynwythe]

Dependency

• Implement Redesigned Donate Page (mobile and desktop) #3983
• Create Donation Circle Component and Integrate with Donate Page  #4263

Overview

We need to integrate the Donation Circle Component with the Join Us Donate include so that we have a consistent presentation of that component across the site.

Details

• The display of functional text within an image is not WCAG compliant and so the Donation Circle graphic has been replaced with an HTML/CSS component.
• In this issue, the newly implemented Donation Circles HTML component will be integrated into the Join Us Donate card include and styles will be updated as necessary so that the appearance of the Join Us page is maintained in both mobile and desktop views.

Action Items

• The new Donation CIrcles HTML component is located at _includes/donation/donation-circles.html and will replace the graphic /assets/images/join-us/donation-graphic.svg. In _includes/join-donate-card.html replace the corresponding <img> tag with the liquid tag {% include 'filename' %} where 'filename' is relative to the _includes folder.
• The SCSS for styling the new component is located at _sass/components/_donate-components.scss. Update scss classes as needed so that the component styles are independent of the target pages, and the appearance of the modified Join Us page matches the appearance of the current page, at both mobile and desktop screen sizes.
• Changes to _includes/donation/donation-circles.html may be necessary, for instance adding ID or classes for the purpose of targeting styles.

Merge Team

• In Epic Epic: Create reusable donation components and integrate with Donate, Join Us and About pages #4492, check off the dependency under "Creating/Integrating New Issues". If all of the dependencies under that heading have been merged, then release dependencies on all the issues listed under "Clean Up".

Resources/Instructions

• HfLA Join Us Page: webpage and html
• wiki page Standardized Components
• This issue is part of the Epic Epic: Create reusable donation components and integrate with Donate, Join Us and About pages #4492
• Liquid in Jekyll

[github-actions]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:
Complexity, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels