Accordion component

[davidpmccormick]

For #11474

What does this change?

Adding a React component to display content in an accordion

accordion.mp4

• Test against NVDA where possible issues with this approach have been flagged

The animation behaviour was deemed a nice-to-have and as such currently only works in Chrome and Edge because it relies on interpolate-size and ::details-content. Hopefully support will improve.

The default behaviour of the component is that all drawers can be opened independently (without the others closing), but there is an optional prop (closeOthersOnOpen) to override this behaviour.

How to test

• yarn cardigan and view Accordion story

How can we measure success?

We'll need this component for the exhibition access section

Have we considered potential risks?

n/a

[github-actions]

Size Change: 0 B

Total Size: 1.02 MB

ℹ️ View Unchanged

Filename	Size
content/webapp/.next/static/chunks/00a8a139.e66d72e5d4e63786.js	58.7 kB
content/webapp/.next/static/chunks/1256.13d04d7ceb6d34d7.js	3.2 kB
content/webapp/.next/static/chunks/1271.e0c2268369bdddfb.js	4.81 kB
content/webapp/.next/static/chunks/1570-eda3d0dc48b92c9e.js	5.38 kB
content/webapp/.next/static/chunks/1723-dd15ab5809baac3f.js	6.98 kB
content/webapp/.next/static/chunks/1792.8d30ed89b794a7c5.js	2.87 kB
content/webapp/.next/static/chunks/1801.0e7c25d7fb0b5b8e.js	3.12 kB
content/webapp/.next/static/chunks/1895-939985d7aa411a41.js	2.27 kB
content/webapp/.next/static/chunks/211-f2920ff3e40813b3.js	2.67 kB
content/webapp/.next/static/chunks/2186-6e5af00a8e062693.js	3.82 kB
content/webapp/.next/static/chunks/2394-f7ade4728bab7d66.js	3.2 kB
content/webapp/.next/static/chunks/2526.ca9695fe3b718606.js	4.38 kB
content/webapp/.next/static/chunks/2588.bb2c3ed5ae72ef41.js	1.64 kB
content/webapp/.next/static/chunks/2782.7aaa3e9253023056.js	3.47 kB
content/webapp/.next/static/chunks/286.e6c4fb42dbebd142.js	20.7 kB
content/webapp/.next/static/chunks/2873.ab50cec1d5cb1613.js	1.67 kB
content/webapp/.next/static/chunks/3197.b17b6db1e5fef68e.js	263 B
content/webapp/.next/static/chunks/3393.1a50235e398e33e1.js	358 B
content/webapp/.next/static/chunks/3422-35d87fae4bd6364d.js	2.92 kB
content/webapp/.next/static/chunks/3463.6f34c3c7f0a539d7.js	3.31 kB
content/webapp/.next/static/chunks/3818-f189578851816276.js	3.5 kB
content/webapp/.next/static/chunks/3833-822bbc4f008a86f6.js	3 kB
content/webapp/.next/static/chunks/3870-6cd839f2d5f8f560.js	3.42 kB
content/webapp/.next/static/chunks/4005.218bad1ccfa4c2b3.js	5.97 kB
content/webapp/.next/static/chunks/4374.b1c852b38e66d6ec.js	373 B
content/webapp/.next/static/chunks/4494-9ee08e6cd2d95cc0.js	4.68 kB
content/webapp/.next/static/chunks/4554.3ebff88311e47bda.js	3.93 kB
content/webapp/.next/static/chunks/4631.9dd484a988ff132d.js	2.19 kB
content/webapp/.next/static/chunks/4660.d3804cb5d35c597f.js	277 B
content/webapp/.next/static/chunks/4892-c80937862b3f57fa.js	4.43 kB
content/webapp/.next/static/chunks/5082.f730f41d47897b91.js	1.56 kB
content/webapp/.next/static/chunks/5986-dcba89e15f2c8751.js	4.74 kB
content/webapp/.next/static/chunks/6042-1becdfc7177f0443.js	7.15 kB
content/webapp/.next/static/chunks/6425-194ee5c5c5654052.js	6.66 kB
content/webapp/.next/static/chunks/656-a5507fb3ff57a9a4.js	3.06 kB
content/webapp/.next/static/chunks/6577-5673df74d42242c4.js	3.9 kB
content/webapp/.next/static/chunks/6921-867cfe60d1b6e717.js	3.67 kB
content/webapp/.next/static/chunks/7107-7a0c6bd1411921e2.js	33.8 kB
content/webapp/.next/static/chunks/7185.711d55487124425c.js	2.44 kB
content/webapp/.next/static/chunks/72-b9bcdfe8ff0bebfc.js	4.47 kB
content/webapp/.next/static/chunks/721-ea2d0bb10927ae69.js	7.55 kB
content/webapp/.next/static/chunks/7401-4a133da6bafaf096.js	4.34 kB
content/webapp/.next/static/chunks/7489-c0ce38570bd67c88.js	7.34 kB
content/webapp/.next/static/chunks/7603-ca72323ac1819255.js	3.14 kB
content/webapp/.next/static/chunks/7842-b97990097b812fa3.js	4.79 kB
content/webapp/.next/static/chunks/7914-115210bc7c243bdf.js	2.96 kB
content/webapp/.next/static/chunks/7996-e3d04133a6ebeeb6.js	3.59 kB
content/webapp/.next/static/chunks/8498-a8f491e66db5b1ef.js	16.2 kB
content/webapp/.next/static/chunks/8732.8a67f91b9792fd93.js	4.54 kB
content/webapp/.next/static/chunks/8880-f5a4b47b6d3b3e03.js	4.99 kB
content/webapp/.next/static/chunks/8910.2c6b18de4b850a00.js	263 B
content/webapp/.next/static/chunks/8983-2f54da5934670a9b.js	11.4 kB
content/webapp/.next/static/chunks/9133.39332f424231fd53.js	2.71 kB
content/webapp/.next/static/chunks/9309.60054df571ff5328.js	2.83 kB
content/webapp/.next/static/chunks/9450.bf6b04974baf1a1a.js	5.04 kB
content/webapp/.next/static/chunks/9536-ffd6af6ce3912e19.js	3.71 kB
content/webapp/.next/static/chunks/9696.f76a03ee3b169f51.js	3.59 kB
content/webapp/.next/static/chunks/9875.cc2786d20b9961c7.js	4.8 kB
content/webapp/.next/static/chunks/framework-978a6051e6d0c57a.js	44.9 kB
content/webapp/.next/static/chunks/main-f8a178edb9b98bff.js	36.9 kB
content/webapp/.next/static/chunks/pages/_app-ac286222ccd5cdd7.js	109 kB
content/webapp/.next/static/chunks/pages/_error-4cf036a2ff1ec507.js	331 B
content/webapp/.next/static/chunks/pages/[uid]-f7f5a1c5c173a80f.js	1.94 kB
content/webapp/.next/static/chunks/pages/404-791c5651d62f91a3.js	258 B
content/webapp/.next/static/chunks/pages/500-2275439797e687d9.js	258 B
content/webapp/.next/static/chunks/pages/about-us-67d04490ec9e73bf.js	1.94 kB
content/webapp/.next/static/chunks/pages/about-us/[uid]-6eb0a9c5eda89650.js	1.94 kB
content/webapp/.next/static/chunks/pages/about-us/cookie-policy-7381554bc4b790f7.js	6 kB
content/webapp/.next/static/chunks/pages/books-b4a7e0f211c0fdd2.js	2.02 kB
content/webapp/.next/static/chunks/pages/books/[bookId]-7bee3ff363b49ffc.js	4.09 kB
content/webapp/.next/static/chunks/pages/collections-b81cfe99c7eed9d2.js	2.35 kB
content/webapp/.next/static/chunks/pages/collections/[uid]-028a4efe4b821a11.js	2.29 kB
content/webapp/.next/static/chunks/pages/concepts/[conceptId]-d053ae659097e6b3.js	3.78 kB
content/webapp/.next/static/chunks/pages/event-series/[eventSeriesId]-eaaf51b5cc921d61.js	2.93 kB
content/webapp/.next/static/chunks/pages/events-326f4d9953df5f9a.js	2.14 kB
content/webapp/.next/static/chunks/pages/events/[eventId]-709812801280af7e.js	8.87 kB
content/webapp/.next/static/chunks/pages/events/[eventId]/visual-stories-5c97b5365f87b92d.js	299 B
content/webapp/.next/static/chunks/pages/exhibitions-cf4a548474c5fd80.js	2.39 kB
content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]-01fc7d3b72c8eaec.js	3.98 kB
content/webapp/.next/static/chunks/pages/exhibitions/[exhibitionId]/visual-stories-c191d7e9adfaa7b5.js	300 B
content/webapp/.next/static/chunks/pages/get-involved-14a56d323cec3ca5.js	1.94 kB
content/webapp/.next/static/chunks/pages/get-involved/[uid]-503367f75f3c1cd4.js	1.95 kB
content/webapp/.next/static/chunks/pages/guides/[guideId]-73b83002c64a73b6.js	2.25 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions-6b9e491208dfacf6.js	2.64 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]-266807f317d4df24.js	2.76 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]-c91e904557f761fb.js	7.21 kB
content/webapp/.next/static/chunks/pages/guides/exhibitions/[id]/[type]/[stop]-bf1be7f0514b5628.js	3.71 kB
content/webapp/.next/static/chunks/pages/index-287ad9758b767a78.js	3.48 kB
content/webapp/.next/static/chunks/pages/newsletter-930fb9f580889eee.js	2.35 kB
content/webapp/.next/static/chunks/pages/pages/[pageId]-58b058ba4201f276.js	1.91 kB
content/webapp/.next/static/chunks/pages/projects/[projectId]-6133409795b403db.js	2.23 kB
content/webapp/.next/static/chunks/pages/search-47731f930888a86f.js	5.36 kB
content/webapp/.next/static/chunks/pages/search/events-67237cc0093758db.js	2.04 kB
content/webapp/.next/static/chunks/pages/search/images-a0bb3c58d5cdcf45.js	1.58 kB
content/webapp/.next/static/chunks/pages/search/stories-e9ac779ef5a8b05c.js	3.11 kB
content/webapp/.next/static/chunks/pages/search/works-2ff7ea5daffab355.js	2.95 kB
content/webapp/.next/static/chunks/pages/seasons/[seasonId]-20f1d6c82344ce08.js	3.87 kB
content/webapp/.next/static/chunks/pages/series/[seriesId]-018c871fbad4af1b.js	5.08 kB
content/webapp/.next/static/chunks/pages/slice-simulator-814668a2bf343d4d.js	980 B
content/webapp/.next/static/chunks/pages/stories-f7221235c4db5df8.js	1.73 kB
content/webapp/.next/static/chunks/pages/stories/[articleId]-5386d17b5c12b165.js	7.61 kB
content/webapp/.next/static/chunks/pages/visit-us-6aad5b024691be14.js	2.27 kB
content/webapp/.next/static/chunks/pages/visit-us/[uid]-d14c16d0485a9bf2.js	1.95 kB
content/webapp/.next/static/chunks/pages/visual-stories/[visualStoryId]-539ee0cbab547f91.js	238 B
content/webapp/.next/static/chunks/pages/whats-on-4b840aee34feb0ae.js	210 B
content/webapp/.next/static/chunks/pages/whats-on/[period]-4d3fbe544ccc539e.js	279 B
content/webapp/.next/static/chunks/pages/works/[workId]-0d5802d674ae1e47.js	20.5 kB
content/webapp/.next/static/chunks/pages/works/[workId]/download-5f2f4a58189520e9.js	2.73 kB
content/webapp/.next/static/chunks/pages/works/[workId]/images-f427bdee8078011e.js	699 B
content/webapp/.next/static/chunks/pages/works/[workId]/items-49622dffbf23ac73.js	2.35 kB
content/webapp/.next/static/chunks/polyfills-42372ed130431b0a.js	39.5 kB
content/webapp/.next/static/chunks/webpack-e3a3125149038b96.js	2.33 kB
identity/webapp/.next/static/chunks/128.a394cb623dd1d2e9.js	2.71 kB
identity/webapp/.next/static/chunks/286.30e19e68d137a7fe.js	20.7 kB
identity/webapp/.next/static/chunks/442-16a4fdfe63454534.js	9.09 kB
identity/webapp/.next/static/chunks/644-f0cfb6459ad9993f.js	16.2 kB
identity/webapp/.next/static/chunks/911.3961d88c7985befe.js	939 B
identity/webapp/.next/static/chunks/framework-e82a91356956e6c8.js	44.8 kB
identity/webapp/.next/static/chunks/main-0a79b8ff20fd3839.js	39 kB
identity/webapp/.next/static/chunks/pages/_app-51f3a7eca52b5c39.js	105 kB
identity/webapp/.next/static/chunks/pages/_error-cd4c42214e080cf2.js	1.45 kB
identity/webapp/.next/static/chunks/pages/delete-requested-695bdf7b35dae097.js	3.22 kB
identity/webapp/.next/static/chunks/pages/error-a8564e691956d3a2.js	1.69 kB
identity/webapp/.next/static/chunks/pages/index-fdcc8e4649babc2a.js	12 kB
identity/webapp/.next/static/chunks/pages/registration-c4497c610603656a.js	4.12 kB
identity/webapp/.next/static/chunks/pages/success-c2599ab99f3cf080.js	3.3 kB
identity/webapp/.next/static/chunks/pages/validated-ccfa3474735f993e.js	3.38 kB
identity/webapp/.next/static/chunks/polyfills-42372ed130431b0a.js	39.5 kB
identity/webapp/.next/static/chunks/webpack-f1b15f41485fda96.js	1.82 kB

_{compressed-size-action}

[rcantin-w]

Looks nice! Was behaviour discussed in terms of "one opened at a time" vs "how many you want open"?

[davidpmccormick]

Looks nice! Was behaviour discussed in terms of "one opened at a time" vs "how many you want open"?

Good point, I knew there was something else to consider. I'll check with @kasiabbb

[davidpmccormick]

TODO

• default opening one doesn't close another (but optionally include open-one-close-others behaviour)
• hover behaviour for Show/hide text (no underline initially, slide in yellow underline from left like main nav on hover)
• investigate animating sliding open the individual drawers