feature(alert): Alert Component

[therealsharath]

Description

Closes https://github.com/GTBitsOfGood/bog-component-library/issues/43

Adds the alert component

Type of change

🆕 Feature

Checklist

• [ ] Code follows design and style guidelines
• [ ] Code is commented with doc blocks
• [ ] Latest code has been rebased from base branch (usually develop)
• [ ] Commits follow guidelines (concise, squashed, etc)
• [ ] Github issues have been linked in relevant commits
• [ ] Relevant reviewers (EM) have been assigned to this PR

[netlify[bot]]

✔️ Deploy Preview for bog-component-library ready!

🔨 Explore the source changes: bc2049adba6e06183982d6fc93ccdb6feb177a13

🔍 Inspect the deploy log: https://app.netlify.com/sites/bog-component-library/deploys/620e68b6059dac000795ea0b

😎 Browse the preview: https://deploy-preview-69--bog-component-library.netlify.app

[alysonlam]

Hey Marlene!

• type, iconColor, bgColor, borderColor, looks good
• size: you should be able to set the width and height of the container (px), but the default behavior for the height should be to adjust to the text content. It shouldn't be a choice between large and regular
• hasButton toggle looks good. However, it should be using the tertiary Button component so that the font is the same and, I'm assuming, the behavior would be the same.
• buttonLabel and hasHeader look good
• headerLabel should be Visby CF extra bold 12 px
• alertText should have a size of 12 px and a spacing of 16 px, it doesn't look exactly like that on my screen, but that might just be a rendering thing w the font.
• I think the spacing and padding is off. I've included what it should look like. These values should be adjustable if possible
• another parameter, cornerRadius, or something along those lines needs to be added. It should allow devs to change the radius of the corners. The default is 4 px.
• Both icons, message specific and the close x, should be 16 x 16 px. The message specific icon also needs to be replaceable.
• An icon toggle parameter also needs to be created, this wasn't on the Ready for Devs page, that's my bad.
• Along with that, we may have new colors for the default versions of the alert and toast components so I'll make sure to update those on the ready for devs page.

[alysonlam]

hey hey actually, the button should be using the button component from last semester and should be visby extra bold, not just bold, that's mb.

[whymarlene]

hey hey actually, the button should be using the button component from last semester and should be visby extra bold, not just bold, that's mb.

I am using the button component but I guess the style font didn't transfer. I change that today.

[therealsharath]

@alysonlam does it look better now that @whymarlene made changes?

[alysonlam]

Font looks good, but the text for the button and header are still not extra-bold for me.