1970 top nav playground

GCHQ-Developer-530 commented 3 months ago

Summary of the changes

Add playground story for top navigation

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-top-nav-playground/web-components View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1970-top-nav-playground/react View your NextJs branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1970-top-nav-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-top-nav-playground/cypress-image-diff-screenshots View the html report here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/1970-top-nav-playground/cypress-image-diff-html-report

gd2910 commented 3 months ago

Looks great 👍 could we have the slot controls as booleans to show ic-top-navigation with/without slotted content?

GCHQ-Developer-530 commented 3 months ago

Looks great 👍 could we have the slot controls as booleans to show ic-top-navigation with/without slotted content?

Unfortunately not, it won't let me conditionally set the slot name using a boolean so I've had to do it where we can the slot name to the correct name or an empty string

mi6 / ic-ui-kit