Merge pull request #14017 from kushagrasarathe/migrateExpandableCard

feat: migrate ExpandableCard component to shadcn

Author: pettinarip

src/components/ExpandableCard.tsx

@@ -1,24 +1,22 @@
-import { type ReactNode, useState } from "react"
+import React, { type ReactNode, useState } from "react"
 import { useTranslation } from "next-i18next"
-import {
-  Accordion,
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Heading,
-  type Icon as ChakraIcon,
-} from "@chakra-ui/react"
 
-import Text from "@/components/OldText"
+import { Flex, HStack, VStack } from "@/components/ui/flex"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../tailwind/ui/accordion"
+
 export type ExpandableCardProps = {
   children?: ReactNode
   contentPreview?: ReactNode
   title: ReactNode
-  svg?: typeof ChakraIcon
+  svg?: React.ElementType
   eventAction?: string
   eventCategory?: string
   eventName?: string
@@ -54,96 +52,38 @@ const ExpandableCard = ({
   }
 
   return (
-    <Accordion
-      border="1px"
-      borderColor="border"
-      borderRadius="sm"
-      display="flex"
-      flexDirection="column"
-      marginBottom="4"
-      cursor="pointer"
-      _hover={{
-        backgroundColor: "ednBackground",
-      }}
-      index={isVisible ? [0] : []}
-    >
-      <AccordionItem borderTopWidth="0" flex="1">
-        <Heading as="h3" m={0}>
-          <AccordionButton
-            width="100%"
-            px="6"
-            py="6"
-            flex="1"
+    <>
+      <Accordion type="single" collapsible className="mb-4">
+        <AccordionItem
+          value="item-1"
+          className="rounded-sm border hover:bg-background-highlight"
+        >
+          <AccordionTrigger
+            hideIcon
             onClick={onClick}
-            _hover={{
-              backgroundColor: "ednBackground",
-            }}
-            _expanded={{
-              backgroundColor: "transparent",
-            }}
+            className="w-full p-6 transition-colors hover:bg-background-highlight hover:text-black md:p-6 dark:hover:text-white [&[data-state=open]]:bg-transparent [&[data-state=open]]:text-black dark:[&[data-state=open]]:text-white"
           >
-            <Box
-              display="flex"
-              width="100%"
-              alignItems="center"
-              flexDir={{ base: "column", sm: "row" }}
-              textAlign="start"
-            >
-              <Box marginBottom={{ base: 2, sm: 0 }} me={{ base: 0, sm: 4 }}>
-                <Box
-                  display="flex"
-                  alignItems="center"
-                  sx={{
-                    svg: { me: "1.5rem" },
-                  }}
-                  my="4"
-                >
-                  {!!Svg && <Svg />}
-                  <Text fontSize="xl" fontWeight="semibold" flex="1" m="0">
-                    {title}
-                  </Text>
-                </Box>
-                <Text
-                  fontSize="sm"
-                  color="text200"
-                  marginBottom="0"
-                  width="fit-content"
-                >
+            <Flex className="w-full flex-col items-center text-left sm:flex-row">
+              <VStack className="items-center md:items-start">
+                <HStack className="mb-2 mt-4">
+                  {Svg && <Svg className="mr-6" />}
+                  <h3 className="text-xl font-semibold">{title}</h3>
+                </HStack>
+                <p className="w-fit text-sm text-body-medium">
                   {contentPreview}
-                </Text>
-              </Box>
-              <Text
-                fontSize="md"
-                color="primary.base"
-                ms={{ base: undefined, sm: "auto" }}
-                mt="auto"
-                mb="auto"
-              >
+                </p>
+              </VStack>
+              <span className="my-auto text-md text-primary sm:ml-auto">
                 {t(isVisible ? "less" : "more")}
-              </Text>
-            </Box>
-          </AccordionButton>
-        </Heading>
-        <AccordionPanel
-          p="0"
-          mt="0"
-          paddingX="6"
-          paddingBottom="6"
-          paddingTop="0"
-          onClick={onClick}
-        >
-          <Box
-            fontSize="md"
-            color="text"
-            paddingTop="6"
-            borderTop="1px solid"
-            borderColor="border"
-          >
-            {children}
-          </Box>
-        </AccordionPanel>
-      </AccordionItem>
-    </Accordion>
+              </span>
+            </Flex>
+          </AccordionTrigger>
+          <AccordionContent className="p-6 pt-0 md:p-6 md:pt-0">
+            <div className="border-t pt-6 text-md text-body">{children}</div>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </>
   )
 }
 

tailwind/ui/accordion.tsx

@@ -16,8 +16,10 @@ AccordionItem.displayName = "AccordionItem"
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    hideIcon?: boolean
+  }
+>(({ className, children, hideIcon = false, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       ref={ref}
@@ -28,7 +30,9 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <MdChevronRight className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
+      {!hideIcon && (
+        <MdChevronRight className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
+      )}
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))