Create Alert and/or Notification component(s)

[lulen11]

This component could be the same thing.. .though could be diff. Need to define more. @charliemckenzie to keep in mind we are using Toast library for reference

[mischacolley]

Related with #1

I think we should use https://fkhadra.github.io/react-toastify/ like we are on Portal and standardise a component across both that can be used for:

• info
• success
• warning
• error

@charliemckenzie I believe you started designs for these in Figma?

[rin]

@charliemckenzie let's talk about how this will look next week? from a dev perspective, we'd love to add notistack (see here for demos: https://iamhosseindhv.com/notistack/demos ) and then style it.

[camposcristian]

@charliemckenzie @rin how did you guys go with this? We really need it for the welcome message on the portal before the release.

[rin]

@camposcristianeze Portal already has toast, so for now we could use that if we need a notification …? The only thing was that the current notifications aren't styled?

@kbardi and I agree that we want to use notistack, but I am not sure – tried something out on the weekend, asked Kevin for help.

[charliemckenzie]

What's the go with this? I thought @lulen11 had done a custom one for now.
I like notistack a lot - I'd like to define what kind of use cases we currently have that need them and then go from there.

[rin]

So, this is the current state:
• Portal has toast. It's okay, but it's not styled, and the default styles aren't very elegant.
• Website doesn't need notifications; for the beta thing Lara just added a little banner thing.
• Kevin suggested notistack, and we all like it, but we decided to not integrate it into Blueprint for now, because a) it depends on Material-UI, which is basically Google's UI library (which we don't want to include in Blueprint) b) we only need notifications in Portal right now, so no benefit to put it into Blueprint – the only nice thing would be to have "AIME styled" notifications, and an easy interface (every time we need notifications somewhere, we would just know that we use whatever is in Blueprint)

– @kbardi, Do you have something to add here?
@charlie I could replace toast with notistack for now, and then we could add a few custom styles. (I'm hoping that just giving it the imagination rainbow colors is enough?)

@cris Sorry, which welcome message are we talking about?

[mischacolley]

@rin @charliemckenzie this isn't time sensitive for the portal EOI releases anymore as I just settled on adding BETA next to the logo on the Portal as a signal combined with the message displayed on the dashboard.

I agree with all the points but question that the website does't need notifications? Are we sure it doesn't? Maybe it's that it really doesn't need them in this format and @charliemckenzie can design a better approach then the type of one @lulen11 has hardcoded this time. I just know that on every site for the last three years I've needed one of those "notifications" multiple times a year. Early on a built one with cookies that expired etc so it was a bit smarter then hard coding it ... essentially I think you need to consider that in the design @charliemckenzie :)

[rin]

Mischa, I hear you! But can we please differentiate between a) a "tiny one line banner that informs people / gives people a hint and is always there" ("20% off everything in our store", "We are hiring", "This website is in Beta") and b) a notification that pops up and happens in reaction to a user action (the classical "Record was created / deleted / You got mail / Your tamagotchi needs some love right NOW").

I think they are different in how they look, how they are animated (where a) should really only be subtly animated, because everything else seems kinda spammy and intrusive) etc. .