Add Alert Component

[ItsMeBrianD]

Description

This adds a very simple Alert component; it is available in 5 styles (default, info, success, warning, danger). There are many ways we could expand this, but it would need a little more definition.

This is based on Flowbyte's Alert Component, which provides a good starting point.

Checklist

• [x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [x] I have added a changeset

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 666bd4e909f8fb1c53a9f158233eeb25688123b7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

| Name | Type | | ------------------------- | ----- | | @evidence-dev/components | Minor | | @evidence-dev/preprocess | Patch | | @evidence-dev/evidence | Major | | evidence-test-environment | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
evidence-development-workspace	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 22, 2023 at 6:44PM (UTC)
evidence-docs	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 22, 2023 at 6:44PM (UTC)

[mcrascal]

Looking great. Would love to see:

1. Sans-serif font, as this is a bit more of a "UI" element than a piece of written content
2. A solid 1px border
3. An icon for each, doesn't need to be user configurable.

Optional, but if you really want to flex, it'd be cool to add a sticky (or a better name) prop, defaulted to false.

With sticky=true, the alert shows up as a full-width banner directly below the sticky header on the page, and scrolls with the user.

[ItsMeBrianD]

Updated image;

Going to take a look at sticky next, for now I have un-nested the styles (e.g. no longer using &). It seems that somewhere in the pipeline the postcss plugin isn't running. I can either take a look to try and get this sorted, or we can come back to this when we look at re-organizing the components package layout.

[ItsMeBrianD]

https://user-images.githubusercontent.com/10779616/226670550-88341a4e-319b-4754-a39f-c40430c85ddf.mp4

Here is a "sticky" behavior; this prevents the alert from potentially blocking content at the top of the page.

Alternatively, we can add a portal and place the sticky inside the header, which would keep it fixed at the top of the page wherever the user is without blocking content.

[mcrascal]

I like it -- I think when it's in that sticky mode, it would look better if it was full width.

I think either that would mean:

1. We transition sticky alerts from "in page" style to full width sticky when you scroll past them, or;
2. Sticky alerts start that way stacked under the header in the order they appear on the page (which I think would necessitate breaking out of the layout/ shifting down all the other content.)

Thoughts?

[ItsMeBrianD]

By full width do we mean escaping the margins and taking the entire screen?

[ItsMeBrianD]

Also; it seems that a deeper dive into why nested styles were breaking is going to be needed; the tabs component has a hover: and active: directive used in the styles which seems to be breaking the build as well.

https://github.com/evidence-dev/evidence/actions/runs/4481516803/jobs/7878329845?pr=707#step:7:268

[Winterhart]

A good test, to do: "how the changes gets propagated" to the template project.

How

(clone both repo next to reach other in a folder)

In evidence

git checkout YOUR_BRANCH
pnpm install
cp ~/<YOUR_PATH>/evidence.settings.json ./sites/example-project/
pnpm run build:dev-workspace && pnpm run postinstall

In template repo

npm install
cp -r ../evidence/packages/evidence node_modules/@evidence-dev
cp -r ../evidence/packages/components node_modules/@evidence-dev
cp -r ../evidence/packages/db-orchestrator ./node_modules/@evidence-dev
cp -r ../evidence/node_modules/@sveltejs ./node_modules
cp -r ../evidence/packages/preprocess node_modules/@evidence-dev 

npm run dev

try your new components/stuff in the template project.

[mcrascal]

Yeah red arrows is what I'm thinking width wise.

[ItsMeBrianD]

https://user-images.githubusercontent.com/10779616/226717500-ce033fdb-da76-4f7b-8a11-e788e5cbb061.mp4

This is how the sticky behavior now functions; I modified svelte-portal to accept a null target, which will move the portal'd element back to it's original place in the DOM. This means that the sticky state can be toggled on/off seamlessly.

Currently, the behavior previously shown no longer exists, as when the element is made sticky, it is moved outside the content and into the main container, but I believe this is functioning approximately as expected.

One thing that may need to be addressed in the future - this is somewhat brittle, relying on the #evidence-container element to exist in order to function properly; but going further than an id adds a lot of complexity for a relatively simple component.

[ItsMeBrianD]

Got the build fixed up 🎉

If the design looks good; this should be good to ship. Once this is merged into the tailwindcss branch I can send it off to the tab branch and fix the build there as well