From 53e9d2e12fda974ae49e1ccffc156ed6da6bec26 Mon Sep 17 00:00:00 2001
From: Florian Sommariva <florian.sommariva@makina-corpus.com>
Date: Mon, 7 Aug 2023 13:27:54 +0200
Subject: [PATCH] Use tailwind instead of styled component for ResulCard
 component

---
 .../components/ResultCard/ResultCard.tsx      | 106 +++---------------
 .../__snapshots__/ResultCard.test.tsx.snap    |  24 ++--
 2 files changed, 29 insertions(+), 101 deletions(-)

diff --git a/frontend/src/components/pages/search/components/ResultCard/ResultCard.tsx b/frontend/src/components/pages/search/components/ResultCard/ResultCard.tsx
index 32b824012..1a056669f 100644
--- a/frontend/src/components/pages/search/components/ResultCard/ResultCard.tsx
+++ b/frontend/src/components/pages/search/components/ResultCard/ResultCard.tsx
@@ -1,15 +1,12 @@
 import { Modal } from 'components/Modal';
 import { DetailsCoverCarousel } from 'components/pages/details/components/DetailsCoverCarousel';
-import styled, { css } from 'styled-components';
-
-import { borderRadius, colorPalette, desktopOnly, getSpacing, typography } from 'stylesheet';
-import { flexGap } from 'services/cssHelpers';
 
 import { Chip } from 'components/Chip';
 import { Link } from 'components/Link';
 import { useListAndMapContext } from 'modules/map/ListAndMapContext';
 
 import { InformationCard } from 'modules/results/interface';
+import { cn } from 'services/utils/cn';
 import { Attachment } from '../../../../../modules/interface';
 import { ResultCardCarousel } from './ResultCardCarousel';
 import { InformationCardList } from './InformationCardList';
@@ -51,16 +48,19 @@ export const ResultCard: React.FC<ResultCardProps> = props => {
   const { setHoveredCardId } = useListAndMapContext();
 
   return (
-    <Container
+    <div
       onMouseEnter={() => {
         setHoveredCardId(hoverId);
       }}
       onMouseLeave={() => {
         setHoveredCardId(null);
       }}
-      className={className}
+      className={cn(
+        'flex flex-auto flex-col items-stretch border border border-solid border-greySoft hover:border-blackSemiTransparent transition rounded-xl overflow-hidden cursor-pointer',
+        asColumn !== true && 'desktop:flex-row',
+        className,
+      )}
       id="result_card"
-      asColumn={asColumn}
     >
       <Modal>
         {({ isFullscreen }) => (
@@ -83,101 +83,29 @@ export const ResultCard: React.FC<ResultCardProps> = props => {
       </Modal>
 
       <Link href={redirectionUrl} testId={`Link-ResultCard-${id}`} className="w-full">
-        <DetailsContainer>
-          <DetailsLayout>
-            {place !== null && <Place>{place}</Place>}
+        <div className="flex w-full p-4 desktop:p-6">
+          <div className="flex flex-col w-full">
+            {place !== null && <span className="text-greyDarkColored text-sm">{place}</span>}
 
             <TitleTag className="mt-1 text-ellipsis overflow-hidden whitespace-nowrap font-bold text-2xl color-primary1 desktop:text-clip desktop:whitespace-normal">
               {title}
             </TitleTag>
 
             {tags !== undefined && (
-              <TagContainer>
-                <TagLayout>
+              <div className="mt-2 desktop:mt-4">
+                <div className="flex gap-2 desktop:gap-4">
                   {tags
                     .filter(tag => tag !== null && Number(tag?.length) > 0)
                     .map(tag => (
                       <Chip key={tag}>{tag}</Chip>
                     ))}
-                </TagLayout>
-              </TagContainer>
+                </div>
+              </div>
             )}
             <InformationCardList informations={informations} />
-          </DetailsLayout>
-        </DetailsContainer>
+          </div>
+        </div>
       </Link>
-    </Container>
+    </div>
   );
 };
-
-const Container = styled.div<{ asColumn?: boolean }>`
-  display: flex;
-  flex: auto;
-  flex-direction: column;
-  cursor: pointer;
-  border: 1px solid ${colorPalette.greySoft.DEFAULT};
-  transition: all 500ms;
-  &:hover {
-    border-color: ${colorPalette.blackSemiTransparent};
-  }
-  border-radius: ${borderRadius.card};
-  overflow: hidden;
-  // Fix for overflow hidden with border radius in Safari, see https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
-  -webkit-mask-image: -webkit-radial-gradient(white, black);
-  mask-image: radial-gradient(white, black);
-
-  align-items: stretch;
-
-  ${({ asColumn }) =>
-    asColumn !== true &&
-    desktopOnly(
-      css`
-        flex-direction: row;
-      `,
-    )}
-`;
-
-const DetailsContainer = styled.div`
-  display: flex;
-  width: 100%;
-
-  padding: ${getSpacing(4)};
-
-  ${desktopOnly(
-    css`
-      padding: ${getSpacing(6)};
-    `,
-  )}
-`;
-
-const DetailsLayout = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-`;
-
-const Place = styled.span`
-  color: ${colorPalette.greyDarkColored};
-  ${typography.small}
-`;
-
-const TagContainer = styled.div`
-  display: flex;
-  margin-top: ${getSpacing(2)};
-
-  ${desktopOnly(
-    css`
-      margin-top: ${getSpacing(4)};
-    `,
-  )}
-`;
-
-const TagLayout = styled.div`
-  ${flexGap(getSpacing(2))}
-
-  ${desktopOnly(
-    css`
-      ${flexGap(getSpacing(4))}
-    `,
-  )}
-`;
diff --git a/frontend/src/components/pages/search/components/ResultCard/__tests__/__snapshots__/ResultCard.test.tsx.snap b/frontend/src/components/pages/search/components/ResultCard/__tests__/__snapshots__/ResultCard.test.tsx.snap
index 555ee8770..fbcd4b1c2 100644
--- a/frontend/src/components/pages/search/components/ResultCard/__tests__/__snapshots__/ResultCard.test.tsx.snap
+++ b/frontend/src/components/pages/search/components/ResultCard/__tests__/__snapshots__/ResultCard.test.tsx.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="sc-ipEyDJ WiwCL"
+        class="flex flex-auto flex-col items-stretch border border-solid border-greySoft hover:border-blackSemiTransparent transition rounded-xl overflow-hidden cursor-pointer desktop:flex-row"
         id="result_card"
       >
         <div
@@ -51,13 +51,13 @@ Object {
           href="/details-2-Balade-au-pays-des-menhirs"
         >
           <div
-            class="sc-csuSiG fEWNcB"
+            class="flex w-full p-4 desktop:p-6"
           >
             <div
-              class="sc-eDWCr gZuIOO"
+              class="flex flex-col w-full"
             >
               <span
-                class="sc-bqWxrE jgLiBi"
+                class="text-greyDarkColored text-sm"
               >
                 Saint-Etienne-du-Valdonnez
               </span>
@@ -67,10 +67,10 @@ Object {
                 Balade au pays des menhirs
               </h3>
               <div
-                class="sc-ksBlkl flWUCh"
+                class="mt-2 desktop:mt-4"
               >
                 <div
-                  class="sc-hBxehG cFOBNt"
+                  class="flex gap-2 desktop:gap-4"
                 >
                   <div
                     class="sc-pyfCe fwHJCn"
@@ -223,7 +223,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="sc-ipEyDJ WiwCL"
+      class="flex flex-auto flex-col items-stretch border border-solid border-greySoft hover:border-blackSemiTransparent transition rounded-xl overflow-hidden cursor-pointer desktop:flex-row"
       id="result_card"
     >
       <div
@@ -268,13 +268,13 @@ Object {
         href="/details-2-Balade-au-pays-des-menhirs"
       >
         <div
-          class="sc-csuSiG fEWNcB"
+          class="flex w-full p-4 desktop:p-6"
         >
           <div
-            class="sc-eDWCr gZuIOO"
+            class="flex flex-col w-full"
           >
             <span
-              class="sc-bqWxrE jgLiBi"
+              class="text-greyDarkColored text-sm"
             >
               Saint-Etienne-du-Valdonnez
             </span>
@@ -284,10 +284,10 @@ Object {
               Balade au pays des menhirs
             </h3>
             <div
-              class="sc-ksBlkl flWUCh"
+              class="mt-2 desktop:mt-4"
             >
               <div
-                class="sc-hBxehG cFOBNt"
+                class="flex gap-2 desktop:gap-4"
               >
                 <div
                   class="sc-pyfCe fwHJCn"