[CWM] Create Pop-up Component

ms0ur1s commented 2 days ago

Description

Create a Pop-up component based on the designs detailed in issue #22. The component should contain all the fields displayed in the aforementioned design, as well as providing for extra fields that a specific data source might contain. The component should be designed for both desktop and mobile layouts and follow the specified structure and functionality:

Component Breakdown

Outer Pop-up Component - This will serve as the main container for the pop-up UI.
Left Panel - To contain fields such as: Co-op Name, Primary Activity, Description and .coop Domains.
Right Panel: Top section to contain: Address and Website fields. Bottom section to contain: Organisational Structure, Typology, and Data Sources list.
Accordion (share component) - Should be positioned below any data source that needs to display extra fields.

Redux Integration

Implement a Redux slice to fetch and display data from the backend API via the Redux store. If the API is unavailable, fallback to mock data provided by Rohit.
The component should be capable of retrieving and rendering the data dynamically.

Storybook Stories

Create Storybook stories for this component to document and test its various states.

Tasks

[ ] Develop the outer pop-up component with left and right panels and accordion functionality.
[ ] Implement Redux slice to fetch and manage data from the backend API or fallback to Rohit's mock data.
[ ] Add Storybook stories for the component in both desktop and mobile formats.
[ ] Test the component's responsiveness and ensure it works across various screen sizes.
[ ] Document the component's functionality, including its interaction with the Redux store.

Acceptance Criteria

A fully functional Pop-up component is implemented, following the structure outlined above.
Desktop and mobile views are both implemented and match the provided designs.
Redux slice is integrated for API data fetching and mock data fallback.
Storybook stories are added for the component, covering different states (e.g., no data, loading state, data present).

ms0ur1s commented 2 days ago

Designs from Issue #22

ms0ur1s commented 2 days ago

@ColmDC and @lin-d-hop is the issue I've created ok?

DigitalCommons / mykomap-monolith