Merge branch 'develop' into feature/SWED-2249-create_playbook_doc

RELEASE_NOTES.md

@@ -1,20 +1,15 @@
 # Changelog
 
-## [10.8.5] - 25.08.2023
+## \[10.8.6\] - 13.09.2023
 
 ## Bug Fixes
 
 ## Component changes
 
 ### Non breaking UI changes
 
-- add possibility to disable rotation of the dropdown toggle icon on active state
-
 ## Testing
 
-- E2E tests for dropdown component
-
 ## Design System website
 
-- Add the Playbook section
-- expand components preview containers to full screen
+- Add the Playbook section in Identity

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.8.5",
+	"version": "10.8.6",
 	"description": "Swedbank Pay Design Guide",
 	"main": "src/scripts/main/index.js",
 	"scripts": {
@@ -61,7 +61,7 @@
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/preset-env": "7.20.2",
 		"@babel/preset-react": "^7.18.6",
-		"@playwright/test": "^1.34.3",
+		"@playwright/test": "^1.39.0",
 		"@sentry/webpack-plugin": "^1.20.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",

src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap

@@ -8,7 +8,7 @@ exports[`ComponentsDocumentation: index renders 1`] = `
     className="dg-current-version text-uppercase"
   >
     Design Guide – v. 
-    10.8.5
+    10.8.6
   </span>
 </div>
 `;

src/App/ComponentsDocumentation/components/Buttons/constants.js

@@ -289,6 +289,24 @@ export const overviewButtons = {
 							},
 						],
 					},
+					{
+						id: "button-type",
+						title: "Button type",
+						values: [
+							{
+								name: "Primary",
+								value: {
+									type: "primary",
+								},
+							},
+							{
+								name: "Secondary",
+								value: {
+									type: "secondary",
+								},
+							},
+						],
+					},
 				],
 			},
 			title: "BankID button",

src/App/Home/constants.js

@@ -4,6 +4,37 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.8.6",
+		title: "The one with little handy UI helpers",
+		text: (
+			<>
+				<p>We&apos;re back in action, armed with nifty UI helpers 🧰🚀🎁.</p>
+				<p>
+					Ever find yourself awake at night, sweating, pondering how life would
+					be better if there were a way to disable the icon rotation in the
+					dropdown toggle button when you open it? I know, right?
+				</p>
+				<p>
+					And what if I told you you could now style those bank-ID buttons as
+					secondary buttons? Isn&apos;t that something you&apos;ve been
+					daydreaming about for years?
+				</p>
+				<p>
+					But wait, there&apos;s more! How about a magical button that
+					transforms your component&apos;s preview container into a full-screen
+					extravaganza, delivering the ultimate home-cinema experience for your
+					components? It&apos;s like fulfilling a lifelong dream you didn&apos;t
+					even know you had since you were a little kid! 👶🎁
+					<br />
+					<span className="font-italic">
+						(for now only enabled for the Topbar component, but if YOU public
+						like it then we&apos;ll expand it to the rest 🎤)
+					</span>
+				</p>
+			</>
+		),
+	},
 	{
 		version: "10.8.5",
 		title: "The CSS url / Import Patch 🐛🔨",

src/App/Identity/__snapshots__/index.test.js.snap

@@ -8,7 +8,7 @@ exports[`Core: index renders 1`] = `
     className="dg-current-version text-uppercase"
   >
     Design Guide – v. 
-    10.8.5
+    10.8.6
   </span>
 </div>
 `;

src/App/Patterns/__snapshots__/index.test.js.snap

@@ -8,7 +8,7 @@ exports[`Patterns: index renders 1`] = `
     className="dg-current-version text-uppercase"
   >
     Design Guide – v. 
-    10.8.5
+    10.8.6
   </span>
 </div>
 `;

src/App/Utilities/__snapshots__/index.test.js.snap

@@ -8,7 +8,7 @@ exports[`Utilities: index renders 1`] = `
     className="dg-current-version text-uppercase"
   >
     Design Guide - v. 
-    10.8.5
+    10.8.6
   </span>
   <div
     className="d-flex align-items-center"

src/less/components/button.less

@@ -85,28 +85,8 @@
 			background-color: var(--btn-primary-color);
 		}
 
-		&.btn-bank-id {
-			display: flex;
-			justify-content: center;
-
-			i.bank-id {
-				height: 1.5rem;
-				width: 1.5rem;
-				display: inline-flex;
-				background-image: none;
-				margin-left: 0.5rem;
-				background-color: var(--btn-primary-text-color);
-
-				&-no,
-				&.no {
-					mask-image: url("../../icons/bank-id/bankid_no.svg");
-				}
-
-				&-se,
-				&.se {
-					mask-image: url("../../icons/bank-id/bankid_se.svg");
-				}
-			}
+		&.btn-bank-id i.bank-id {
+			background-color: var(--btn-primary-text-color);
 		}
 	}
 
@@ -125,6 +105,33 @@
 			box-shadow: inset 0 0 0 3px var(--btn-active-color);
 			border-color: var(--btn-active-color);
 		}
+
+		&.btn-bank-id i.bank-id {
+			background-color: var(--btn-secondary-text-color);
+		}
+	}
+
+	&:is(.btn-primary, .btn-secondary).btn-bank-id {
+		display: flex;
+		justify-content: center;
+
+		i.bank-id {
+			height: 1.5rem;
+			width: 1.5rem;
+			display: inline-flex;
+			background-image: none;
+			margin-left: 0.5rem;
+
+			&-no,
+			&.no {
+				mask-image: url("../../icons/bank-id/bankid_no.svg");
+			}
+
+			&-se,
+			&.se {
+				mask-image: url("../../icons/bank-id/bankid_se.svg");
+			}
+		}
 	}
 
 	&.btn-tertiary {