switching intern drivers

Author: AdrianC113

src/components/NextLink/NextLink.jsx

@@ -19,7 +19,7 @@ const NextLinkWrapper = React.forwardRef(({ addClass, text, href }, ref) => (
 ))
 
 NextLink.propTypes = {
-  text: PropTypes.string.isRequired,
+  // text: PropTypes.string.isRequired,
   addClass: PropTypes.string,
   path: PropTypes.exact({
     pathname: PropTypes.string.isRequired,

src/compounds/Item/CardBody.jsx

@@ -1,55 +1,70 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Card } from 'react-bootstrap'
-import NextLink from '../../components/NextLink/NextLink'
-import LinkedButton from '../LinkedButton/LinkedButton'
+import React from "react";
+import PropTypes from "prop-types";
+import { Card } from "react-bootstrap";
+import NextLink from "../../components/NextLink/NextLink";
+import LinkedButton from "../LinkedButton/LinkedButton";
 
-const CardBody = ({ buttonLink, buttonProps, item,
-  orientation, titleLink, withButtonLink, withTitleLink }) => {
-  const { id, description, name } = item
+const CardBody = ({
+  buttonLink,
+  buttonProps,
+  item,
+  orientation,
+  titleLink,
+  withButtonLink,
+  withTitleLink,
+}) => {
+  const { id, description, name } = item;
 
   return (
-    <Card.Body className={withButtonLink && 'd-flex flex-column'}>
-      <div className={orientation === 'horizontal' ? 'd-block d-md-flex align-items-center justify-content-between' : ''}>
-        <div className={orientation === 'horizontal' ? 'me-2' : ''}>
-          <Card.Title>
+    <Card.Body className={withButtonLink && "d-flex flex-column"}>
+        <div
+          className={
+            orientation === "horizontal"
+              ? "d-block d-md-flex align-items-center justify-content-between"
+              : ""
+          }
+        >
+          <div className={orientation === "horizontal" ? "me-2" : ""}>
+            <Card.Title >
             {(withTitleLink) && (
-              <NextLink
-                text={name}
-                path={{ pathname: titleLink, query: { id } }}
-                addClass='text-decoration-none link-hover'
-              />
-            )}
-            {(!withTitleLink) && (
-              name
+               <NextLink
+               text={name}
+               path={{ pathname: titleLink, query: { id } }}
+               addClass="text-decoration-none link-hover"
+             />)}
+              {(!withTitleLink) && (
+                name
             )}
           </Card.Title>
-          {description && (
-            <Card.Text className='fw-light'>
-              {description}
-            </Card.Text>
+            {description && (
+              <Card.Text className="fw-light">{description}</Card.Text>
+            )}
+          </div>
+          {withButtonLink && (
+            <div
+              className={orientation === "horizontal" ? "mt-3 mt-md-0" : "mt-3"}
+            >
+              <LinkedButton
+                addClass={`item-button-${orientation} item-link mt-auto`}
+                buttonProps={buttonProps}
+                path={{ pathname: buttonLink, query: { id } }}
+              />
+            </div>
           )}
         </div>
-        {(withButtonLink) && (
-          <div className={orientation === 'horizontal' ? 'mt-3 mt-md-0' : 'mt-3'}>
-            <LinkedButton
-              addClass={`item-button-${orientation} item-link mt-auto`}
-              buttonProps={buttonProps}
-              path={{ pathname: buttonLink, query: { id }}}
-            />
-          </div>
-        )}
-      </div>
-    </Card.Body>
-  )
-}
+      </Card.Body>
+  );
+};
 
 CardBody.propTypes = {
   buttonLink: PropTypes.string,
   // currently overriding the label on a button from being required in this component,
   // because it shouldn't be if we are not rendering a button
   // refer to the comment below
-  buttonProps: PropTypes.shape({ ...LinkedButton.propTypes.buttonProps, label: PropTypes.string }),
+  buttonProps: PropTypes.shape({
+    ...LinkedButton.propTypes.buttonProps,
+    label: PropTypes.string,
+  }),
   // TODO(alishaevn): is there a way to set conditional proptypes without adding another package?
   // buttonProps: props => props.withButtonLink
   // ? PropTypes.shape(Button.propTypes)
@@ -64,22 +79,22 @@ CardBody.propTypes = {
     name: PropTypes.string.isRequired,
     slug: PropTypes.string,
   }),
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  orientation: PropTypes.oneOf(["horizontal", "vertical"]),
   titleLink: PropTypes.string,
   withButtonLink: PropTypes.bool,
   withTitleLink: PropTypes.bool,
-}
+};
 
 CardBody.defaultProps = {
-  buttonLink: '',
+  buttonLink: "",
   buttonProps: LinkedButton.defaultProps,
   item: {
-    description: '',
+    description: "",
   },
-  orientation: 'vertical',
-  titleLink: '',
+  orientation: "vertical",
+  titleLink: "",
   withButtonLink: false,
   withTitleLink: false,
-}
+};
 
-export default CardBody
+export default CardBody;

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,8 +53,10 @@ const Item = ({ buttonLink, buttonProps, href, isLoading, item, orientation, tit
           </div>
         </div>
       ) : (
-        <>
-          <Image
+        <NextLink
+        text={(
+          <>
+             <Image
             className={`cover ${orientation === 'horizontal' ? 'img-fluid h-100 rounded-start' : 'card-img-top'}`}
             src={src}
             alt={alt}
@@ -67,7 +70,11 @@ const Item = ({ buttonLink, buttonProps, href, isLoading, item, orientation, tit
             withButtonLink={withButtonLink}
             withTitleLink={withTitleLink}
           />
-        </>
+          </>
+        )}
+        path={{ pathname: item.href, query: { id }}}
+        addClass="text-decoration-none link-hover"
+        />
       )}
     </Card>
   )