backpack icon indicating copy to clipboard operation
backpack copied to clipboard

[WIP][BpkAccordion] Introduce new styles

Open gert-janvercauteren opened this issue 3 months ago • 10 comments

BpkAccordion

This pull request introduces new visual variants to the BpkAccordion component, allowing for different background and padding styles, as well as improved flexibility for item titles and labels. The changes add new props and context values, update styles, and enhance example and storybook coverage to demonstrate the new features.

Accordion Variants and Styling:

  • Added type prop to BpkAccordion and AccordionType/ACCORDION_TYPES to support new visual variants (surfaceDefault, surfaceLowContrast, and default). The context is updated to pass this type to child items. ([[1]](diffhunk://#diff-ed9d30760e091edde18c411ef69503a1af9408af4bf011ff3b9e7cc10a787dbdR25-R31), [[2]](diffhunk://#diff-ed9d30760e091edde18c411ef69503a1af9408af4bf011ff3b9e7cc10a787dbdR40-R46), [[3]](diffhunk://#diff-ed9d30760e091edde18c411ef69503a1af9408af4bf011ff3b9e7cc10a787dbdR56-R61), [[4]](diffhunk://#diff-879f87a7b59ab9c445328c625c81f2d27209f9279a49393aac0810fcc82a11caR1-R8))
  • Updated SCSS files to add styles for the new background variants and padding, including border-radius and gap adjustments for icon wrappers. ([[1]](diffhunk://#diff-89b9e2911a4c0e43b99078bb868b8e8d57b3f7f3522b07c7fcb415157cb3aa11R27-R36), [[2]](diffhunk://#diff-5b1965da520f4d42beb4451d6dabd6724b1b130710c78ca5ced991e1709ce67aR50-R54), [[3]](diffhunk://#diff-5b1965da520f4d42beb4451d6dabd6724b1b130710c78ca5ced991e1709ce67aR75))

Accordion Item Flexibility:

  • Enhanced BpkAccordionItem to accept optional title (can be string, React element, or null) and a new label prop for additional context beside the expand icon. The rendering logic and class names were updated to support these props and variants. ([[1]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fR30), [[2]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fL40-R42), [[3]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fL51-R53), [[4]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fR62), [[5]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fR73), [[6]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fR128-R144), [[7]](diffhunk://#diff-c1633b5fe31577e70d135e5d5673fa0243b2685ebf884349517837cd54ada81fL140-R169))

Examples and Storybook:

  • Added a new VariantExample in the examples file to demonstrate the new accordion types, including usage of icons, styled titles, and labels. ([[1]](diffhunk://#diff-f458dbe007897360556d3ca119c75b47363e6dd577f1d6ba3271eabca4087532R20-R23), [[2]](diffhunk://#diff-f458dbe007897360556d3ca119c75b47363e6dd577f1d6ba3271eabca4087532L38-R51), [[3]](diffhunk://#diff-f458dbe007897360556d3ca119c75b47363e6dd577f1d6ba3271eabca4087532R414-R440), [[4]](diffhunk://#diff-f458dbe007897360556d3ca119c75b47363e6dd577f1d6ba3271eabca4087532R455))
  • Integrated VariantExample into the storybook for visual testing and documentation. ([[1]](diffhunk://#diff-1364df18559b369c7440abfb76306b9c95109f82810d5d3f4bc3db292b85f6faL35-R35), [[2]](diffhunk://#diff-1364df18559b369c7440abfb76306b9c95109f82810d5d3f4bc3db292b85f6faR80-R81))

Remember to include the following changes:

  • [ ] Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [Clover-123][BpkButton] Updating the colour
  • [ ] README.md (If you have created a new component)
  • [ ] Component README.md
  • [ ] Tests
  • [ ] Accessibility tests
    • The following checks were performed:
      • [ ] Ability to navigate using a keyboard only
      • [ ] Zoom functionality (Deque University explanation):
        • [ ] The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
        • [ ] Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
      • [ ] Ability to navigate using a screen reader only
  • [ ] Storybook examples created/updated
  • [ ] For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

gert-janvercauteren avatar Sep 17 '25 03:09 gert-janvercauteren