diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index a31162b532..f83439b9e5 100644 --- a/.github/workflows/pull-request.yml +++ b/.github/workflows/pull-request.yml @@ -34,7 +34,7 @@ jobs: - name: Tests and linting run: npm run lint && npm run test:coverage - - uses: codecov/codecov-action@v4.2.0 + - uses: codecov/codecov-action@v4.3.0 # with: # files: ./coverage/lcov.info # fail_ci_if_error: true diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 8f75f31fa1..824a3ae63e 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -4,9 +4,18 @@ ## Component changes +- Input fields + + - labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style + +- Buttons + - minor non-breaking UI updates (height for size large, unify hover state, modify active & focus-visible UI, and more) + - add Danish MitId button style (you can use either `i.bank-id-dk` OR `i.mitid-dk`, both are supported) + ## Technical changes -- chore update deps minor versions +- chore deps (update deps packages minor versions) + - remove Sentry from codebase ## Design System website diff --git a/src/App/ComponentsDocumentation/components/Buttons/constants.js b/src/App/ComponentsDocumentation/components/Buttons/constants.js index 8f7a06cf4b..4a2265b94a 100644 --- a/src/App/ComponentsDocumentation/components/Buttons/constants.js +++ b/src/App/ComponentsDocumentation/components/Buttons/constants.js @@ -92,7 +92,7 @@ const IconButtonOptions = (idAddOn) => ({ title: "Sizes", values: [ { - name: "Default (Large)", + name: "Large (default)", value: { size: "lg", }, @@ -111,6 +111,32 @@ const IconButtonOptions = (idAddOn) => ({ }, ], }, + { + // button variant primary secondary tertiary + id: `${idAddOn ? idAddOn : ""}button-variant`, + title: "Button variant", + values: [ + { + name: "Primary", + value: { + variant: "primary", + }, + }, + { + name: "Secondary", + default: true, + value: { + variant: "secondary", + }, + }, + { + name: "Tertiary", + value: { + variant: "tertiary", + }, + }, + ], + }, ], }); @@ -230,6 +256,7 @@ export const overviewButtons = { icon="at-cloud-database" size="lg" iconOnly={true} + variant="secondary" /> ), title: "Icon only button", @@ -265,6 +292,12 @@ export const overviewButtons = { bankId: "no", }, }, + { + name: "Denmark", + value: { + bankId: "dk", + }, + }, ], }, { @@ -319,8 +352,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/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png index 87c6209270..e8e69e8c03 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png index e9ae9944dc..aa45cb2220 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png index e422427538..90396c3d7a 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png index 9e8ac6f388..bb79746ef6 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png index f1f21b4563..9cb4618363 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png index c3f06effd0..f809845642 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png index 57d49cbf69..6a46e353a0 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png index 6e79242e98..3c50a805cc 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png index d49d18032b..14fdd508f5 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png index 8adb5683fd..372bc692b4 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png index cfdb17dab5..8b823c8927 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png index 9793a5d7ab..ffeffa0e2d 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png index a80eec623a..9b42f2671f 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png index 3cbbb33d20..fa251c4ab3 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png index bd6f01905d..65caf9c43a 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png index c8a7b39c82..3bb64dfd86 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png index 991b10aaea..8ad1b4b687 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png index 0523a9f97b..33338aae43 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png index 74f9146f98..65a5111e27 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png index 37dc846346..5f0d944812 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png index 3d73cfb32e..30d1e18891 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png index 375a6ee061..db1f0d13d3 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png index 03361ca9ba..87640756f9 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png index e00e4b15cd..d80e600a24 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png index d90cec5726..871ed6d0fd 100644 Binary files a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png differ diff --git a/src/App/components/Button/index.js b/src/App/components/Button/index.js index 94ecf3e293..0489ad33b7 100644 --- a/src/App/components/Button/index.js +++ b/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; diff --git a/src/icons/bank-id/mitid_dk.svg b/src/icons/bank-id/mitid_dk.svg new file mode 100644 index 0000000000..c51d06d989 --- /dev/null +++ b/src/icons/bank-id/mitid_dk.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/less/components/button.less b/src/less/components/button.less index 3055d3d4af..865eb4bce8 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -13,50 +13,58 @@ touch-action: manipulation; cursor: pointer; line-height: 23.72px; - border: 1px solid transparent; + border: none; white-space: nowrap; user-select: none; - height: 60px; + height: 3.5rem; border-radius: var(--border-radius); - font-size: 18px; + font-size: 1.125rem; padding: 12px 16px; + &.btn-icon:is(.btn-xs, .btn-sm, .btn-lg, .btn-xl) { + height: fit-content; + } + &.btn-xl { - height: 72px; - font-size: 20px; + height: 4.5rem; + font-size: 1.25rem; line-height: 24px; padding: 24px; } &.btn-lg { - height: 60px; - font-size: 18px; + height: 3.5rem; + font-size: 1.125rem; line-height: 23.72px; padding: 12px 16px; &.btn-icon { + padding: 15px; + i { - font-size: 24px; + font-size: 1.5rem; } } } &.btn-sm { - height: 48px; - font-size: 14px; - line-height: 16px; - padding: 16px; + height: 3rem; + font-size: 0.875rem; + line-height: 1rem; + padding: 1rem; &.btn-icon { + padding: 11px; + i { - font-size: 20px; + font-size: 1.5rem; } } } &.btn-xs { - height: 38px; - font-size: 14px; + height: 2.375rem; + font-size: 0.875rem; line-height: 16px; padding: 12px; @@ -66,45 +74,43 @@ display: inline-grid; place-content: center; place-items: center; + padding: 9px; i { - font-size: 18px; + font-size: 1.125rem; } } } + &:not(.loading, [disabled], .disabled, :active):hover { + background-color: var(--btn-hover); + color: var(--white); + } + + &:focus-visible { + outline: 3px solid var(--btn-active-color); + outline-offset: 0.25rem; + border-radius: 0.125rem; + } + &.btn-primary { background-color: var(--btn-primary-color); color: var(--btn-primary-text-color); - &:not(.loading, [disabled], .disabled):hover { - background-color: var(--btn-primary-hover); - } - - &:not(.loading, [disabled], .disabled):active { - outline: 3px solid var(--btn-active-color); - background-color: var(--btn-primary-color); - } - &.btn-bank-id i.bank-id { background-color: var(--btn-primary-text-color); } } &.btn-secondary, - &.btn-icon { + &.btn-icon:not(.btn-primary, .btn-tertiary) { background-color: var(--btn-secondary-color); color: var(--btn-secondary-text-color); border: 1px solid var(--btn-secondary-border-color); - &:not(.loading, [disabled], .disabled):hover { - box-shadow: inset 0 0 0 3px var(--btn-secondary-hover); - border-color: var(--btn-secondary-hover); - } - - &:not(.loading, [disabled], .disabled):active { - box-shadow: inset 0 0 0 3px var(--btn-active-color); - border-color: var(--btn-active-color); + &.disabled, + &[disabled] { + border-color: var(--btn-disabled-text); } &.btn-bank-id i.bank-id { @@ -123,30 +129,29 @@ 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; + } } } &.btn-tertiary { background-color: var(--btn-tertiary-color); color: var(--btn-tertiary-text-color); - - &:not(.loading, [disabled], .disabled):hover { - background-color: var(--btn-tertiary-hover); - } - - &:not(.loading, [disabled], .disabled):active { - box-shadow: inset 0 0 0 3px var(--btn-active-color); - border-color: var(--btn-active-color); - } } &.disabled:not(.loading), @@ -165,7 +170,7 @@ box-shadow: none; &.btn-secondary { - border-color: var(--btn-disabled-text); + outline-color: var(--btn-disabled-text); } &.btn-primary, @@ -217,7 +222,7 @@ &.btn-primary { &:after { - border-color: var(--btn-primary-hover); + border-color: var(--gray); border-left-color: var(--btn-primary-text-color); } } @@ -231,7 +236,7 @@ &.btn-tertiary { &:after { - border-color: var(--btn-tertiary-hover); + border-color: var(--gray); border-left-color: var(--btn-secondary-text-color); } } diff --git a/src/less/components/dropdown.less b/src/less/components/dropdown.less index ca7c6911ec..b77a866447 100644 --- a/src/less/components/dropdown.less +++ b/src/less/components/dropdown.less @@ -149,9 +149,16 @@ background-color: var(--white); color: var(--brand-secondary); - &:hover { - box-shadow: inset 0 0 0 3px var(--btn-secondary-hover); - border-color: var(--btn-secondary-hover); + &:hover:not(:active) { + background-color: var(--btn-hover); + color: var(--white); + border-color: transparent; + } + + &:not(.disabled):focus-visible { + outline: 3px solid var(--btn-active-color); + outline-offset: 0.25rem; + border-radius: 0.125rem; } & i { diff --git a/src/less/components/form.less b/src/less/components/form.less index edc61472e9..358f06d9e8 100644 --- a/src/less/components/form.less +++ b/src/less/components/form.less @@ -232,14 +232,20 @@ legend { } } +// typography here comes from typography `h4, .h4` (in typography.less) .form-group { label { - font-size: 1.25rem; - line-height: 1.5rem; + font-size: 1.125rem; + line-height: 1.625rem; margin-bottom: 0.5rem; color: var(--brand-secondary); font-family: var(--brand-headline); font-weight: var(--font-weight-header, 400); + + @media screen and (min-width: @screen-sm-min) { + font-size: 1.25rem; + line-height: 1.875rem; + } } &.small { diff --git a/src/less/core/typography.less b/src/less/core/typography.less index 0576ecd1e2..69da626ed1 100644 --- a/src/less/core/typography.less +++ b/src/less/core/typography.less @@ -118,6 +118,7 @@ h3, } } +// any change here should also be applied to `.form-group label` (in form.less) h4, .h4 { font-family: var(--brand-headline); @@ -319,6 +320,7 @@ blockquote, } } + // any change here should also be applied to `.form-group label` (in form.less) h4, .h4 { font-size: 1.25rem; diff --git a/src/less/global.less b/src/less/global.less index f99d2365da..3cf72af9dc 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -234,7 +234,7 @@ body { font-size: var(--base-font-size); line-height: var(--line-height-base, 1.5); color: var(--brand-secondary); - background-color: @white; + background-color: var(--white); height: 100%; margin: 0; @@ -257,12 +257,6 @@ body { } } } - - &.intent-mouse { - :focus { - outline: 4px solid transparent; - } - } } /* Reset fonts for relevant elements */ diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less index 2b9c241fc0..5a8ee55174 100644 --- a/src/less/variables-payex.less +++ b/src/less/variables-payex.less @@ -227,17 +227,18 @@ body { --text-muted: color-mix(in srgb, var(--text-color), var(--white) 75%); --text-link: #1c7d2e; --text-hover: var(--brand-primary); + --text-disabled: var(--brand-secondary-light-2); /* Checkbox */ --checkbox-checked-color: var(--brand-secondary, #3c3c3c); /* BUTTONS COLORS */ + --btn-hover: var(--brand-tertiary, #2a9d3f); --primary-disabled-bg: #f5b895; --secondary-disabled-bg: var(--brand-secondary-light-2); --btn-primary-color: var(--brand-success, #238635); --btn-primary-text-color: var(--white, #ffffff); --btn-primary-bg: var(--brand-success, #238635); - --btn-primary-hover: var(--brand-tertiary, #2a9d3f); --btn-primary-disabled-color: var(--white, #ffffff); --btn-primary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8); @@ -246,14 +247,12 @@ body { --btn-secondary-bg: var(--brand-secondary, #3c3c3c); --btn-secondary-text-color: var(--brand-secondary, #3c3c3c); --btn-secondary-border-color: var(--brand-secondary, #3c3c3c); - --btn-secondary-hover: var(--brand-secondary-hover, #707070); --btn-secondary-disabled-color: var(--white, #ffffff); --btn-secondary-disabled-bg: var(--brand-secondary-light-2, #c8c8c8); /* btn-tertiary */ --btn-tertiary-color: var(--brand-secondary, #3c3c3c); --btn-tertiary-text-color: var(--white, #ffffff); - --btn-tertiary-hover: var(--brand-secondary-hover, #5f5f5f); --btn-tertiary-disabled: var(--btn-bg-disabled, rgb(212 196 188 / 30%)); /* btn-destructive */ @@ -270,7 +269,11 @@ body { /* Shared button variables */ --btn-disabled-text: var(--text-disabled); - --btn-bg-disabled: rgb(212 196 188 / 30%); + --btn-bg-disabled: color-mix( + in oklch, + var(--text-disabled), + var(--white) 70% + ); --btn-active-color: var(--brand-secondary, #3c3c3c); /* INPUTS COLORS */ diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less index 164f71335b..7e6c8d3e8b 100644 --- a/src/less/variables-swedbankpay.less +++ b/src/less/variables-swedbankpay.less @@ -241,22 +241,24 @@ --border-radius: 8px; // BUTTON VALUES + --btn-hover: var(--brown-medium); --btn-primary-color: var(--brown-solid); --btn-primary-text-color: var(--text-white); - --btn-primary-hover: var(--brown-medium); // btn-secondary --btn-secondary-color: var(--white); --btn-secondary-text-color: var(--text-default); --btn-secondary-border-color: var(--brown-medium); - --btn-secondary-hover: var(--brown-light); // btn-tertiary --btn-tertiary-color: var(--gray); --btn-tertiary-text-color: var(--brown-solid); - --btn-tertiary-hover: var(--brown-light); --btn-tertiary-disabled: var(--btn-bg-disabled); // Shared button variables --btn-disabled-text: var(--text-disabled); - --btn-bg-disabled: rgb(212 196 188 / 30%); + --btn-bg-disabled: color-mix( + in oklch, + var(--text-disabled), + var(--white) 70% + ); --btn-active-color: var(--brand-turquoise-light); //FORM VALUES diff --git a/src/scripts/main/index.js b/src/scripts/main/index.js index 428699aa58..0424eae339 100644 --- a/src/scripts/main/index.js +++ b/src/scripts/main/index.js @@ -18,13 +18,6 @@ import topbar from "./topbar"; import utils from "./utils"; import validation from "./validation"; -document.addEventListener("mousedown", () => { - document.body.classList.add("intent-mouse"); -}); -document.addEventListener("keydown", () => { - document.body.classList.remove("intent-mouse"); -}); - window.addEventListener("popstate", () => { if (document.body.className.includes("has-vscroll")) { document.body.classList.remove("has-vscroll");