style: add animations to assistant page

AtB-AS · Oct 26, 2023 · 6fe2d45 · 6fe2d45
1 parent 4864ae0
commit 6fe2d45
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 30 deletions.
diff --git a/src/page-modules/assistant/assistant.module.css b/src/page-modules/assistant/assistant.module.css
@@ -26,7 +26,10 @@
 .input {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+}
+
+.input > :last-child {
+  margin-top: 0.375rem;
 }
 
 .button {
@@ -35,21 +38,22 @@
 
 .heading {
   color: var(--static-background-background_accent_0-text);
-  margin: 0.625rem;
+  margin-bottom: var(--spacings-medium);
 }
 
 .alternativesWrapper {
   grid-area: alternatives;
   width: 100%;
   background-color: var(--static-background-background_accent_1-background);
-  padding-bottom: 5.25rem;
+  overflow: hidden;
 }
 
 .alternatives {
   padding: var(--spacings-xLarge);
   width: 100%;
   max-width: var(--maxPageWidth);
   margin: 0 auto;
+  padding-bottom: 5.75rem;
 }
 
 .buttons {
@@ -61,9 +65,11 @@
   width: 100%;
   max-width: var(--maxPageWidth);
   margin: 0 auto;
-  padding: 0 var(--spacings-xLarge) var(--spacings-xLarge)
-    var(--spacings-xLarge);
+  padding: 0 var(--spacings-xLarge) var(--spacings-xLarge) var(--spacings-xLarge);
   z-index: 10;
+  position: absolute;
+  left: 0;
+  right: 0;
 }
 
 .searchInputButton {
@@ -88,16 +94,18 @@
 
   .main {
     grid-template-columns: 1fr;
+    padding-bottom: var(--spacings-xLarge) !important;
   }
 
   .buttons {
     grid-area: buttons;
     display: grid;
     grid-template-columns: 1fr 1fr;
+    position: relative;
   }
 
-  .alternativesWrapper {
-    padding-bottom: 0;
+  .alternatives {
+    padding-bottom: var(--spacings-xLarge);
   }
 }
 

diff --git a/src/page-modules/assistant/layout.tsx b/src/page-modules/assistant/layout.tsx
@@ -21,6 +21,7 @@ import { FocusScope } from '@react-aria/focus';
 import { featuresToFromToQuery } from './utils';
 import SwapButton from '@atb/components/search/swap-button';
 import GeolocationButton from '@atb/components/search/geolocation-button';
+import { AnimatePresence, motion } from 'framer-motion';
 
 export type AssistantLayoutProps = PropsWithChildren<{
   initialFromFeature?: GeocoderFeature;
@@ -100,7 +101,12 @@ function AssistantLayout({
   return (
     <div>
       <form className={style.container} onSubmit={onSubmitHandler}>
-        <div className={style.main}>
+        <motion.div
+          animate={{ paddingBottom: showAlternatives ? '1.5rem' : '5.75rem' }}
+          initial={{ paddingBottom: '5.75rem' }}
+          transition={{ duration: 0.25, ease: [0.04, 0.62, 0.23, 0.98] }}
+          className={style.main}
+        >
           <div className={style.input}>
             <Typo.p textType="body__primary--bold" className={style.heading}>
               {t(PageText.Assistant.search.input.label)}
@@ -143,29 +149,43 @@ function AssistantLayout({
               onChange={setDepartureDate}
             />
           </div>
-        </div>
-
-        {showAlternatives && (
-          <FocusScope contain={false} autoFocus={showAlternatives}>
-            <div className={style.alternativesWrapper}>
-              <div className={style.alternatives}>
-                <div>
-                  <Typo.p
-                    textType="body__primary--bold"
-                    className={style.heading}
-                  >
-                    {t(PageText.Assistant.search.filter.label)}
-                  </Typo.p>
-
-                  <TransportModeFilter
-                    filterState={transportModeFilter}
-                    onFilterChange={setTransportModeFilter}
-                  />
+        </motion.div>
+
+        <AnimatePresence initial={false}>
+          {showAlternatives && (
+            <FocusScope contain={false} autoFocus={showAlternatives}>
+              <motion.div
+                className={style.alternativesWrapper}
+                key="content"
+                initial="collapsed"
+                animate="open"
+                exit="collapsed"
+                variants={{
+                  open: { opacity: 1, height: 'auto' },
+                  collapsed: { opacity: 0, height: 0 },
+                }}
+                transition={{ duration: 0.25, ease: [0.04, 0.62, 0.23, 0.98] }}
+              >
+                {' '}
+                <div className={style.alternatives}>
+                  <div>
+                    <Typo.p
+                      textType="body__primary--bold"
+                      className={style.heading}
+                    >
+                      {t(PageText.Assistant.search.filter.label)}
+                    </Typo.p>
+
+                    <TransportModeFilter
+                      filterState={transportModeFilter}
+                      onFilterChange={setTransportModeFilter}
+                    />
+                  </div>
                 </div>
-              </div>
-            </div>
-          </FocusScope>
-        )}
+              </motion.div>
+            </FocusScope>
+          )}
+        </AnimatePresence>
 
         <div className={style.buttons}>
           <Button