Use Accordion component from new macaw

[poulch]

closes #3704

Accordion has been changed here:

• Configuration / Channel details right sidebar Warehouses and Shipping Zones
• Products export dialog
• Channel availability card in Collection, Sales, Vouchers, Product, Shipping zone create and details page
• Filter content in all places where filter is used
• Timeline event use for example in order and gift card history
• Product variant details - available channels

Screenshots

Before	After

Before	After

Before	After

Before	After

Before	After

Pull Request Checklist

1. This code contains UI changes
2. All visible strings are translated with proper context including data-formatting
3. Attributes data-test-id are added for new elements
4. The changes are tested in Chrome/Firefox/Safari browsers and in light/dark mode
5. Your code works with the latest stable version of the core

Test environment config

API_URI=https://automation-dashboard.staging.saleor.cloud/graphql/
APPS_MARKETPLACE_API_URI=https://apps.staging.saleor.io/api/v2/saleor-apps

Do you want to run more stable tests?

To run all tests, just select the stable checkbox. To speed up tests, increase the number of containers. Tests will be re-run only when the "run e2e" label is added.

1. stable
2. giftCard
3. category
4. collection
5. attribute
6. productType
7. shipping
8. customer
9. permissions
10. menuNavigation
11. pages
12. sales
13. vouchers
14. homePage
15. login
16. orders
17. products
18. app
19. plugins
20. translations
21. navigation
22. variants
23. payments

CONTAINERS=6

[poulch]

This is intentional that accordion content is indented compared to the accordion trigger, and this is how it works currently on staging.

[poulch]

The whole row could be clickable on filters - now only the txt field and radio button is clickable

I confirm. This is very unintuitive

I've decided to not include Filter as it will be replaced be new component

[poulch]

As I've described above, Filter is not part of this PR.

[poulch]

Seem to be 1 to 1 with stagging, Imo is intentionally to not use accordion here

[poulch]

Untitled_.Jul.4.2023.2_23.PM.webm

1. Go to orders
2. Go into random order details
3. Go to the order history
4. Click on the arrow - nothing happened

it looks like we implement a dead feature. What should happen when I click there?

This will be fixed in this PR

[poulch]

What is the first letter in the countries ?

This is not an accordion component but only looks similar. IMO we can migrate this component during whole page migration to new macaw

[poulch]

Timeline event use for example in order and gift card history -> can't see it, am I on wrong view?

You were in good view but not all history events have accordion.
Example for orders: https://3704-replace-accordion.dashboard.saleor.rocks/orders/T3JkZXI6YzkxZTQzMDMtOGNlOS00ZDRlLTk2OGYtMmZjMGI5NjdmMmIy
I coundn't found an example for gift card but this is the same component as in order history.

[poulch]

Product variant details - available channels How it should looks on this view? Current:

By ``Product variant details ` I mean this view: https://3704-replace-accordion.dashboard.saleor.rocks/products/UHJvZHVjdDo3Nw%3D%3D/variant/UHJvZHVjdFZhcmlhbnQ6MjE3

[poulch]

Please create separate issue for this