Altinn / app-frontend-react

Altinn application React frontend
BSD 3-Clause "New" or "Revised" License
14 stars 24 forks source link

Added Card and CardGroup Components (Including support in Accordion for Image, Card, CardGroup Components) #2024

Open walldenfilippa opened 1 month ago

walldenfilippa commented 1 month ago

Description

CARD (component)

Based on the card component from designsystemet. It Includes the following features:


![image](https://github.com/Altinn/app-frontend-react/assets/143729834/c4adf546-d676-47c9-986b-f742ed10af8d) ![image](https://github.com/Altinn/app-frontend-react/assets/143729834/957bd549-7dad-49da-b1fd-5196e02dea88)

CARD GROUP (component)

The cardGroup component complements the card component
Note that it does not work with grids. Cards within this group are automatically scaled.
Its purpose is to align multiple cards to the same height and adapt their formatting based on scaling. ![image](https://github.com/Altinn/app-frontend-react/assets/143729834/e793c3da-e600-4639-a7a4-7fa406df676d)

ACCORDIONS

- Enabled Image component in accordion - Enabled Card component in accordion - Enabled Card Group component in accordion. ![image](https://github.com/Altinn/app-frontend-react/assets/143729834/63646956-58fb-4bc7-90ba-2d9ba0693f1d)

Unit testing

I am currently working on a unit testing file, but I am available for discussions and inputs. ## Related Issue(s) - closes #{issue number} ## Verification/QA - Manual functionality testing - [x] I have tested these changes manually - [ ] Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha) - [ ] No testing done/necessary - Automated tests - [ ] Unit test(s) have been added/updated - [ ] Cypress E2E test(s) have been added/updated - [ ] No automatic tests are needed here (no functional changes/additions) - [x] I want someone to help me make some tests - UU/WCAG ([follow these guidelines](https://aksel.nav.no/god-praksis/artikler/utvikling?tema=universell-utforming) until we have our own) - [ ] I have tested with a screen reader/keyboard navigation/automated wcag validator - [ ] No testing done/necessary (no DOM/visual changes) - [x] I want someone to help me perform accessibility testing - User documentation @ [altinn-studio-docs](https://github.com/Altinn/altinn-studio-docs) - [ ] Has been added/updated - [ ] No functionality has been changed/added, so no documentation is needed - [ ] I will do that later/have created an issue - Support in Altinn Studio - [ ] Issue(s) created for support in Studio - [ ] This change/feature does not require any changes to Altinn Studio - Sprint board - [ ] The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board - [ ] I don't have permissions to do that, please help me out - Labels - [ ] I have added a `kind/*` label to this PR for proper release notes grouping - [ ] I don't have permissions to add labels, please help me out