From a49e734bc5523969186ac54e7e46ad55534b5766 Mon Sep 17 00:00:00 2001
From: ryan-hunt-priceline
 <62948290+ryan-hunt-priceline@users.noreply.github.com>
Date: Thu, 8 Feb 2024 10:50:14 -0500
Subject: [PATCH] ToastProvider: update to allow animations to come in from the
 top (#1450)

* ToastProvider: update to allow animations to come in from the top

* ToastProvider: update logic for using top/bottom css

* Animation: Add 2 new options SlideInTop and SlideOutTop

* ToastProvider: update unit test
---
 ...toast-provider-top-animation_2024-02-07-21-23.json | 10 ++++++++++
 packages/core/src/Animate/Animate.tsx                 | 10 ++++++++++
 .../core/src/ToastProvider/ToastProvider.spec.tsx     |  2 +-
 .../core/src/ToastProvider/ToastProvider.stories.tsx  | 11 +++++++++++
 packages/core/src/ToastProvider/ToastProvider.tsx     |  6 +++++-
 5 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 common/changes/pcln-design-system/toast-provider-top-animation_2024-02-07-21-23.json

diff --git a/common/changes/pcln-design-system/toast-provider-top-animation_2024-02-07-21-23.json b/common/changes/pcln-design-system/toast-provider-top-animation_2024-02-07-21-23.json
new file mode 100644
index 0000000000..23d561446f
--- /dev/null
+++ b/common/changes/pcln-design-system/toast-provider-top-animation_2024-02-07-21-23.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "ToastProvider: update to allow animations to come in from the top",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
\ No newline at end of file
diff --git a/packages/core/src/Animate/Animate.tsx b/packages/core/src/Animate/Animate.tsx
index c07cd79a3a..c63a9ec0c7 100644
--- a/packages/core/src/Animate/Animate.tsx
+++ b/packages/core/src/Animate/Animate.tsx
@@ -31,6 +31,8 @@ export type MotionVariant =
   | 'scaleOnTap'
   | 'slideOutLeft'
   | 'slideInLeft'
+  | 'slideInTop'
+  | 'slideOutTop'
 
 /**
  * @public
@@ -79,6 +81,14 @@ export const MotionVariants: Record<MotionVariant, HTMLMotionProps<'div'>> = {
     initial: { opacity: 0, x: '-100%' },
     animate: { opacity: 1, x: 0 },
   },
+  slideInTop: {
+    initial: { opacity: 0, y: '-100%' },
+    animate: { opacity: 1, y: 0 },
+  },
+  slideOutTop: {
+    initial: { opacity: 1, y: 0 },
+    animate: { opacity: 0, y: '-100%' },
+  },
 }
 
 /**
diff --git a/packages/core/src/ToastProvider/ToastProvider.spec.tsx b/packages/core/src/ToastProvider/ToastProvider.spec.tsx
index 4a331a43ec..53ce790f91 100644
--- a/packages/core/src/ToastProvider/ToastProvider.spec.tsx
+++ b/packages/core/src/ToastProvider/ToastProvider.spec.tsx
@@ -66,7 +66,7 @@ describe('ToastProvider', () => {
 
   it('renders a custom toast', () => {
     render(
-      <ToastProvider enterAnimation='scaleFromCenter' exitAnimation='expandDown'>
+      <ToastProvider enterAnimation='scaleFromCenter' exitAnimation='expandDown' top={20}>
         <MockToastChildren variation='fill' />
       </ToastProvider>
     )
diff --git a/packages/core/src/ToastProvider/ToastProvider.stories.tsx b/packages/core/src/ToastProvider/ToastProvider.stories.tsx
index 72018606a7..36e2c3f93b 100644
--- a/packages/core/src/ToastProvider/ToastProvider.stories.tsx
+++ b/packages/core/src/ToastProvider/ToastProvider.stories.tsx
@@ -24,3 +24,14 @@ const Template = (args) => (
 )
 
 export const _ToastProvider = Template.bind({})
+
+export const TopAnimation = (args) => (
+  <ToastProvider
+    domRootId='ToastProviderRoot'
+    top={20}
+    enterAnimation='slideInTop'
+    exitAnimation='slideOutTop'
+  >
+    <MockToastChildren variation={args.variation} />
+  </ToastProvider>
+)
diff --git a/packages/core/src/ToastProvider/ToastProvider.tsx b/packages/core/src/ToastProvider/ToastProvider.tsx
index 52ba541786..3d3cbcb3db 100644
--- a/packages/core/src/ToastProvider/ToastProvider.tsx
+++ b/packages/core/src/ToastProvider/ToastProvider.tsx
@@ -49,6 +49,8 @@ export type ToastProviderProps = {
   lifespan?: number
   maxToasts?: number
   theme: unknown
+  top?: number
+  bottom?: number
 }
 
 let id = 0
@@ -61,6 +63,8 @@ function _ToastProvider({
   lifespan,
   maxToasts = 3,
   theme,
+  bottom = 20,
+  top,
 }: ToastProviderProps) {
   const [toasts, setToasts] = useState<ToastOptions[]>([])
 
@@ -91,7 +95,7 @@ function _ToastProvider({
       {children}
       {createPortal(
         <ThemeProvider theme={theme}>
-          <ClickthroughAbsolute bottom={20} width='100%'>
+          <ClickthroughAbsolute top={top ? top : undefined} bottom={top ? undefined : bottom} width='100%'>
             <Flex justifyContent='center' width='100%'>
               <Flex flexDirection='column-reverse' justifyContent='center' minWidth='300px'>
                 {toastsToRender.map((toast) => {