accordion card variant update (#10318)

* 8cbd37 accordion card variant update

Author: srdjan-harness

apps/portal/src/content/docs/components/accordion.mdx

@@ -65,7 +65,7 @@ import { DocsPage } from "@/components/docs-page";
 
         <div>
         <h5>Card Variant</h5>
-        <Accordion.Root type="single" collapsible indicatorPosition="left" variant="card" cardSize="sm">
+        <Accordion.Root type="single" collapsible indicatorPosition="left" variant="card" cardSize="md">
             <Accordion.Item value="item1">
                 <Accordion.Trigger suffix="3 items" prefix={<IconV2 name="info-circle" size="md" />}>
                   Item 1
@@ -76,6 +76,16 @@ import { DocsPage } from "@/components/docs-page";
                     <p>This is the content of item 1</p>
                 </Accordion.Content>
             </Accordion.Item>
+            <Accordion.Item value="item3">
+                <Accordion.Trigger suffix="3 items" prefix={<IconV2 name="info-circle" size="md" />}>
+                  Item 2
+                </Accordion.Trigger>
+                <Accordion.Content>
+                    <p>This is the content of item 2</p>
+                    <p>This is the content of item 2</p>
+                    <p>This is the content of item 2</p>
+                </Accordion.Content>
+            </Accordion.Item>
         </Accordion.Root>
     </div>
 

packages/ui/src/components/accordion/accordion.tsx

@@ -23,7 +23,7 @@ const accordionVariants = cva('cn-accordion', {
     },
     variant: {
       default: '',
-      card: ''
+      card: 'cn-accordion-card'
     }
   },
   defaultVariants: {
@@ -68,7 +68,7 @@ const AccordionRoot = forwardRef<ElementRef<typeof AccordionPrimitive.Root>, Acc
       <AccordionPrimitive.Root
         ref={ref}
         {...props}
-        className={cn(accordionVariants({ size }), className)}
+        className={cn(accordionVariants({ size, variant }), className)}
         onValueChange={onValueChange}
       >
         <AccordionContext.Provider value={{ indicatorPosition, variant, cardSize }}>
@@ -87,7 +87,7 @@ const AccordionItem = forwardRef<ElementRef<typeof AccordionPrimitive.Item>, Acc
 
     if (variant === 'card') {
       return (
-        <Card.Root size={cardSize} className="mb-2 w-full" wrapperClassname="!p-0">
+        <Card.Root size={cardSize} className="w-full" wrapperClassname="!py-0">
           <AccordionPrimitive.Item ref={ref} className="w-full" {...props} />
         </Card.Root>
       )

packages/ui/tailwind-utils-config/components/accordion.ts

@@ -1,8 +1,14 @@
 export default {
   '.cn-accordion': {
+    display: 'flex',
+    flexDirection: 'column',
     '--cn-accordion-indicator-mt': '4px',
     minWidth: 'var(--cn-accordion-sm-min-width)',
 
+    '&.cn-accordion-card': {
+      gap: 'var(--cn-accordion-sm-card-gap-y)'
+    },
+
     '&-md': {
       minWidth: 'var(--cn-accordion-md-min-width)',
       '--cn-accordion-sm-gap': 'var(--cn-accordion-md-gap)',
@@ -11,6 +17,10 @@ export default {
 
       '.cn-accordion-trigger-text': {
         '@apply font-heading-base': ''
+      },
+
+      '&.cn-accordion-card': {
+        gap: 'var(--cn-accordion-md-card-gap-y)'
       }
     },