Feature/accordion component

[j212122]

Summary of the changes

Creates accordion and accordion-group.

Related issue

#240

Deployed:
https://j212122.github.io/ic-ui-kit/branches/feature/accordion-component/web-components/?path=/story/web-components-accordion--default-story

Checklist

• I have added relevant unit and visual regression tests.
• I have manually accessibility tested any changes, if relevant.
• I have ensured any changes match the Figma component library.

[gd2910]

New components should adhere to the Stencil style guide;
Tests in a 'test' sub-directory
Each test in its own semantically named directory

Component files should also follow this pattern;
Variables (alphabetised)
Element
State (alphabetised)
Prop (alphabetised)
Watch (with watched props behind them)
Event (alphabetised)
Lifecycle (folowing lfiecycle process: connection, load, update, render)
Listen
Method
Local private methods
Render

[GCHQ-Developer-530]

Looks really good, just a couple of small comments 😊

[GCHQ-Developer-530]

Found a small bug where if you click see all, but then manually close the accordions, it still says hide all even though they are all hidden.

Screen.Recording.2023-06-29.at.13.43.36.mov

[GCHQ-Developer-530]

Spoke to designers and the borders should use the border default variable set up in #735. Other than that, looks great!

[GCHQ-Developer-847]

Added a few comments - everything else looks great though!

[gd2910]

Just a small one, looks like the background colour for 'light text' and 'parent' stories are mixed up.

[gd2910]

There are a couple of private variables that can be brought up to the top of the class in ic-accordion.tsx

 private animationTimer: ReturnType<typeof setTimeout>;
  private expandedContentEl: HTMLDivElement;

[GCHQ-Developer-530]

The disabled accordion seems to still have a click state, I think the behaviour should be that it shouldn't change background colour when clicked.

Screen.Recording.2023-07-26.at.13.34.56.mov