Epic: Create reusable donation components and integrate with Donate, Join Us and About pages

[roslynwythe]

Dependencies

Issue(s) that need to be completed before work can start on this epic

• Implement Redesigned Donate Page (mobile and desktop) #3983

Issue(s) that are part of this epic and need to be completed in order for this epic to be closed

Creating/Integrating New Components

• Create Donation Circle Component and Integrate with Donate Page  #4263
• Integrate Donation Circle Component with Join Us Donate include #4544
• Create Component and Refactor HTML for "In-Kind" text on Donate page #4457
• Create Donation gif Component and Integrate into Donate Page Include #4439
• Integrate Donation gif component into About Us donate include #4504
• Integrate Donation gif component into Join Us donate include #4507
• Integrate the "In-Kind" component with the Join Us page #4565

Clean Up Issues

• Refactor/Remove donate-card component #4454
• Refactor/Remove join-donate-card component #4455
• Remove unused donation circle graphic file from donate images folder #4456
• Delete unused donation circle graphic from join-us image folder #4466

Overview

We need to make donation elements into components that are reusable so that we can replace the ones that are in use across the site

Details

• The Donate, Join Us and About pages share donation-related elements, however they are not packaged in components suitable for use in future design implementations.
• Also, one element (donation circles graphic) needs to implement a new more accessible design using HTML/CSS.
• The goal of this epic is to create 3 components and to refactor HTML/CSS so that the appearance of the Donate, Join Us and About pages is modified only in specific ways approved by design and product, and described in Donation 2023-03-26 deck

Action Items

Create Issues for Creating New Components

• New Component issues are dependent on completion of
  • Implement Redesigned Donate Page (mobile and desktop) #3983
• Revise Issue Create Donation Circle Component and Integrate with Donate Page  #4263
  • adopt new more accessible Figma design that accommodates larger text and implement in HTML/CSS (without the use of a graphic file)
• New Issue Create Component and Refactor HTML for "In-Kind" text on Donate page #4457
  • The heading itself will not be part of the component.
• New Issue Create Donation gif Component and Integrate into Donate Page Include #4439
  • To maximize reusability, the "card: div and the heading "Donate to Hack for LA" will not be part of the component
  • For mobile screen size, maintain the positioning of the text "*100% of proceeds go to Hack for LA when option is selected" as it appears on the "Donate"page. It should move underneath the animated gif.
• Create New Issue Integrate the "In-Kind" component with the Join Us page #4565
  • Both the "Donation Circle" and the "In-Kind" components should be centered within the entire width of the card.

Merge Team Instruction

#### Merge Team
- [ ] In Epic #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".

Create Issues for Incorporating New Components

• New Issue Integrate Donation gif component into About Us donate include #4504
• New Issue Integrate Donation gif component into Join Us donate include #4507
• New Issue Integrate Donation Circle Component with Join Us Donate include #4544

Create Clean up Issues

• Clean up issues are dependent on completion of all the issues under "New Components"
  • New Issue Refactor/Remove donate-card component #4454
  • New Issue Refactor/Remove join-donate-card component #4455
  • New Issue Remove unused donation circle graphic file from donate images folder #4456
  • New Issue Delete unused donation circle graphic from join-us image folder #4466

Documentation

• Update notes in Donation 2023-03-26 deck and summarized below under Goals with issue numbers.

History

• This Epic resulted from ER: Donation components are not small enough to be reused across the site #4407
• When the major issues are done, we are going to move to the new donation system Replace image, wording and link for donate #4907

[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