feat(Accordion): isDefaultExpanded

aufacicenta · Jun 8, 2024 · 561a69e · 561a69e
1 parent 767edd0
commit 561a69e
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/app/src/ui/accordion/Accordion.tsx b/app/src/ui/accordion/Accordion.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Icon } from "ui/icon/Icon";
 
@@ -9,9 +9,13 @@ import styles from "./Accordion.module.scss";
 export const Accordion: React.FC<AccordionProps> & {
   Header: React.FC<AccordionHeaderProps>;
   Content: React.FC<AccordionContentProps>;
-} = ({ className, accordionHeader, accordionContent }) => {
+} = ({ className, accordionHeader, accordionContent, isDefaultExpanded }) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
+  useEffect(() => {
+    setIsExpanded(!!isDefaultExpanded);
+  }, [isDefaultExpanded]);
+
   const onClickHeaderTrigger = () => {
     setIsExpanded(!isExpanded);
   };

diff --git a/app/src/ui/accordion/Accordion.types.ts b/app/src/ui/accordion/Accordion.types.ts
@@ -3,6 +3,7 @@ import { HTMLAttributes, ReactNode } from "react";
 export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
   accordionHeader: ReactNode;
   accordionContent: ReactNode;
+  isDefaultExpanded?: boolean;
   className?: string;
 };
 

diff --git a/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.tsx b/app/src/ui/svpervnder/collections/larskristo_hellheads/LarsKristoHellheads.tsx
@@ -250,6 +250,7 @@ export const LarsKristoHellheads: React.FC<LatestCollectionProps> = ({ className
                   }
                 />
                 <Accordion
+                  isDefaultExpanded
                   accordionHeader={<Typography.Headline3 flat>Where can I purchase a Hellhead?</Typography.Headline3>}
                   accordionContent={
                     <>