Mobile sidenav item #216
Description
Design
- Component is designed using best practices:
- Relies on TEDI variables (spacing, padding, colors, sizes etc) and styles (shadows, typography)
- Create semantic variables if needed
- Different variants are created according to the needs
- Has dark theme
- Has passed WCAG AA test in Figma
- Is tested by another designer - design review: short texts, long texts, property naming etc - usability of the component for designers
- Is responsive or adaptive, is tested on small and large device - if needed mobile version is created
- Is technically up to date according to new Figma features
- Relies on TEDI variables (spacing, padding, colors, sizes etc) and styles (shadows, typography)
- Component has following statuses:
- Status badges if its design, React component or/and Angular component is ready - on top of the frame: ✓ Figma, ✓ React, ✓ Angular
- Informative badges (frame header):
- If it's detachable (optional) - meaning you can detach the component and adjust it using variables
- If it's tested against WCAG AA level
- If it's documented
- Ready for dev (built in Figma status) - if it's not yet developed in both React and Angular
- Variant level status properties ("//Angular dev: done/not done" and "//React dev: done/not done") - statuses are removed after the component variant is developed in both
- Component has a Documentation section - includes links to Storybook (React and/or Angular) and Zeroheight
- Component has a Tips and Tricks section - instruction section which includes extra notes if there's something design specific other designers should know
- Component is published:
- In Figma file - library publish for the TEDI-Ready Figma file, add correct notes what was changed
- Figma version nr is updated - Figma version update according to the rules
- Figma version is saved manually to file history - Add version and notes what changed
- Figma version is published to the Figma community - Change version number manually, it does not change automatically
- Close design task in Github
- Create dev tasks about the component to Github kanban board (both React and Angular)
- Add changes to release notes draft in Zeroheight - release notes is published once a month
- Clean component from comments (optional)
- Add component specific release notes time and notes to the footer of the frame in Figma
- Update statuses page in Zeroheight