[FEATURE] Notifications component

[francescozaia]

Replicate the Notifications (Notifiche in italian) as shown on the Bootstrap Italia Notifications component documentation. CSS and DOM has to be maintained, JS code has to be rewritten without jQuery to be used on a React-based project.

A working example of the outcome (as built with Bootstrap Italia) can be seen here: https://italia.github.io/bootstrap-italia/docs/esempi/notifications/

[visv-one]

I will do this.

[dej611]

For who's woring on this I made a simple component here: https://github.com/italia/design-react-kit/pull/378/files#diff-3d4a7f78e151c4d0405fc0d7a11b7186

What's missing:

• Animation behaviour (fade-in, 7 seconds, fade-out). The display time should be tweakable
  • See the jQuery version of it: https://github.com/italia/bootstrap-italia/blob/2b7f6ef32e047dcda00f9cb9298616cb37ca6845/src/js/plugins/notifications.js
  • no jQuery allowed here. Behaviour classes can be used.
• Different favours (colors, positions, etc...)
• propTypes and defaultProps

[visv-one]

Okay @dej611, will check it out.

[ankushbhardwxj]

@dej611 I saw that this issue wasn't solved in #416 , so I'd like to work on it 👍

[dej611]

Sure. 👍 This is a non-trivial piece of component logic, therefore I'd probably suggest some third party library to use. Please, before starting of with the implementation report here some good third party library proposals.

[ankushbhardwxj]

@dej611 We can look into the following 3rd party libraries for this component:

• REPO: https://github.com/jossmac/react-toast-notifications DEMO : https://jossmac.github.io/react-toast-notifications/
• REPO: https://github.com/fkhadra/react-toastify DEMO: https://fkhadra.github.io/react-toastify/

[ankushbhardwxj]

@dej611 ping !

[ankushbhardwxj]

Please acknowledge the above suggestions and let me know if I should proceed.

[dej611]

Let's try with the first, react-toast-notifications 👍

[ankushbhardwxj]

@dej611 I was trying to implement react-toast-notifications. The package is broken. The repo owner had given the link to use react-toastify in his README itself. Seems that you and me both missed it. I'm proceeding with react-toastify

[ankushbhardwxj]

Also, I noticed that the CSS for the div with className notification has a property display:none due to which its hidden. Why's the styling inconsistent ? Do we require custom styling for this component?

[dej611]

I suspect because that is managed via jQuery. Maybe @francescozaia has some insights here

[ankushbhardwxj]

.notification{
width:100%;
padding:1.5rem 4rem 1.5rem 1.5rem;
-webkit-box-shadow:0 -.5rem 1rem rgba(0,0,0,.15);
box-shadow:0 -.5rem 1rem rgba(0,0,0,.15);
background:#fff;
position:fixed;
bottom:0;
right:0;
display:none;
border-top:4px solid #5c6f82
}

This is the CSS of div notification, Here bottom:0, right:0 also causes inconsistency for the component in Storybook

[dej611]

For the moment handle the CSS internally in the component (yes, style={...}). Once we have the PR, we can refine this aspect of it.