feat(web-components): add additional functionality to existing ic-divider component
Summary of the changes
Add props to allow existing ic-divider to be more customisable, add stories & prop playground, add tests,
update side navigation test following change to ic-divider
BREAKING CHANGE: Change default styling and props on ic-divider
Related issue
#1331
Checklist
General
- [ ] Changes to docs package checked and committed.
- [ ] All acceptance criteria reviewed and met.
Testing
- [ ] Relevant unit tests and visual regression tests added.
- [ ] Visual testing against Figma component specification completed.
- [ ] Playground stories in React Storybook up to date, with any prop changes and additions addressed.
- [ ] Compare performance of modified components against develop using Performance addon in React Storybook.
Accessibility
- [ ] Accessibility Insights FastPass performed.
- [ ] A11y unit test added and yields no issues.
- [ ] A11y plug-in on Storybook yields no issues.
- [ ] Manual screen reader testing performed using NVDA and VoiceOver.
- [ ] Manual keyboard testing for keyboard controls and logical focus order.
- [ ] Correct roles used and ARIA attributes used correctly where required.
- [ ] 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
- [ ] Page can be zoomed to 400% with no loss of content.
- [ ] Screen magnifier used with no issues.
- [ ] Text resized to 200% with no loss of content.
- [ ] Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.
System modes
- [ ] Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
- [ ] Windows High Contrast mode tested with no loss of content.
- [ ] System light and dark mode tested with no loss of content.
- [ ] Browser support tested (Chrome, Safari, Firefox and Edge).
Testing content extremes
- [ ] Min/max content examples tested with no loss of content or overflow.
- [ ] All prop combinations work without issue.
- [ ] Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
- [ ] Controlled and uncontrolled input components tested.
- [ ] Props/slots can be updated after initial render.
View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1331-divider-component-new/web-components View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/1331-divider-component-new/react
Cypress visual tests failed. View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/1331-divider-component-new/cypress-image-diff-screenshots/diff View the html report here: https://mi6.github.io/ic-ui-kit/branches/1331-divider-component-new/cypress-image-diff-html-report/cypress-image-diff-html-report.html