fix(SW-96): allow nested children to trigger lightbox

components/Lightbox/Desktop/index.tsx

@@ -46,14 +46,23 @@ export function DesktopLightbox({ images, children }: DesktopLightboxProps) {
     )
   }
 
-  const triggerElement = React.Children.map(children, (child) => {
+  const triggerElement = React.Children.map(
-    if (React.isValidElement(child) && child.props.id === "lightboxTrigger") {
+    children,
-      return React.cloneElement(child, {
+    function mapChild(child): React.ReactNode {
-        onClick: () => setIsOpen(true),
+      if (React.isValidElement(child)) {
-      } as React.HTMLAttributes<HTMLElement>)
+        if (child.props.id === "lightboxTrigger") {
+          return React.cloneElement(child, {
+            onClick: () => setIsOpen(true),
+          } as React.HTMLAttributes<HTMLElement>)
+        } else if (child.props.children) {
+          return React.cloneElement(child, {
+            children: React.Children.map(child.props.children, mapChild),
+          } as React.HTMLAttributes<HTMLElement>)
+        }
+      }
+      return child
     }
-    return child
+  )
-  })
 
   return (
     <>