Design Nunjucks API for notification banner component

[36degrees]

What

Work out what the API for the notification banner component should look like.

Where possible, it should be consistent with the APIs for our existing components.

There are a few things we need to consider:

• Do we want a single option to set the 'type' of alert? For example, setting type: 'error' which then adds the modifier class for the style and also sets the role? Or do we just set both explicitly in every example in the Design System?
• If we do have a single option to set the 'type', do we also allow users to override the role?
• Should we make it callable?

Depends on

• Making a decision about whether the notification banner is a single component.

Why

By designing and agreeing the API for the component upfront we can ensure that it behaves consistently with our other components.

[hannalaakso]

I picked this up but then saw that there's another meeting booked to firm up the final details. The below is where I got to in case it's helpful when this is picked up:

Different options for Nunjucks API

1. Require team to set attributes/styles etc. manually

This is more flexible but increases the risk of team making a mistake by missing an attribute etc. However it also means that they would hopefully spend some time trying to understand what attributes etc. are most appropriate for their use case.

{{ govukNotification({
  style: "red/green/blue", //could also be "error/success/information"
  role: "region/alert",
  tabindex: "-1",
  initialfocus: true/false,
  
  titleText: "",
  titleHtml: "",
  headingLevel: "", // or this could be handled by titleHtml	
  text: "",
  html: "",
  classes: "", // we could also remove the above 'style' attribute and require team to set class directly here
  attributes: {}
}) }}

2. Set all attributes/styles etc. based on one option

Macro sets appropriate role, tabindex, initialFocus based on type.

{{ govukNotification({
  type: "red/green/blue", 
  
  titleText: "",
  titleHtml: "",
  text: "",
  html: "",
  classes: "",
  attributes: {}
}) }}

3. Set all attributes/styles etc. based on one option but allow them to be overridden

Would make it easy to use a variant but is more flexible than 2.

{{ govukNotification({
  type: "red/green/blue", 
  role: "region/alert", // to override default
  tabindex: "-1", // to override default
  initialfocus: true/false, // to override default
  
  titleText: "",
  titleHtml: "",
  text: "",
  html: "",
  classes: "",
  attributes: {}
}) }}

[vanitabarrett]

Discussed in a meeting, I think we settled on Option 3 as the preferred option. It might need some tweaking if we change the design of the banner to this: