From 4ae83046908f65da39866320cc3759ab3dd4e2f9 Mon Sep 17 00:00:00 2001
From: Rafael Youakeem <youakeem@gmail.com>
Date: Wed, 18 Sep 2024 09:39:21 +0200
Subject: [PATCH] Switch product card details trigger to render prop

---
 .../ProductCard/ProductCard.stories.tsx       |  3 +-
 .../ProductCard/ProductCardDetails.tsx        | 32 ++++---------------
 2 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/apps/store/src/components/ProductCard/ProductCard.stories.tsx b/apps/store/src/components/ProductCard/ProductCard.stories.tsx
index 2ee469800f..04ca14f56b 100644
--- a/apps/store/src/components/ProductCard/ProductCard.stories.tsx
+++ b/apps/store/src/components/ProductCard/ProductCard.stories.tsx
@@ -52,8 +52,7 @@ export const Default: Story = {
 
         <ProductCardDetails.Root>
           <ProductCardDetails.Trigger>
-            <ProductCardDetails.CollapsedLabel>Show details</ProductCardDetails.CollapsedLabel>
-            <ProductCardDetails.ExpandedLabel>Hide details</ProductCardDetails.ExpandedLabel>
+            {(isOpen) => (isOpen ? 'Hide details' : 'Show details')}
           </ProductCardDetails.Trigger>
 
           <ProductCardDetails.Content className={sprinkles({ paddingBlock: 'md' })}>
diff --git a/apps/store/src/components/ProductCard/ProductCardDetails.tsx b/apps/store/src/components/ProductCard/ProductCardDetails.tsx
index b30b10954a..7da6c5e212 100644
--- a/apps/store/src/components/ProductCard/ProductCardDetails.tsx
+++ b/apps/store/src/components/ProductCard/ProductCardDetails.tsx
@@ -1,4 +1,4 @@
-import { type ComponentProps, createContext, type PropsWithChildren, useContext, useState } from 'react'
+import { type ComponentProps, createContext, type ReactNode, useContext, useState } from 'react'
 import { Button } from 'ui'
 import Collapsible from '@/components/Collapsible/Collapsible'
 
@@ -34,14 +34,16 @@ const Root = ({ children, ...props }: RootProps) => {
   )
 }
 
-type TriggerProps = ComponentProps<typeof Collapsible.Trigger>
+type TriggerProps = Omit<ComponentProps<typeof Collapsible.Trigger>, 'children'> & {
+  children?: ((isOpen: boolean) => ReactNode) | ReactNode
+}
 const Trigger = ({ children, ...props }: TriggerProps) => {
-  const { toggle } = useProductDetails()
+  const { isOpen, toggle } = useProductDetails()
 
   return (
     <Collapsible.Trigger asChild {...props}>
       <Button variant="outline" size="medium" onClick={toggle} fullWidth>
-        {children}
+        {typeof children === 'function' ? children(isOpen) : children}
       </Button>
     </Collapsible.Trigger>
   )
@@ -57,30 +59,8 @@ const Content = ({ children, ...props }: ContentProps) => {
   )
 }
 
-const ExpandedLabel = ({ children }: PropsWithChildren) => {
-  const { isOpen } = useProductDetails()
-
-  if (!isOpen) {
-    return null
-  }
-
-  return children
-}
-
-const CollapsedLabel = ({ children }: PropsWithChildren) => {
-  const { isOpen } = useProductDetails()
-
-  if (isOpen) {
-    return null
-  }
-
-  return children
-}
-
 export const ProductCardDetails = {
   Root,
   Trigger,
   Content,
-  ExpandedLabel,
-  CollapsedLabel,
 }