feat: add conditional signup values

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -20,54 +20,30 @@ export default function SectionAccordion({
   children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
-  const [isComplete, setIsComplete] = useState(false)
   const currentStep = useEnterDetailsStore((state) => state.currentStep)
+  const [isComplete, setIsComplete] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
+
   const isValid = useEnterDetailsStore((state) => state.isValid[step])
-
   const navigate = useEnterDetailsStore((state) => state.navigate)
 
-  const contentRef = useRef<HTMLDivElement>(null)
-  const circleRef = useRef<HTMLDivElement>(null)
-
-  const isOpen = currentStep === step
-
-  useEffect(() => {
-    const content = contentRef.current
-    const circle = circleRef.current
-    if (content) {
-      if (isOpen) {
-        content.style.maxHeight = `${content.scrollHeight}px`
-      } else {
-        content.style.maxHeight = "0"
-      }
-    }
-
-    if (circle) {
-      if (isOpen) {
-        circle.style.backgroundColor = `var(--UI-Text-Placeholder);`
-      } else {
-        circle.style.backgroundColor = `var(--Base-Surface-Subtle-Hover);`
-      }
-    }
-  }, [isOpen])
-
   useEffect(() => {
     // We need to set the state on mount because of hydration errors
     setIsComplete(isValid)
   }, [isValid])
 
+  useEffect(() => {
+    setIsOpen(currentStep === step)
+  }, [currentStep, step])
+
   function onModify() {
     navigate(step)
   }
 
   return (
-    <section className={styles.wrapper} data-open={isOpen}>
+    <section className={styles.wrapper} data-open={isOpen} data-step={step}>
       <div className={styles.iconWrapper}>
-        <div
-          className={styles.circle}
-          data-checked={isComplete}
-          ref={circleRef}
-        >
+        <div className={styles.circle} data-checked={isComplete}>
           {isComplete ? (
             <CheckIcon color="white" height="16" width="16" />
           ) : null}
@@ -79,6 +55,7 @@ export default function SectionAccordion({
             <Footnote
               asChild
               textTransform="uppercase"
+              type="label"
               color="uiTextPlaceholder"
             >
               <h2>{header}</h2>
@@ -105,9 +82,7 @@ export default function SectionAccordion({
             </Button>
           )}
         </header>
-        <div className={styles.content} ref={contentRef}>
-          {children}
-        </div>
+        <div className={styles.content}>{children}</div>
       </div>
     </section>
   )

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -22,12 +22,14 @@
 }
 
 .main {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--Spacing-x3);
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-bottom: var(--Spacing-x3);
+
+  transition: 0.4s ease-out;
+  grid-template-rows: 2em 0fr;
 }
 
 .headerContainer {
@@ -70,12 +72,23 @@
   background-color: var(--Base-Surface-Subtle-Hover);
 }
 
+.wrapper[data-open="true"] .main {
+  grid-template-rows: 2em 1fr;
+}
+
 .content {
   overflow: hidden;
-  transition: max-height 0.4s ease-out;
-  max-height: 0;
+}
+
+@keyframes allowOverflow {
+  0% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: visible;
+  }
 }
 
 .wrapper[data-open="true"] .content {
-  max-height: 1000px;
+  animation: allowOverflow 0.4s 0.4s ease;
 }