Merge pull request #947 from SwedbankPay/feature/SWED-2275-cards_rede…

…sign SWED-2275 cards redesign style #1
SwedbankPay · Mar 20, 2024 · 8c2917e · 8c2917e
2 parents 2b3c313 + 8e5b0a6
commit 8c2917e
Show file tree

Hide file tree

Showing 20 changed files with 888 additions and 457 deletions.
diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -5,6 +5,11 @@
 ## Component changes
 
 - Cards
+  - new Cards UI. To migrate requires code changes from DG consuming devs. BUT silent support for "old" card syntax. Please check the documentation for more details.
+  - Silent support of the old UI until for the codebases who have not yet migrated their cards will be supported until the next major version release.
+  - the new UI requires the introduction of new classes (.cards-cta, span.arrow, ...). Unless one of these new classes (`.cards-cta`) is present, then the old UI will be used, by checking conditionally `cards:has(.cards-cta)`. If your project does NOT support the :has() selector yet, but requires fallback support for the old UI, then add `.legacy` class to the `.cards` element.
+  - deprecated cards variants (.primary, .secondary, .tertiary)
+  - cards title text need to have the `.h4` class
 
 ## Technical changes
 

diff --git a/src/App/ComponentsDocumentation/components/Card/constants.js b/src/App/ComponentsDocumentation/components/Card/constants.js
@@ -1,7 +1,16 @@
 import React from "react";
 import CardsComponent from "@components/Cards";
 
-const basename = process.env.basename;
+const defaultOptionsValues = {
+	isButton: false,
+	isWide: false,
+	iconClasses: "at-document",
+	hasTitle: true,
+	imgSrc: null,
+	imgRatio: null,
+	hasTextContent: true,
+	hasCTAText: true,
+};
 
 export const overviewCards = {
 	id: "overviewCards",
@@ -12,59 +21,140 @@ export const overviewCards = {
 			component: (
 				<CardsComponent
 					titleTxt="Title"
-					type="primary"
-					text="Write the supportive paragraph here."
-					icon={<i className="at-shop-cart" aria-hidden="true"></i>}
+					textContent="Write the supportive paragraph here."
+					hasCTAText={defaultOptionsValues.hasCTAText}
+					isButton={defaultOptionsValues.isButton}
+					isWide={false}
+					hasTitle={defaultOptionsValues.hasTitle}
+					imgSrc={defaultOptionsValues.imgSrc}
+					iconClasses={defaultOptionsValues.iconClasses}
+					hasTextContent={defaultOptionsValues.hasTextContent}
+					imgRatio={defaultOptionsValues.imgRatio}
 				/>
 			),
 			options: {
 				radio: [
 					{
-						id: "addons_radio",
-						title: "Addons",
+						id: "title",
+						title: "Title",
 						values: [
 							{
-								name: "Plain",
+								name: "Text only",
 								value: {
-									icon: null,
+									iconClasses: null,
+									hasTitle: true,
 								},
 							},
 							{
-								name: "With icon",
+								name: "Text + icon",
 								default: true,
 								value: {
-									icon: <i className="at-shop-cart" aria-hidden="true"></i>,
+									iconClasses: "at-shop-cart",
+									hasTitle: true,
 								},
 							},
 							{
-								name: "With image",
+								name: "Icon only",
+								value: {
+									iconClasses: "at-shop-cart",
+									hasTitle: false,
+								},
+							},
+						],
+					},
+					{
+						id: "has_image",
+						title: "Image illustration",
+						values: [
+							{
+								name: "No image",
+								default: true,
+								value: {
+									imgSrc: null,
+								},
+							},
+							{
+								name: "With image - 16/9 ratio",
+								value: {
+									imgSrc:
+										"https://design.swedbankpay.com/v/10.10.1/img/documentation/imagery/women-on-bus.svg",
+									icon: null,
+									imgRatio: "ratio-16-9",
+								},
+							},
+							{
+								name: "With image - 4/3 ratio",
+								value: {
+									imgSrc:
+										"https://design.swedbankpay.com/v/10.10.1/img/documentation/imagery/women-on-bus.svg",
+									icon: null,
+									imgRatio: "ratio-4-3",
+								},
+							},
+							{
+								name: "With image - 1/1 ratio",
 								value: {
-									imgSrc: `${basename}img/documentation/cards/img-example.png`,
+									imgSrc:
+										"https://design.swedbankpay.com/v/10.10.1/img/documentation/imagery/women-on-bus.svg",
 									icon: null,
+									imgRatio: "ratio-1-1",
 								},
 							},
 						],
 					},
 					{
-						id: "color_radio",
-						title: "Accent color",
+						id: "text_content",
+						title: "Text content",
 						values: [
 							{
-								name: "Example 1",
+								name: "With text content",
+								default: true,
 								value: {
-									type: "primary",
+									hasTextContent: true,
 								},
 							},
 							{
-								name: "Example 2",
+								name: "No text content",
 								value: {
-									type: "secondary",
+									hasTextContent: false,
 								},
 							},
+						],
+					},
+					{
+						id: "has_cta_text",
+						title: "CTA text",
+						values: [
 							{
-								name: "Example 3",
+								name: "With CTA text",
+								default: true,
 								value: {
-									type: "tertiary",
+									hasCTAText: true,
+								},
+							},
+							{
+								name: "Only arrow",
+								value: {
+									hasCTAText: false,
+								},
+							},
+						],
+					},
+					{
+						id: "card_element_tag",
+						title: "Card purpose",
+						values: [
+							{
+								name: "action <button>",
+								value: {
+									isButton: true,
+								},
+							},
+							{
+								name: "navigation link <a>",
+								default: true,
+								value: {
+									isButton: false,
 								},
 							},
 						],
@@ -75,58 +165,129 @@ export const overviewCards = {
 			description:
 				"The standard card component can be customized either icon or picture in order to make it easier for users to scan the content. Mixing simple card without icon should mostly be done when seperating the cards functionality such as when there are more cards to be displayed or when approperiate icons can not be found.",
 		},
+
 		{
 			tab: "Wide",
 			component: (
 				<CardsComponent
 					titleTxt="Title"
-					type="primary"
-					text="Write the supportive paragraph here."
-					wide
-					icon={<>01</>}
+					textContent="Write the supportive paragraph here."
+					hasCTAText={defaultOptionsValues.hasCTAText}
+					isButton={defaultOptionsValues.isButton}
+					isWide={true}
+					hasTitle={defaultOptionsValues.hasTitle}
+					imgSrc={defaultOptionsValues.imgSrc}
+					iconClasses={defaultOptionsValues.iconClasses}
+					hasTextContent={defaultOptionsValues.hasTextContent}
+					imgRatio={defaultOptionsValues.imgRatio}
 				/>
 			),
 			options: {
 				radio: [
 					{
-						id: "addons_radio",
-						title: "Addons",
+						id: "title",
+						title: "Title",
 						values: [
 							{
-								name: "Plain",
+								name: "Text only",
+								value: {
+									iconClasses: null,
+									hasTitle: true,
+								},
+							},
+							{
+								name: "Text + icon",
+								default: true,
 								value: {
+									iconClasses: "at-shop-cart",
+									hasTitle: true,
+								},
+							},
+							{
+								name: "Icon only",
+								value: {
+									iconClasses: "at-shop-cart",
+									hasTitle: false,
+									hasCTAText: true,
+								},
+							},
+						],
+					},
+					{
+						id: "has_image",
+						title: "Image illustration",
+						values: [
+							{
+								name: "No image",
+								default: true,
+								value: {
+									imgSrc: null,
+								},
+							},
+							{
+								name: "With image",
+								value: {
+									imgSrc:
+										"https://design.swedbankpay.com/v/10.10.1/img/documentation/imagery/women-on-bus.svg",
 									icon: null,
+									imgRatio: null,
 								},
 							},
+						],
+					},
+					{
+						id: "text_content",
+						title: "Text content",
+						values: [
 							{
-								name: "With icon",
+								name: "With text content",
 								default: true,
 								value: {
-									icon: <>01</>,
+									hasTextContent: true,
+								},
+							},
+							{
+								name: "No text content",
+								value: {
+									hasTextContent: false,
 								},
 							},
 						],
 					},
 					{
-						id: "color_radio",
-						title: "Accent color",
+						id: "has_cta_text",
+						title: "CTA text",
 						values: [
 							{
-								name: "Primary",
+								name: "With CTA text",
+								default: true,
 								value: {
-									type: "primary",
+									hasCTAText: true,
 								},
 							},
 							{
-								name: "Complementary 1",
+								name: "Only arrow",
 								value: {
-									type: "secondary",
+									hasCTAText: false,
 								},
 							},
+						],
+					},
+					{
+						id: "card_element_tag",
+						title: "Card purpose",
+						values: [
 							{
-								name: "Complementary 2",
+								name: "action <button>",
+								value: {
+									isButton: true,
+								},
+							},
+							{
+								name: "navigation link <a>",
+								default: true,
 								value: {
-									type: "tertiary",
+									isButton: false,
 								},
 							},
 						],
@@ -135,7 +296,7 @@ export const overviewCards = {
 			},
 			title: "Wide cards",
 			description:
-				"The wide card component can be used with and without numbering. Try to avoid mixing different card setups with each other as it could be confusing for the users to understand. Try to keep the title concise and to the point, to make it simple to understand and the design aligned with the cards as a group.",
+				"The wide card component can be customized either icon or picture in order to make it easier for users to scan the content. Try to avoid mixing different card setups with each other as it could be confusing for the users to understand. Try to keep the title concise and to the point, to make it simple to understand and the design aligned with the cards as a group.",
 		},
 	],
 };
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/ComponentsDocumentation/components/Components/index.js b/src/App/ComponentsDocumentation/components/Components/index.js
@@ -15,16 +15,25 @@ const MenuOverview = () => (
 					<Link
 						key={card.title}
 						to={`../${card.path}`}
-						className="cards cards-primary cards-wide"
+						className="cards cards-wide min-w-initial"
 					>
-						<div className="cards-content flex-row align-items-center m-0 ">
-							<i className={`${card.icon} mr-3`} aria-hidden="true"></i>
-							<span className="h3 m-0">{card.title}</span>
+						<i
+							className={`${card.icon} cards-icon align-self-center mb-1`}
+							aria-hidden="true"
+						></i>
+						<span
+							className={`h4 align-self-center ${card.deprecated ? "d-flex align-items-center" : ""}`}
+						>
+							{card.title}
 							{card.deprecated && (
-								<span className="badge badge-deprecated ml-3">Deprecated</span>
+								<span className="badge badge-deprecated ml-auto">
+									Deprecated
+								</span>
 							)}
+						</span>
+						<div className="cards-cta">
+							<span className="arrow"></span>
 						</div>
-						<i className="at-arrow-right small" aria-hidden="true"></i>
 					</Link>
 				),
 		)}