Release 10.9.1

Release 10.9.1

.github/workflows/janitor.yml

@@ -41,7 +41,7 @@ jobs:
         run: ./.github/scripts/variables.sh --brand ${{ matrix.brand }} --ref ${{ github.ref }}
 
       - name: Azure Login
-        uses: azure/login@v1.4.7
+        uses: azure/login@v1.6.1
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS_STAGE }}
 

.github/workflows/main.yml

@@ -27,7 +27,7 @@ jobs:
           node-version: 18.x
 
       - name: Cache dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
@@ -44,7 +44,7 @@ jobs:
           echo "{ \"latestVersion\" : \"${{ steps.variables.outputs.BRANCH }}\" }" > ./dist/latestVersion.json
 
       - name: Azure Login
-        uses: azure/login@v1.4.7
+        uses: azure/login@v1.6.1
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS_STAGE }}
 

.github/workflows/playwright.yml

@@ -21,7 +21,7 @@ jobs:
         run: npx playwright install --with-deps chromium
       - name: Run Playwright tests
         run: npx playwright test --ignore-snapshots --project=chromium
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: playwright-report

.github/workflows/pull-request.yml

@@ -22,7 +22,7 @@ jobs:
           node-version: 18.x
 
       - name: Cache dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.github/workflows/tag.yml

@@ -42,7 +42,7 @@ jobs:
           echo "{ \"latestVersion\" : \"${{ steps.variables.outputs.VERSION }}\" }" > ./dist/latestVersion.json
 
       - name: Azure Login
-        uses: azure/login@v1.4.7
+        uses: azure/login@v1.6.1
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS }}
 

README.md

@@ -144,7 +144,7 @@ released, a new version of the JavaScript will be as well.
 
 ## Code style
 
-Coding style rules are set in ```~/.eslintrc` & `~/.stylelintrc`.
+Coding style rules are set in `~/.eslintrc` & `~/.stylelintrc`.
 
 **_Make sure to follow the syntax rules enforced by ESLint & Stylelint._**
 

RELEASE_NOTES.md

@@ -1,26 +1,29 @@
 # Changelog
 
-## \[10.9.0\] - 24.11.2023
+## \[10.9.1\] - 24.01.2024
 
 ## Component changes
 
 ### Non breaking UI changes
 
-- Typography
+- PayEx - non-breaking UI updates
+  - color variables updates (brand-secondary hover, btn-secondary-hover, disabled, ...)
+  - input fields colors (for states disabled & success)
+  - badge colors
+  - skip-link font
+  - link
+    - hover state colors on bright mode
+    - hover state for inline links
+  - code tags secondary & tertiary background colors
+  -
 
-  - update typography values (line-heights)
-  - add text-wrap balance for headings & pretty for paragraphs (progressive enhancement)
+### Bugfix
 
-- Colors ( & colors utilities):
-
-  - some colors variables got updated
-  - removed the possibility to combine text-color utility classes WITH `.text-muted` to decrease their opacity
-  - `.text-muted` class still exist, but it will always mean a full opacity color
+- Tooltip
+  - fix position tooltip (it got detached from its parent element a few versions back)
 
 ## Maintenance
 
 - npm packages dependencies upgrades
 
 ## Design System website
-
-- Update the Identity/Colors page for SwedbankPay side

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.9.0",
+	"version": "10.9.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.9.0
+    10.9.1
   </span>
 </div>
 `;

src/App/Home/constants.js

@@ -4,6 +4,32 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.9.1",
+		title: "PayEx Open Source contributors are on fire 🔥🚀💚",
+		text: (
+			<>
+				<p>The Green side of the force is strengthening 💚</p>
+				<p>
+					A patch release full of UI updates from the Visby folks (hey guys 👋),
+					to bring some love to the green side of the Design System, and iterate
+					over the components to update the colors and their UI in general. Much
+					needed, and very much appreciated 🌟💚
+				</p>
+				<p>
+					Which means: You, yes, you 🫵, Front-End dev using the design system,
+					but who see some things could be improved ... get inspired by our
+					Visby stars and push some PR to fix this issue bothering you. Our dev
+					team is limited (well, it&apos;s only me really 😅) so we rely on all
+					of you to keep it great 🎸, robust 💪, and shiny ✨
+				</p>
+				<p>
+					Also some minor bugfix for the tooltip component, and some dependency
+					updates. But this is not as important 😉
+				</p>
+			</>
+		),
+	},
 	{
 		version: "10.9.0",
 		title: "Colors and Typography refresher 🎨",

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

src/less/components/payex/badge.less

@@ -1,11 +1,60 @@
 @import "../badge.less";
 
+@badge-list: {
+	default: @brand-success;
+	inactive: @brand-secondary-light-2;
+	warning: @brand-error;
+	yellow-light: @brand-success-light;
+	yellow-lighter: @brand-warning-light;
+	gray: @brand-secondary;
+	gray-light: @light-gray;
+	brown: @brand-bg-4;
+	brown-soft: @payex-dark-blue;
+	pink: @brand-info-light;
+	red-light: @brand-error-light;
+	blue: @payex-dark-blue;
+	red: @brand-error-light;
+	green: @brand-success-light;
+	turqouise: @brand-bg-4;
+	orange: @light-gray;	
+	yellow: @brand-warning-light; 
+
+	red-dark: @brand-error-dark;
+	white: @brand-bg-white;
+	brown-medium: @brown-medium;
+	brown-solid: @solid-brown;
+	brown-dark: @dark-brown;
+	brown-light: @brown-light;
+	turqouise-dark: @brand-turqouise-dark;
+	turqouise-darker: @brand-turqouise-darker;
+	turqouise-light: @brand-turquoise-light;
+	turqouise-lighter: @brand-turqouise-lighter;
+	apricot: @brand-apricot;
+	gray-dark: @brand-bg-gray;
+	orange-light: @brand-warning-light;
+	green-light: @brand-green-light;
+	blue-light: @brand-blue-light;
+}
+
 .badge {
 	font-family: var(--brand-default);
 
-	&.badge-default {
+	&.badge-default,
+	&.badge-red-light {
 		color: @white;
 	}
+
+	&.badge-brown,
+	&.badge-inactive,
+	&.badge-turqouise,
+	&.badge-yellow,
+	&.badge-orange,
+	&.badge-pink,
+	&.badge-green,
+	&.badge-red,
+	&.badge-red-light {
+		color: @brand-secondary;
+	}
 }
 
 span {

src/less/components/payex/button.less

@@ -33,7 +33,7 @@
 		}
 
 		&:active {
-			border: 1px solid @brand-secondary-info-1;
+			border: 1px solid var(--brand-primary);
 		}
 	}
 

src/less/components/payex/code-tags.less

@@ -0,0 +1,11 @@
+@import "../code-tags.less";
+
+.tag {
+	&.tag-secondary {
+		background-color: var(--brand-bg-4);
+	}
+
+	&.tag-tertiary {
+		background-color: var(--light-gray);
+	}
+}