update: Faq styling and story

Author: wackerow

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

@@ -7,7 +7,7 @@ const meta = {
   component: FaqComponent,
   decorators: [
     (Story) => (
-      <div className="">
+      <div className="mx-auto w-[52rem] max-w-full p-4">
         <Story />
       </div>
     ),
@@ -18,7 +18,7 @@ export default meta
 
 export const Faq: StoryObj = {
   render: () => (
-    <FaqComponent type="single" collapsible>
+    <FaqComponent type="single" collapsible className="w-full">
       <FaqItem value="item-1">
         <FaqTrigger>
           <h2 className="text-start text-base md:text-xl">

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

@@ -17,9 +17,10 @@ const FaqTrigger = React.forwardRef<
   <AccordionTrigger
     ref={ref}
     className={cn(
-      "w-full px-4 py-3 md:px-8 md:py-6",
+      "w-full p-4 md:px-8 md:py-6",
       "border-t border-body-light",
       "text-start font-medium",
+      "[&_[data-label='icon-container']]:ms-8 [&_[data-label='icon-container']]:rounded-full [&_[data-label='icon-container']]:border [&_[data-label='icon-container']]:border-current [&_[data-label='icon-container']]:p-2 hover:[&_[data-label='icon-container']]:shadow-[4px_4px_0_hsla(var(--primary-low-contrast),1)] [&_svg]:text-lg",
       className
     )}
     {...props}
@@ -40,7 +41,7 @@ const Faq = ({
       collapsible
       className={cn(
         "rounded border border-body-light first:border-t-0",
-        "max-w-4xl overflow-hidden bg-background",
+        "w-full overflow-hidden bg-background",
         props?.className
       )}
       {...props}
@@ -56,7 +57,7 @@ const FaqItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionItem
     ref={ref}
-    className={cn("hover:bg-background-highlight", className)}
+    className={cn("w-full hover:bg-background-highlight", className)}
     {...props}
   />
 ))

src/components/ui/accordion.tsx

@@ -33,7 +33,9 @@ const AccordionTrigger = React.forwardRef<
       <>
         {children}
         {!hideIcon && (
-          <ChevronNext className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
+          <div data-label="icon-container">
+            <ChevronNext className="size-[1em] shrink-0 text-2xl transition-transform duration-200" />
+          </div>
         )}
       </>
     </AccordionPrimitive.Trigger>