update: Faq component for latest conventions

  Component Changes:
  - Renamed from FaqAccordion to Faq
  - Updated to use ui/accordion components instead of direct @radix-ui/react-accordion imports
  - Removed react-icons dependency - the ChevronNext icon is now handled by the ui/accordion components
  - Fixed import path from tailwind/ui/accordion to ui/accordion
  - Simplified component structure while maintaining custom styling

  Story Changes:
  - Renamed file from FaqAccordion.stories.tsx to Faq.stories.tsx
  - Updated all component references to use new names (Faq, FaqContent, FaqItem, FaqTrigger)
  - Changed story name from FaqAccordionStory to Faq following standard conventions. categorized in Molecules / Display Content / Faq

Author: wackerow

src/components/FaqAccordion/FaqAccordion.stories.tsx renamed to src/components/FaqAccordion/Faq.stories.tsx

@@ -1,37 +1,32 @@
 import { Meta, StoryObj } from "@storybook/react"
 
-import {
-  FaqAccordion,
-  FaqAccordionContent,
-  FaqAccordionItem,
-  FaqAccordionTrigger,
-} from "."
+import { Faq as FaqComponent, FaqContent, FaqItem, FaqTrigger } from "."
 
 const meta = {
-  title: "FaqAccordion",
-  component: FaqAccordion,
+  title: "Molecules / Display Content / Faq",
+  component: FaqComponent,
   decorators: [
     (Story) => (
       <div className="">
         <Story />
       </div>
     ),
   ],
-} satisfies Meta<typeof FaqAccordion>
+} satisfies Meta<typeof FaqComponent>
 
 export default meta
 
-export const FaqAccordionStory: StoryObj = {
+export const Faq: StoryObj = {
   render: () => (
-    <FaqAccordion type="single" collapsible>
-      <FaqAccordionItem value="item-1">
-        <FaqAccordionTrigger>
+    <FaqComponent type="single" collapsible>
+      <FaqItem value="item-1">
+        <FaqTrigger>
           <h2 className="text-start text-base md:text-xl">
             Why is there no &apos;official&apos; Ethereum L2?
           </h2>
-        </FaqAccordionTrigger>
+        </FaqTrigger>
 
-        <FaqAccordionContent>
+        <FaqContent>
           Just as there is no &apos;official&apos; Ethereum client, there is no
           &apos;official&apos; Ethereum layer 2. Ethereum is permissionless -
           technically anyone can create a layer 2! Multiple teams will implement
@@ -40,15 +35,15 @@ export const FaqAccordionStory: StoryObj = {
           use cases. Much like we have multiple Ethereum clients developed by
           multiple teams in order to have diversity in the network, this too
           will be how layer 2s develop in the future.
-        </FaqAccordionContent>
-      </FaqAccordionItem>
-      <FaqAccordionItem value="item-2">
-        <FaqAccordionTrigger>
+        </FaqContent>
+      </FaqItem>
+      <FaqItem value="item-2">
+        <FaqTrigger>
           <h2 className="text-start text-base md:text-xl">
             Why is there no &apos;official&apos; Ethereum L2?
           </h2>
-        </FaqAccordionTrigger>
-        <FaqAccordionContent>
+        </FaqTrigger>
+        <FaqContent>
           Just as there is no &apos;official&apos; Ethereum client, there is no
           &apos;official&apos; Ethereum layer 2. Ethereum is permissionless -
           technically anyone can create a layer 2! Multiple teams will implement
@@ -57,8 +52,8 @@ export const FaqAccordionStory: StoryObj = {
           use cases. Much like we have multiple Ethereum clients developed by
           multiple teams in order to have diversity in the network, this too
           will be how layer 2s develop in the future.
-        </FaqAccordionContent>
-      </FaqAccordionItem>
-    </FaqAccordion>
+        </FaqContent>
+      </FaqItem>
+    </FaqComponent>
   ),
 }

src/components/FaqAccordion/index.tsx

@@ -1,51 +1,41 @@
 import React from "react"
-import { MdChevronRight } from "react-icons/md"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 
-import { cn } from "@/lib/utils/cn"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 
-import * as RootAccordion from "../../../tailwind/ui/accordion"
+import { cn } from "@/lib/utils/cn"
 
-const FaqAccordionTrigger = React.forwardRef<
+const FaqTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header>
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "w-full px-4 py-3 md:px-8 md:py-6",
-        "flex flex-1 items-center justify-between gap-2",
-        "border-t border-body-light",
-        "focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover",
-        "group cursor-pointer text-start font-medium",
-        "transition-all [&[data-state=open]>svg]:-rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {children}
-
-      <MdChevronRight
-        className={cn(
-          "size-[1em] shrink-0 p-1 text-2xl md:size-[1.25em]",
-          "rounded-full border",
-          "group-hover:border-primary group-hover:text-primary group-hover:shadow-md group-hover:shadow-primary-low-contrast",
-          "transition-transform duration-200"
-        )}
-      />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
+  <AccordionTrigger
+    ref={ref}
+    className={cn(
+      "w-full px-4 py-3 md:px-8 md:py-6",
+      "border-t border-body-light",
+      "text-start font-medium",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </AccordionTrigger>
 ))
-FaqAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+FaqTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
-const FaqAccordion = ({
+const Faq = ({
   children,
   type,
   ...props
 }: AccordionPrimitive.AccordionSingleProps) => {
   return (
-    <RootAccordion.Accordion
+    <Accordion
       type={type}
       collapsible
       className={cn(
@@ -56,26 +46,27 @@ const FaqAccordion = ({
       {...props}
     >
       {children}
-    </RootAccordion.Accordion>
+    </Accordion>
   )
 }
-const FaqAccordionItem = React.forwardRef<
+
+const FaqItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
+  <AccordionItem
     ref={ref}
     className={cn("hover:bg-background-highlight", className)}
     {...props}
   />
 ))
-FaqAccordionItem.displayName = "AccordionItem"
+FaqItem.displayName = "AccordionItem"
 
-const FaqAccordionContent = React.forwardRef<
+const FaqContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
+  <AccordionContent
     ref={ref}
     className={cn(
       "w-full overflow-hidden px-4 text-sm md:px-8",
@@ -86,14 +77,9 @@ const FaqAccordionContent = React.forwardRef<
     <div className={cn("border-t border-body-light py-3 md:py-6", className)}>
       {children}
     </div>
-  </AccordionPrimitive.Content>
+  </AccordionContent>
 ))
 
-FaqAccordionContent.displayName = AccordionPrimitive.Content.displayName
+FaqContent.displayName = AccordionPrimitive.Content.displayName
 
-export {
-  FaqAccordion,
-  FaqAccordionContent,
-  FaqAccordionItem,
-  FaqAccordionTrigger,
-}
+export { Faq, FaqContent, FaqItem, FaqTrigger }