Updated design for Alert ribbon

[ulde01]

Design decision 2019-09-09

After a long period of testing, we have now updated the Alert ribbon component. See the full description for the details (measurements, colour codes, etc):

https://designlibrary.sebgroup.com/components/alerts/alert-ribbons/#guidelines

Changes in short

• New colours - make sure you use the correct colour codes (see the Styles tab in the link above)
• We are no longer using purple as a colour. Use grey instead.
• New alert state - "Success" (green)
• Updated state names. Decide for yourself if you want to sync the names:
  -- "Information" (grey, used to be "Whisper")
  -- "Success" (green, new state)
  -- "Warning" (yellow, used to be "Talk")
  -- "Critical" (red, used to be "Shout")
• New icons - find the icon names in the Styles tab (link above). Use FontAwesome "Solid" (which is an exception from all other icons that are "Regular").
• Updated measurements - see the Styles tab in the link above
• Added recommendation for using grey alert on grey background

Reasons

Feedback from user tests and usage from several channels, saying that purple was too loud. We also learned that the description in Design Library generally was too confusing. And we hade a design synk between Bootstrap and Design Library which generated sensible updates for both.

Let me know if anything is unclear. Thank you!
Ulrika,
Design Management

[ulde01]

Hi, what is the status on this? Thank you!

[yousifalraheem]

@ulde01 We are not going to develop this component since it doesn't have JavaScript logic and can easily be created using HTML only like such:

<div class="alert alert-warning">My alert content</div>

Any updates to the measurements or colors can be updated in SEB Bootstrap and it will be available to all the users