Definition of done (Visual QA checklist)

Component visual QA should be done to cover the following aspects:

1. Check for grid usage on all breakpoints

• Beyond max
• max
• xlg
• lg
• md
• sm

2. Interactive states using correct styling

• Default
• Hover
• Active
• Focus
• Keyboard navigation
• Other non-universal states such as selected in Table of content

3. Content edge cases

• Minimal content
• Maximum content
• Line wrap
• With & without optional content

4. Storybook

• On grid
• Names of component and variation demoed is spelled correctly
• Knobs are as expected and functional
• Default example demos usage intent

5. Themeing

• White theme
• Gray 10 theme
• Gray 90 theme
• Gray 100 theme