Release 10.8.6

Release 10.8.6

RELEASE_NOTES.md

@@ -1,19 +1,20 @@
 # Changelog
 
-## [10.8.5] - 25.08.2023
+## \[10.8.6\] - 13.09.2023
 
 ## Bug Fixes
 
-- We reverted back the way CSS stylesheets were imported internally. It caused a regression bug, svg files would not load when imported from CSS properties (e.g. checkbox, ...). Paths resolution were failing. (not an issue for projects importing CSS via CDN, only for the ones importing styles via the local npm package)
-
 ## Component changes
 
 ### Non breaking UI changes
 
+- add possibility to disable rotation of the dropdown toggle icon on active state
+- add possibility to style bank-id button as secondary
+
 ## Testing
 
-- E2E tests for topbar
+- E2E tests for dropdown component
 
 ## Design System website
 
-- fix a homepage UI bug (section's height)
+- expand components preview containers to full screen (only in Topbar component for now)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@swedbankpay/design-guide",
-	"version": "10.8.5",
+	"version": "10.8.6",
 	"description": "Swedbank Pay Design Guide",
 	"main": "src/scripts/main/index.js",
 	"scripts": {
@@ -61,7 +61,7 @@
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/preset-env": "7.20.2",
 		"@babel/preset-react": "^7.18.6",
-		"@playwright/test": "^1.34.3",
+		"@playwright/test": "^1.39.0",
 		"@sentry/webpack-plugin": "^1.20.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",

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.8.5
+    10.8.6
   </span>
 </div>
 `;

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

@@ -289,6 +289,24 @@ export const overviewButtons = {
 							},
 						],
 					},
+					{
+						id: "button-type",
+						title: "Button type",
+						values: [
+							{
+								name: "Primary",
+								value: {
+									type: "primary",
+								},
+							},
+							{
+								name: "Secondary",
+								value: {
+									type: "secondary",
+								},
+							},
+						],
+					},
 				],
 			},
 			title: "BankID button",

src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap

@@ -292,6 +292,18 @@ exports[`Documentation: Dropdown DeveloperDocumentation renders 1`] = `
   >
     Developer Documentation
   </h2>
+  <h3>
+    Style
+  </h3>
+  <p>
+    Add 
+    <code
+      className="code-tags code-tags-secondary"
+    >
+      .no-rotation
+    </code>
+     CSS class on the dropdown toggle to disable the icon rotation.
+  </p>
   <h3>
     JavaScript methods
   </h3>

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

@@ -147,7 +147,7 @@ const dropdownSidebarOptions = () => ({
 			],
 		},
 		{
-			id: "preffered_position",
+			id: "preferred_position",
 			title: "Position",
 			values: [
 				{
@@ -186,6 +186,19 @@ const dropdownSidebarOptions = () => ({
 			],
 		},
 	],
+	checkbox: [
+		{
+			inputs: [
+				{
+					id: "toggle-icon-rotation",
+					name: "Disable toggle icon rotation",
+					value: {
+						noRotation: true,
+					},
+				},
+			],
+		},
+	],
 });
 
 export const overviewDropdown = {
@@ -237,7 +250,7 @@ export const overviewDropdown = {
 						],
 					},
 					{
-						id: "preffered_position",
+						id: "preferred_position",
 						title: "Position",
 						values: [
 							{
@@ -276,6 +289,19 @@ export const overviewDropdown = {
 						],
 					},
 				],
+				checkbox: [
+					{
+						inputs: [
+							{
+								id: "toggle-icon-rotation",
+								name: "Disable toggle icon rotation",
+								value: {
+									noRotation: true,
+								},
+							},
+						],
+					},
+				],
 			},
 			title: "Select",
 			description: (
@@ -485,6 +511,7 @@ export const howToUse = [
 							icon="filter_list"
 							iconAfter={false}
 							largePadding={true}
+							noRotation={true}
 						/>
 						<ButtonComponent
 							type="secondary"