[Design QA] Donation page/Desktop - Breadcrumbs Missing

[SanaJamm]

Add breadcrumbs to page

[decentralauren]

Add breadcrumbs when navigating into sub-pages (see top of screen under "GoodCollective" header)

https://www.figma.com/file/ihw1PxBvLxacTHnN2aj4lC/3.-Product-%F0%9F%92%B5?type=design&node-id=5432%3A87755&mode=design&t=oxSlZ4Mp28Ko6gK3-1

[benefacto]

Technical Implementation

To add breadcrumbs to the DonateComponent, you'll need to integrate the Breadcrumb component into it. This will allow users to see their current location within the application and navigate back to previous pages easily. Here's how you can do this:

1. Import the Breadcrumb Component: Make sure that the Breadcrumb component is imported into your DonateComponent.

   import Breadcrumb from './Breadcrumb';

2. Add the Breadcrumb Component to the Render Method: Place the Breadcrumb component at the top of the DonateComponent's render output, so it appears under the "GoodCollective" header.

   function DonateComponent({ 
    // ... props ...
   }) {
    // ... component logic ...
   
    return (
      <View style={[styles.body, isDesktopResolution && styles.bodyDesktop]}>
        <Breadcrumb currentPage="Donate" />
   
        {/* Rest of your component code */}
      </View>
    );
   }

3. Pass the Current Page as a Prop: The currentPage prop can be dynamic based on the current page's context. For the DonateComponent, you can simply pass "Donate" as the currentPage prop, or any other relevant string that represents the current page in the breadcrumb.

4. Style Adjustments: Adjust the styles of the Breadcrumb component if necessary to match your design requirements. This includes positioning, color, font size, etc.

5. Responsive Design Consideration: If the breadcrumb needs to be displayed differently on various screen sizes, use useMediaQuery within Breadcrumb or conditionally render different styles or layouts in the DonateComponent.

By following these steps, you will integrate a breadcrumb navigation into your DonateComponent, enhancing the user experience by providing a clear path of navigation and easy access to previous pages. Remember to test the integration on different devices and screen sizes to ensure consistent behavior and appearance.

Estimate

Estimating the time for adding breadcrumbs to the DonateComponent in a web application is a relatively straightforward task. It mainly involves frontend development skills, focusing on integrating an existing component into a different part of the application and ensuring it functions correctly and matches the desired styling and responsiveness.

1. Understanding the Requirement (1-2 hours): Familiarizing with the existing DonateComponent and the Breadcrumb component, understanding how they are currently implemented, and the changes needed.

2. Importing and Integrating the Breadcrumb Component (1-3 hours):

   • Importing the Breadcrumb component into the DonateComponent.
   • Placing the Breadcrumb component within the DonateComponent's render method, ensuring it appears in the desired location.

3. Adjusting Props and Logic (1-2 hours):

   • Ensuring the currentPage prop is passed correctly to the Breadcrumb component.
   • Implementing any necessary logic changes to dynamically set the currentPage prop if needed.

4. Styling Adjustments (2-4 hours):

   • Making style adjustments to the Breadcrumb component to align with design requirements.
   • Ensuring consistency in positioning, color, font size, etc., to match the overall design of the DonateComponent.

5. Responsive Design Implementation (2-3 hours):

   • Implementing responsive design considerations, possibly using useMediaQuery or similar approaches.
   • Testing and adjusting the Breadcrumb component to ensure it displays correctly across different screen sizes.

6. Testing and Validation (2-3 hours):

   • Thoroughly testing the integrated breadcrumb feature.
   • Ensuring it functions correctly within the DonateComponent and that the navigation path is correctly displayed and responsive.

7. Review and Refinement (1-2 hours):

   • Addressing any feedback, and making necessary refinements.

Adding these up, the total estimated time could be around 10-20 hours. This estimate assumes that the developer is experienced with the technologies involved (such as React, CSS, and responsive design principles) and that there are no significant unforeseen complexities in integrating the Breadcrumb component into the DonateComponent.