From 5a884e2adb6d044dcd2bc0655e49add4e06525de Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 May 2024 01:29:56 +0000 Subject: [PATCH 01/18] Bump azure/login from 2.1.0 to 2.1.1 Bumps [azure/login](https://github.com/azure/login) from 2.1.0 to 2.1.1. - [Release notes](https://github.com/azure/login/releases) - [Commits](https://github.com/azure/login/compare/v2.1.0...v2.1.1) --- updated-dependencies: - dependency-name: azure/login dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- .github/workflows/janitor.yml | 2 +- .github/workflows/main.yml | 2 +- .github/workflows/tag.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/janitor.yml b/.github/workflows/janitor.yml index 4dda0213e7..e95d92b346 100644 --- a/.github/workflows/janitor.yml +++ b/.github/workflows/janitor.yml @@ -41,7 +41,7 @@ jobs: run: ./.github/scripts/variables.sh --brand ${{ matrix.brand }} --ref ${{ github.ref }} - name: Azure Login - uses: azure/login@v2.1.0 + uses: azure/login@v2.1.1 with: creds: ${{ secrets.AZURE_CREDENTIALS_STAGE }} diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 3cb4b5ac07..997dc7e256 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -44,7 +44,7 @@ jobs: echo "{ \"latestVersion\" : \"${{ steps.variables.outputs.BRANCH }}\" }" > ./dist/latestVersion.json - name: Azure Login - uses: azure/login@v2.1.0 + uses: azure/login@v2.1.1 with: creds: ${{ secrets.AZURE_CREDENTIALS_STAGE }} diff --git a/.github/workflows/tag.yml b/.github/workflows/tag.yml index c04f2b4aa8..8133066133 100644 --- a/.github/workflows/tag.yml +++ b/.github/workflows/tag.yml @@ -36,7 +36,7 @@ jobs: echo "{ \"latestVersion\" : \"${{ steps.variables.outputs.VERSION }}\" }" > ./dist/latestVersion.json - name: Azure Login - uses: azure/login@v2.1.0 + uses: azure/login@v2.1.1 with: creds: ${{ secrets.AZURE_CREDENTIALS }} From a11042429ae29bb662c6b4ea32853476ae4f043f Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 14 Jun 2024 01:41:45 +0000 Subject: [PATCH 02/18] Bump codecov/codecov-action from 4.4.0 to 4.5.0 Bumps [codecov/codecov-action](https://github.com/codecov/codecov-action) from 4.4.0 to 4.5.0. - [Release notes](https://github.com/codecov/codecov-action/releases) - [Changelog](https://github.com/codecov/codecov-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/codecov/codecov-action/compare/v4.4.0...v4.5.0) --- updated-dependencies: - dependency-name: codecov/codecov-action dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- .github/workflows/pull-request.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml index a4e8161919..27b0cfed25 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.4.0 + - uses: codecov/codecov-action@v4.5.0 # with: # files: ./coverage/lcov.info # fail_ci_if_error: true From a1b37eaa739fb07140cd4d515f767e5bfe30e858 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 18 Jun 2024 00:29:57 +0000 Subject: [PATCH 03/18] Bump braces from 3.0.2 to 3.0.3 Bumps [braces](https://github.com/micromatch/braces) from 3.0.2 to 3.0.3. - [Changelog](https://github.com/micromatch/braces/blob/master/CHANGELOG.md) - [Commits](https://github.com/micromatch/braces/compare/3.0.2...3.0.3) --- updated-dependencies: - dependency-name: braces dependency-type: indirect ... Signed-off-by: dependabot[bot] --- package-lock.json | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 92ab5b4b64..22e8111160 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6568,11 +6568,11 @@ } }, "node_modules/braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "dependencies": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" }, "engines": { "node": ">=8" @@ -9982,9 +9982,9 @@ } }, "node_modules/fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "dependencies": { "to-regex-range": "^5.0.1" }, @@ -23989,11 +23989,11 @@ } }, "braces": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", - "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "requires": { - "fill-range": "^7.0.1" + "fill-range": "^7.1.1" } }, "browser-process-hrtime": { @@ -26477,9 +26477,9 @@ } }, "fill-range": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", - "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "requires": { "to-regex-range": "^5.0.1" } From 565e5b76e31eb38b88e46a8abcad6c6d8c526a54 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 16:45:30 +0200 Subject: [PATCH 04/18] SWED-2504 patch new dialog --- src/less/components/dialog.less | 6 +++--- src/scripts/main/dialog/index.js | 35 +++++++++++++++++++++++++------- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/less/components/dialog.less b/src/less/components/dialog.less index f9f60e8254..9ba67c508b 100644 --- a/src/less/components/dialog.less +++ b/src/less/components/dialog.less @@ -15,7 +15,7 @@ dialog { } // TODO: can be removed in next major release when silent support for div.dialog is over -.dialog { +.dialog:not(dialog) { position: fixed; top: 0; right: 0; @@ -138,7 +138,7 @@ dialog { body.dialog-open { overflow: hidden; - .dialog { + .dialog:not(dialog) { overflow-x: hidden; overflow-y: auto; display: flex; @@ -326,7 +326,7 @@ dialog { // MARK: A11y reduced motion @media (forced-colors: active) { - .dialog { + .dialog:not(dialog) { border: 10px solid; > section { diff --git a/src/scripts/main/dialog/index.js b/src/scripts/main/dialog/index.js index d6fdc3cbab..92f69d20cc 100644 --- a/src/scripts/main/dialog/index.js +++ b/src/scripts/main/dialog/index.js @@ -124,21 +124,42 @@ const _createDialog = (dialogQuery) => { // MARK: script for element const _activateDialogElement = (dialog) => { - const dialogInvoker = document.querySelector( + const dialogInvokers = document.querySelectorAll( `button[data-dialog-open="${dialog.id}"]`, ); const closeDialogButtons = dialog.querySelectorAll( "button[data-dialog-close]", ); - // add event listener on dialogInvoker, it should call dialog.showModal() - dialogInvoker.addEventListener("click", () => { - dialog.showModal(); - }); + // TODO: fails gracefully, don't THROW + // TODO: improve DX feedback (for non-existing open & close buttons) + + if (!dialogInvokers.length) { + console.error( + "There was no open button implemented for the dialog. Please make sure you add at least 1 button with the correct attributes to your HTML for the script to work (or do not call this script and use the JS methods on your side)", + ); + + return; + } + + if (!closeDialogButtons.length) { + console.error( + "There was no close button implemented for the dialog. Please make sure you add at least 1 button with the correct attributes to your HTML for the script to work (or do not call this script and use the JS methods on your side)", + ); + + return; + } + + // add event listener on dialogInvokers, it should call dialog.showModal() + [...dialogInvokers]?.map((invokerBtn) => + invokerBtn?.addEventListener("click", () => { + dialog.showModal(); + }), + ); // add event listener on dialogs close button, it should call dialog.close() - [...closeDialogButtons].map((closeBtn) => - closeBtn.addEventListener("click", () => { + [...closeDialogButtons]?.map((closeBtn) => + closeBtn?.addEventListener("click", () => { dialog.close(); }), ); From 23a5cae643b7892ae58a7426c6c26b15e3dab13a Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 16:50:00 +0200 Subject: [PATCH 05/18] SWED-2504 release notes --- RELEASE_NOTES.md | 34 +++------------------- src/scripts/main/dialog/dialog.e2e.spec.js | 2 ++ 2 files changed, 6 insertions(+), 30 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 7af2129e92..7df294cc68 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,41 +1,15 @@ # Changelog -## \[10.12.0\] - 16.05.2024 +## \[10.12.1\] - 21/06/2024 ## Component changes -- Input fields - - - Labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style - -- Radio inputs - - - Minor non-breaking UI change to the default input radio - - Minor UI changes to checkmark variant - - Some non-breaking UI changes (colors, width, ...) - - Now we achieve the checkmark icon using `span.checkmark-icon` instead of loading an actual icon element with an svg - - New "large" variant for checkmark radio input - - Possibility to add a subtext inside the checkmark variant (use `span.subtext`) - -- Buttons - - - minor non-breaking UI updates (height for size large, unify hover state, update 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) - - secondary buttons get a transparent background-color - -- Cards - - - fix style .cards-wide on mobile - - Dialog - - UI update - - new syntax, leveraging the standard tag - - silent support for the old syntax until the next major release - - add transitions + - if not invoker or close btn JS fails gracefully, providing helpful feedback in the console instead of throwing Error + - CSS support for old syntax now checks it is not picked up also by the new syntax (make sure not dialog.dialog) + - new dialog can have multiple invokers ## Technical changes - chore deps (update deps packages minor versions) - -- remove Sentry from codebase diff --git a/src/scripts/main/dialog/dialog.e2e.spec.js b/src/scripts/main/dialog/dialog.e2e.spec.js index f2151862d5..851a3104eb 100644 --- a/src/scripts/main/dialog/dialog.e2e.spec.js +++ b/src/scripts/main/dialog/dialog.e2e.spec.js @@ -1,6 +1,8 @@ // @ts-check const { test, expect } = require("@playwright/test"); +// TODO: add tests dialogs for situations where multiple invokers are present, and for no invoker or no close button (no script but JS should not throw entirely, just gracefully fail) + test.beforeEach(async ({ page }) => { await page.goto("http://localhost:3000/components/dialog"); }); From 280c4d269441e40c8f61fe685a7e5731b26d8a2d Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 17:10:58 +0200 Subject: [PATCH 06/18] SWED-2503 add support for picture and .illustration on top of img in cards --- RELEASE_NOTES.md | 32 ++------------------------ src/App/components/Cards/index.js | 12 ++++++++++ src/less/components/card.less | 38 +++++++++++++++++++------------ 3 files changed, 37 insertions(+), 45 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 7af2129e92..4508ce356b 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,41 +1,13 @@ # Changelog -## \[10.12.0\] - 16.05.2024 +## \[10.12.1\] - 21.06.2024 ## Component changes -- Input fields - - - Labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style - -- Radio inputs - - - Minor non-breaking UI change to the default input radio - - Minor UI changes to checkmark variant - - Some non-breaking UI changes (colors, width, ...) - - Now we achieve the checkmark icon using `span.checkmark-icon` instead of loading an actual icon element with an svg - - New "large" variant for checkmark radio input - - Possibility to add a subtext inside the checkmark variant (use `span.subtext`) - -- Buttons - - - minor non-breaking UI updates (height for size large, unify hover state, update 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) - - secondary buttons get a transparent background-color - - Cards - - fix style .cards-wide on mobile - -- Dialog - - - UI update - - new syntax, leveraging the standard tag - - silent support for the old syntax until the next major release - - add transitions + - add support for div.illustration & picture elements in lieu of the img element as illustrations of used in the cards component (changes in documentation will come in a future release) ## Technical changes - chore deps (update deps packages minor versions) - -- remove Sentry from codebase diff --git a/src/App/components/Cards/index.js b/src/App/components/Cards/index.js index 84643f21d2..c04535e6ac 100644 --- a/src/App/components/Cards/index.js +++ b/src/App/components/Cards/index.js @@ -36,6 +36,18 @@ const Cards = ({ src={imgSrc} alt="alt text to be set" /> + + {/* TODO: in documentation show use with div.illustration */} + {/*
*/} + + {/* TODO: in documentation show use with picture element */} + {/* + + + */} )} {/* no icon displayed if an image used as illustration */} diff --git a/src/less/components/card.less b/src/less/components/card.less index f4ad02cec0..fc22393d27 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -44,7 +44,7 @@ padding-inline-end: var(--padding-outer); } - &:not(.cards-wide):has(> img:first-child) .h4 { + &:not(.cards-wide):has(> :is(img, picture, .illustration):first-child) .h4 { padding-block-start: 0; } @@ -69,7 +69,7 @@ padding-block-end: var(--padding-outer); } - &.cards-wide:has(> img:first-child) + &.cards-wide:has(> :is(img, picture, .illustration):first-child) :is(.h4, .cards-icon, .cards-content, .cards-cta) { padding-inline-start: 0; @@ -95,7 +95,7 @@ margin-inline-end: 0.5rem; } - &:has(> img:first-child) { + &:has(> :is(img, picture, .illustration):first-child) { grid-template-areas: "image" "title" @@ -103,7 +103,7 @@ "cta"; grid-template-columns: 1fr; - &:is(button) img { + &:is(button) :is(img, picture, .illustration) { max-width: 100%; } @@ -115,15 +115,15 @@ grid-area: image; } - &:has(> img:first-child.ratio-1-1):before { + &:has(> :is(img, picture, .illustration):first-child.ratio-1-1):before { aspect-ratio: 1 / 1; } - &:has(> img:first-child.ratio-4-3):before { + &:has(> :is(img, picture, .illustration):first-child.ratio-4-3):before { aspect-ratio: 4 / 3; } - & > img:first-child { + & > :is(img, picture, .illustration):first-child { width: 100%; aspect-ratio: 16 / 9; grid-area: image; @@ -131,6 +131,12 @@ margin: 0; position: absolute; + > img { + width: 100%; + height: 100%; + object-fit: cover; + } + &.ratio-1-1 { aspect-ratio: 1 / 1; } @@ -194,7 +200,7 @@ } } - &:not(:has(> img:first-child)) { + &:not(:has(> :is(img, picture, .illustration):first-child)) { grid-template-rows: auto auto; & .cards-cta { @@ -202,7 +208,7 @@ } } - &:not(:has(> img:first-child)):not(:has(.h4)) { + &:not(:has(> :is(img, picture, .illustration):first-child)):not(:has(.h4)) { grid-template-areas: "icon text-content cta"; grid-template-columns: auto 1fr min-content; grid-template-rows: auto; @@ -213,7 +219,9 @@ } } - &:not(:has(> img:first-child)):not(:has(.cards-content)) { + &:not(:has(> :is(img, picture, .illustration):first-child)):not( + :has(.cards-content) + ) { grid-template-areas: "icon title cta"; grid-template-columns: auto 1fr min-content; grid-template-rows: auto; @@ -224,9 +232,9 @@ } } - &:not(:has(> img:first-child)):not(:has(.cards-icon)):not( - :has(.cards-content) - ) { + &:not(:has(> :is(img, picture, .illustration):first-child)):not( + :has(.cards-icon) + ):not(:has(.cards-content)) { grid-template-areas: "title cta"; grid-template-columns: 1fr min-content; grid-template-rows: auto; @@ -237,7 +245,7 @@ } } - &:has(> img:first-child) { + &:has(> :is(img, picture, .illustration):first-child) { grid-template-areas: "image title" "image text-content" @@ -266,7 +274,7 @@ aspect-ratio: 1; } - & > img:first-child { + & > :is(img, picture, .illustration):first-child { max-width: 100%; object-fit: cover; width: auto; From 8e407bae9ebd0f2874649cf8bcc859462dfeb28c Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 17:20:10 +0200 Subject: [PATCH 07/18] SWED-2503 add utility d-grid + default align in cards wide no img no txt-content --- RELEASE_NOTES.md | 5 +++++ src/less/components/card.less | 1 + src/less/utilities/display.less | 2 ++ 3 files changed, 8 insertions(+) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 4508ce356b..6b04c6bae7 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -7,6 +7,11 @@ - Cards - add support for div.illustration & picture elements in lieu of the img element as illustrations of used in the cards component (changes in documentation will come in a future release) + - default cards wide with no img and no text content -> align-items: center (better default when title wraps) + +- Utility classes + + - Add utility classes for display grid and inline grid ## Technical changes diff --git a/src/less/components/card.less b/src/less/components/card.less index fc22393d27..f5e189a992 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -226,6 +226,7 @@ grid-template-columns: auto 1fr min-content; grid-template-rows: auto; padding: var(--padding-outer); + align-items: center; & :is(.cards-icon, .h4, .cards-cta) { padding: 0; diff --git a/src/less/utilities/display.less b/src/less/utilities/display.less index 6e48fd276e..49d56706a2 100644 --- a/src/less/utilities/display.less +++ b/src/less/utilities/display.less @@ -14,6 +14,8 @@ each(@grid-breakpoints, .(@size, @abbr) { .d@{infix}-table-cell { display: table-cell !important; } .d@{infix}-flex { display: flex !important; } .d@{infix}-inline-flex { display: inline-flex !important; } + .d@{infix}-grid { display: grid !important; } + .d@{infix}-inline-grid { display: inline-grid !important; } } .media-breakpoint-up(@size, @abbr, @ruleset); From 121fa50daaf61cdedfd7b208fda9badacee62ba6 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 17:55:55 +0200 Subject: [PATCH 08/18] SWED-2511 fix style button loading spinner squashed --- RELEASE_NOTES.md | 36 ++------------------------------- src/less/components/button.less | 1 + 2 files changed, 3 insertions(+), 34 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 7af2129e92..d49d741ca9 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,41 +1,9 @@ # Changelog -## \[10.12.0\] - 16.05.2024 +## \[10.12.1\] - 21.06.2024 ## Component changes -- Input fields - - - Labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style - -- Radio inputs - - - Minor non-breaking UI change to the default input radio - - Minor UI changes to checkmark variant - - Some non-breaking UI changes (colors, width, ...) - - Now we achieve the checkmark icon using `span.checkmark-icon` instead of loading an actual icon element with an svg - - New "large" variant for checkmark radio input - - Possibility to add a subtext inside the checkmark variant (use `span.subtext`) - - Buttons - - minor non-breaking UI updates (height for size large, unify hover state, update 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) - - secondary buttons get a transparent background-color - -- Cards - - - fix style .cards-wide on mobile - -- Dialog - - - UI update - - new syntax, leveraging the standard tag - - silent support for the old syntax until the next major release - - add transitions - -## Technical changes - -- chore deps (update deps packages minor versions) - -- remove Sentry from codebase + - loading spinner of buttons keep their aspect-ratio even if the buttons is squashed, when they're in overflow state diff --git a/src/less/components/button.less b/src/less/components/button.less index 865eb4bce8..81690f9476 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -217,6 +217,7 @@ border: 0.15rem solid; width: 1rem; height: 1rem; + aspect-ratio: 1; animation: loader-spin 0.8s linear infinite; } From c257c82677bae32f0b39739de17e63204601cdbd Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 18:07:20 +0200 Subject: [PATCH 09/18] SWED-2505 add dropdown init by id param --- RELEASE_NOTES.md | 38 +++----------------------- src/scripts/main/dropdown/index.js | 43 +++++++++++++++++++++--------- 2 files changed, 34 insertions(+), 47 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 7af2129e92..27290dc609 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,41 +1,9 @@ # Changelog -## \[10.12.0\] - 16.05.2024 +## \[10.12.1\] - 21.06.2024 ## Component changes -- Input fields +- Dropdown - - Labels line-height increased & mobile values adjusted, so values are in sync with `h4` typography style - -- Radio inputs - - - Minor non-breaking UI change to the default input radio - - Minor UI changes to checkmark variant - - Some non-breaking UI changes (colors, width, ...) - - Now we achieve the checkmark icon using `span.checkmark-icon` instead of loading an actual icon element with an svg - - New "large" variant for checkmark radio input - - Possibility to add a subtext inside the checkmark variant (use `span.subtext`) - -- Buttons - - - minor non-breaking UI updates (height for size large, unify hover state, update 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) - - secondary buttons get a transparent background-color - -- Cards - - - fix style .cards-wide on mobile - -- Dialog - - - UI update - - new syntax, leveraging the standard tag - - silent support for the old syntax until the next major release - - add transitions - -## Technical changes - -- chore deps (update deps packages minor versions) - -- remove Sentry from codebase + - dropdown.init() method now accept `id` parameter to initialize specific dropdowns, instead of always all dropdowns found in the DOM diff --git a/src/scripts/main/dropdown/index.js b/src/scripts/main/dropdown/index.js index a369b34e33..2c09e0d10b 100644 --- a/src/scripts/main/dropdown/index.js +++ b/src/scripts/main/dropdown/index.js @@ -24,7 +24,7 @@ const listenToToggleBtn = (toggleBtn) => { toggleBtn.addEventListener("click", toggleBtnListener); } catch (e) { console.warn( - "No toggle element exist, add an element with the class .dropdown-toggle" + "No toggle element exist, add an element with the class .dropdown-toggle", ); } }; @@ -46,18 +46,37 @@ const closesOnLinkOrBtnClick = (dropdownMenu) => { dropdownMenu .querySelectorAll("a, button") ?.forEach((link) => - link.addEventListener("click", closeContainerFromEvent) + link.addEventListener("click", closeContainerFromEvent), ); }; -const init = () => { - const dropdownContainers = document.querySelectorAll(SELECTORS.DROPDOWNLIST); - const dropdownToggles = document.querySelectorAll( - `${SELECTORS.DROPDOWNLIST} ${SELECTORS.TOGGLE}` - ); - const dropdownMenu = document.querySelectorAll( - `${SELECTORS.DROPDOWNLIST} ${SELECTORS.DROPDOWNMENU}` - ); +const init = (id) => { + let dropdownContainers; + let dropdownToggles; + let dropdownMenu; + + if (id) { + dropdownContainers = document?.getElementById(id); + + if (!dropdownContainers) { + console.error( + `No dropdown found corresponding with the id provided in dropdown.init() passing this id value: "${id}"`, + ); + + return null; + } + dropdownToggles = dropdownContainers.querySelector(SELECTORS.TOGGLE); + dropdownMenu = dropdownContainers.querySelector(SELECTORS.DROPDOWNMENU); + } else { + dropdownContainers = document.querySelectorAll(SELECTORS.DROPDOWNLIST); + dropdownToggles = document.querySelectorAll( + `${SELECTORS.DROPDOWNLIST} ${SELECTORS.TOGGLE}`, + ); + dropdownMenu = document.querySelectorAll( + `${SELECTORS.DROPDOWNLIST} ${SELECTORS.DROPDOWNMENU} + `, + ); + } if (!dropdownContainers.length) { console.warn("No dropdown container found"); @@ -81,11 +100,11 @@ const init = () => { listenToToggleBtn(dropdownContainer.querySelector(SELECTORS.TOGGLE)); listenToClickOutsideDropdown(dropdownContainer); closesOnLinkOrBtnClick( - dropdownContainer.querySelector(SELECTORS.DROPDOWNMENU) + dropdownContainer.querySelector(SELECTORS.DROPDOWNMENU), ); checkAndAddMenuKeyboardNavigation( dropdownContainer, - dropdownContainer.querySelector(SELECTORS.DROPDOWNMENU) + dropdownContainer.querySelector(SELECTORS.DROPDOWNMENU), ); }); }; From 9bedf79838b7a5a8ed2b76326f72c725b441ae54 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 18:11:12 +0200 Subject: [PATCH 10/18] SWED-2505 documentation dropdown --- src/App/ComponentsDocumentation/components/Dropdown/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/App/ComponentsDocumentation/components/Dropdown/index.js b/src/App/ComponentsDocumentation/components/Dropdown/index.js index 5f85a025c3..19c97319fe 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/index.js +++ b/src/App/ComponentsDocumentation/components/Dropdown/index.js @@ -103,6 +103,10 @@ const DeveloperDocumentation = () => ( Use to initialize all dropdowns. This will open and close the dropdowns automatically.

+

+ To initialize a given dropdown, use{" "} + . +

Accessibility considerations

By default, keyboard navigation is implemented in the script. If your From e24346c75d6b0dd1fd45b26f6123b24ba4331aea Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 20 Jun 2024 20:33:35 +0200 Subject: [PATCH 11/18] SWED-2505 jest snap --- .../Dropdown/__snapshots__/index.test.js.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap index fe0544d7d3..2c1468e368 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap @@ -312,6 +312,16 @@ exports[`Documentation: Dropdown DeveloperDocumentation renders 1`] = ` to initialize all dropdowns. This will open and close the dropdowns automatically.

+

+ To initialize a given dropdown, use + + + dg.dropdown.init({id}) + + . +

Accessibility considerations

From 7020b499b3bf05adb25899743250413b0e17c4cb Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 21 Jun 2024 11:27:04 +0200 Subject: [PATCH 12/18] SWED-2504 clean comments & typos --- RELEASE_NOTES.md | 2 +- src/scripts/main/dialog/index.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 9b8ea8e2e7..5f71530c1a 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -6,7 +6,7 @@ - Dialog - - if not invoker or close btn JS fails gracefully, providing helpful feedback in the console instead of throwing Error + - if no invoker or close btn JS fails gracefully, providing helpful feedback in the console instead of throwing Error - CSS support for old syntax now checks it is not picked up also by the new syntax (make sure not dialog.dialog) - new dialog can have multiple invokers diff --git a/src/scripts/main/dialog/index.js b/src/scripts/main/dialog/index.js index 92f69d20cc..0e06513959 100644 --- a/src/scripts/main/dialog/index.js +++ b/src/scripts/main/dialog/index.js @@ -131,9 +131,6 @@ const _activateDialogElement = (dialog) => { "button[data-dialog-close]", ); - // TODO: fails gracefully, don't THROW - // TODO: improve DX feedback (for non-existing open & close buttons) - if (!dialogInvokers.length) { console.error( "There was no open button implemented for the dialog. Please make sure you add at least 1 button with the correct attributes to your HTML for the script to work (or do not call this script and use the JS methods on your side)", From 48018071d922be84d97eb0c47b95f8c8a8d9a536 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 21 Jun 2024 11:54:19 +0200 Subject: [PATCH 13/18] SWED-2503 switch :is for :where for specificity in cards --- src/less/components/card.less | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/less/components/card.less b/src/less/components/card.less index f5e189a992..e0bc72c42c 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -44,7 +44,8 @@ padding-inline-end: var(--padding-outer); } - &:not(.cards-wide):has(> :is(img, picture, .illustration):first-child) .h4 { + &:not(.cards-wide):has(> :where(img, picture, .illustration):first-child) + .h4 { padding-block-start: 0; } @@ -69,7 +70,7 @@ padding-block-end: var(--padding-outer); } - &.cards-wide:has(> :is(img, picture, .illustration):first-child) + &.cards-wide:has(> :where(img, picture, .illustration):first-child) :is(.h4, .cards-icon, .cards-content, .cards-cta) { padding-inline-start: 0; @@ -95,7 +96,7 @@ margin-inline-end: 0.5rem; } - &:has(> :is(img, picture, .illustration):first-child) { + &:has(> :where(img, picture, .illustration):first-child) { grid-template-areas: "image" "title" @@ -103,7 +104,7 @@ "cta"; grid-template-columns: 1fr; - &:is(button) :is(img, picture, .illustration) { + &:is(button) :where(img, picture, .illustration) { max-width: 100%; } @@ -115,15 +116,15 @@ grid-area: image; } - &:has(> :is(img, picture, .illustration):first-child.ratio-1-1):before { + &:has(> :where(img, picture, .illustration):first-child.ratio-1-1):before { aspect-ratio: 1 / 1; } - &:has(> :is(img, picture, .illustration):first-child.ratio-4-3):before { + &:has(> :where(img, picture, .illustration):first-child.ratio-4-3):before { aspect-ratio: 4 / 3; } - & > :is(img, picture, .illustration):first-child { + & > :where(img, picture, .illustration):first-child { width: 100%; aspect-ratio: 16 / 9; grid-area: image; @@ -200,7 +201,7 @@ } } - &:not(:has(> :is(img, picture, .illustration):first-child)) { + &:not(:has(> :where(img, picture, .illustration):first-child)) { grid-template-rows: auto auto; & .cards-cta { @@ -208,7 +209,9 @@ } } - &:not(:has(> :is(img, picture, .illustration):first-child)):not(:has(.h4)) { + &:not(:has(> :where(img, picture, .illustration):first-child)):not( + :has(.h4) + ) { grid-template-areas: "icon text-content cta"; grid-template-columns: auto 1fr min-content; grid-template-rows: auto; @@ -219,7 +222,7 @@ } } - &:not(:has(> :is(img, picture, .illustration):first-child)):not( + &:not(:has(> :where(img, picture, .illustration):first-child)):not( :has(.cards-content) ) { grid-template-areas: "icon title cta"; @@ -233,7 +236,7 @@ } } - &:not(:has(> :is(img, picture, .illustration):first-child)):not( + &:not(:has(> :where(img, picture, .illustration):first-child)):not( :has(.cards-icon) ):not(:has(.cards-content)) { grid-template-areas: "title cta"; @@ -246,7 +249,7 @@ } } - &:has(> :is(img, picture, .illustration):first-child) { + &:has(> :where(img, picture, .illustration):first-child) { grid-template-areas: "image title" "image text-content" @@ -275,7 +278,7 @@ aspect-ratio: 1; } - & > :is(img, picture, .illustration):first-child { + & > :where(img, picture, .illustration):first-child { max-width: 100%; object-fit: cover; width: auto; From 101acdc4e274dd31903909d0f1f38f5da0e81a14 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 21 Jun 2024 12:15:36 +0200 Subject: [PATCH 14/18] SWED-2503 revert :where selector --- src/less/components/card.less | 29 +++++++++++++---------------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/less/components/card.less b/src/less/components/card.less index e0bc72c42c..7952fabd68 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -44,8 +44,7 @@ padding-inline-end: var(--padding-outer); } - &:not(.cards-wide):has(> :where(img, picture, .illustration):first-child) - .h4 { + &:not(.cards-wide):has(> :is(img, picture, .illustration):first-child) .h4 { padding-block-start: 0; } @@ -70,7 +69,7 @@ padding-block-end: var(--padding-outer); } - &.cards-wide:has(> :where(img, picture, .illustration):first-child) + &.cards-wide:has(> :is(img, picture, .illustration):first-child) :is(.h4, .cards-icon, .cards-content, .cards-cta) { padding-inline-start: 0; @@ -96,7 +95,7 @@ margin-inline-end: 0.5rem; } - &:has(> :where(img, picture, .illustration):first-child) { + &:has(> :is(img, picture, .illustration):first-child) { grid-template-areas: "image" "title" @@ -104,7 +103,7 @@ "cta"; grid-template-columns: 1fr; - &:is(button) :where(img, picture, .illustration) { + &:is(button) :ishere(img, picture, .illustration) { max-width: 100%; } @@ -116,15 +115,15 @@ grid-area: image; } - &:has(> :where(img, picture, .illustration):first-child.ratio-1-1):before { + &:has(> :is(img, picture, .illustration):first-child.ratio-1-1):before { aspect-ratio: 1 / 1; } - &:has(> :where(img, picture, .illustration):first-child.ratio-4-3):before { + &:has(> :is(img, picture, .illustration):first-child.ratio-4-3):before { aspect-ratio: 4 / 3; } - & > :where(img, picture, .illustration):first-child { + & > :is(img, picture, .illustration):first-child { width: 100%; aspect-ratio: 16 / 9; grid-area: image; @@ -201,7 +200,7 @@ } } - &:not(:has(> :where(img, picture, .illustration):first-child)) { + &:not(:has(> :is(img, picture, .illustration):first-child)) { grid-template-rows: auto auto; & .cards-cta { @@ -209,9 +208,7 @@ } } - &:not(:has(> :where(img, picture, .illustration):first-child)):not( - :has(.h4) - ) { + &:not(:has(> :is(img, picture, .illustration):first-child)):not(:has(.h4)) { grid-template-areas: "icon text-content cta"; grid-template-columns: auto 1fr min-content; grid-template-rows: auto; @@ -222,7 +219,7 @@ } } - &:not(:has(> :where(img, picture, .illustration):first-child)):not( + &:not(:has(> :is(img, picture, .illustration):first-child)):not( :has(.cards-content) ) { grid-template-areas: "icon title cta"; @@ -236,7 +233,7 @@ } } - &:not(:has(> :where(img, picture, .illustration):first-child)):not( + &:not(:has(> :is(img, picture, .illustration):first-child)):not( :has(.cards-icon) ):not(:has(.cards-content)) { grid-template-areas: "title cta"; @@ -249,7 +246,7 @@ } } - &:has(> :where(img, picture, .illustration):first-child) { + &:has(> :is(img, picture, .illustration):first-child) { grid-template-areas: "image title" "image text-content" @@ -278,7 +275,7 @@ aspect-ratio: 1; } - & > :where(img, picture, .illustration):first-child { + & > :is(img, picture, .illustration):first-child { max-width: 100%; object-fit: cover; width: auto; From 783c4f22bccdeec701a14c429fbe660e4b0b9022 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 21 Jun 2024 12:19:16 +0200 Subject: [PATCH 15/18] SWED-2503 style cards picture --- src/less/components/card.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/less/components/card.less b/src/less/components/card.less index 7952fabd68..6b988e2e64 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -131,7 +131,7 @@ margin: 0; position: absolute; - > img { + &:is(picture) > img { width: 100%; height: 100%; object-fit: cover; From b9a83ff67ad7b92f22e8d42e9f684b9e077145d8 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 21 Jun 2024 12:25:36 +0200 Subject: [PATCH 16/18] SWED-2503 typo css cards --- src/less/components/card.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/less/components/card.less b/src/less/components/card.less index 6b988e2e64..a54b1bbb4b 100644 --- a/src/less/components/card.less +++ b/src/less/components/card.less @@ -103,7 +103,7 @@ "cta"; grid-template-columns: 1fr; - &:is(button) :ishere(img, picture, .illustration) { + &:is(button) :is(img, picture, .illustration) { max-width: 100%; } From 7be5946b9b195379d31801a0c8d1b889a80195b2 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 21 Jun 2024 13:58:43 +0200 Subject: [PATCH 17/18] release 10.12.1 preparations --- package-lock.json | 105 ++++++++---------- package.json | 4 +- src/App/Home/constants.js | 61 ++++++++++ .../__snapshots__/index.test.js.snap | 28 +++++ src/App/Utilities/classes.js | 8 ++ 5 files changed, 143 insertions(+), 63 deletions(-) diff --git a/package-lock.json b/package-lock.json index 22e8111160..20198e6cc1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -69,8 +69,8 @@ "stylelint-config-standard": "^34.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.8.0", "terser-webpack-plugin": "^5.3.9", - "webpack": "^5.91.0", - "webpack-bundle-analyzer": "^4.10.1", + "webpack": "^5.92.1", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.2" } @@ -6738,9 +6738,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001618", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001618.tgz", - "integrity": "sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg==", + "version": "1.0.30001636", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", + "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", "dev": true, "funding": [ { @@ -8498,9 +8498,9 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", - "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "version": "5.17.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz", + "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==", "dev": true, "dependencies": { "graceful-fs": "^4.2.4", @@ -18634,9 +18634,9 @@ } }, "node_modules/webpack": { - "version": "5.91.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", - "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "version": "5.92.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz", + "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.3", @@ -18645,10 +18645,10 @@ "@webassemblyjs/wasm-edit": "^1.12.1", "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.16.0", + "enhanced-resolve": "^5.17.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", @@ -18681,9 +18681,9 @@ } }, "node_modules/webpack-bundle-analyzer": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz", - "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==", + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz", + "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==", "dev": true, "dependencies": { "@discoveryjs/json-ext": "0.5.7", @@ -18694,7 +18694,6 @@ "escape-string-regexp": "^4.0.0", "gzip-size": "^6.0.0", "html-escaper": "^2.0.2", - "is-plain-object": "^5.0.0", "opener": "^1.5.2", "picocolors": "^1.0.0", "sirv": "^2.0.3", @@ -18749,15 +18748,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/webpack-bundle-analyzer/node_modules/is-plain-object": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", - "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/webpack-cli": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz", @@ -19050,9 +19040,9 @@ } }, "node_modules/webpack/node_modules/acorn": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", - "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz", + "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -19061,10 +19051,10 @@ "node": ">=0.4.0" } }, - "node_modules/webpack/node_modules/acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "node_modules/webpack/node_modules/acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "dev": true, "peerDependencies": { "acorn": "^8" @@ -24106,9 +24096,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001618", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001618.tgz", - "integrity": "sha512-p407+D1tIkDvsEAPS22lJxLQQaG8OTBEqo0KhzfABGk0TU4juBNDSfH0hyAp/HRyx+M8L17z/ltyhxh27FTfQg==", + "version": "1.0.30001636", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", + "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", "dev": true }, "chalk": { @@ -25408,9 +25398,9 @@ } }, "enhanced-resolve": { - "version": "5.16.0", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz", - "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==", + "version": "5.17.0", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.0.tgz", + "integrity": "sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==", "dev": true, "requires": { "graceful-fs": "^4.2.4", @@ -32559,9 +32549,9 @@ "dev": true }, "webpack": { - "version": "5.91.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz", - "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==", + "version": "5.92.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.92.1.tgz", + "integrity": "sha512-JECQ7IwJb+7fgUFBlrJzbyu3GEuNBcdqr1LD7IbSzwkSmIevTm8PF+wej3Oxuz/JFBUZ6O1o43zsPkwm1C4TmA==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.3", @@ -32570,10 +32560,10 @@ "@webassemblyjs/wasm-edit": "^1.12.1", "@webassemblyjs/wasm-parser": "^1.12.1", "acorn": "^8.7.1", - "acorn-import-assertions": "^1.9.0", + "acorn-import-attributes": "^1.9.5", "browserslist": "^4.21.10", "chrome-trace-event": "^1.0.2", - "enhanced-resolve": "^5.16.0", + "enhanced-resolve": "^5.17.0", "es-module-lexer": "^1.2.1", "eslint-scope": "5.1.1", "events": "^3.2.0", @@ -32591,15 +32581,15 @@ }, "dependencies": { "acorn": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", - "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", + "version": "8.12.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.0.tgz", + "integrity": "sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==", "dev": true }, - "acorn-import-assertions": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", - "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", + "acorn-import-attributes": { + "version": "1.9.5", + "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", + "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", "dev": true, "requires": {} }, @@ -32617,9 +32607,9 @@ } }, "webpack-bundle-analyzer": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz", - "integrity": "sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==", + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.2.tgz", + "integrity": "sha512-vJptkMm9pk5si4Bv922ZbKLV8UTT4zib4FPgXMhgzUny0bfDDkLXAVQs3ly3fS4/TN9ROFtb0NFrm04UXFE/Vw==", "dev": true, "requires": { "@discoveryjs/json-ext": "0.5.7", @@ -32630,7 +32620,6 @@ "escape-string-regexp": "^4.0.0", "gzip-size": "^6.0.0", "html-escaper": "^2.0.2", - "is-plain-object": "^5.0.0", "opener": "^1.5.2", "picocolors": "^1.0.0", "sirv": "^2.0.3", @@ -32660,12 +32649,6 @@ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", "dev": true - }, - "is-plain-object": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", - "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", - "dev": true } } }, diff --git a/package.json b/package.json index 248e7fe708..f4c367de85 100644 --- a/package.json +++ b/package.json @@ -98,8 +98,8 @@ "stylelint-config-standard": "^34.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.8.0", "terser-webpack-plugin": "^5.3.9", - "webpack": "^5.91.0", - "webpack-bundle-analyzer": "^4.10.1", + "webpack": "^5.92.1", + "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.2" }, diff --git a/src/App/Home/constants.js b/src/App/Home/constants.js index 45ceb489c0..4e61cee762 100644 --- a/src/App/Home/constants.js +++ b/src/App/Home/constants.js @@ -4,6 +4,67 @@ import CodeTags from "@components/CodeTags"; const basename = process.env.basename; export const changeLogs = [ + { + version: "10.12.1", + title: "Minor Bug Fixes & Supports Increase", + text: ( + <> +

+ Just like Ulysses, your dedicated developer has been sent on exciting + new adventures. But embarking on these new journeys does not mean he + will ever forget or stop longing to come back home and taking care of + everything he left behind. +

+

+ That's why I could not leave for summer holidays without coming back + by the design system and fixing some things I owe our brillant users. +

+

+ Dialog +
+ Dialog now fails gracefully if no invoker is found (thnx Karoline for + the heads up) +
+ It can also get multiple invokers attached to it (thanks Martina for + the feature request) +
+ The styling is also more resilient through the migration from the old + dialog syntax +

+

+ Cards +
+ Cards can now use {" "} + elements & class + in lieu of the element. They + will be styled just the same. +

+

+ Dropdown +
+ Thanks to the help of our dear colleague Ludvik Lund, the dropdown + initialization script can now receive a specific{" "} + . So you can now call the init + script for a given dropdown and not all of the dropdowns present in + the DOM. +

+

+ Utility classes +
+ Some new utility classes have been added to the list.{" "} + &{" "} + . +

+

+ Button +
+ The loading spinner of the button loading will never be squashed when + the button gets its width shrinked. No more spinners looking like a + rice bean. +

+ + ), + }, { version: "10.12.0", title: "UI Bonanza", diff --git a/src/App/Utilities/__snapshots__/index.test.js.snap b/src/App/Utilities/__snapshots__/index.test.js.snap index 24a068ef25..bb21a6d6b9 100644 --- a/src/App/Utilities/__snapshots__/index.test.js.snap +++ b/src/App/Utilities/__snapshots__/index.test.js.snap @@ -697,6 +697,34 @@ exports[`Utilities: index renders 1`] = ` display: inline-flex +
+ + d-grid + + + display: grid + +
+
+ + d-inline-grid + + + display: inline-grid + +
Date: Fri, 21 Jun 2024 14:34:50 +0200 Subject: [PATCH 18/18] release 10.12.1 fix icons chromium toast min-width --- src/less/core/iconography.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/less/core/iconography.less b/src/less/core/iconography.less index afd5a2a0b3..1ff6cc046c 100644 --- a/src/less/core/iconography.less +++ b/src/less/core/iconography.less @@ -623,6 +623,7 @@ i[class^="swepay-icon-"], i[class*=" swepay-icon-"] { display: inline-block; height: var(--icon-size, 24px); + min-width: var(--icon-size, 24px); width: var(--icon-size, 24px); background-color: currentColor; aspect-ratio: 1 / 1;