wwnorton/design-system

Callout Component

sh0ji opened this issue · 0 comments

sh0ji commented

We need a component that can be used to display dismissable messages. This is often called an "alert" in other design systems but I personally prefer the name "callout" as it feels less urgent (maybe we could have an "alert callout" that's more urgent?). Initial visual designs exist for this in Zeplin but we still need to define this component in greater detail.

I would propose a component with the following props:

  • type or variant (required) - this would be a subset of predefined callout designs.
    • We should include designs for our three state roles (error, success, warning), and anything else @btri-wwn wants.
    • Implementation tip: this would basically just set the modifier for the className (i.e., warning would result in className="callout--warning") but I don't think it should change the structure of the callout.
  • title (optional) - the title of the callout. This should not be an actual heading (h1-h6), as callouts shouldn't be part of the document order.
  • icon (optional) - an icon that is positioned before the title and content.
  • dismissable (default: false) - makes the callout dismissable by adding a close icon button.

References