[Callout] website docs: component

[laurenmrice]

Acceptance criteria

Add callout as a variant to the Notification component. Highlighted in the list below and the place you will need to add content for static notification.

Some additional tasks have been added to improve the notification usage docs in general. This will help with understanding these component variants and better align with our content template. If you see other places to enhance the understanding of these docs and still align to our content template then feel free to add them in.

Related PR for this effort #15532

Deliverables

• Content draft: Write a first draft of the content required below. It can be written either in boxnote first or Figma (Jeannie has kindly made an editable version of the docs here.) This draft is mostly focused on the written content. Images are not required yet. Once you have a first draft, please share it with the team in slack for review.
• Draft with images: Once you have edit to your written copy ready mock the page up in Figma (if you haven't done so yet). This draft should include images. Share with the team in a meeting when ready for a review.
• Pull request: Open a PR to submit the content for a final review before publishing.

---

Usage tab

Overview section

• Add a paragraph under overview introducing notifications. You can reference the notification pattern for content if needed. You can also rewrite the When to use section if needed.
• Add Callout to the variants table

Formatting section

### Anatomy

• Add Callout to the existing image. Place below inline so its easy to compare
• Add any annotations needed to the anatomy list. For example, define that close does not apply to callout.

### Status

• Create new H3section for notification status. Migrate the content from the notification pattern notification status section. It will live in both places. Content can be edited if need but should be the same on both pages.

Callout section

This is a new section and where the bulk of the documentation work will be. Determine where to add the static variant amongst the other 3 variant sections (Inline, Toast, Actionable)

## Callout

• Write an introduction section that explains what a static notification is and how its different than the other components (focus especially on explaining how it is different than inline). Include examples for when to use this variant and how it addresses the use case / solves a problem for the user.

### Callout formatting

• Create a image with micro layouts showing where Callout commonly goes, refer to inline for an example.

#### Sizing

• List out any component sizes that are available and provide some guidance about how to choose the best size for the use case. Other topics that may be covered here include considerations around maximum heights, maximum widths, and responsive resizing.

#### Placement

• Discuss placement of the component in a broader context, that is: alongside other components, within the grid, etc.

### Behaviors

• Add any additional behaviors or features of static notification here. The other component types have Dismissal here, is a relevant topic here as well. You can change the heading title to be more relevant to the content if needed.

Style tab

Structure section

• Add a H3 sections for Callout. Copy the inline notification and modify it to callout specifications

Accessibility tab

Out of scope. This tab has not been updated to the new accessibility template yet. We will make a separate issue for this work.

[laurenmrice]

Past design/dev Q&A on this topic

Variants

• It is possible to treat this as its own variant.

Close icon

• There will never be a close icon included in this.

Placement

• This can be used as a banner for a more global level of a page, or can be inline with other sections on a page.
• This does not relate to toasts and can not be a toast.

Experimental status

• The plan is to move this to stable once it is revised in experimental.

[benjamin-kurien]

PR for notification usage & style document to include guidance for Callout has been pushed. Changes required to be made on the notification pattern page has been moved to a different issue as discussed.

[benjamin-kurien]

Re-opening the issue as the PR is in review and not merged.