Release 10.10.1

RELEASE_NOTES.md

@@ -1,6 +1,6 @@
 # Changelog
 
-## \[10.10.1\] - xx.02.2024
+## \[10.10.1\] - 14.02.2024
 
 ## Component changes
 
@@ -15,15 +15,13 @@
   - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
 - Dialog
   - the close icon is now a cross set via CSS only, no need to add an `<i>` element anymore
+- Progress steps
+  - the "check" icon for steps completed should be converted to `<i class="completed steps-icon"></i>`
 
 ### UI bugfixes
 
 - Input addon (pre or post input) color when input is disabled
 
-## Maintenance
-
-- npm packages dependencies upgrades
-
 ## Design System website
 
 - Migrate icons used on the DS documentation website from Material-icons to Atlas + Swepay-icon custom icons

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.10.0",
+	"version": "10.10.1",
 	"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.0
+    10.10.1
   </span>
 </div>
 `;

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

@@ -35,7 +35,7 @@ export const SidebarNavList = [
 				title: "Grid",
 			},
 			{
-				icon: <i className="move-arrow-left-right" aria-hidden="true"></i>,
+				icon: <i className="at-move-arrow-left-right" aria-hidden="true"></i>,
 				title: "Spacing",
 			},
 		],

src/App/Home/constants.js

@@ -4,6 +4,42 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.10.1",
+		title: "Icons migration - step 2/2",
+		text: (
+			<>
+				<p>
+					We're back with the second step of our icons migration. This time, we
+					are replacing the components snippets.
+				</p>
+				<p>
+					We've also taken this opportunity to simplify a few things:
+					<ul>
+						<li>
+							Now you don't need to add the close icon element on the Tag &
+							Dialog components. We're taking care of it ourselves behind the
+							curtain using pseudo-elements.
+						</li>
+						<li>
+							Toast is also modified, but since it's composed via the script
+							shipped in the package nothing is needed from the devs consuming
+							it.
+						</li>
+						<li>
+							Progress steps: the "check" icon for steps completed should be
+							converted from `<div class="material-icons steps-icon">check</div>
+							`to `<i class="completed steps-icon"></i>`
+						</li>
+					</ul>
+				</p>
+				<p>
+					And we've migrated all our icons used on the documentation website to
+					the new ones 🚀 Let's go ! 🤩{" "}
+				</p>
+			</>
+		),
+	},
 	{
 		version: "10.10.0",
 		title: "Icons migrations - step 1",

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

src/App/components/Topbar/__snapshots__/index.test.js.snap

@@ -324,7 +324,7 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin
                       >
                         <i
                           aria-hidden="true"
-                          className="move-arrow-left-right"
+                          className="at-move-arrow-left-right"
                         />
                         Spacing
                       </a>

src/less/components/dialog.less

@@ -48,6 +48,7 @@
 
 			.dialog-close {
 				display: inline-grid;
+				position: relative;
 				touch-action: manipulation;
 				cursor: pointer;
 				user-select: none;