diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 9d2bfebaf7..8745879446 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,32 +1,16 @@ # Changelog -## \[10.12.1\] - 21.06.2024 +## \[10.12.2\] - 14.08.2024 ## Component changes -- Dialog +- Typography - - 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 + - change font family of "title 6"/h6 from Arial to the brand's headline font (e.g. "SwedbankPay Headline Bold" or "Futura PT W08 Demi" depending on brand) -- Buttons +- Progress-steps - - loading spinner of buttons keep their aspect-ratio even if the buttons is squashed, when they're in overflow state - -- 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) + - fix UI of the horizontal yellow line when the 1st and last steps are in state “ongoing selected” - Dropdown - - - 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) + - fix script for initating for a specific `id` (`init(id)`) diff --git a/package-lock.json b/package-lock.json index a4ceb8e75b..7f23a535ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@swedbankpay/design-guide", - "version": "10.12.1", + "version": "10.12.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@swedbankpay/design-guide", - "version": "10.12.1", + "version": "10.12.2", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -30,7 +30,7 @@ "@babel/eslint-parser": "^7.24.1", "@babel/preset-env": "^7.24.4", "@babel/preset-react": "^7.24.1", - "@playwright/test": "^1.44.0", + "@playwright/test": "^1.45.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.2.2", "@testing-library/user-event": "^14.5.2", @@ -4564,18 +4564,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", - "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz", + "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==", "dev": true, "dependencies": { - "playwright": "1.44.0" + "playwright": "1.45.3" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/@polka/url": { @@ -6738,9 +6738,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001636", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", - "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", + "version": "1.0.30001651", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", + "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", "dev": true, "funding": [ { @@ -14063,33 +14063,33 @@ } }, "node_modules/playwright": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", - "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz", + "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==", "dev": true, "dependencies": { - "playwright-core": "1.44.0" + "playwright-core": "1.45.3" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" }, "optionalDependencies": { "fsevents": "2.3.2" } }, "node_modules/playwright-core": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", - "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz", + "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==", "dev": true, "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/possible-typed-array-names": { @@ -22371,12 +22371,12 @@ "optional": true }, "@playwright/test": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.44.0.tgz", - "integrity": "sha512-rNX5lbNidamSUorBhB4XZ9SQTjAqfe5M+p37Z8ic0jPFBMo5iCtQz1kRWkEMg+rYOKSlVycpQmpqjSFq7LXOfg==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.45.3.tgz", + "integrity": "sha512-UKF4XsBfy+u3MFWEH44hva1Q8Da28G6RFtR2+5saw+jgAFQV5yYnB1fu68Mz7fO+5GJF3wgwAIs0UelU8TxFrA==", "dev": true, "requires": { - "playwright": "1.44.0" + "playwright": "1.45.3" } }, "@polka/url": { @@ -24096,9 +24096,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001636", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", - "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", + "version": "1.0.30001651", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", + "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", "dev": true }, "chalk": { @@ -29436,19 +29436,19 @@ } }, "playwright": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.44.0.tgz", - "integrity": "sha512-F9b3GUCLQ3Nffrfb6dunPOkE5Mh68tR7zN32L4jCk4FjQamgesGay7/dAAe1WaMEGV04DkdJfcJzjoCKygUaRQ==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.45.3.tgz", + "integrity": "sha512-QhVaS+lpluxCaioejDZ95l4Y4jSFCsBvl2UZkpeXlzxmqS+aABr5c82YmfMHrL6x27nvrvykJAFpkzT2eWdJww==", "dev": true, "requires": { "fsevents": "2.3.2", - "playwright-core": "1.44.0" + "playwright-core": "1.45.3" } }, "playwright-core": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.44.0.tgz", - "integrity": "sha512-ZTbkNpFfYcGWohvTTl+xewITm7EOuqIqex0c7dNZ+aXsbrLj0qI8XlGKfPpipjm0Wny/4Lt4CJsWJk1stVS5qQ==", + "version": "1.45.3", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.45.3.tgz", + "integrity": "sha512-+ym0jNbcjikaOwwSZycFbwkWgfruWvYlJfThKYAlImbxUgdWFO2oW70ojPm4OpE4t6TAo2FY/smM+hpVTtkhDA==", "dev": true }, "possible-typed-array-names": { diff --git a/package.json b/package.json index 22d3b8edc9..ef5ae78396 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@swedbankpay/design-guide", - "version": "10.12.1", + "version": "10.12.2", "description": "Swedbank Pay Design Guide", "main": "src/scripts/main/index.js", "scripts": { @@ -59,7 +59,7 @@ "@babel/eslint-parser": "^7.24.1", "@babel/preset-env": "^7.24.4", "@babel/preset-react": "^7.24.1", - "@playwright/test": "^1.44.0", + "@playwright/test": "^1.45.3", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.2.2", "@testing-library/user-event": "^14.5.2", diff --git a/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap index 319b7a92e1..734297d570 100644 --- a/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`ComponentsDocumentation: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide – v. - 10.12.1 + 10.12.2 `; diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-backdrop-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-backdrop-Mobile-Chrome-darwin.png index cf0f796f82..c8ca25a9dd 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-backdrop-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-backdrop-Mobile-Chrome-darwin.png differ 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 b588a690e7..926cf7f696 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/Home/constants.js b/src/App/Home/constants.js index 4e61cee762..05f1222c46 100644 --- a/src/App/Home/constants.js +++ b/src/App/Home/constants.js @@ -4,6 +4,40 @@ import CodeTags from "@components/CodeTags"; const basename = process.env.basename; export const changeLogs = [ + { + version: "10.12.2", + title: "We're back, fresh and tanned with a summer breeze", + text: ( + <> +

+ How are you lovely people? Us in the design-system galaxy we're + doing great, thanks for asking. And we're bringing with us some + nice patches. +

+

+ Typography +
+ "Title 6" font-family switches from Arial to the brand's headline font + (e.g. Swedbank Headline Bold) +

+

+ Progress bar +
+ We're fixing a UI bug spotted by our beloved Martina, namely the + horizontal lines for the 1st and last steps when they are in selected + state. +

+

+ Dropdown +
A big thank you to Ludvik Lund for his contribution, fixing a + bug in the dropdown script when initiating a specific dropdown (using + the dropdown element id as param for the init function). It should + work fine now +

+

Enjoy 💫

+ + ), + }, { version: "10.12.1", title: "Minor Bug Fixes & Supports Increase", diff --git a/src/App/Identity/__snapshots__/index.test.js.snap b/src/App/Identity/__snapshots__/index.test.js.snap index a0cd35dfb5..96abc1a89c 100644 --- a/src/App/Identity/__snapshots__/index.test.js.snap +++ b/src/App/Identity/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Core: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide – v. - 10.12.1 + 10.12.2 `; diff --git a/src/App/Identity/identity/Typography/index.js b/src/App/Identity/identity/Typography/index.js index c9f5acbc24..29351b5a00 100644 --- a/src/App/Identity/identity/Typography/index.js +++ b/src/App/Identity/identity/Typography/index.js @@ -134,7 +134,7 @@ const Desktop = () => (
Title 6
- Arial bold + Swedbank Headline Bold 14 px 20 px @@ -238,7 +238,7 @@ const Mobile = () => (
Title 6
- Arial bold + Swedbank Headline Bold 14 px 22 px diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Chrome-darwin.png index c816b36df5..3c2d6d8a24 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Chrome-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Safari-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Safari-darwin.png index ae2c5f9a1e..4bc9e3884c 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Safari-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-chromium-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-chromium-darwin.png index c816b36df5..bcd3ae9675 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-chromium-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-firefox-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-firefox-darwin.png index bd5754a5a3..e76c4761da 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-firefox-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-webkit-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-webkit-darwin.png index d708ae184d..a56d7efc33 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-webkit-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Desktop-headers-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Chrome-darwin.png index 26cbf174fe..0c4114f1d1 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Chrome-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Safari-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Safari-darwin.png index 389a4d774a..b6695cd60d 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Safari-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-chromium-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-chromium-darwin.png index 26cbf174fe..088fad8f7b 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-chromium-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-firefox-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-firefox-darwin.png index c648fd9915..4e5de0f552 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-firefox-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-webkit-darwin.png b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-webkit-darwin.png index 904f175273..fd02f631ce 100644 Binary files a/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-webkit-darwin.png and b/src/App/Identity/identity/Typography/typography.e2e.spec.js-snapshots/SwedbankPay-typography-Mobile-headers-webkit-darwin.png differ diff --git a/src/App/Patterns/__snapshots__/index.test.js.snap b/src/App/Patterns/__snapshots__/index.test.js.snap index 9dfc573bdc..3fdcf0682a 100644 --- a/src/App/Patterns/__snapshots__/index.test.js.snap +++ b/src/App/Patterns/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Patterns: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide – v. - 10.12.1 + 10.12.2 `; diff --git a/src/App/Utilities/__snapshots__/index.test.js.snap b/src/App/Utilities/__snapshots__/index.test.js.snap index 12078b1854..df6ac2ff45 100644 --- a/src/App/Utilities/__snapshots__/index.test.js.snap +++ b/src/App/Utilities/__snapshots__/index.test.js.snap @@ -8,7 +8,7 @@ exports[`Utilities: index renders 1`] = ` className="dg-current-version text-uppercase" > Design Guide - v. - 10.12.1 + 10.12.2
a { display: block; width: 100%; /* Take full parent size, ignoring parents padding, and stil growing the parent with text from this element */ - padding: @list-item-padding; + padding: var(--progress-steps-list-item-padding); color: var(--brand-secondary); border: 0; cursor: pointer; @@ -98,12 +112,12 @@ .circle-base() { position: absolute; - width: @circle-size; - height: @circle-size; + width: var(--progress-steps-circle-size); + height: var(--progress-steps-circle-size); top: 50%; - margin-top: (-@circle-size / 2); + margin-top: calc(0px - var(--progress-steps-circle-size) / 2); left: 50%; - margin-left: (-@circle-size / 2); + margin-left: calc(0px - var(--progress-steps-circle-size) / 2); } /* Circle */ @@ -114,8 +128,8 @@ box-sizing: border-box; z-index: 10; border-radius: 50%; - border: 2px solid @brand-bg-gray; - background-color: @brand-bg-white; + border: 2px solid var(--gray); + background-color: var(--bg-white); } .steps-icon { @@ -123,7 +137,7 @@ color: var(--brand-secondary); z-index: 15; - line-height: @circle-size; + line-height: var(--progress-steps-circle-size); text-align: center; font-size: 1.1rem; } @@ -133,7 +147,7 @@ font-family: var(--brand-headline); z-index: 15; - line-height: @circle-size; + line-height: var(--progress-steps-circle-size); text-align: center; font-size: 1rem; } @@ -142,15 +156,15 @@ &:after { content: ""; position: absolute; - background-color: @brand-bg-gray; + background-color: var(--gray); z-index: 5; - height: @line-width; + height: var(--progress-steps-line-width); /* Prevents small render gaps on certain resolutions */ width: 102%; left: 0; top: 50%; - margin-top: (-@line-width / 2); + margin-top: calc(0px - var(--progress-steps-line-width) / 2); } &:first-child { @@ -210,15 +224,15 @@ &:after { background: linear-gradient( to right, - @brand-primary 50%, - @brand-bg-gray 50% + var(--brand-primary) 50%, + var(--gray) 50% ); } &:first-child, &:last-child { &:after { - background: linear-gradient(to right, var(--brand-primary) 100%); + background: var(--brand-primary); } } @@ -244,7 +258,7 @@ line-height: 1rem; margin-top: var(--base-margin-xs); font-size: var(--font-size-small); - color: @text-gray; + color: var(--text-gray); } } @@ -271,20 +285,22 @@ font-size: 1.1rem; li { - padding: @list-item-padding-desktop; + padding: var(--progress-steps-list-item-padding-desktop); height: auto; > a { - padding: @list-item-padding-desktop; + padding: var(--progress-steps-list-item-padding-desktop); .negative-margin(@list-item-padding-desktop); &:before { - width: @circle-size-desktop; - height: @circle-size-desktop; - line-height: @circle-size-desktop; - margin-left: (-@circle-size-desktop / 2); - top: (@list-item-padding-desktop-top / 2); - margin-top: (-@circle-size-desktop / 2); + width: var(--progress-steps-circle-size-desktop); + height: var(--progress-steps-circle-size-desktop); + line-height: var(--progress-steps-circle-size-desktop); + margin-left: calc( + 0px - var(--progress-steps-circle-size-desktop) / 2 + ); + top: calc(var(--progress-steps-list-item-padding-desktop-top) / 2); + margin-top: calc(0px - var(--progress-steps-circle-size-desktop) / 2); border-width: 2px; } } @@ -293,12 +309,12 @@ .steps-icon, .steps-number, &:before { - width: @circle-size-desktop; - height: @circle-size-desktop; - line-height: @circle-size-desktop; - margin-left: (-@circle-size-desktop / 2); - top: (@list-item-padding-desktop-top / 2); - margin-top: (-@circle-size-desktop / 2); + width: var(--progress-steps-circle-size-desktop); + height: var(--progress-steps-circle-size-desktop); + line-height: var(--progress-steps-circle-size-desktop); + margin-left: calc(0px - var(--progress-steps-circle-size-desktop) / 2); + top: calc(var(--progress-steps-list-item-padding-desktop-top) / 2); + margin-top: calc(0px - var(--progress-steps-circle-size-desktop) / 2); border-width: 2px; } @@ -313,9 +329,9 @@ /* Line */ &:after { - top: (@list-item-padding-desktop-top / 2); - margin-top: (-@line-width-desktop / 2); - height: @line-width-desktop; + top: calc(var(--progress-steps-list-item-padding-desktop-top) / 2); + margin-top: calc(0px - var(--progress-steps-line-width-desktop) / 2); + height: var(--progress-steps-line-width-desktop); } } @@ -330,16 +346,16 @@ li { display: block; text-align: left; - padding: @list-item-padding-desktop-vertical; + padding: var(--progress-steps-list-item-padding-desktop-vertical); > a { - padding: @list-item-padding-desktop-vertical; + padding: var(--progress-steps-list-item-padding-desktop-vertical); width: auto; .negative-margin(@list-item-padding-desktop-vertical); &:before { margin-left: 0; - left: @vertical-left; + left: var(--progress-steps-vertical-left); top: 50%; } } @@ -349,15 +365,15 @@ .steps-icon, .steps-number { margin-left: 0; - left: @vertical-left; + left: var(--progress-steps-vertical-left); top: 50%; } /* Line */ &:after { - width: @line-width-desktop; - left: @vertical-left; - margin-left: @vertical-margin; + width: var(--progress-steps-line-width-desktop); + left: var(--progress-steps-vertical-left); + margin-left: var(--progress-steps-vertical-margin); top: 0; bottom: 0; height: auto; @@ -367,9 +383,9 @@ &:first-child { &:after { height: 50%; - width: @line-width-desktop; - left: @vertical-left; - margin-left: @vertical-margin; + width: var(--progress-steps-line-width-desktop); + left: var(--progress-steps-vertical-left); + margin-left: var(--progress-steps-vertical-margin); top: auto; } } @@ -377,15 +393,15 @@ &:last-child { &:after { height: 50%; - width: @line-width-desktop; - left: @vertical-left; - margin-left: @vertical-margin; + width: var(--progress-steps-line-width-desktop); + left: var(--progress-steps-vertical-left); + margin-left: var(--progress-steps-vertical-margin); } } } .steps-ongoing:after { - background: linear-gradient(var(--brand-primary) 50%, @brand-bg-gray 50%); + background: linear-gradient(var(--brand-primary) 50%, var(--gray) 50%); } } } diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less index 3c69ddf7f0..2aab02cccc 100644 --- a/src/less/components/topbar.less +++ b/src/less/components/topbar.less @@ -457,7 +457,7 @@ font-family: var(--brand-headline); font-weight: var(--font-weight-normal); font-size: 1.125rem; - color: @text-gray; + color: var(--text-gray); cursor: pointer; text-decoration: none; display: flex; diff --git a/src/less/core/typography.less b/src/less/core/typography.less index 69da626ed1..04b3712ba0 100644 --- a/src/less/core/typography.less +++ b/src/less/core/typography.less @@ -159,9 +159,10 @@ h5, h6, .h6 { + font-family: var(--brand-headline); font-size: 0.875rem; line-height: 1.375rem; - font-weight: var(--font-weight-bold, 700); + font-weight: var(--font-weight-header, 400); .material-icons, :is( diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less index 855b61e350..261127e064 100644 --- a/src/less/documentation-swedbankpay.less +++ b/src/less/documentation-swedbankpay.less @@ -1039,7 +1039,7 @@ flex-grow: 1; padding-left: 0; padding-right: 0; - background: @brand-bg-white; + background: var(--bg-white); } .view-heading { diff --git a/src/less/variables-payex.less b/src/less/variables-payex.less index 0303c699ee..ba1e3ba16d 100644 --- a/src/less/variables-payex.less +++ b/src/less/variables-payex.less @@ -8,7 +8,6 @@ /* Grayscale */ @black: #000000; -@text-gray: @brand-secondary; @list-gray: #999999; @light-gray: #f4f4f4; @white: #ffffff; @@ -153,7 +152,6 @@ body { :root { /* Grayscale */ --black: #000000; - --text-gray: var(--brand-secondary, #3c3c3c); --list-gray: #999999; --light-gray: #f4f4f4; --gray: #c8c8c8; @@ -195,7 +193,7 @@ body { --brand-bg-4: #eaf8fc; --brand-bg-gray: var(--brand-secondary-light-2, #c8c8c8); --bg-grey: var(--brand-secondary-light-2, #c8c8c8); - --brand-bg-white: #ffffff; + --bg-white: #ffffff; --bg-quaternary: var(--list-gray, #999999); /* State colors */ @@ -229,6 +227,7 @@ body { --text-link: #1c7d2e; --text-hover: var(--brand-primary); --text-disabled: var(--brand-secondary-light-2); + --text-gray: var(--brand-secondary, #3c3c3c); /* Checkbox */ --checkbox-checked-color: var(--brand-secondary, #3c3c3c); diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less index c11a514add..b8b3bbe9a9 100644 --- a/src/less/variables-swedbankpay.less +++ b/src/less/variables-swedbankpay.less @@ -6,7 +6,6 @@ /* Grayscale */ @black: #222222; -@text-gray: #767676; @list-gray: #999999; @light-gray: #f9f8f6; @white: #ffffff; @@ -182,6 +181,7 @@ --text-white: var(--white, #ffffff); --text-disabled: var(--brown-light, #d4c4bc); --brand-accent-links: var(--brand-turquoise-dark, #257886); + --text-gray: #767676; // Communication colors --brand-yellow: #fdc129; diff --git a/src/scripts/main/dropdown/index.js b/src/scripts/main/dropdown/index.js index 2c09e0d10b..5538ef824b 100644 --- a/src/scripts/main/dropdown/index.js +++ b/src/scripts/main/dropdown/index.js @@ -56,17 +56,21 @@ const init = (id) => { let dropdownMenu; if (id) { - dropdownContainers = document?.getElementById(id); + /* Find the dropdown container by id, and wrap it in a NodeList like structure to + avoid friction in the rest of the code */ + const element = document.getElementById(id); + dropdownContainers = element ? [element] : []; - if (!dropdownContainers) { + if (!dropdownContainers.length) { 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); + + dropdownToggles = element.querySelectorAll(SELECTORS.TOGGLE); + dropdownMenu = element.querySelectorAll(SELECTORS.DROPDOWNMENU); } else { dropdownContainers = document.querySelectorAll(SELECTORS.DROPDOWNLIST); dropdownToggles = document.querySelectorAll( diff --git a/src/scripts/main/dropdown/index.test.js b/src/scripts/main/dropdown/index.test.js index c77f4a956b..0951370655 100644 --- a/src/scripts/main/dropdown/index.test.js +++ b/src/scripts/main/dropdown/index.test.js @@ -1,7 +1,6 @@ import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render } from "@testing-library/react"; import "@testing-library/jest-dom"; -import userEvent from "@testing-library/user-event"; import dropdown from "./index"; @@ -50,6 +49,24 @@ describe("Scripts: Dropdown", () => { expect(dropdown.init()).toBeNull(); expect(console.warn).toHaveBeenCalled(); }); + + it("initializes with ID", () => { + render(); + + console.warn = jest.fn(); + + expect(dropdown.init("foo")).not.toBeNull(); + expect(console.warn).not.toHaveBeenCalled(); + }); + + it("init returns null if no dropdown with ID is found and prints a warning message", () => { + render(); + + console.error = jest.fn(); + + expect(dropdown.init("bar")).toBeNull(); + expect(console.error).toHaveBeenCalled(); + }); }); it("button click gives dropdown-div class of active", () => {