fix(Accordion): implement css adjustments and native details

[eirikbacker]

• Fixes Use of <details> in Accordion #2100 🥳
• Deprecates feat(Accordion): open when using search-in-page #2176, feat(Accordion): use native <details> element #2190
• Built on top of <u-details> for better accessibility on mobile
• Removes level from AccordionHeader as this is not supported by native <details>
• Removes onHeaderClick from AccordionHeader as this is identical to adding a onClick handler
• JS-based animation can be removed and replaced by CSS when calc-size(auto) is fully supported 🚀
• Fixes shrinking chevron on mobile/zoom
• Fixes text-align in AccordionHeader on mobile/zoom
• Follows: Preparations for CSS-package #2295
• Also works in dir="rtl"

Question: It is now implemented so search-in-page only works when using defaultOpen, as a controlled open should not be affected by user interaction. Just checking - does this make sense to you guys as well? :)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 35cac99

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Preview deployments for this pull request:

📖 Storybook 16. Sep 2024 - 15:20 (Norwegian time)

🖥 Storefront 16. Sep 2024 - 15:21 (Norwegian time)

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	63.69%	4593 / 7211
🔵	Statements	63.69%	4593 / 7211
🔵	Functions	86.17%	162 / 188
🔵	Branches	75.6%	592 / 783

File Coverage

File	Stmts	% Branch	% Funcs	% Lines	Uncovered Lines
Changed Files
packages/react/src/components/Accordion/AccordionContent.tsx	100%	100%	100%	100%
packages/react/src/components/Accordion/AccordionHeading.tsx	100%	100%	100%	100%
packages/react/src/components/Accordion/AccordionItem.tsx	78.66%	64.7%	80%	78.66%	61, 64, 103-116

Generated in workflow #345

[eirikbacker]

Closes #2364

[github-actions]

Preview deployments for this pull request:

Theme 16. Sep 2024 - 13:33 (Norwegian time)

[eirikbacker]

Design for new hover-colors: https://www.figma.com/proto/vpM9dqqQPHqU6ogfKp5tlr/branch/BoDyQWgF45QJjIAbJJM9sS/Designsystemet---Core-UI-Kit?page-id=13134%3A99159&node-id=37773-4265&node-type=FRAME&viewport=2401%2C777%2C0.19&t=bz3JYzZYqR9MkLp9-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=37773%3A4265

[github-actions]

Preview deployments for this pull request:

Theme 16. Sep 2024 - 15:18 (Norwegian time)

[github-actions]

Preview deployments for this pull request:

Theme 16. Sep 2024 - 15:18 (Norwegian time)

[github-actions]

Preview deployments for this pull request:

Theme 16. Sep 2024 - 15:19 (Norwegian time)