feat: Alerts refactor - create new Alert component for admin/FormBuilder

[dsamojlenko]

Summary | Résumé

Create a new Alert component for use on the Admin/FormBuilder side of the app. To replace the current globals/Alert.tsx and globals/Attention/Attention.tsx components.

Includes extensive set of Cypress Component tests that serve as a good reference for how to use the Alert component.

Intention is to streamline all Admin/FormBuilder Alerts to line up with the figma designs and create a flexible and customizable component that can be used for each of the different alert styles unique to the Admin/FormBuilder section.

Usage

Simple Alert - includes default icon (see tests)

<Alert.Success title="This is a title" body="This is a body" />
<Alert.Warning title="This is a title" body="This is a body" />
<Alert.Info title="This is a title" body="This is a body" />
<Alert.Danger title="This is a title" body="This is a body" />

Custom icon

<Alert.Success
    title="This is a title"
    body="This is a body"
    icon={<CircleCheckIcon className="mr-1 h-12 w-12" />}
/>

No icon

<Alert.Warning title="This is a title" body="This is a body" icon={false} />

Dismissible - includes onDismiss action that removes the alert

<Alert.Success dismissible title="This is a title" body="This is a body" />

Dismissible - custom onDismiss action

<Alert.Success
    dismissible
    onDismiss={onDismissHandler}
    title="This is a title"
    body="This is a body"
/>

Focussable

<Alert.Success focussable title="This is a title" body="This is a body" />

Complex alerts

Alerts are highly customizable by providing children components for Icon, Title, and Body

<Alert.Warning title="This is a title" body="This is a body">
    <Alert.IconWrapper>
        <CircleCheckIcon />
    </Alert.IconWrapper>
    <Alert.Title>Test Title</Alert.Title>
    <Alert.Body>Test body</Alert.Body>
</Alert.Warning>

Each of these inner components can accept custom class overrides, and you can specify a heading level on the Title

<Alert.Success className="mt-8>
    <Alert.Title headingTag="h4" className="pb-4 text-xl">
        Test Title
    </Alert.Title>
    <Alert.Body className="p-4">Test body</Alert.Body>
</Alert.Success>

The body of the Alert can just be any arbitrary elements, but not plain text

<Alert.Success title="This is an Alert">
    <p>With a paragraph</p>
    <ul>
        <li>And a list</li>
        <li>Another list item</li>
    </ul>
    <>Here is some text wrapped in a fragment</>
    <p>
        This paragraph <a href="/nowhere">contains a link</a>.
    </p>
    <Button className="mt-8">And a button</Button>

    This text will not render
</Alert.Success>

Design

https://www.figma.com/file/93udAjdrHbzOOCxaC5lqN1/GC-Forms-component-library?type=design&node-id=19-640&mode=design&t=pC0kVSSf7AG1PKqi-0

cn()

Includes a new cn util function for resolving Tailwindcss priority/conflicts. When passing in custom classes to the various components, instead of just appending them to the end of existing classes, this utility will merge them and ensure classes added later will take precedence.

TODO

This PR just includes the new component and related code. Future PRs will implement this Alert component everywhere that components/Alert.tsx and components/Attention/Attention.tsx are currently being used.

[github-actions]

🧪 Review environment

https://54bx26jaqkqdabbahefgbjjqkm0wsypr.lambda-url.ca-central-1.on.aws/

[timarney]

Nice work @dsamojlenko

Let's get this merged and than implement a first one here as per the design in the security questions branch.

https://www.figma.com/file/89fRce4gmy64UIArSZoAM8/v3.-GC-Forms-(builder-and-vault)?type=design&node-id=1783-78150&mode=design&t=kypKK3BIN3a4xKfw-0