SWED-2275 style cards-wide

SwedbankPay · Mar 11, 2024 · 2e256d7 · 2e256d7
1 parent 6c6e91f
commit 2e256d7
Show file tree

Hide file tree

Showing 2 changed files with 139 additions and 34 deletions.
diff --git a/src/App/components/Cards/index.js b/src/App/components/Cards/index.js
@@ -29,16 +29,26 @@ const Cards = ({
 	<>
 		{/* TODO: set conditional <a> || <button> */}
 		<OuterTagElement isButton={isButton} isWide={isWide}>
-			{imgSrc && (
-				<>
-					{"\n"}
-					<img
-						className={imgRatio ?? ""}
-						src={imgSrc}
-						alt="alt text to be set"
-					/>
-				</>
-			)}
+			{imgSrc &&
+				(isWide ? (
+					<div className="card-image">
+						{"\n"}
+						<img
+							className={imgRatio ?? ""}
+							src={imgSrc}
+							alt="alt text to be set"
+						/>
+					</div>
+				) : (
+					<>
+						{"\n"}
+						<img
+							className={imgRatio ?? ""}
+							src={imgSrc}
+							alt="alt text to be set"
+						/>
+					</>
+				))}
 			{/* no icon displayed if an image used as illustration */}
 			{iconClasses && !imgSrc && (
 				<>
@@ -64,7 +74,7 @@ const Cards = ({
 			{"\n"}
 			<div className="card-cta">
 				{"\n"}
-				{hasCTAText && <span>Continue</span>}
+				{hasCTAText && (!isWide || imgSrc) && <span>Continue</span>}
 				<span className="arrow"></span>
 			</div>
 		</OuterTagElement>

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -25,7 +25,8 @@
 	min-width: var(--min-width);
 	max-width: var(--max-width);
 	min-height: 200px;
-	padding: var(--padding-outer);
+	// padding: var(--padding-outer);
+	padding: 0;
 	margin: 2rem 0 1rem;
 	border: none;
 	border-radius: var(--border-radius);
@@ -36,6 +37,49 @@
 	transition: var(--transition-duration);
 	overflow: clip;
 
+	// start padding
+
+	.h4 {
+		padding-block-start: var(--padding-outer);
+		padding-inline-end: var(--padding-outer);
+	}
+
+	&:not(.cards-wide):has(.card-image, > img:first-child) .h4 {
+		padding-block-start: 0;
+	}
+
+	.title-icon {
+		padding-block-start: var(--padding-outer);
+	}
+
+	:is(.h4, .title-icon) {
+		padding-inline-start: var(--padding-outer);
+	}
+
+	.card-content {
+		padding-inline: var(--padding-outer);
+	}
+
+	.card-cta {
+		padding-block-end: var(--padding-outer);
+		padding-inline: var(--padding-outer);
+	}
+
+	&.cards-wide .card-content {
+		padding-block-end: var(--padding-outer);
+	}
+
+	&.cards-wide:has(.card-image)
+		:is(.h4, .title-icon, .card-content, .card-cta) {
+		padding-inline-start: 0;
+
+		&:is(.card-content) {
+			padding-block-end: 0;
+		}
+	}
+
+	// end paddings
+
 	&:has(> img:first-child) {
 		grid-template-areas:
 			"image"
@@ -51,9 +95,8 @@
 		&:before {
 			content: "";
 			aspect-ratio: 16 / 9;
-			width: calc(100% + 2 * var(--padding-outer));
-			margin: calc(0px - var(--padding-outer)) calc(0px - var(--padding-outer))
-				calc(1.5rem - var(--grid-min-gap));
+			width: 100%;
+			margin: 0 0 calc(1.5rem - var(--grid-min-gap));
 			grid-area: image;
 		}
 
@@ -66,12 +109,11 @@
 		}
 
 		& > img:first-child {
-			width: calc(100% + 2 * var(--padding-outer));
+			width: 100%;
 			aspect-ratio: 16 / 9;
 			grid-area: image;
 			object-fit: cover;
-			margin: calc(0px - var(--padding-outer)) calc(0px - var(--padding-outer))
-				0;
+			margin: 0;
 
 			position: absolute;
 
@@ -111,6 +153,8 @@
 			grid-template-areas:
 				"title cta"
 				"text-content cta";
+			grid-template-columns: 1fr auto;
+			grid-template-rows: auto auto;
 		}
 
 		&:not(:has(.card-content)) {
@@ -122,12 +166,6 @@
 			}
 		}
 
-		// TODO: is it supposed to be displayed or hidden ?
-		// not sure why I added this, now when looking in Figma it seems displayed
-		// .title-icon {
-		// 	display: none;
-		// }
-
 		.card-cta {
 			margin-block-start: 0;
 			height: 100%;
@@ -141,19 +179,74 @@
 			// if images then no icon
 		}
 
-		&:has(> img:first-child) {
+		// &:has(> img:first-child) {
+		// 	grid-template-areas:
+		// 		"image title cta"
+		// 		"image text-content cta";
+		// 	grid-template-columns: auto 1fr auto;
+
+		// 	&:before {
+		// 		content: "";
+		// 		aspect-ratio: 1;
+		// 		height: calc(100% + 2 * var(--padding-outer) + var(--grid-min-gap));
+		// 		width: auto;
+		// 		margin: calc(0px - var(--padding-outer))
+		// 			calc(0px - var(--padding-outer)) 0;
+		// 		grid-area: image;
+		// 	}
+
+		// 	& img {
+		// 		width: auto;
+		// 		aspect-ratio: 1;
+		// 		height: calc(100% + 2 * var(--padding-outer) + var(--grid-min-gap));
+		// 	}
+		// }
+
+		&:has(> .card-image) {
 			grid-template-areas:
-				"image title cta"
-				"image text-content cta";
-			grid-template-columns: auto 1fr auto;
+				"image title"
+				"image text-content"
+				"image cta";
+			grid-template-columns: auto 1fr;
+			grid-template-rows: auto 1fr min-content;
+			padding: 0;
+			min-width: 600px;
+			grid-column-gap: var(--padding-outer);
+
+			& .card-cta {
+				justify-self: start;
+				height: min-content;
+
+				& :not(.arrow) {
+					display: revert;
+				}
+			}
 
-			&:before {
-				content: "";
-				aspect-ratio: 1 / 1;
-				height: calc(100% + 2 * var(--padding-outer));
-				margin: calc(0px - var(--padding-outer))
-					calc(0px - var(--padding-outer)) 0;
+			.card-image {
+				// width: 100%;
 				grid-area: image;
+				object-fit: cover;
+				position: relative;
+				margin: 0;
+				height: 224px;
+				aspect-ratio: 1;
+
+				& img {
+					max-width: 100%;
+					object-fit: cover;
+					width: 100%;
+					height: 100%;
+					max-height: 100%;
+					position: absolute;
+					left: 0;
+				}
+			}
+
+			&:not(:has(.card-content)) {
+				grid-template-areas:
+					"image title"
+					"image cta";
+				grid-template-rows: auto min-content;
 			}
 		}
 	}
@@ -441,9 +534,11 @@ span.h4 {
 
 .title-icon {
 	grid-area: icon;
+	padding-block-end: 1.25lh; // this is meant to ensure the same gap below title-icon and title-text, since at of now text-box-trim does not exist, so we cannot enforce a consistant spacing between the title part and the text-content part. Once text-box-trim is widely supported remove it and add text-box-trim to the title-text
 }
 
 .card-content {
+	text-align: start;
 	grid-area: text-content;
 }