feat: add Callout component

[huyenltnguyen]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)

This PR adds Callout component to the library (mentioned in #132).

This Callout component allows us to use visual cue to draw users attention to important information, while not disrupting screen reader users workflow.

Notes on the implementation:

• This Callout component is visually identical to Alert, but it doesn't have a role attribute
• I'm keeping Callout and Alert as separate components, even though their implementation is almost the same.
  • The similarity in the component display is because we've never had them separated, but that could change now that we start thinking of the two as standalone components. So the split allows us to update the component API more easily in the future (say we could Callout could have a different set of variant, or it could have a title and/or an icon).
  • Part of the rationale is I also want to avoid the situation we have with Button (#211). WET code is better sometimes.

Screenshot

[ahmaxed]

These could use a description. ex. it('check something', ()=>

[huyenltnguyen]

So we have two types of test in here:

• Component functionality tests, which are in the describe / it blocks and run with Jest
• Type tests, which are to ensure non-allowed props aren't passed in. The tests are run by TypeScript compiler (technically TypeScript doesn't run any special tests, it does throw typecheck errors if we pass in the prohibited props, but // @ts-expect-error helps suppress the errors)

We can put these tests inside an it block, but it's a little weird as the type tests aren't related / powered by Jest. Also, we can't write an assertion (in this case, I guess expect(...).toThrow()) for the it blocks because Jest doesn't know about the TS errors.

I added a comment next to each @ts-expect-error, hopefully that makes the purpose of each type test a little more clear?

[ahmaxed]

Looking great. The component could use a one pixel border with the same color as the font.
Next step would be flipping the colors for light/dark, so they would get similar amount of contrast comparing to the surrounding elements on the layout.

[huyenltnguyen]

I played a bit with the color switching, and I'm not really happy with the result :/

On dark theme, I think the current combination works better than flipping them:

text green70 + bg green05	text green05 + bg green70

[ahmaxed]

You are right. Perhaps we could try a color with a low alpha value and see it looks.