diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 8f024cf23e..0de7217d1e 100644 --- a/RELEASE_NOTES.md +++ b/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 diff --git a/src/App/ComponentsDocumentation/components/Buttons/constants.js b/src/App/ComponentsDocumentation/components/Buttons/constants.js index 8f7a06cf4b..9bd807a4a7 100644 --- a/src/App/ComponentsDocumentation/components/Buttons/constants.js +++ b/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 = {
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.
), }, diff --git a/src/icons/bank-id/mitid_dk.svg b/src/icons/bank-id/mitid_dk.svg new file mode 100644 index 0000000000..fd6be07690 --- /dev/null +++ b/src/icons/bank-id/mitid_dk.svg @@ -0,0 +1 @@ + diff --git a/src/less/components/button.less b/src/less/components/button.less index 3055d3d4af..858b7a3d6b 100644 --- a/src/less/components/button.less +++ b/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; + } } }