feat: add toast notification provider (#1199)

Author: anusha-c18

src/components/NotificationProvider/NotificationProvider.tsx

@@ -14,7 +14,8 @@ import {
   NotifyProviderProps,
 } from "./types";
 import { info, failure, success, queue } from "./messageBuilder";
-import Notification, { DefaultTitles } from "../Notification/Notification";
+import Notification from "../Notifications";
+import { DefaultTitles } from "../Notifications/Notification/Notification";
 
 const NotifyContext = createContext<NotificationHelper>({
   notification: null,

src/components/NotificationProvider/messageBuilder.tsx

@@ -4,7 +4,7 @@ import {
   QueuedNotification,
 } from "./types";
 import React, { ReactNode } from "react";
-import { NotificationSeverity } from "../Notification";
+import { NotificationSeverity } from "../Notifications";
 
 export const queue = (notification: NotificationType): QueuedNotification => {
   return { state: { queuedNotification: notification } };

src/components/NotificationProvider/types.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { ValueOf } from "types";
-import { NotificationSeverity } from "../Notification";
+import { NotificationSeverity } from "../Notifications";
 
 export interface NotifyProviderProps {
   state?: {

src/components/Notification/Notification.stories.tsx renamed to src/components/Notifications/Notification/Notification.stories.tsx

@@ -2,8 +2,8 @@ import classNames from "classnames";
 import React, { ElementType, useEffect, useRef } from "react";
 import type { HTMLProps, ReactNode } from "react";
 
-import Button, { ButtonAppearance } from "../Button";
-import { IS_DEV, isReactNode } from "../../utils";
+import Button, { ButtonAppearance } from "../../Button";
+import { IS_DEV, isReactNode } from "../../../utils";
 
 import type { ClassName, PropsWithSpread, ValueOf } from "types";
 

src/components/Notification/Notification.test.tsx renamed to src/components/Notifications/Notification/Notification.test.tsx

@@ -0,0 +1,63 @@
+import type { FC, PropsWithChildren } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import React from "react";
+import { usePrefersReducedMotion } from "../../../hooks";
+
+interface Props {
+  show: boolean;
+  from: Keyframe;
+  to: Keyframe;
+  exitAnimation?: Keyframe[];
+  options?: KeyframeAnimationOptions;
+  className?: string;
+}
+
+const Animate: FC<PropsWithChildren<Props>> = ({
+  show,
+  children,
+  from,
+  to,
+  exitAnimation,
+  options = { duration: 500, fill: "forwards" },
+  className,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const preferReducedMotion = usePrefersReducedMotion();
+
+  // This state is used so that we trigger a extra render cycle
+  // to animate the child component when it is being unmounted
+  const [removeState, setRemove] = useState(!show);
+
+  useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (show) {
+      setRemove(false);
+      if (!element || preferReducedMotion) return;
+      element.animate([from, to], options);
+    } else {
+      if (!element) return;
+      if (preferReducedMotion) {
+        setRemove(true);
+        return;
+      }
+      const animation = element.animate(exitAnimation || [to, from], options);
+      animation.onfinish = () => {
+        setRemove(true);
+        // This is important, else the next render cycle due to setRemove will cause flickering effect
+        element.style.display = "none";
+      };
+    }
+  }, [show, removeState]);
+
+  if (removeState) {
+    return null;
+  }
+
+  return (
+    <div ref={containerRef} className={className}>
+      {children}
+    </div>
+  );
+};
+
+export default Animate;

src/components/Notification/Notification.tsx renamed to src/components/Notifications/Notification/Notification.tsx

@@ -0,0 +1,116 @@
+@import "vanilla-framework/scss/settings";
+@import "vanilla-framework/scss/build";
+
+.toast-animate {
+  position: relative;
+  z-index: 101;
+}
+
+.toast-notification,
+.toast-notification-list {
+  bottom: 3.5rem;
+  margin: 0 1.5rem;
+  position: absolute;
+  right: 0;
+
+  @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
+    width: 500px;
+  }
+
+  @media screen and (min-width: $breakpoint-large) {
+    width: 600px;
+  }
+}
+
+.toast-notification {
+  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 15%);
+  overflow: hidden;
+  z-index: 101;
+
+  @media screen and (max-width: $breakpoint-small) {
+    left: 0;
+    margin: 1.5rem auto;
+    max-width: 400px;
+    width: 95vw;
+  }
+}
+
+.toast-notification-list {
+  background-color: white;
+  box-shadow: 0 0 calc($sp-unit * 4) $sp-unit rgb(0 0 0 / 22%);
+  max-height: calc(100vh - 4.5rem);
+  overflow: auto;
+  padding: 0 0.5rem;
+  z-index: 102;
+
+  .individual-notification {
+    margin: 0.5rem 0;
+    overflow: hidden;
+  }
+
+  .dismiss {
+    align-items: center;
+    background-color: white;
+    bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    padding-left: 0.8rem;
+    position: sticky;
+    z-index: 10;
+
+    .dismiss-button {
+      align-items: center;
+      display: flex;
+
+      .dismiss-text {
+        align-items: center;
+        display: flex;
+        gap: $sph--x-small;
+      }
+    }
+
+    .filters {
+      display: flex;
+
+      .filter-button {
+        align-items: center;
+        border: none;
+        display: flex;
+        gap: $sph--x-small;
+        justify-content: center;
+        margin-right: $sph--small !important;
+        padding: calc(0.4rem - 1px);
+
+        /* stylelint-disable max-nesting-depth */
+        /* stylelint-disable-next-line selector-max-type */
+        span {
+          padding: 0;
+          text-align: center;
+        }
+
+        /* stylelint-disable-next-line selector-class-pattern */
+        .p-icon--info--notification {
+          @extend %icon;
+          @include vf-icon-info-coloured-themed;
+        }
+        /* stylelint-enable max-nesting-depth */
+      }
+    }
+
+    @media screen and (max-width: $breakpoint-small) {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  @media screen and (max-width: $breakpoint-small) {
+    bottom: 2rem;
+    left: 0;
+    margin: 1.5rem auto;
+    max-width: 400px;
+    width: 95vw;
+  }
+}