4.x - add alerts and new alert variants

[bspeare]

The current alerts only have one design option: https://uids.brand.uiowa.edu/components/detail/alert.html. In the 4.x branch, it would be ideal to have an alert/message component that has left and center variants that can be more flexible for use as:

• Alert banners for displaying a prominent message at the top of the screen.
• A section message is used to alert users to a particular section of the screen.
• Inline message to let users know when important information is available or when an action is required.

Proposed solution

Move over the current alerts component from UIDS 3.x and create new variants/stories for the uses listed below.

• Hawk alert left aligned, center aligned.
• Inline alert, outlined, left aligned, center aligned.
  • Use Font Awesome stacking styles for icon:

<span class="fa-stack fa-1x"><span class="fas fa-circle fa-stack-2x"></span><span class="fa-link fas fa-stack-1x fa-inverse"></span></span>

Hawk Alert

Left aligned:

Centered: TBD

Section message

Left aligned:

Centered: TBD

Inline message

Left aligned:

Centered: TBD

[bspeare]

The proposed solution on this suggests that we replace the alerts component from 3.x with the 4.x card component w/ specific alert stories.

[cory-skeers]

Grooming convo: limiting this slice to uids specifically, and will need a follow-up issue in uiowa/uiowa for implementing in uids_base.

[pyrello]

I disagree with the idea of using the card component for alerts. Here is why:

• We do not want alerts to inherit most of the features of card variations.
• Alerts need minimal options - basically just type of alert. Icon should probably not be a configurable option, but instead be based on alert type.
• Card HTML markup is designed to accommodate a lot of variety that we don't need for alerts. Alerts markup can likely be much more straightforward.
• Making alerts a subset of cards means that we have to consider alerts as an added compatibility layer when adding/changing features of the card, which is already a daunting process.

[pyrello]

I want to update and elaborate on my thinking in https://github.com/uiowa/uids/issues/770#issuecomment-1677800316:

I still think that adding card-like complexity to the the alerts to achieve a more card-like experience is not desirable. On the other hand, I'm coming around to the idea of being able to have cards that have a similar color-coded option along with the ability to fill an icon could be useful.