Merge pull request #908 from SwedbankPay/feature/SWED-2249-create_pla…

…ybook_doc

SWED-2249 create playbook doc

RELEASE_NOTES.md

@@ -8,13 +8,8 @@
 
 ### Non breaking UI changes
 
-- add possibility to disable rotation of the dropdown toggle icon on active state
-- add possibility to style bank-id button as secondary
-
 ## Testing
 
-- E2E tests for dropdown component
-
 ## Design System website
 
-- expand components preview containers to full screen (only in Topbar component for now)
+- Add the Playbook section in Identity

src/App/Home/index.js

@@ -8,6 +8,7 @@ import Alert from "../components/Alert";
 
 const basename = process.env.basename;
 const brandTitle = process.env.brandTitle;
+const isSwedbankPay = process.env.isSwedbankPay;
 
 const Home = () => {
 	useEffect(() => {
@@ -39,61 +40,67 @@ const Home = () => {
 				</p>
 
 				<div className="row dg-cards-container mt-4">
-					{routes.map((route) => (
-						<React.Fragment key={route.title}>
-							<div
-								key={route.title}
-								className={
-									route.wideCard
-										? "w-100 order-5"
-										: "col-12 col-sm-6 col-lg-3 d-flex"
-								}
-							>
-								<Link
-									to={route.path}
-									className={`cards cards-primary${
-										route.wideCard ? " cards-wide m-3" : ""
-									}`}
+					{routes
+						.filter((route) =>
+							isSwedbankPay
+								? !route.title.toLowerCase().includes("patterns")
+								: !route.title.toLowerCase().includes("playbook")
+						)
+						.map((route) => (
+							<React.Fragment key={route.title}>
+								<div
+									key={route.title}
+									className={
+										route.wideCard
+											? "w-100 order-5"
+											: "col-12 col-sm-6 col-lg-3 d-flex"
+									}
 								>
-									{route.wideCard ? (
-										<div className="cards-content flex-row align-items-center m-0 w-100">
-											<i
-												className="material-icons material-icons-outlined mr-3 v-flip"
-												aria-hidden="true"
-											>
-												{route.icon.name}
-											</i>
-											<span className="h4 mb-0">{route.entryCardText}</span>
-											<i
-												className="material-icons material-icons-outlined ml-auto"
-												aria-hidden="true"
-											>
-												arrow_forward
-											</i>
-										</div>
-									) : (
-										<div>
-											<div className="cards-icon">
+									<Link
+										to={route.path}
+										className={`cards cards-primary${
+											route.wideCard ? " cards-wide m-3" : ""
+										}`}
+									>
+										{route.wideCard ? (
+											<div className="cards-content flex-row align-items-center m-0 w-100">
 												<i
-													className="material-icons-outlined"
+													className="material-icons material-icons-outlined mr-3 v-flip"
 													aria-hidden="true"
 												>
 													{route.icon.name}
 												</i>
+												<span className="h4 mb-0">{route.entryCardText}</span>
+												<i
+													className="material-icons material-icons-outlined ml-auto"
+													aria-hidden="true"
+												>
+													arrow_forward
+												</i>
 											</div>
-											<div className="cards-content">
-												<span className="h4">{route.title}</span>
-												<span>{route.entryCardText}</span>
+										) : (
+											<div>
+												<div className="cards-icon">
+													<i
+														className="material-icons-outlined"
+														aria-hidden="true"
+													>
+														{route.icon.name}
+													</i>
+												</div>
+												<div className="cards-content">
+													<span className="h4">{route.title}</span>
+													<span>{route.entryCardText}</span>
+												</div>
+												<i className="material-icons" aria-hidden="true">
+													arrow_forward
+												</i>
 											</div>
-											<i className="material-icons" aria-hidden="true">
-												arrow_forward
-											</i>
-										</div>
-									)}
-								</Link>
-							</div>
-						</React.Fragment>
-					))}
+										)}
+									</Link>
+								</div>
+							</React.Fragment>
+						))}
 					<div className="col-12 col-sm-6 col-lg-3 d-flex">
 						<Link to={"/utilities"} className="cards cards-primary">
 							<div className="cards-icon">

src/App/Identity/identity/Typography/typography.e2e.spec.js

@@ -8,16 +8,30 @@ test("Typography page exist", async ({ page }) => {
 			name: "Identity Learn about our fundamental principles",
 		})
 		.click();
-	await expect(
-		page.getByRole("link", {
-			name: "Typography",
-		})
-	).toHaveCount(page.viewportSize().width < 991 ? 1 : 2);
-	await page
-		.getByRole("link", {
-			name: "Typography See our fronts and sizing arrow_forward",
-		})
-		.click();
+
+	if (page.viewportSize().width > 991) {
+		await expect(
+			page.getByRole("link", {
+				name: "Typography",
+			})
+		).toHaveCount(1);
+		await page.getByRole("link", { name: "Typography" }).click();
+	} else {
+		await expect(
+			page.getByRole("link", {
+				name: "Typography",
+			})
+		).toHaveCount(0);
+		await page.getByLabel("Open menu").click();
+		await page.getByRole("button", { name: "Identity" }).click();
+
+		await expect(
+			page.getByRole("link", {
+				name: "Typography",
+			})
+		).toHaveCount(1);
+		await page.getByRole("link", { name: "Typography" }).click();
+	}
 });
 
 const viewportsVariants = [

src/App/Identity/index.js

@@ -3,7 +3,7 @@ import React from "react";
 import { RenderPage } from "../utils";
 
 const Core = () => (
-	<RenderPage path="/identity" initPath="/identity/identity" />
+	<RenderPage path="/accessibility" initPath="/identity/accessibility" />
 );
 
 export default Core;