1970 canary date component playgrounds

[GCHQ-Developer-530]

Summary of the changes

Add playground stories for date input and date picker

Ticket already created for startOfWeek not updating - https://github.com/mi6/ic-ui-kit/issues/1877

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]]

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

[CLAassistant]

All committers have signed the CLA.

[ad9242]

There seems to be a problem where, if you have a value set, changing the date-format clears the field. I'd expect it to update the value, but that should be a new ticket as it doesn't support it at the moment (would need changes to input & picker i think)

[GCHQ-Developer-530]

There seems to be a problem where, if you have a value set, changing the date-format clears the field. I'd expect it to update the value, but that should be a new ticket as it doesn't support it at the moment (would need changes to input & picker i think)

https://github.com/mi6/ic-ui-kit/issues/2056 created

[GCHQ-Developer-530]

I think the blanking of the value may be a bigger issue, than just changing the date format. it seems to be that, if you have entered a value in the picker\input and then change a storybook control eg, disabled, then it blanks the value. I think this is because it re-uses the value from the storybook control.

you can keep them in sync with https://storybook.js.org/docs/addons/addons-api#useargs see checkbox playground for an example

Ah brilliant, thank you. I've updated it