SWED-2275 fix cards tests

SwedbankPay · Mar 18, 2024 · f2701a2 · f2701a2
1 parent 51821c6
commit f2701a2
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 42 deletions.
diff --git a/src/App/Patterns/content/Patterns/__snapshots__/index.test.js.snap b/src/App/Patterns/content/Patterns/__snapshots__/index.test.js.snap
@@ -75,48 +75,48 @@ exports[`Patterns renders 1`] = `
       className="component-overview hide-arrow-icon"
     >
       <a
-        className="cards cards-primary cards-wide"
+        className="cards cards-wide min-w-initial"
         href="/forms"
         onClick={[Function]}
       >
+        <i
+          aria-hidden="true"
+          className="at-newspaper-newsletter cards-icon"
+        />
+        <span
+          className="h4"
+        >
+          Forms
+        </span>
         <div
-          className="cards-content flex-row align-items-center m-0 "
+          className="cards-cta"
         >
-          <i
-            className="at-newspaper-newsletter small mr-3"
-          />
           <span
-            className="h3 m-0"
-          >
-            Forms
-          </span>
+            className="arrow"
+          />
         </div>
-        <i
-          aria-hidden="true"
-          className="at-arrow-right small"
-        />
       </a>
       <a
-        className="cards cards-primary cards-wide"
+        className="cards cards-wide min-w-initial"
         href="/login"
         onClick={[Function]}
       >
+        <i
+          aria-hidden="true"
+          className="at-user-key cards-icon"
+        />
+        <span
+          className="h4"
+        >
+          Login
+        </span>
         <div
-          className="cards-content flex-row align-items-center m-0 "
+          className="cards-cta"
         >
-          <i
-            className="at-user-key small mr-3"
-          />
           <span
-            className="h3 m-0"
-          >
-            Login
-          </span>
+            className="arrow"
+          />
         </div>
-        <i
-          aria-hidden="true"
-          className="at-arrow-right small"
-        />
       </a>
     </section>
   </div>

diff --git a/src/App/components/Cards/__snapshots__/index.test.js.snap b/src/App/components/Cards/__snapshots__/index.test.js.snap
@@ -8,14 +8,14 @@ exports[`Component: Cards - renders a child object 1`] = `
   
 
   <div
-    className="card-content"
+    className="cards-content"
   >
     This is child text
   </div>
   
 
   <div
-    className="card-cta"
+    className="cards-cta"
   >
     
 
@@ -34,14 +34,14 @@ exports[`Component: Cards - renders a text in card-body 1`] = `
   
 
   <div
-    className="card-content"
+    className="cards-content"
   >
     Text that goes in card body
   </div>
   
 
   <div
-    className="card-cta"
+    className="cards-cta"
   >
     
 
@@ -67,7 +67,7 @@ exports[`Component: Cards - renders a title 1`] = `
   
 
   <div
-    className="card-cta"
+    className="cards-cta"
   >
     
 
@@ -86,7 +86,7 @@ exports[`Component: Cards - renders a wide card when wide is true 1`] = `
   
 
   <div
-    className="card-cta"
+    className="cards-cta"
   >
     
 
@@ -106,12 +106,12 @@ exports[`Component: Cards - renders an icon when icon is provided 1`] = `
 
   <i
     aria-hidden="true"
-    className="title-icon at-home"
+    className="cards-icon at-home"
   />
   
 
   <div
-    className="card-cta"
+    className="cards-cta"
   >
     
 
@@ -137,7 +137,7 @@ exports[`Component: Cards - renders an image 1`] = `
   
 
   <div
-    className="card-cta"
+    className="cards-cta"
   >
     
 

diff --git a/src/App/components/Cards/index.test.js b/src/App/components/Cards/index.test.js
@@ -43,7 +43,7 @@ describe("Component: Cards -", () => {
 		render(<Cards iconClasses="at-home" />);
 
 		expect(
-			screen.getByRole("link").querySelectorAll("i.title-icon").length,
+			screen.getByRole("link").querySelectorAll("i.cards-icon").length,
 		).toBe(1);
 
 		const componentForSnap = renderer.create(<Cards iconClasses="at-home" />);
@@ -56,7 +56,7 @@ describe("Component: Cards -", () => {
 			<Cards hasTextContent={true} textContent="Text that goes in card body" />,
 		);
 
-		expect(container.querySelector(".card-content")).toHaveTextContent(
+		expect(container.querySelector(".cards-content")).toHaveTextContent(
 			"Text that goes in card body",
 		);
 

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -347,20 +347,20 @@
 			opacity: 1;
 		}
 
-		49.9% {
+		29.9% {
 			transform: translateX(150%);
 			opacity: 1;
 		}
 
-		49.91% {
+		29.91% {
 			opacity: 0;
 		}
 
-		50.09% {
+		30.09% {
 			opacity: 1;
 		}
 
-		50.1% {
+		30.1% {
 			transform: translateX(-150%);
 		}
 
@@ -372,7 +372,9 @@
 }
 
 // TODO: silent support for non-migrated cards. Remove during next major release
-.cards:not(:has(.cards-cta)) {
+// cards.legacy: option for projects who need to support browsers with no implementation of the `has()` selector yet (to be removed during next major version release as well of course)
+.cards:not(:has(.cards-cta)),
+.cards.legacy {
 	display: flex;
 	flex-grow: 1;
 	flex-direction: column;