1970 accordion playground

GCHQ-Developer-530 commented 3 months ago

Summary of the changes

Add playground story and update accordion to watch props and use message prop

Related issue

Part of #1970

Checklist

General

[x] Changes to docs package checked and committed.
[x] All acceptance criteria reviewed and met.

Testing

[x] Relevant unit tests and visual regression tests added.
[x] Visual testing against Figma component specification completed.

Accessibility

[x] Accessibility Insights FastPass performed.
[x] A11y unit test added and yields no issues.
[x] A11y plug-in on Storybook yields no issues.
[x] Manual screen reader testing performed using NVDA and VoiceOver.
[x] Manual keyboard testing for keyboard controls and logical focus order.
[x] Correct roles used and ARIA attributes used correctly where required.
[x] Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

Resize/zoom behaviour

[x] Page can be zoomed to 400% with no loss of content.
[x] Screen magnifier used with no issues.
[x] Text resized to 200% with no loss of content.
[x] Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

System modes

[x] Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
[x] Windows High Contrast mode tested with no loss of content.
[x] System light and dark mode tested with no loss of content.
[x] Browser support tested (Chrome, Safari, Firefox and Edge).

Testing content extremes

[x] Min/max content examples tested with no loss of content or overflow.
[x] All prop combinations work without issue.
[x] Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
[x] Controlled and uncontrolled input components tested.

github-actions[bot] commented 3 months ago

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1970-accordion-playground/web-components View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1970-accordion-playground/react View your NextJs branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1970-accordion-playground/nextjs

github-actions[bot] commented 3 months ago

Cypress visual tests failed. View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/1970-accordion-playground/cypress-image-diff-screenshots View the html report here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/1970-accordion-playground/cypress-image-diff-html-report

GCHQ-Developer-530 commented 3 months ago

could the appearance control be changed to a radio? - it's currently a select:

Also, can we add some conditional styling to show the light appearance, like we have with other comps (in react storybook)?

I've updated to black background for light appearance. Weirdly both web components and react appearance controls were already set as radio, so it might be a weird cache thing that select was still showing.

GCHQ-Developer-299 commented 3 months ago

Got a little bit of strange behaviour on the playground regarding the Expanded toggle where it only expands the second acccordion, but if you refresh the canvas it succesfully expands both of them:

https://github.com/mi6/ic-ui-kit/assets/111292477/b5dd8564-a455-426c-9241-9e1c45804f86

GCHQ-Developer-530 commented 3 months ago

Got a little bit of strange behaviour on the playground regarding the Expanded toggle where it only expands the second acccordion, but if you refresh the canvas it succesfully expands both of them:

Screen.Recording.2024-06-19.at.10.44.41.mov

Weird, I can see that behaviour too but only for React storybook. I'll have a look into it

CLAassistant commented 3 months ago

All committers have signed the CLA.

GCHQ-Developer-847 commented 3 months ago

Don't know if this is within the scope of this ticket, but noticed that the appearance of the accordion can be either dark, default or light, but in the Figma designs, there are only dark and light variants. Also the "dark" accordion at the moment is not quite correct in that it is showing black heading text and white body / message text

mi6 / ic-ui-kit