Separate focus and hover states in forms documentation

[nataliafitzgerald]

As part of our forms updates, we plan to separate out the focus and hover states. Separating these out gives us the flexibility to define each uniquely in terms of style, like what we've done for the links states. In this PR I've gone ahead and revised the content so that hover and focus are separate.

Please note: CSS has not yet been updated for the states so what you see here in the images is not correct but is in the process of being corrected. The goal of this PR is to update the documentation text.

Additions

• Focus states
  • Text input field
  • Checkbox
  • Radio button
  • Large target checkbox and radio buttons
  • Dropdown

Removals

-

Changes

-

Testing

-

Review

• @user

Preview this PR without the whitespace changes

Screenshots

Notes

-

Todos

-

Checklist

• [ ] Changes are limited to a single goal (no scope creep)
• [ ] Code can be automatically merged (no conflicts)
• [ ] Code follows the standards laid out in the front end playbook
• [ ] Passes all existing automated tests
• [ ] New functions include new tests
• [ ] New functions are documented (with a description, list of inputs, and expected output)
• [ ] Placeholder code is flagged
• [ ] Visually tested in supported browsers and devices
• [ ] Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)