SWED-2275 cards redesign style #1

SwedbankPay · Jan 30, 2024 · 030594a · 030594a
1 parent 2c99df6
commit 030594a
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 106 deletions.
diff --git a/src/App/ComponentsDocumentation/components/Card/constants.js b/src/App/ComponentsDocumentation/components/Card/constants.js
@@ -61,24 +61,18 @@ export const overviewCards = {
 					},
 					{
 						id: "color_radio",
-						title: "Accent color",
+						title: "Color theme",
 						values: [
 							{
-								name: "Example 1",
-								value: {
-									type: "primary",
-								},
-							},
-							{
-								name: "Example 2",
+								name: "Default",
 								value: {
-									type: "secondary",
+									type: "",
 								},
 							},
 							{
-								name: "Example 3",
+								name: "Dark",
 								value: {
-									type: "tertiary",
+									type: "dark",
 								},
 							},
 						],

diff --git a/src/App/ComponentsDocumentation/components/Card/index.js b/src/App/ComponentsDocumentation/components/Card/index.js
@@ -2,7 +2,10 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 import { ComponentPreview, DocContainer, StatusBadge } from "@docutils";
+
+// TODO: remove this Card import during next major release, not offered for a long time now
 import CardComponent from "@components/Card";
+
 import MediaObject from "@components/MediaObject";
 import CodeTags from "@components/CodeTags";
 import { overviewCards } from "./constants";
@@ -88,6 +91,7 @@ const Overview = () => (
 	</>
 );
 
+// TODO: remove during next major release, not offered for a long time now
 const OldCard = () => (
 	<>
 		<h2 id="old-card">Old card</h2>

diff --git a/src/App/components/Card/index.js b/src/App/components/Card/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-// FIXME: is this component actually used ? why is there both Card && CardS components existing in parallel. It is at best confusing. At worst one is completely deprecated and I converted the test for nothing 😜 ahahhaha
+// TODO: remove during next major release, not offered for a long time now
 const Card = ({
 	type,
 	titleTxt,

diff --git a/src/App/components/Cards/index.js b/src/App/components/Cards/index.js
@@ -28,9 +28,12 @@ const Cards = ({ type, titleTxt, imgSrc, icon, text, children, wide }) => (
 						{children && children}
 					</div>
 					{"\n"}
-					<i className="material-icons" aria-hidden="true">
-						arrow_forward
-					</i>
+					<div className="action-cta">
+						<span>Continue</span>
+						<i className="material-icons" aria-hidden="true">
+							arrow_forward
+						</i>
+					</div>
 					{"\n"}
 				</a>
 				{"\n"}

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -1,95 +1,53 @@
 @import "../global.less";
 
 .cards {
+	--border-radius: 16px;
+	--cards-light-gray: var(--base-5);
+	--cards-dark-gray: var(--base-2);
+	--min-width: 240px;
+	--max-width: 700px;
+	--transition-duration: 0.1s;
+
 	display: flex;
 	flex-grow: 1;
 	flex-direction: column;
 	position: relative;
-	padding: 2.25rem 1.5rem 1.5rem;
+	min-width: var(--min-width);
+	max-width: var(--max-width);
+	padding: 1.5rem;
 	margin: 2rem 0 1rem;
-	border-radius: 4px;
-	box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
-	color: @brand-secondary;
+	border-radius: var(--border-radius);
+	color: var(--brand-secondary);
 	text-decoration: none;
-	background-color: @white;
+	background-color: var(--cards-light-gray);
 	cursor: pointer;
-	transition: 0.5s;
-
-	&:after {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		content: "";
-		width: 100%;
-		border-bottom-left-radius: 4px;
-		border-bottom-right-radius: 4px;
-		opacity: 0;
-		transition: opacity 0.5s ease-in-out;
-	}
+	transition: var(--transition-duration);
 
 	&:hover {
-		box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.15);
-		color: @brand-secondary;
+		background-color: var(--cards-dark-gray);
+		color: var(--white);
+		transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 
-		&:after {
-			opacity: 1;
+		.h4 {
+			color: var(--white);
+			transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 		}
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 2px @brand-secondary;
+		box-shadow: 0 0 0 2px var(--brand-secondary);
 		outline: 2px solid transparent;
-		color: @brand-secondary;
-
-		&:after {
-			opacity: 1;
-		}
-	}
-
-	&.cards-primary {
-		&:after {
-			border-bottom: 4px solid @brand-primary;
-		}
-
-		> i {
-			color: @brand-secondary;
-		}
-
-		.cards-icon {
-			color: @brand-secondary;
-			background-color: @brand-primary;
-
-			svg {
-				fill: @brand-secondary;
-			}
-		}
-	}
-
-	&.cards-secondary {
-		&:after {
-			border-bottom: 4px solid @brand-secondary-info-1;
-		}
-
-		.cards-icon {
-			background-color: @brand-secondary-info-1;
-
-			svg {
-				fill: @white;
-			}
-		}
+		color: var(--brand-secondary);
 	}
 
-	&.cards-tertiary {
-		&:after {
-			border-bottom: 4px solid @brand-secondary-info-2;
-		}
-
-		.cards-icon {
-			background-color: @brand-secondary-info-2;
+	&.cards-dark {
+		background-color: var(--cards-dark-gray);
+		color: var(--white);
+		transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 
-			svg {
-				fill: @white;
-			}
+		.h4 {
+			color: var(--white);
+			transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 		}
 	}
 
@@ -106,8 +64,6 @@
 
 		.cards-icon {
 			font-family: var(--brand-monofont);
-			height: 2rem;
-			top: -1rem;
 		}
 
 		.cards-content {
@@ -121,8 +77,22 @@
 		}
 	}
 
-	> i {
-		margin-top: auto;
+	// forward arrow icon at the bottom of the card
+	> i,
+	.action-cta i {
+		width: 18px;
+		height: 18px;
+
+		&.material-icons {
+			font-size: 18px;
+			margin-top: 3px;
+		}
+	}
+
+	// so far NOT set as mandatory parent of i (arrow at bottom of card) so don't break existing cards
+	.action-cta {
+		display: flex;
+		gap: 0.5rem;
 	}
 
 	> img {
@@ -134,17 +104,8 @@
 	}
 
 	.cards-icon {
-		display: flex;
-		position: absolute;
-		top: -1.25rem;
-		left: 1.5rem;
-		width: 2.5rem;
-		height: 2.5rem;
-		border-radius: 4px;
-		align-items: center;
-		justify-content: center;
-		color: @brand-secondary;
-		background-color: @brand-primary;
+		color: currentColor;
+		margin-bottom: 0.5rem;
 
 		svg {
 			max-width: 24px;
@@ -159,10 +120,13 @@
 		.h4 {
 			font-family: var(--brand-headline);
 			margin-top: 0;
+			margin-bottom: 0.5rem;
+			transition: all var(--transition-duration) cubic-bezier(1, 0, 0, 1);
 		}
 	}
 }
 
+// TODO: remove during next major release, not offered for a long time now
 .card {
 	display: flex;
 	flex-direction: column;
@@ -202,7 +166,7 @@
 			border-top: 7px solid @brand-primary-light;
 
 			* {
-				color: @brand-secondary;
+				color: var(--brand-secondary);
 			}
 
 			&:after {
@@ -232,7 +196,7 @@
 			border-top: 7px solid @brand-accent;
 
 			* {
-				color: @brand-secondary;
+				color: var(--brand-secondary);
 			}
 
 			&:after {
@@ -253,7 +217,7 @@
 
 		.card-header {
 			* {
-				color: @brand-secondary;
+				color: var(--brand-secondary);
 			}
 		}
 	}
@@ -279,15 +243,15 @@
 
 			& a {
 				text-decoration: none;
-				color: @brand-secondary;
+				color: var(--brand-secondary);
 			}
 		}
 		/* stylelint-enable selector-list-comma-newline-after */
 	}
 
 	.card-footer {
 		padding: 1rem 1.5rem;
-		background: rgba(0, 0, 0, 0.03);
+		background: rgb(0 0 0 / 3%);
 
 		.footer-text {
 			p {

diff --git a/src/less/components/payex/card.less b/src/less/components/payex/card.less
@@ -1,6 +1,9 @@
 @import "../card.less";
 
 .cards {
+	--cards-light-gray: var(--brand-bg-gray);
+	--cards-dark-gray: var(--brand-secondary);
+
 	&.cards-primary {
 		.cards-icon {
 			color: @white;