[6.x] Alert component

[JayGeorge]

Description of the Problem

Currently, there's no alert component

What this PR Does

• Adds an alert component
• The alert component can be inline or a more detailed message
• There are 4 variations
  • Default
  • Success
  • Error
  • Warning
• Each variation defaults to a default icon but the user can also set a custom icon
• The alert can also be used with heading/description components. This is documented and demo'd.

How to Reproduce

1. It's easiest to check out cp/playground, where you'll find various alert demos, shown in the screenshot above.
2. Alternatively, you can check out the commit Dashboard demo and go to cp/dashboard to see the component in situ.

[jasonvarga]

I added a heading prop. I thought that would be pretty useful so you dont need to start importing Heading and Description components manually.

I also made it so when you use the text prop, it'll put it into a Description component for consistency.

However I noticed it ends up with slightly different colors than when using just the span. Check it out. Here I've got both a Description and then the span just to illustrate it:

<Description :text="text" />
+<span v-html="text" />

Also, it messes with the padding/spacing:

<Alert text="This is a default alert message" />
<Alert><Description>This is a default alert message</Description></Alert>

[JayGeorge]

I added a heading prop. I thought that would be pretty useful so you dont need to start importing Heading and Description components manually.

Good idea!

However I noticed it ends up with slightly different colors than when using just the span.

Fixed :)

Also, it messes with the padding/spacing:

<Alert text="This is a default alert message" />
<Alert><Description>This is a default alert message</Description></Alert>

I can't see this. Did you hard refresh the page after changing things? This is one of those instances where Vite doesn't seem to inject the changes unless you refresh