Adding design documentation to the Notice readme

[davewhitley]

Initial commit to update Notice readme. These changes add design documentation.

Description

This PR adds design guideline documentation in addition to the development documentation that existed previously. These guidelines are 'best practices' for the usage of the component, as well as describing the component in more detail.

Screenshots

A preview can be seen here, although it doesn't represent what it will look like in the handbook:

preview

Feedback

I'd appreciate feedback on:

• Whether my markdown syntax is correct
• Design guidelines
• Double-checking a11y of the document
• Seeing if the design guidelines align with the development documentation

Thank you!

cc @sarahmonster

[michelleweber]

Hi! Do you want an editorial once-over as well, or are you just looking for feedback on the 4 points in your post?

[davewhitley]

@michelleweber Just a once over, thank you!

[michelleweber]

Some slight text smoothing/active-voicing. There's also a bit of inconsistency in capitalization of Notice; I adjusted to capitalize all uses.

---

Use Notices to communicate prominent messages to the user.

A Notice displays a succinct message. It can also offers the user options, like viewing a published post or updating a setting, and requires a user action to be dismissed.

Use Notices to communicate things that are important but don’t necessarily require action — a user can keep using the product even if they don’t choose to act on a Notice. They are less interruptive than a Modal.

Notices display at the top of the screen, below any toolbars anchored to the top of the page. They’re persistent and non-modal. Since they don’t overlay the content, users can ignore or dismiss them, and choose when to interact with them.

Do use a Notice when you want to communicate a message of medium importance.

Don't use a Notice for a message that requires immediate attention and action from the user. Use a Modal for this instead.

Do display Notices at the top of the screen, below any toolbars.

Don't show Notices on top of toolbars.

Do use color to indicate the type of message being communicated.

Don't apply any colors other than those for Warnings, Success, or Errors.

[kjellr]

Looks great! Thanks