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/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 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 }} diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 7af2129e92..9d2bfebaf7 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,41 +1,32 @@ # 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 +- Dialog - - 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`) + - 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 - 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 + - loading spinner of buttons keep their aspect-ratio even if the buttons is squashed, when they're in overflow state - Cards - - fix style .cards-wide on mobile + - 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) -- Dialog +- Dropdown - - UI update - - new syntax, leveraging the standard tag - - silent support for the old syntax until the next major release - - add transitions + - dropdown.init() method now accept `id` parameter to initialize specific dropdowns, instead of always all dropdowns found in the DOM + +- Utility classes + + - Add utility classes for display grid and inline grid ## Technical changes - chore deps (update deps packages minor versions) - -- remove Sentry from codebase diff --git a/package-lock.json b/package-lock.json index 92ab5b4b64..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" } @@ -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" @@ -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", @@ -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" }, @@ -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" @@ -23989,11 +23979,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": { @@ -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", @@ -26477,9 +26467,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" } @@ -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/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

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 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 + +
+ + {/* 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/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; } diff --git a/src/less/components/card.less b/src/less/components/card.less index f4ad02cec0..a54b1bbb4b 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; + &:is(picture) > 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,20 +219,23 @@ } } - &: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; padding: var(--padding-outer); + align-items: center; & :is(.cards-icon, .h4, .cards-cta) { padding: 0; } } - &: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 +246,7 @@ } } - &:has(> img:first-child) { + &:has(> :is(img, picture, .illustration):first-child) { grid-template-areas: "image title" "image text-content" @@ -266,7 +275,7 @@ aspect-ratio: 1; } - & > img:first-child { + & > :is(img, picture, .illustration):first-child { max-width: 100%; object-fit: cover; width: auto; 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/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; 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); 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"); }); diff --git a/src/scripts/main/dialog/index.js b/src/scripts/main/dialog/index.js index d6fdc3cbab..0e06513959 100644 --- a/src/scripts/main/dialog/index.js +++ b/src/scripts/main/dialog/index.js @@ -124,21 +124,39 @@ 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(); - }); + 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(); }), ); 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), ); }); };