From ec5679072f83fddc13d8103f381a0f7cb3b6628d Mon Sep 17 00:00:00 2001
From: John Fewell <fewell@gmail.com>
Date: Tue, 20 Feb 2024 18:08:48 -0500
Subject: [PATCH] Feature: Add animations to foldable section (#2202)

# Description

Refactored the foldable section. The design is inspired by [Material
Design's expansion
panel](https://m1.material.io/components/expansion-panels.html#). The
existing design has the chevron alternating from pointing down to
pointing right. This is misleading because there is no subordinate
information to the right. Also, this PR animates the arrow and foldable
section, creating a delightful experience.

## Checklist before requesting a review

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented hard-to-understand areas
- [x] New and existing unit tests pass locally with my changes
- [x] Any dependent changes have been merged

## Screenshots (if appropriate):

[expansion.webm](https://github.com/QuivrHQ/quivr/assets/1273463/71ef2c98-c0ed-4374-840e-0bf16bf4da55)
### Update

[expansion2.webm](https://github.com/QuivrHQ/quivr/assets/1273463/0be769d2-93b4-42e3-938d-3bc0a63e0e06)
---
 .../FoldableSection.module.scss               | 22 +++++++++++++++++++
 .../ui/FoldableSection/FoldableSection.tsx    | 21 +++++++++++++++---
 frontend/styles/_Transitions.module.scss      |  2 ++
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 frontend/styles/_Transitions.module.scss

diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
index 4badc5fc5..140335b95 100644
--- a/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
+++ b/frontend/lib/components/ui/FoldableSection/FoldableSection.module.scss
@@ -2,6 +2,7 @@
 @use "@/styles/Radius.module.scss";
 @use "@/styles/Spacings.module.scss";
 @use "@/styles/Typography.module.scss";
+@use "@/styles/Transitions.module.scss";
 
 .foldable_section_wrapper {
   display: flex;
@@ -11,6 +12,15 @@
   overflow: hidden;
   font-size: Typography.$small;
 
+  .contentWrapper {
+    overflow: hidden;
+    transition: max-height 0.3s Transitions.$easeOutBack;
+  }
+  
+  .contentCollapsed {
+    max-height: 0;
+  }
+
   &.hide_border {
     border-color: transparent;
   }
@@ -37,4 +47,16 @@
       background-color: Colors.$lightest-black;
     }
   }
+  
+  .iconRotate {
+    transition: transform 0.3s Transitions.$easeOutBack;
+  }
+
+  .iconRotateDown {
+    transform: rotate(0deg);
+  }
+
+  .iconRotateRight {
+    transform: rotate(-90deg);
+  }
 }
diff --git a/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx b/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
index c410e24c2..fdf62ab24 100644
--- a/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
+++ b/frontend/lib/components/ui/FoldableSection/FoldableSection.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { iconList } from "@/lib/helpers/iconList";
 
@@ -16,11 +16,16 @@ interface FoldableSectionProps {
 
 export const FoldableSection = (props: FoldableSectionProps): JSX.Element => {
   const [folded, setFolded] = useState<boolean>(false);
+  const contentRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setFolded(props.foldedByDefault ?? false);
   }, [props.foldedByDefault]);
 
+  const getContentHeight = (): string => {
+    return folded ? "0" : `${contentRef.current?.scrollHeight}px`;
+  };
+
   return (
     <div
       className={`
@@ -35,12 +40,22 @@ export const FoldableSection = (props: FoldableSectionProps): JSX.Element => {
           <p className={styles.header_title}>{props.label}</p>
         </div>
         <Icon
-          name={folded ? "chevronDown" : "chevronRight"}
+          name="chevronDown"
           size="normal"
           color="black"
+          classname={`${styles.iconRotate} ${
+            folded ? styles.iconRotateDown : styles.iconRotateRight
+          }`}
         />
       </div>
-      <div style={{ height: folded ? "0" : "auto" }}>{props.children}</div>
+      <div
+        ref={contentRef}
+        className={`${styles.contentWrapper} ${
+          folded ? styles.contentCollapsed : styles.contentExpanded
+        }`}
+        style={{ maxHeight: getContentHeight() }}
+        {props.children}
+      </div>
     </div>
   );
 };
diff --git a/frontend/styles/_Transitions.module.scss b/frontend/styles/_Transitions.module.scss
new file mode 100644
index 000000000..76c92eb55
--- /dev/null
+++ b/frontend/styles/_Transitions.module.scss
@@ -0,0 +1,2 @@
+// Transition animations
+$easeOutBack: cubic-bezier(0.65, 0.05, 0.36, 1);