SWED-2331 style buttons UI update

RELEASE_NOTES.md

@@ -4,16 +4,9 @@
 
 ## Component changes
 
-- Cards
-  - update Cards style & syntax. The update requires code changes from DG consuming devs in HTML. BUT there is silent support for "old" card syntax until next major version release. Please check the documentation for more details.
-  - the new UI requires the introduction of new classes (.cards-cta, span.arrow, ...). Unless one of these new classes (`.cards-cta`) is present, then the old UI will be used, by checking conditionally `cards:has(.cards-cta)`. If your project does NOT support the :has() selector yet, but requires fallback support for the old UI, then add `.legacy` class to the `.cards` element.
-  - deprecated cards variants (.primary, .secondary, .tertiary)
-  - cards title text need to have the `.h4` class
+- Buttons
+  - minor non-breaking UI updates (height for size large, unify hover state)
 
 ## Technical changes
 
-- Dependencies updates (finished GH actions Node -> 20 update & others misc)
-
 ## Design System website
-
-- update Playbook Profiles content

package.json

@@ -60,7 +60,7 @@
 		"@babel/eslint-parser": "^7.23.10",
 		"@babel/preset-env": "^7.23.9",
 		"@babel/preset-react": "^7.23.3",
-		"@playwright/test": "^1.41.2",
+		"@playwright/test": "^1.43.0",
 		"@sentry/webpack-plugin": "^1.20.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.1.2",

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

@@ -91,6 +91,12 @@ const IconButtonOptions = (idAddOn) => ({
 			id: `${idAddOn ? idAddOn : ""}size_radio`,
 			title: "Sizes",
 			values: [
+				{
+					name: "Extra large",
+					value: {
+						size: "xl",
+					},
+				},
 				{
 					name: "Default (Large)",
 					value: {
@@ -111,6 +117,31 @@ const IconButtonOptions = (idAddOn) => ({
 				},
 			],
 		},
+		{
+			// button variant primary secondary tertiary
+			id: `${idAddOn ? idAddOn : ""}button-variant`,
+			title: "Button variant",
+			values: [
+				{
+					name: "Primary",
+					value: {
+						variant: "primary",
+					},
+				},
+				{
+					name: "Secondary",
+					value: {
+						variant: "secondary",
+					},
+				},
+				{
+					name: "Tertiary",
+					value: {
+						variant: "tertiary",
+					},
+				},
+			],
+		},
 	],
 });
 
@@ -230,6 +261,7 @@ export const overviewButtons = {
 					icon="at-cloud-database"
 					size="lg"
 					iconOnly={true}
+					variant="secondary"
 				/>
 			),
 			title: "Icon only button",

src/App/components/Button/index.js

@@ -21,6 +21,7 @@ const Button = ({
 	bankId,
 	iconAfter,
 	iconOnly,
+	variant,
 }) => {
 	const btnClasses = classnames(
 		"btn",
@@ -32,6 +33,7 @@ const Button = ({
 		disabled && href ? "disabled" : null,
 		bankId ? "btn-bank-id" : null,
 		className ? className : null,
+		type === "icon" && variant ? `btn-${variant}` : null,
 	);
 
 	const attrs = {
@@ -112,6 +114,8 @@ Button.propTypes = {
 		"default",
 		"primary",
 		"secondary",
+		"tertiary",
+		"icon",
 		"link",
 		"guiding-destructive",
 		"executive-destructive",
@@ -131,6 +135,7 @@ Button.propTypes = {
 	input: PropTypes.bool,
 	active: PropTypes.bool,
 	size: PropTypes.oneOf([
+		"xl",
 		"lg",
 		"sm",
 		"xs",
@@ -143,6 +148,7 @@ Button.propTypes = {
 	className: PropTypes.string,
 	iconAfter: PropTypes.bool,
 	iconOnly: PropTypes.bool,
+	variant: PropTypes.oneOf(["primary", "secondary", "tertiary"]),
 };
 
 export default Button;