install twMerge, convert ImageCard, + fix ImageCard visual bugs

OperationCode · Dec 17, 2023 · a0b2489 · a0b2489 · vercel · Dec 17, 2023
1 parent a349123
commit a0b2489
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 71 deletions.
diff --git a/components/Cards/Card/Card.js b/components/Cards/Card/Card.js
@@ -1,5 +1,5 @@
 import { bool, node, string } from 'prop-types';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import { getDataAttributes } from 'common/utils/prop-utils';
 
 Card.propTypes = {
@@ -18,13 +18,11 @@ function Card({ children, className, hasAnimationOnHover, ...props }) {
 
   return (
     <article
-      className={classNames(
+      className={twMerge(
         'items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none',
+        hasAnimationOnHover &&
+          'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg',
         className,
-        {
-          'shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg':
-            hasAnimationOnHover,
-        },
       )}
       {...customDataAttributes}
     >

diff --git a/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap b/components/Cards/Card/__tests__/__snapshots__/Card.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Card should render with many props assigned 1`] = `
 <article
-  className="items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none test-class shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg"
+  className="items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 focus-visible:outline-none shadow-sm transition-shadow duration-200 ease-linear hover:shadow-lg focus-visible:shadow-lg test-class"
 >
   Test
 </article>

diff --git a/components/Cards/ImageCard/ImageCard.js b/components/Cards/ImageCard/ImageCard.js
@@ -1,8 +1,7 @@
 import { bool, node, string } from 'prop-types';
-import classNames from 'classnames';
+import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
 import Card from 'components/Cards/Card/Card';
-import styles from './ImageCard.module.css';
 
 ImageCard.propTypes = {
   alt: string.isRequired,
@@ -18,23 +17,28 @@ ImageCard.defaultProps = {
 };
 
 function ImageCard({ alt, children, className, imageSource, isImageFirst }) {
-  const ImageComponent = (
-    <Image src={imageSource} alt={alt} width={325} height={225} layout="fixed" />
-  );
+  const ImageComponent = <Image src={imageSource} alt={alt} layout="fill" objectFit="cover" />;
 
-  const ContentComponent = <div className={styles.content}>{children}</div>;
+  const ContentComponent = (
+    <div className="flex items-center flex-col justify-start overflow-y-auto m-4">{children}</div>
+  );
 
   return (
-    <Card className={classNames(styles.ImageCard, className)}>
+    <Card
+      className={twMerge(
+        'md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%]',
+        className,
+      )}
+    >
       {isImageFirst ? (
         <>
-          {ImageComponent}
+          <div className="relative h-full w-full min-h-[225px]">{ImageComponent}</div>
           {ContentComponent}
         </>
       ) : (
         <>
           {ContentComponent}
-          {ImageComponent}
+          <div className="relative h-full">{ImageComponent}</div>
         </>
       )}
     </Card>

diff --git a/components/Cards/ImageCard/ImageCard.module.css b/components/Cards/ImageCard/ImageCard.module.css
diff --git a/components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap b/components/Cards/ImageCard/__tests__/__snapshots__/ImageCard.test.js.snap
@@ -2,43 +2,49 @@
 
 exports[`ImageCard should render with many props assigned 1`] = `
 <Card
-  className="ImageCard test"
+  className="md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%] test"
   hasAnimationOnHover={false}
 >
   <React.Fragment>
     <div
-      className="content"
+      className="flex items-center flex-col justify-start overflow-y-auto m-4"
     >
       <p>
         Testing!
       </p>
     </div>
-    <MockedNextImage
-      alt="Test title"
-      height={225}
-      layout="fixed"
-      src="/static/images/Family1.jpg"
-      width={325}
-    />
+    <div
+      className="relative h-full"
+    >
+      <MockedNextImage
+        alt="Test title"
+        layout="fill"
+        objectFit="cover"
+        src="/static/images/Family1.jpg"
+      />
+    </div>
   </React.Fragment>
 </Card>
 `;
 
 exports[`ImageCard should render with required props 1`] = `
 <Card
-  className="ImageCard"
+  className="md:flex-row flex-col md:h-56 md:w-[650px] md:max-w-none p-0 h-auto max-w-xs w-auto [&>*]:flex-[1_1_50%]"
   hasAnimationOnHover={false}
 >
   <React.Fragment>
-    <MockedNextImage
-      alt="Test title"
-      height={225}
-      layout="fixed"
-      src="/static/images/Family1.jpg"
-      width={325}
-    />
     <div
-      className="content"
+      className="relative h-full w-full min-h-[225px]"
+    >
+      <MockedNextImage
+        alt="Test title"
+        layout="fill"
+        objectFit="cover"
+        src="/static/images/Family1.jpg"
+      />
+    </div>
+    <div
+      className="flex items-center flex-col justify-start overflow-y-auto m-4"
     >
       <p>
         Testing!

diff --git a/components/Cards/ValueCard/__tests__/__snapshots__/ValueCard.test.js.snap b/components/Cards/ValueCard/__tests__/__snapshots__/ValueCard.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ValueCard should render with required props 1`] = `
 <article
-  className="items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] p-6 shadow-md focus-visible:outline-none !justify-start max-w-[400px] h-[400px] p-8 overflow-y-auto"
+  className="items-center bg-white [&_svg]:fill-themeSecondary text-themeSecondary flex flex-col flex-nowrap justify-around m-4 min-h-[100px] min-w-[100px] shadow-md focus-visible:outline-none !justify-start max-w-[400px] h-[400px] p-8 overflow-y-auto"
 >
   <h3
     className="text-center underline"

diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "react-scroll-up-button": "^1.6.4",
     "react-select": "^4.0.2",
     "react-youtube": "9.0.3",
+    "tailwind-merge": "^2.1.0",
     "yup": "^0.32.11"
   },
   "devDependencies": {

diff --git a/yarn.lock b/yarn.lock
@@ -1124,6 +1124,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.23.5":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
+  integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.20.7", "@babel/template@^7.22.15", "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -13100,6 +13107,13 @@ table@^6.8.1:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tailwind-merge@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.1.0.tgz#541b407e0ec255651e92571d96b685e48f01999c"
+  integrity sha512-l11VvI4nSwW7MtLSLYT4ldidDEUwQAMWuSHk7l4zcXZDgnCRa0V3OdCwFfM7DCzakVXMNRwAeje9maFFXT71dQ==
+  dependencies:
+    "@babel/runtime" "^7.23.5"
+
 tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"