200 Make Boxes Clickable

src/components/NextLink/NextLink.jsx

@@ -2,24 +2,27 @@ import React from 'react'
 import Link from 'next/link'
 import PropTypes from 'prop-types'
 
-const NextLink = ({ addClass, text, path }) => (
+const NextLink = ({ addClass, children, path }) => (
   <Link href={path} passHref>
     <NextLinkWrapper
       addClass={addClass}
       href={path}
-      text={text}
+      children={children}
     />
   </Link>
 )
 
-const NextLinkWrapper = React.forwardRef(({ addClass, text, href }, ref) => (
+const NextLinkWrapper = React.forwardRef(({ addClass, children, href }, ref) => (
   <a href={href} ref={ref} className={addClass}>
-    {text}
+    {children}
   </a>
 ))
 
 NextLink.propTypes = {
-  text: PropTypes.string.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.elementType,
+  ]).isRequired,
   addClass: PropTypes.string,
   path: PropTypes.exact({
     pathname: PropTypes.string.isRequired,

src/components/NextLink/NextLink.stories.jsx

@@ -10,7 +10,7 @@ const Template = (args) => <NextLink {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  text: 'Text Here',
+  children: 'Text Here',
   addClass: '',
   path: {
     pathname: '/test',

src/compounds/Item/CardBody.jsx

@@ -15,7 +15,7 @@ const CardBody = ({ buttonLink, buttonProps, item,
           <Card.Title>
             {(withTitleLink) && (
               <NextLink
-                text={name}
+                children={name}
                 path={{ pathname: titleLink, query: { id } }}
                 addClass='text-decoration-none link-hover'
               />

src/compounds/Item/Item.jsx

@@ -5,6 +5,7 @@ import Image from '../../components/Image/Image'
 import CardBody from './CardBody'
 import LinkedButton from '../LinkedButton/LinkedButton'
 import ItemLoading from './ItemLoading'
+import NextLink from '../../components/NextLink/NextLink'
 import './item.scss'
 
 const Item = ({ buttonLink, buttonProps, href, isLoading, item, orientation, titleLink, withButtonLink,
@@ -52,22 +53,28 @@ const Item = ({ buttonLink, buttonProps, href, isLoading, item, orientation, tit
           </div>
         </div>
       ) : (
-        <>
-          <Image
-            className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
-            src={src}
-            alt={alt}
-          />
-          <CardBody
-            buttonLink={link}
-            buttonProps={buttonProps}
-            item={item}
-            orientation={orientation}
-            titleLink={link}
-            withButtonLink={withButtonLink}
-            withTitleLink={withTitleLink}
-          />
-        </>
+        <NextLink
+          children={(
+            <>
+              <Image
+                className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
+                src={src}
+                alt={alt}
+              />
+              <CardBody
+                buttonLink={link}
+                buttonProps={buttonProps}
+                item={item}
+                orientation={orientation}
+                titleLink={link}
+                withButtonLink={withButtonLink}
+                withTitleLink={withTitleLink}
+              />
+            </>
+          )}
+          path={{ pathname: item.href, query: { id }}}
+          addClass="text-decoration-none link-hover"
+        />
       )}
     </Card>
   )