Release 10.13.1

.github/workflows/pull-request.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Tests and linting
         run: npm run lint && npm run test:coverage
 
-      - uses: codecov/codecov-action@v4.6.0
+      - uses: codecov/codecov-action@v5.1.2
         # with:
         #   files: ./coverage/lcov.info
         # fail_ci_if_error: true

RELEASE_NOTES.md

@@ -1,31 +1,24 @@
 # Changelog
 
-## \[10.13.0\] - 11.11.2024
+## \[10.13.1\] - 10.01.2025
 
-## Identity
+## Playbook
 
-- Colors
+- Updates to the playbook:
 
-  - updated primary color from current value `#FDC129` to actual Brand guideline's `#FDC92A`
+## Identity
 
-- Logotypes
-  - updated logotype to the new fixed version
-  - update Documentation to enforce recommended pathname use
+- Updates the zip file containing the SwedbankPay logos with the new fixed versions
 
-## Component changes
+## PayEx side UI changes
 
-- Toggle
-  - updated colors
-  - added new theme colors (white and gray)
-- Expandable PayEx (contribution from Simon Wahlstrom 💫)
-  - font family change for PayEx expandables
-- Button PayEx (contribution from Johanna Prinz 💫)
-  - font family change
-  - colors updated
-- Table PayEx (contribution from Johanna Prinz 💫)
-  - colors updated
-  - hover color fixed
+- checkmark circle green color on success alerts is updated
 
 ## Technical changes
 
+- Browser support got significantly increased (now last 2 major versions, Firefox ESR, > 0,5% instead of 1%).
+  - This is only impacting projects consuming the CSS & JS straight from the CDN. If you're pulling the source files then the polyfilling/transpilling will only be done by your own build pipeline anyways.
+
+## Chores
+
 - updated dependencies

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.13.0",
+	"version": "10.13.1",
 	"description": "Swedbank Pay Design Guide",
 	"main": "src/scripts/main/index.js",
 	"scripts": {
@@ -35,7 +35,9 @@
 	"homepage": "https://github.com/swedbankpay/design.swedbankpay.com#readme",
 	"browserslist": [
 		"last 3 versions",
-		"> 1%",
+		"last 2 major versions",
+		"> 0.5%",
+		"Firefox ESR",
 		"not dead"
 	],
 	"dependencies": {
@@ -59,7 +61,7 @@
 		"@babel/eslint-parser": "^7.25.9",
 		"@babel/preset-env": "^7.26.0",
 		"@babel/preset-react": "^7.25.9",
-		"@playwright/test": "^1.48.2",
+		"@playwright/test": "^1.49.1",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.2.2",
 		"@testing-library/user-event": "^14.5.2",

postcss.config.js

@@ -1,3 +1,11 @@
+const postcssPresetEnv = require("postcss-preset-env");
+
 module.exports = {
-	plugins: [["postcss-preset-env"]],
+	plugins: [
+		postcssPresetEnv({
+			stage: 2,
+			minimumVendorImplementations: 2,
+			preserve: true,
+		}),
+	],
 };

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.13.0
+    10.13.1
   </span>
 </div>
 `;

src/App/GetStarted/get-started/ForDevelopers/__snapshots__/index.test.js.snap

@@ -1170,7 +1170,7 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
         <b>
           Target Browser:
         </b>
-         "Last 3 versions, &gt; 1%, not dead"
+         "Last 3 versions, Last 2 major versions, &gt; 0.5%, not dead"
       </p>
     </div>
     <h4>
@@ -1180,6 +1180,9 @@ exports[`GetStarted: ForDevelopers Installation renders 1`] = `
       It is up to every Project manager and development team to decide which browsers their product should support. If you want to support other browsers than the ones supported by the Design Guide you need to maintain and test the component code in in your project.
 
     </p>
+    <p>
+      We of course encourage to use PostCSS to do that in your build pipeline.
+    </p>
   </section>
 </section>
 `;

src/App/GetStarted/get-started/ForDevelopers/index.js

@@ -350,7 +350,8 @@ const BrowserSupport = () => (
 		<div className="alert alert-informative mt-4">
 			<i className="at-info-circle" aria-hidden="true"></i>
 			<p>
-				<b>Target Browser:</b> &quot;Last 3 versions, &gt; 1%, not dead&quot;
+				<b>Target Browser:</b> &quot;Last 3 versions, Last 2 major versions,
+				&gt; 0.5%, not dead&quot;
 			</p>
 		</div>
 		<h4>Browser support for products using the Design Guide</h4>
@@ -360,6 +361,9 @@ const BrowserSupport = () => (
 			browsers than the ones supported by the Design Guide you need to maintain
 			and test the component code in in your project.{" "}
 		</p>
+		<p>
+			We of course encourage to use PostCSS to do that in your build pipeline.
+		</p>
 	</section>
 );
 const GridAndBreakpoints = () => (

src/App/Home/constants.js

@@ -4,6 +4,45 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.13.1",
+		title: "Mostly docs & identity updates",
+		text: (
+			<>
+				<p>Happy New Year 🎉</p>
+				<p>
+					We're starting the year with some mostly documentation & identity
+					updates.
+				</p>
+				<p>
+					Biggest one first: We've updated the Playbook. For the ones paying
+					attention to it you'll like it.
+				</p>
+				<p>
+					Next on the list: the zip file containing the SwedbankPay logos is
+					updated with the logos fixed we've shipped in the previous minor
+					release.
+				</p>
+				<p>
+					We've also increased the browser support. We've decided to align with
+					the standard used by the JS frameworks (now last 2 major versions,
+					Firefox ESR, > 0,5% instead of 1%).
+					<br />
+					This being said, we recommend checking and adapting your support based
+					on your own users stats. This change is only impacting projects
+					consuming the CSS & JS straight from the CDN. If you're pulling the
+					source files then the polyfilling/transpilling will only be done by
+					your own build pipeline anyways.
+				</p>
+				<p>
+					Green side UI change: checkmark circle green color on success alerts
+					is updated
+				</p>
+				<p>And as usual, we've included several dependency updates.</p>
+				<p>Enjoy and see ya later alligator 🐊</p>
+			</>
+		),
+	},
 	{
 		version: "10.13.0",
 		title: "Not Ghosting You: New Updates Inside",
@@ -292,8 +331,9 @@ export const changeLogs = [
 						</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>`
+							converted from `
+							<div className="material-icons steps-icon">check</div>
+							`to `<i className="completed steps-icon"></i>`
 						</li>
 					</ul>
 				</p>

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.13.0
+    10.13.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.13.0
+    10.13.1
   </span>
 </div>
 `;