mi6
Feat/3933 angular native wrappers
Summary of the changes
Enabled angular output target in stencil config to create native angular library output. This change set also provides an angular schematic for ease of integration with consumer apps and updates in-repo documentation for using ICDS with Angular.
Related issue
#3933 & ic-design-system 850
Checklist
General
- [x] Changes to docs package checked and committed.
- [x] All acceptance criteria reviewed and met.
Testing
- [ ] Relevant unit tests and visual regression tests added.
- [x] Visual testing against Figma component specification completed.
- [-] Playground stories in React Storybook up to date, with any prop changes and additions addressed. - not needed, see 850 issue comments
- [-] Compare performance of modified components against develop using Performance addon in React Storybook. - not needed, see 850 issue comments
Accessibility
- [x] Accessibility Insights FastPass performed.
- [ ] A11y unit test added and yields no issues.
- [-] A11y plug-in on Storybook yields no issues. - not including Storybook
- [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.
- [ ] Controlled and uncontrolled input components tested.
- [ ] Props/slots can be updated after initial render.
Raising this PR ahead of time while I work on some component tests to get opinions/check I haven't missed anything large
I can review this later if wanted. A couple of places we can improve logic.
I can review this later if wanted. A couple of places we can improve logic.
Please do, I'm having an interesting time getting cypress set up for the angular side, and when I was about to push up the quick fixes to add the scope and remove the general linting from the angular package (as per the react one) I now have some important vulnerabilities being flagged by the commit processor!