SWED-2275 migrate cards in website documentation

SwedbankPay · Mar 13, 2024 · 5267f5d · 5267f5d
1 parent 69c5655
commit 5267f5d
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 72 deletions.
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>
 				),
 		)}

diff --git a/src/App/GetStarted/get-started/ForDesigners/index.js b/src/App/GetStarted/get-started/ForDesigners/index.js
@@ -112,22 +112,26 @@ const DiscoverMore = () => (
 	<section>
 		<h2 id="discover-more">Discover more</h2>
 		<div className="component-overview hide-arrow-icon">
-			<Link to="/identity/" className="cards cards-primary cards-wide">
-				<div className="cards-content m-0">
-					<span className="h3">Identity</span>
+			<Link to="/identity/" className="cards cards-wide min-w-initial">
+				<span className="h4">Identity</span>
+				<div className="cards-content">
 					<span>The philosophy behind our designs </span>
 				</div>
-				<i className="at-arrow-right small" aria-hidden="true"></i>
+				<div className="cards-cta">
+					<span className="arrow"></span>
+				</div>
 			</Link>
 			<Link
 				to="/components/components"
-				className="cards cards-primary cards-wide"
+				className="cards cards-wide min-w-initial"
 			>
-				<div className="cards-content m-0">
-					<span className="h3">Component</span>
+				<span className="h4">Component</span>
+				<div className="cards-content">
 					<span>See all available components</span>
 				</div>
-				<i className="at-arrow-right small" aria-hidden="true"></i>
+				<div className="cards-cta">
+					<span className="arrow"></span>
+				</div>
 			</Link>
 		</div>
 	</section>

diff --git a/src/App/GetStarted/get-started/ForDevelopers/index.js b/src/App/GetStarted/get-started/ForDevelopers/index.js
@@ -461,13 +461,15 @@ const DiscoverMore = () => (
 				<NavLink
 					key={card.url}
 					to={card.url}
-					className="cards cards-primary cards-wide"
+					className="cards cards-wide min-w-initial"
 				>
-					<div className="cards-content m-0">
-						<span className="h3">{card.title}</span>
+					<span className="h4">{card.title}</span>
+					<div className="cards-content">
 						<span>{card.text}</span>
 					</div>
-					<i className="at-arrow-right small" aria-hidden="true"></i>
+					<div className="cards-cta">
+						<span className="arrow"></span>
+					</div>
 				</NavLink>
 			))}
 		</div>

diff --git a/src/App/GetStarted/get-started/Introduction/index.js b/src/App/GetStarted/get-started/Introduction/index.js
@@ -17,27 +17,31 @@ const GetStarted = () => (
 		</p>
 
 		<div className="component-overview">
-			<Link to="../for-developers" className="cards cards-primary">
+			<Link to="../for-developers" className="cards">
 				<div className="cards-icon">
 					<i className="at-programming" aria-hidden="true"></i>
 				</div>
+				<span className="h4">For developers</span>
 				<div className="cards-content">
-					<span className="h4">For developers</span>
 					<span>Learn more about how to setup and use our system.</span>
 				</div>
-				<i className="at-arrow-right small" aria-hidden="true"></i>
+				<div className="cards-cta">
+					<span className="arrow"></span>
+				</div>
 			</Link>
-			<Link to="../for-designers" className="cards cards-primary">
+			<Link to="../for-designers" className="cards">
 				<div className="cards-icon">
 					<i className="at-paintbrush" aria-hidden="true"></i>
 				</div>
+				<span className="h4">For designers</span>
 				<div className="cards-content">
-					<span className="h4">For designers</span>
 					<span>
 						Get ready to use the Design Guide when designing in {brandTitle}.
 					</span>
 				</div>
-				<i className="at-arrow-right small" aria-hidden="true"></i>
+				<div className="cards-cta">
+					<span className="arrow"></span>
+				</div>
 			</Link>
 		</div>
 	</section>

diff --git a/src/App/Home/index.js b/src/App/Home/index.js
@@ -58,54 +58,41 @@ const Home = () => {
 								>
 									<Link
 										to={route.path}
-										className={`cards cards-primary${
-											route.wideCard ? " cards-wide m-3" : ""
+										className={`cards ${
+											route.wideCard
+												? " cards-wide w-100 max-w-initial m-3"
+												: ""
 										}`}
 									>
-										{route.wideCard ? (
-											<div className="cards-content flex-row align-items-center m-0 w-100">
-												<i
-													className={`${route.icon.name} small mr-3`}
-													aria-hidden="true"
-												></i>
-												<span className="h4 mb-0">{route.entryCardText}</span>
-												<i
-													className="at-arrow-right small ml-auto"
-													aria-hidden="true"
-												></i>
-											</div>
-										) : (
-											<div>
-												<div className="cards-icon">
-													<i
-														className={`${route.icon.name} small`}
-														aria-hidden="true"
-													></i>
-												</div>
-												<div className="cards-content">
-													<span className="h4">{route.title}</span>
-													<span>{route.entryCardText}</span>
-												</div>
-												<i
-													className="at-arrow-right small"
-													aria-hidden="true"
-												></i>
-											</div>
-										)}
+										<div className="cards-icon">
+											<i
+												className={`${route.icon.name} small mr-3`}
+												aria-hidden="true"
+											></i>
+										</div>
+										<span className="h4">{route.entryCardText}</span>
+										<div className="cards-content">
+											<span>{route.entryCardText}</span>
+										</div>
+										<div className="cards-cta">
+											<span className="arrow"></span>
+										</div>
 									</Link>
 								</div>
 							</React.Fragment>
 						))}
 					<div className="col-12 col-sm-6 col-lg-3 d-flex">
-						<Link to={"/utilities"} className="cards cards-primary">
+						<Link to={"/utilities"} className="cards">
 							<div className="cards-icon">
 								<i className="at-build-wall small" aria-hidden="true"></i>
 							</div>
+							<span className="h4">Utilities</span>
 							<div className="cards-content">
-								<span className="h4">Utilities</span>
 								<span>Utility cheat sheet</span>
 							</div>
-							<i className="at-arrow-right small" aria-hidden="true"></i>
+							<div className="cards-cta">
+								<span className="arrow"></span>
+							</div>
 						</Link>
 					</div>
 				</div>

diff --git a/src/App/Identity/identity/Identity/index.js b/src/App/Identity/identity/Identity/index.js
@@ -80,13 +80,15 @@ const MenuOverview = () => (
 				<Link
 					key={card.title}
 					to={`../${card.path}`}
-					className="cards cards-primary cards-wide"
+					className="cards cards-wide"
 				>
-					<div className="cards-content m-0">
-						<span className="h3">{card.title}</span>
+					<span className="h4">{card.title}</span>
+					<div className="cards-content">
 						<span>{card.text}</span>
 					</div>
-					<i className="at-arrow-right" aria-hidden="true"></i>
+					<div className="cards-cta">
+						<span className="arrow"></span>
+					</div>
 				</Link>
 			))}
 		</div>

diff --git a/src/App/Patterns/content/Patterns/index.js b/src/App/Patterns/content/Patterns/index.js
@@ -11,13 +11,13 @@ const Overview = () => (
 					<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} small mr-3`}></i>
-							<span className="h3 m-0">{card.title}</span>
+						<i className={`${card.icon} cards-icon`} aria-hidden="true"></i>
+						<span className="h4">{card.title}</span>
+						<div className="cards-cta">
+							<span className="arrow"></span>
 						</div>
-						<i className="at-arrow-right small" aria-hidden="true"></i>
 					</Link>
 				),
 		)}

diff --git a/src/App/Playbook/content/Playbook/index.js b/src/App/Playbook/content/Playbook/index.js
@@ -68,13 +68,15 @@ const Index = () => (
 				<Link
 					key={card.title}
 					to={`../${card.path}`}
-					className="cards cards-secondary cards-wide"
+					className="cards cards-wide"
 				>
-					<div className="cards-content m-0">
-						<span className="h3">{card.title}</span>
+					<span className="h4">{card.title}</span>
+					<div className="cards-content">
 						<span>{card.text}</span>
 					</div>
-					<i className="at-arrow-right small" aria-hidden="true"></i>
+					<div className="cards-cta">
+						<span className="arrow"></span>
+					</div>
 				</Link>
 			))}
 		</div>

diff --git a/src/less/utilities/sizing.less b/src/less/utilities/sizing.less
@@ -13,6 +13,15 @@ each(@properties, .(@abbrev, @prop) {
 .mw-100 {
 	max-width: 100% !important;
 }
+
+.max-w-initial {
+	max-width: initial !important;
+}
+
+.min-w-initial {
+	min-width: initial !important;
+}
+
 .mh-100 {
 	max-height: 100% !important;
 }