release 10.11.0 preparations

RELEASE_NOTES.md

@@ -1,19 +1,18 @@
 # Changelog
 
-## \[10.10.1\] - 14.02.2024
+## \[10.11.0\] - 21.03.2024
 
 ## 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.
+  - update Cards style & syntax. The update requires code changes from DG consuming devs in HTML. BUT there is silent support for "old" card syntax until next major version release. Please check the documentation for more details.
   - 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
 
-- Dependencies updates (finished all Node -> 20 update for pipeline)
+- Dependencies updates (finished GH actions Node -> 20 update & others misc)
 
 ## Design System website
 

package.json

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

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.10.1
+    10.11.0
   </span>
 </div>
 `;

src/App/Home/constants.js

@@ -4,6 +4,35 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.11.0",
+		title: "Cards UI update",
+		text: (
+			<>
+				<p>
+					Cards are receiving a major revamp. Not one of those cheap Hollywood
+					actor revamps they undergo when they sense their days are numbered.
+					No. A kind of revamp like when you return from living and studying
+					abroad and feel like a new person. That kind of revamp.
+				</p>
+				<p>
+					The new card component is more flexible. It's getting a fresh look and
+					additional combinations (img, icon, cta text and arrow, etc).
+				</p>
+				<p>
+					You still have the option for wide cards or not. But then you can
+					basically mix and match whatever you want. Or almost. Some
+					combinations are forbidden. Because that's life. Some things you can
+					do, and some you cannot. We decide; we make the rules. Too bad.
+				</p>
+				<p>
+					That being said, in cards-content, there, you can definitely add
+					anything you want. Now, we recommend following your <s>doctor</s>{" "}
+					designer's advice anyway.
+				</p>
+			</>
+		),
+	},
 	{
 		version: "10.10.1",
 		title: "Icons migration - step 2/2",

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

src/App/routes/components.js

@@ -71,6 +71,7 @@ module.exports = [
 				rootPath: "/components/cards",
 				componentPath: "components/Card",
 				icon: "at-square-mirror",
+				statusBadges: ["updated"],
 			},
 			{
 				title: "Charts",