Switch product card details trigger to render prop

HedvigInsurance · Sep 19, 2024 · 4ae8304 · 4ae8304
1 parent 01f4821
commit 4ae8304
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 28 deletions.
diff --git 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
@@ -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,
 }