feat(PPDSC-2152): single accordion

[Xin00163]

PPDSC-2152

• Build the single Accordion interface
• Add storybook scenarios
• Add unit tests

I have done:

• Written unit tests against changes
• Written functional tests against the component and/or NewsKit site
• Updated relevant documentation

I have tested manually:

• The feature's functionality is working as expected on Chrome, Firefox, Safari and Edge
• The screen reader reads and flows through the elements as expected.
• There are no new errors in the browser console coming from this PR.
• When visual test is not added, it renders correctly on different browsers and mobile viewports (Safari, Firefox, small mobile viewport, tablet)
• The Playground feature is working as expected

Before:

After:

Who should review this PR:

How to test:

[newskit-engineering]

You can preview these changes on:
Documentation Site: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2152-single-accordion
Storybook: http://ncu-newskit-docs.s3-website-eu-west-1.amazonaws.com/ppdsc-2152-single-accordion/storybook

[GeriReid]

@Xin00163 run through - looking good.

A couple of text colour changes:

• Disabled: start enhancer icon, label and chevron icon - color: inkNonEssential
• On hover: start enhancer icon, chevron icon and label - color: interativeInput40
  My error, I should have specced these more clearly, I thought they’d be covered by font colour but I should have been more specific. Mockup here.

Divider/bottom border. When the accordion panel is open can the bottom border of the header be removed so you don’t get a double border?

[Xin00163]

@Xin00163 run through - looking good.

A couple of text colour changes:

• Disabled: start enhancer icon, label and chevron icon - color: inkNonEssential
• On hover: start enhancer icon, chevron icon and label - color: interativeInput40
  My error, I should have specced these more clearly, I thought they’d be covered by font colour but I should have been more specific. Mockup here.

Divider/bottom border. When the accordion panel is open can the bottom border of the header be removed so you don’t get a double border?

Regarding the above, I've managed to line up the state stylePresets of header text and label but since startEnhancer and indicatorIcon cannot inherit the parent stylePreset, I've not managed to have them behave the same way as label.

A few things have changed since last review and our discussion:

• Divider has been removed and we will use borderBottom instead.
• Header is kept as optional because there is a case user might have a label but not header. The modal component's header is optional as well.
• onFocus state will be added after https://nidigitalsolutions.jira.com/browse/PPDSC-2151 is merged.
• default stylePresets have also been removed for indicatorLabel & indicatorIcon

[Xin00163]

All comments should have been addressed. Really appreciate getting all these feedback