SWED-2469 add danish bankid mtid + doc

RELEASE_NOTES.md

@@ -4,16 +4,11 @@
 
 ## 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
+  - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported)
 
 ## Technical changes
 
-- Dependencies updates (finished GH actions Node -> 20 update & others misc)
+- chore deps (update deps packages)
 
 ## Design System website
-
-- update Playbook Profiles content

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

@@ -265,6 +265,12 @@ export const overviewButtons = {
 									bankId: "no",
 								},
 							},
+							{
+								name: "Denmark",
+								value: {
+									bankId: "dk",
+								},
+							},
 						],
 					},
 					{
@@ -319,8 +325,8 @@ export const overviewButtons = {
 				<p>
 					Use BankID buttons as the main call to action on a page when the
 					following action is signing or verifying something with BankID.
-					Currently only available for Swedish and Norwegian BankID. Avoid using
-					multiple BankID buttons on a single page.
+					Currently available for Swedish and Norwegian BankID as well as for
+					Danish MitId. Avoid using multiple BankID buttons on a single page.
 				</p>
 			),
 		},

src/less/components/button.less

@@ -123,15 +123,23 @@
 			background-image: none;
 			margin-left: 0.5rem;
 
-			&-no,
+			&.bank-id-no,
 			&.no {
 				mask-image: url("../../icons/bank-id/bankid_no.svg");
 			}
 
-			&-se,
+			&.bank-id-se,
 			&.se {
 				mask-image: url("../../icons/bank-id/bankid_se.svg");
 			}
+
+			&.bank-id-dk,
+			&.mitid-dk,
+			&.dk {
+				mask-image: url("../../icons/bank-id/mitid_dk.svg");
+				mask-repeat: no-repeat;
+				mask-position: center;
+			}
 		}
 	}