swap radix collapsible for radix accordion to support default-closed

tsdataclinic · Mar 7, 2024 · ab85dae · ab85dae
1 parent c595e58
commit ab85dae
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 61 deletions.
diff --git a/app/package.json b/app/package.json
@@ -8,6 +8,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^1.1.2",

diff --git a/app/src/components/ui/Accordion/Accordion.tsx b/app/src/components/ui/Accordion/Accordion.tsx
@@ -1,47 +1,45 @@
 import React from 'react';
-import * as Accordion from '@radix-ui/react-accordion';
+import * as Collapsible from '@radix-ui/react-collapsible';
 import classNames from 'classnames';
 import { PlusIcon } from '@radix-ui/react-icons';
 import './AccordionStyles.css';
 
 
-const AccordionTrigger = React.forwardRef<HTMLButtonElement | null, Accordion.AccordionTriggerProps>(({ children, className, ...props } : Accordion.AccordionTriggerProps, forwardedRef: React.ForwardedRef<HTMLButtonElement | null>) => (
-  <Accordion.Header className="AccordionHeader flex flex-col">
-    <Accordion.Trigger
-      className={classNames('AccordionTrigger', className)}
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement | null, Collapsible.CollapsibleTriggerProps>(({ children, className, ...props } : Collapsible.CollapsibleTriggerProps, forwardedRef: React.ForwardedRef<HTMLButtonElement | null>) => (
+    <Collapsible.Trigger
+      className={classNames('CollapsibleTrigger', className)}
       {...props}
       ref={forwardedRef}
     >
       {children}
-      <PlusIcon className="AccordionChevron" aria-hidden />
-    </Accordion.Trigger>
-  </Accordion.Header>
+      <PlusIcon className="CollapsibleChevron" aria-hidden />
+    </Collapsible.Trigger>
 ));
 
-const AccordionContent = React.forwardRef<HTMLDivElement | null, Accordion.AccordionContentProps>(({ children, className, ...props } : Accordion.AccordionContentProps, forwardedRef: React.ForwardedRef<HTMLDivElement | null>) => (
-  <Accordion.Content
-    className={classNames('AccordionContent', className)}
+const CollapsibleContent = React.forwardRef<HTMLDivElement | null, Collapsible.CollapsibleContentProps>(({ children, className, ...props } : Collapsible.CollapsibleContentProps, forwardedRef: React.ForwardedRef<HTMLDivElement | null>) => (
+  <Collapsible.Content
+    className={classNames('CollapsibleContent', className)}
     {...props}
     ref={forwardedRef}
   >
-    <div className="AccordionContentText">{children}</div>
-  </Accordion.Content>
+    <div className="CollapsibleContentText">{children}</div>
+  </Collapsible.Content>
 ));
 
-export type AccordionComponentProps = {
+export type CollapsibleComponentProps = {
   title: string;
   children: any;
 }
 
-const AccordionComponent = ({ title, children  } : AccordionComponentProps) => (
-    <Accordion.Root className="AccordionRoot border-y-10" type="single" defaultValue="item-1" collapsible>
-      <Accordion.Item className="AccordionItem" value="item-1">
-        <AccordionTrigger>{title}</AccordionTrigger>
-        <AccordionContent>
-          {children}
-        </AccordionContent>
-      </Accordion.Item>
-    </Accordion.Root>
+const AccordionComponent = ({ title, children  } : CollapsibleComponentProps) => (
+    <Collapsible.Root className="CollapsibleRoot py-4 border-t-2 border-separate" defaultValue="item-1">
+      <CollapsibleTrigger className={`flex justify-between items-center w-full`}>
+        {title}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="p-4">
+        {children}
+      </CollapsibleContent>
+    </Collapsible.Root>
   );
 
 export default AccordionComponent;
diff --git a/app/src/components/ui/Accordion/AccordionStyles.css b/app/src/components/ui/Accordion/AccordionStyles.css
@@ -1,50 +1,17 @@
-.AccordionRoot {
-  background-color: var(--mauve-6);
-  border-top: 1px grey solid;
-  border-bottom: 1px grey solid;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-
-.AccordionItem:focus-within {
-  position: relative;
-  z-index: 1;
-}
-
-.AccordionHeader {
-  display: flex;
-  cursor: pointer;
-}
-
-.AccordionTrigger {
-  font-family: inherit;
-  padding: 0 20px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 1.5em;
-}
-
-.AccordionContent {
+.CollapsibleContent {
   overflow: hidden;
 }
-.AccordionContent[data-state='open'] {
+.CollapsibleContent[data-state='open'] {
   animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
-.AccordionContent[data-state='closed'] {
+.CollapsibleContent[data-state='closed'] {
   animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
 
-.AccordionContentText {
-  padding: 15px 20px;
-}
-
-.AccordionChevron {
+.CollapsibleChevron {
   transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
-.AccordionTrigger[data-state='open'] > .AccordionChevron {
+.CollapsibleTrigger[data-state='open'] > .CollapsibleChevron {
   transform: rotate(180deg);
 }