Ship useNotification hook

We offer a variety of notification styles but unfortunately leave much of the animation and logic around display notifications to the end-user. We would like to codify this behavior/logic into a single hook, useNotification, that would encapsulate this behavior and make it easier for product teams to display/render notifications in their UI. This may look like:

function MyComponent() {
  const send = useNotification();

  function sendNotification() {
    send({ title: 'This is the notification title' });
  }

  return <button type="button" onClick={sendNotification}>Send test notification</button>;
}

Packages impacted

• @carbon/react

[johnbister]

Here’s a rough pass on how multiple inline notifications could stack and be dismissed. I kept it simple for now to make sure we like the overall mechanics.

@mjabbink @jeanservaas @tay1orjones Let me know if you have any feedback I should take into the next pass. Thanks!

https://user-images.githubusercontent.com/70543333/120850559-752c4300-c52c-11eb-9606-de8e26c54cbf.mp4

[mjabbink]

@johnbister

I like the updates you’ve done. I think the fade gradient can work and wonder what @jeanservaas thinks on the details of the gradient?

I like the addition of a taller notification in the stack to see what that looks like

I also think timeout bar is cool.