[Callout] Create final design spec

[laurenmrice]

Acceptance criteria

• Create the final design spec
  • Provide interaction behaviors, accessibility considerations, color tokens, and spacing annotations in the spec
  • Here are some recent examples: Menu button, Tabs
  • Here is an old notification spec for reference (it's in Sketch but you can import it into Figma to view it.
• Provide an image of the final design spec in this issue
• Determine final name for component
• Review final spec with the team

[benjamin-kurien]

Callouts are designed to highlight to critical information on a page. They load with the page's content, and placed contextually for relevance.

• Status: Info, Warning. (Unlike notifications which are reactive in nature and provided as feedback after a task has been completed, Callout is intended to highlight critical information provided to help with a user journey. It hence does not include success and error statuses, that are present in other notifications)

• Type: Inline long & short variants (As per the current scope)

• Style: Low and high contrast (As per the current scope)

• Optional Props: Heading, Hyperlinks

• No dismiss button: Unlike notifications, callouts are non-dismissible, ensuring that the highlighted information remains visible to the user.

• No action button: Unlike notifications that are provided at the end of a journey, callouts are intended to helps users focus on their current journey, without distracting them to an alternate journey.

[benjamin-kurien]

This variant behaves differently from other notifications, hence a need to differentiate it by naming was considered. Naming the component as "Callout" was discussed and agreed with the team, as this was the commonly used name across other design systems, products and community discussions.