Release 10.12.0

RELEASE_NOTES.md

@@ -1,25 +1,27 @@
 # Changelog
 
-## \[10.11.0\] - 21.03.2024
+## \[10.12.0\] - 16.05.2024
 
 ## Component changes
 
 - Input fields
 
-  - labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style
+  - Labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style
 
 - Radio inputs
 
-  - minor non-breaking UI change to the default input radio
-  - minor UI changes to checkmark variant
-    - some non-breaking UI changes (colors, width, ...)
-    - Now the checkmark icon is achieved via span.checkmark-icon instead of an actual icon element loading an svg.
-    - It is now possible to add a subtext inside the checkmark variant (use span.subtext)
+  - Minor non-breaking UI change to the default input radio
+  - Minor UI changes to checkmark variant
+    - Some non-breaking UI changes (colors, width, ...)
+    - Now we achieve the checkmark icon using `span.checkmark-icon` instead of loading an actual icon element with an svg
+    - New "large" variant for checkmark radio input
+    - Possibility to add a subtext inside the checkmark variant (use `span.subtext`)
 
 - Buttons
 
-  - minor non-breaking UI updates (height for size large, unify hover state, modify active & focus-visible UI, and more)
+  - minor non-breaking UI updates (height for size large, unify hover state, update active & focus-visible UI, and more)
   - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)
+  - secondary buttons get a transparent background-color
 
 - Cards
 
@@ -32,13 +34,8 @@
   - silent support for the old syntax until the next major release
   - add transitions
 
-- Buttons
-  - secondary buttons get a transparent background-color
-
 ## Technical changes
 
 - chore deps (update deps packages minor versions)
 
 - remove Sentry from codebase
-
-## Design System website

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.11.0",
+	"version": "10.12.0",
 	"description": "Swedbank Pay Design Guide",
 	"main": "src/scripts/main/index.js",
 	"scripts": {

playwright.config.js

@@ -31,6 +31,12 @@ module.exports = defineConfig({
 		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
 		trace: "on-first-retry",
 	},
+	expect: {
+		timeout: 10000,
+		toMatchSnapshot: {
+			maxDiffPixelRatio: 0.01,
+		},
+	},
 
 	/* Configure projects for major browsers */
 	projects: [

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.11.0
+    10.12.0
   </span>
 </div>
 `;

src/App/ComponentsDocumentation/components/Dialog/index.js

@@ -79,6 +79,20 @@ const ExampleOldSyntax = () => (
 		<h2 id="overview">
 			Example Old Dialog component - silent support until next major release
 		</h2>
+		<p>
+			We're keeping a silent support for the "now old" Dialog component syntax.
+		</p>
+		<p>
+			We decided to move away in order to use the standard{" "}
+			<CodeTags type="secondary" code="<dialog>" /> element, and the benefits
+			its brings along (less scripts needed, better accessibility, etc.).
+		</p>
+		<p>
+			Some updates might be ported to the old syntax, but we recommend migrating
+			as soon as you can to enjoy all the new shiny updates (e.g. transition on
+			open/close, etc). Plus, the new syntax is <em>much</em> easier to use. The
+			support for it will be removed during the next major release.
+		</p>
 		<ComponentPreview language="html" showCasePanel codeFigure>
 			<button
 				className="btn btn-primary"

src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js

@@ -65,9 +65,6 @@ test.describe("toast variants are styled and named accordingly", () => {
 
 			await expect(toast).toHaveScreenshot(
 				`${brand}-${variant.name}-toast.png`,
-				{
-					maxDiffPixelRatio: 0.001,
-				},
 			);
 			await page.locator("#toast-close-button").click();
 			await expect(page.locator("#toast-close-button")).not.toBeVisible();

src/App/Home/constants.js

@@ -4,6 +4,93 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.12.0",
+		title: "UI Bonanza",
+		text: (
+			<>
+				<p>
+					We're back with a new release, and it's a big one! Buckle up, because
+					you're about to get <s>slapped</s> <em>spoiled</em> with a bunch of UI
+					updates and new variants.
+				</p>
+				<p>
+					Some people believe Spring is about Mari Kondo-ing. Losers*. We think
+					it's Christmas all year round. That's right 🎁 🎉.
+				</p>
+				<p>
+					We recommend going through the release notes for a more detailed
+					overview, but the main things are as follow.
+				</p>
+				<p>
+					<strong>Buttons</strong>
+					<ul>
+						<li>new icon button for Danish MitId 🇩🇰 🔐</li>
+						<li>minor non-breaking UI updates (e.g. hover color, ...)</li>
+					</ul>
+				</p>
+				<p>
+					<strong>Radio inputs</strong> - checkmark variant
+					<ul>
+						<li>
+							<em>BEFORE</em>: checkmark svg. <em>NOW</em>:{" "}
+							<CodeTags type="secondary" code="span.checkmark-icon" />. It will
+							make life easier. We take care of you in the background. Sit back
+							and relax 🍹
+						</li>
+						<li>new large option</li>
+						<li>new subtitle option</li>
+					</ul>
+					Plus several minor non-breaking UI updates (e.g. hover color, etc)
+				</p>
+				<p>
+					<strong>Dialog</strong>.
+					<br className="pt-2" />
+					We now use the standard <CodeTags
+						type="secondary"
+						code="<dialog>"
+					/>{" "}
+					element. Simpler syntax, built-in A11y, less script. In one word:
+					better 🚀. Move to it as soon as you can. Life shines brighter on the
+					other side 🌻
+					<br />
+					We keep a silent support for the old dialog syntax until the next
+					major release.
+					<br />
+					The new dialog gets all those UI freebies & options:
+					<ul>
+						<li>option for gray background (white is the default BG)</li>
+						<li>option for dividers</li>
+						<li>
+							transitions on open & close (+ options to decide if it comes from
+							bottom (default) or from the right)
+						</li>
+						<li>new backdrop color (brand-primary + blur)</li>
+						<li>2 modal sizes</li>
+					</ul>
+				</p>
+				<p>
+					And many more small changes, both some UI updates/fixes & some
+					dependency chores.
+					<br />
+					We hope you'll like it
+				</p>
+				<p className="small">
+					<span className="font-italic">
+						*Just to be clear, I hate the word "losers". There are no losers in
+						life, or maybe only the people who think life is a competition. I
+						just wanted it to be clear
+					</span>{" "}
+					😉
+					<span className="font-italic">
+						{" "}
+						Big love to all my fellow losers, we rock
+					</span>{" "}
+					😘.
+				</p>
+			</>
+		),
+	},
 	{
 		version: "10.11.0",
 		title: "Cards UI update",

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.11.0
+    10.12.0
   </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.11.0
+    10.12.0
   </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.11.0
+    10.12.0
   </span>
   <div
     className="d-flex align-items-center"

src/App/components/Topbar/index.js

@@ -182,7 +182,7 @@ const TopbarLogo = ({ png, legacy }) => (
 							? getDevLogo(legacy)
 							: `${process.env.basename}img/logo/${brand}-logo${
 									brand === "swedbankpay" ? (legacy ? "-v" : "-h") : ""
-							  }.svg`
+								}.svg`
 					}
 					alt={`${brand} logo`}
 					className={`${

src/less/components/topbar-experimental.less

@@ -213,6 +213,10 @@
 						background-color: var(--gray);
 						border: transparent;
 
+						&:hover:not(:active) {
+							background-color: var(--btn-hover);
+						}
+
 						> i {
 							font-size: 24px;
 						}