Release 10.12.2

RELEASE_NOTES.md

@@ -1,32 +1,16 @@
 # Changelog
 
-## \[10.12.1\] - 21.06.2024
+## \[10.12.2\] - 14.08.2024
 
 ## Component changes
 
-- Dialog
+- Typography
 
-  - if no invoker or close btn JS fails gracefully, providing helpful feedback in the console instead of throwing Error
-  - CSS support for old syntax now checks it is not picked up also by the new syntax (make sure not dialog.dialog)
-  - new dialog can have multiple invokers
+  - change font family of "title 6"/h6 from Arial to the brand's headline font (e.g. "SwedbankPay Headline Bold" or "Futura PT W08 Demi" depending on brand)
 
-- Buttons
+- Progress-steps
 
-  - loading spinner of buttons keep their aspect-ratio even if the buttons is squashed, when they're in overflow state
-
-- Cards
-
-  - add support for div.illustration & picture elements in lieu of the img element as illustrations of used in the cards component (changes in documentation will come in a future release)
-  - default cards wide with no img and no text content -> align-items: center (better default when title wraps)
+  - fix UI of the horizontal yellow line when the 1st and last steps are in state “ongoing selected”
 
 - Dropdown
-
-  - dropdown.init() method now accept `id` parameter to initialize specific dropdowns, instead of always all dropdowns found in the DOM
-
-- Utility classes
-
-  - Add utility classes for display grid and inline grid
-
-## Technical changes
-
-- chore deps (update deps packages minor versions)
+  - fix script for initating for a specific `id` (`init(id)`)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.12.1",
+	"version": "10.12.2",
 	"description": "Swedbank Pay Design Guide",
 	"main": "src/scripts/main/index.js",
 	"scripts": {
@@ -59,7 +59,7 @@
 		"@babel/eslint-parser": "^7.24.1",
 		"@babel/preset-env": "^7.24.4",
 		"@babel/preset-react": "^7.24.1",
-		"@playwright/test": "^1.44.0",
+		"@playwright/test": "^1.45.3",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.2.2",
 		"@testing-library/user-event": "^14.5.2",

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.12.1
+    10.12.2
   </span>
 </div>
 `;

src/App/Home/constants.js

@@ -4,6 +4,40 @@ import CodeTags from "@components/CodeTags";
 const basename = process.env.basename;
 
 export const changeLogs = [
+	{
+		version: "10.12.2",
+		title: "We're back, fresh and tanned with a summer breeze",
+		text: (
+			<>
+				<p>
+					How are you lovely people? Us in the design-system galaxy we&apos;re
+					doing great, thanks for asking. And we&apos;re bringing with us some
+					nice patches.
+				</p>
+				<p>
+					<strong>Typography</strong>
+					<br />
+					"Title 6" font-family switches from Arial to the brand's headline font
+					(e.g. Swedbank Headline Bold)
+				</p>
+				<p>
+					<strong>Progress bar</strong>
+					<br />
+					We're fixing a UI bug spotted by our beloved Martina, namely the
+					horizontal lines for the 1st and last steps when they are in selected
+					state.
+				</p>
+				<p>
+					<strong>Dropdown</strong>
+					<br />A big thank you to Ludvik Lund for his contribution, fixing a
+					bug in the dropdown script when initiating a specific dropdown (using
+					the dropdown element id as param for the init function). It should
+					work fine now
+				</p>
+				<p>Enjoy 💫</p>
+			</>
+		),
+	},
 	{
 		version: "10.12.1",
 		title: "Minor Bug Fixes & Supports Increase",

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.12.1
+    10.12.2
   </span>
 </div>
 `;

src/App/Identity/identity/Typography/index.js

@@ -134,7 +134,7 @@ const Desktop = () => (
 					<td>
 						<h6>Title 6</h6>
 					</td>
-					<td>Arial bold</td>
+					<td>Swedbank Headline Bold</td>
 					<td>14 px</td>
 					<td>20 px</td>
 				</tr>
@@ -238,7 +238,7 @@ const Mobile = () => (
 					<td>
 						<h6>Title 6</h6>
 					</td>
-					<td>Arial bold</td>
+					<td>Swedbank Headline Bold</td>
 					<td>14 px</td>
 					<td>22 px</td>
 				</tr>

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

src/less/components/datepicker.less

@@ -24,8 +24,12 @@
 	box-sizing: border-box;
 	touch-action: manipulation;
 	background: #fff;
-	box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6,
-		0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
+	box-shadow:
+		1px 0 0 #e6e6e6,
+		-1px 0 0 #e6e6e6,
+		0 1px 0 #e6e6e6,
+		0 -1px 0 #e6e6e6,
+		0 3px 13px rgba(0, 0, 0, 0.08);
 }
 .flatpickr-calendar.open,
 .flatpickr-calendar.inline {
@@ -63,7 +67,9 @@
 	.flatpickr-days
 	.dayContainer:nth-child(n + 2)
 	.flatpickr-day.inRange:nth-child(7n + 1) {
-	box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+	box-shadow:
+		-2px 0 0 #e6e6e6,
+		5px 0 0 #e6e6e6;
 }
 .flatpickr-calendar .hasWeeks .dayContainer,
 .flatpickr-calendar .hasTime .dayContainer {
@@ -530,7 +536,9 @@ span.flatpickr-weekday {
 }
 .flatpickr-day.inRange {
 	border-radius: 0;
-	box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
+	box-shadow:
+		-5px 0 0 #e6e6e6,
+		5px 0 0 #e6e6e6;
 }
 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.flatpickr-disabled:hover,
@@ -551,7 +559,9 @@ span.flatpickr-weekday {
 }
 .flatpickr-day.week.selected {
 	border-radius: 0;
-	box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
+	box-shadow:
+		-5px 0 0 #569ff7,
+		5px 0 0 #569ff7;
 }
 .flatpickr-day.hidden {
 	visibility: hidden;
@@ -749,8 +759,8 @@ span.flatpickr-weekday {
 	}
 
 	.flatpickr-day.selected:hover {
-		background: @text-gray;
-		border: @text-gray;
+		background: var(--text-gray);
+		border: var(--text-gray);
 	}
 
 	.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),