Merge pull request #14371 from Baystef/migrate/stableaccordioncustomitem

Migrate StablecoinAccordion/AccordionCustomItem Component to tailwind/shadcn

Author: pettinarip

src/components/StablecoinAccordion/AccordionCustomItem.tsx

@@ -1,40 +1,47 @@
-import { ReactNode } from "react"
+import { BaseHTMLAttributes, ReactNode, useState } from "react"
 import { useTranslation } from "next-i18next"
-import {
-  AccordionButton,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  BoxProps,
-  Flex,
-  Heading,
-  Text,
-} from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 
+import { Flex } from "@/components/ui/flex"
+import { Tag } from "@/components/ui/tag"
+
+import {
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../../../tailwind/ui/accordion"
 import Emoji from "../Emoji"
-import Pill from "../Pill"
 
 import { accordionButtonContent, CategoryNameType } from "./utils"
 
-export const LeftColumnPanel = (props: ChildOnlyProp & Partial<BoxProps>) => (
-  <Box flex="0 0 50%" maxW={{ lg: "75%" }} me={{ lg: 16 }} {...props} />
+type LeftColumnPanelElement = BaseHTMLAttributes<HTMLDivElement>
+
+export const LeftColumnPanel = (
+  props: ChildOnlyProp & LeftColumnPanelElement
+) => (
+  <div
+    className="flex-shrink-0 flex-grow-0 basis-1/2 lg:me-16 lg:max-w-[75%]"
+    {...props}
+  />
 )
 
 export const RightColumnPanel = (props: ChildOnlyProp) => (
-  <LeftColumnPanel me={0} flex="0 1 50%" mt={{ base: 12, lg: 0 }} {...props} />
+  <LeftColumnPanel
+    className="me-0 mt-12 flex-shrink flex-grow-0 basis-1/2 lg:mt-0"
+    {...props}
+  />
 )
 
 const MoreOrLessLink = ({ isOpen }: { isOpen: boolean }) => {
   const { t } = useTranslation("page-stablecoins")
 
   return (
-    <Box me={6} color="primary.base">
+    <div className="me-6 text-md text-primary">
       {isOpen
         ? t("page-stablecoins-accordion-less")
         : t("page-stablecoins-accordion-more")}
-    </Box>
+    </div>
   )
 }
 
@@ -49,74 +56,52 @@ interface AccordionCustomItemProps {
 export const AccordionCustomItem = (props: AccordionCustomItemProps) => {
   const { category, children } = props
   const { t } = useTranslation("page-stablecoins")
+  const [open, setOpen] = useState(false)
+
+  const handleOpen = () => setOpen(!open)
 
   const contentObj = accordionButtonContent[category]
 
   return (
-    <AccordionItem border="1px" borderColor="border !important">
-      {({ isExpanded }) => (
-        <>
-          <AccordionButton
-            justifyContent="space-between"
-            alignItems="center"
-            px="0"
-            py="0"
-            _expanded={{ background: "transparent" }}
-            _hover={{ background: "ednBackground" }}
-          >
-            <Flex
-              alignItems={{ base: "flex-start", lg: "center" }}
-              flexDirection={{ base: "column", md: "row" }}
-              m={6}
-              me={4}
-              {...props}
-            >
-              <Emoji
-                text={contentObj.emoji}
-                className="mb-2 me-6 text-[3rem] md:mb-0 md:text-[4rem]"
-              />
-              <Box>
-                <Flex alignItems="center" mb={2}>
-                  <Heading
-                    as="h3"
-                    fontSize={{ base: "1.25rem", md: "1.5rem" }}
-                    lineHeight={1.4}
-                  >
-                    {t(contentObj.title)}
-                  </Heading>
-                  {!!contentObj.pill && (
-                    <Pill ms={4} background={contentObj.pill.color}>
-                      {t(contentObj.pill.name)}
-                    </Pill>
-                  )}
-                </Flex>
-                <Text color="text200" textAlign="start">
-                  {t(contentObj.textPreview)}
-                </Text>
-              </Box>
-            </Flex>
-            <MoreOrLessLink isOpen={isExpanded} />
-          </AccordionButton>
-          <AccordionPanel
-            background="ednBackground"
-            border="1px"
-            borderColor="border"
-            mb="-1px"
-            mx="-1px"
-            mt="0"
-            p="0"
-            fontSize="md"
-          >
-            <Flex
-              p={8}
-              justifyContent="space-between"
-              flexDirection={{ base: "column", lg: "row" }}
-            >
-              {children}
+    <AccordionItem value={contentObj.title} className="border">
+      <AccordionTrigger
+        hideIcon
+        className="items-center justify-between px-0 py-0 text-body-medium hover:text-body-medium md:px-0"
+        onClick={handleOpen}
+      >
+        <Flex
+          className="lg:center m-6 me-4 flex-col items-start md:flex-row"
+          {...props}
+        >
+          <Emoji
+            text={contentObj.emoji}
+            className="mb-2 me-6 text-5xl md:mb-0 md:text-6xl"
+          />
+          <div>
+            <Flex className="mb-2 items-center">
+              <h3 className="text-xl text-body hover:text-body md:text-2xl">
+                {t(contentObj.title)}
+              </h3>
+              {!!contentObj.pill && (
+                <Tag
+                  className="ms-4"
+                  variant="solid"
+                  status={contentObj.pill.color}
+                >
+                  {t(contentObj.pill.name)}
+                </Tag>
+              )}
             </Flex>
-          </AccordionPanel>
-        </>
-      )}
+            <p className="text-start text-md">{t(contentObj.textPreview)}</p>
+          </div>
+        </Flex>
+        <MoreOrLessLink isOpen={open} />
+      </AccordionTrigger>
+      <AccordionContent className="-mx-px -mb-px mt-0 border border-border bg-background p-0 text-md md:p-0">
+        <Flex className="flex-col justify-between p-8 lg:flex-row">
+          {children}
+        </Flex>
+      </AccordionContent>
     </AccordionItem>
   )
 }

src/components/StablecoinAccordion/index.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from "next-i18next"
 import { MdArrowForward } from "react-icons/md"
 import {
-  Accordion,
   Box,
   Flex,
   Heading,
@@ -12,6 +11,7 @@ import {
 
 import { ChildOnlyProp, TranslationKey } from "@/lib/types"
 
+import { Accordion } from "../../../tailwind/ui/accordion"
 import { ButtonLink } from "../Buttons"
 import CardList from "../CardList"
 import InfoBanner from "../InfoBanner"
@@ -104,7 +104,7 @@ const StablecoinAccordion = () => {
   const DEFAULT_IMAGE_WIDTH = 24
 
   return (
-    <Accordion borderRadius="base" width="full" allowToggle>
+    <Accordion type="single" className="w-full rounded" collapsible>
       <AccordionCustomItem category="dapps">
         <LeftColumnPanel>
           <SectionTitle>

src/components/StablecoinAccordion/utils.ts

@@ -6,7 +6,7 @@ type AccordionButtonContentType = {
   emoji: string
   title: TranslationKey
   pill?: {
-    color: string
+    color: "success" | "warning"
     name: TranslationKey
   }
   textPreview: TranslationKey
@@ -19,7 +19,7 @@ export const accordionButtonContent: {
     emoji: ":twisted_rightwards_arrows:",
     title: "page-stablecoins-accordion-swap-title",
     pill: {
-      color: "success100",
+      color: "success",
       name: "page-stablecoins-accordion-swap-pill",
     },
     textPreview: "page-stablecoins-accordion-swap-text-preview",

tailwind/ui/accordion.tsx

@@ -26,7 +26,6 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]:dir(rtl)>svg]:rotate-90 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
-
         className
       )}
       {...props}