ready-for-development-design-checklist.md

Ready for development checklist:

Once design mocks include these cases and scenarios, the Development team will be ready to start writing a ticket and working on the code for it:

• UI States: The mock should include what the various UI states look like, including:
• Active
• Complete
• Incomplete (ex. Validating data)
• Blank/Empty data state (ex. No credit cards found)
• Disabled
• State when input has multiple lines of input (ex. Address book with a long address)
• Hover states: All hoverable, selectable, focusable elements (links, fields) should have a design for how that works, in each state:
• Hovered on Disabled state
• Hovered on Active state
• Hovered on Incomplete state
• Hovered on Blank state
• Other states should include considerations for:
• On hover: Mouse cursor type (pointer, disabled, etc. - all listed here.)
• On focus: Visual focus style (example here)
• Mobile design
• Touchscreen design

For Component Library components

• What styles should be editable, and what shouldn't be editable
• What alternate visual states a component can have (ex. A Selectable List can be left-aligned or not)

Success state