Integrate the "In-Kind" component with the Join Us page

[roslynwythe]

Dependency

• Create Component and Refactor HTML for "In-Kind" text on Donate page #4457

Overview

We need to incorporate the new "In-Kind" component with the Join Us page, in order to provide a consistent appearance of donation-related elements across the site.

Details

1. The Join Us page currently includes a heading "How to help us continue to do Impactful Work" which appears after the "Donation Circles" and is depicted in Resources under the heading "Current Appearance". The HTML is contained in _includes/join-donate-card.html.
2. Replace the heading "How to help us continue to do Impactful Work" along with the unordered list beneath it with the heading "Provide In-Kind Software & Services" followed by the "In-Kind" component. The desired appearance is shown in Resources under the heading "Final Appearance".
3. Changes to the HTML and CSS layout are required, in order to center the "Donation Circles", the heading "Provide In-Kind Software & Services", and the "In-Kind" components within the entire width of the card. That is, these elements must be removed from their current div/row placement in the grid, and should be placed in new div/rows that spans both columns of the grid so they are centered in the card.

Action Items

• Open the files _includes/join-donate-card.html and _sass\components\_join-us.scss. Move the "Donation Circles" (div.donate-components-items) into a new div (row), then modify the SCSS so that the "Donation circles" component is centered within the entire width of the card
• Remove the heading ""How to help us continue to do Impactful Work" along with the <ul> beneath it.
• Below the "Donation Circles", add a new div (row), containing the heading "Provide In-Kind Software & Services" (centered) then reference the "In-Kind" component using the liquid tag

{% include 'filename /donation/in-kind.html %}

• The "Donation Circles" element, along with the heading "Provide In-Kind Software & Services" and the "In-Kind" component should all be centered within the entire width of the card, however the paragraph text within the In-Kind component should remain left-justified. If necessary, html elements can be added to the "In-Kind" component and CSS classes specific to the "In-Kind" component can be added to _sass/components/_donate-components.scss. If either the component or component styles are modified, ensure that the appearance of the Donate page is unchanged.

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 Components" then release the dependency on Refactor/Remove join-donate-card component #4455, and move that issue to New Issue Approval with Ready for Prioritization label

Resources/Instructions

Current Appearance

Final appearance - center the "Donation Circles" and "Provide In-Kind Software & Services" sections within the card sections

• HfLA Join Us Page: webpage and html
• "In-Kind" component HTML
• The "In-Kind" component was developed in Issue Create Component and Refactor HTML for "In-Kind" text on Donate page #4457
• Donate Card - Join Us Page version
• HfLA Donate Page
• This issue is part of the Epic Epic: Create reusable donation components and integrate with Donate, Join Us and About pages #4492

[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