From 9094b690f758ae335529aa8155e48e9c72dd5a79 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Fri, 26 Jul 2024 14:03:33 +0200 Subject: [PATCH] SWED-2521 fix progress-steps line 1st & last --- package-lock.json | 52 ++++----- package.json | 2 +- src/less/components/datepicker.less | 24 +++-- src/less/components/progress-steps.less | 134 +++++++++++++----------- src/less/components/topbar.less | 2 +- src/less/documentation-swedbankpay.less | 2 +- src/less/variables-payex.less | 4 +- src/less/variables-swedbankpay.less | 2 +- 8 files changed, 124 insertions(+), 98 deletions(-) diff --git a/package-lock.json b/package-lock.json index a4ceb8e75b..860ef71bd2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { @@ -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": { @@ -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..22ce8a3d68 100644 --- a/package.json +++ b/package.json @@ -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/less/components/datepicker.less b/src/less/components/datepicker.less index 408447c671..9dcba666fb 100644 --- a/src/less/components/datepicker.less +++ b/src/less/components/datepicker.less @@ -24,8 +24,12 @@ box-sizing: border-box; touch-action: manipulation; background: #fff; - box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, - 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); + box-shadow: + 1px 0 0 #e6e6e6, + -1px 0 0 #e6e6e6, + 0 1px 0 #e6e6e6, + 0 -1px 0 #e6e6e6, + 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-calendar.open, .flatpickr-calendar.inline { @@ -63,7 +67,9 @@ .flatpickr-days .dayContainer:nth-child(n + 2) .flatpickr-day.inRange:nth-child(7n + 1) { - box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; + box-shadow: + -2px 0 0 #e6e6e6, + 5px 0 0 #e6e6e6; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { @@ -530,7 +536,9 @@ span.flatpickr-weekday { } .flatpickr-day.inRange { border-radius: 0; - box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; + box-shadow: + -5px 0 0 #e6e6e6, + 5px 0 0 #e6e6e6; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, @@ -551,7 +559,9 @@ span.flatpickr-weekday { } .flatpickr-day.week.selected { border-radius: 0; - box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; + box-shadow: + -5px 0 0 #569ff7, + 5px 0 0 #569ff7; } .flatpickr-day.hidden { visibility: hidden; @@ -749,8 +759,8 @@ span.flatpickr-weekday { } .flatpickr-day.selected:hover { - background: @text-gray; - border: @text-gray; + background: var(--text-gray); + border: var(--text-gray); } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), diff --git a/src/less/components/progress-steps.less b/src/less/components/progress-steps.less index 682361a869..e6a6e34e52 100644 --- a/src/less/components/progress-steps.less +++ b/src/less/components/progress-steps.less @@ -1,19 +1,33 @@ @import "../global.less"; +.steps { + --progress-steps-list-item-padding: 4.25rem 0 0 0; + --progress-steps-list-item-padding-desktop-top: 4.25rem; + --progress-steps-list-item-padding-desktop: var( + --progress-steps-list-item-padding-desktop-top + ) + 0 1.2rem 0; + --progress-steps-list-item-padding-desktop-vertical: 2rem 1.5rem 2rem 5.25rem; + + --progress-steps-circle-size: 30px; + --progress-steps-circle-size-desktop: 40px; + + --progress-steps-vertical-left: 1.7rem; + --progress-steps-vertical-margin: calc( + (var(--progress-steps-circle-size-desktop) / 2) - + (var(--progress-steps-line-width-desktop) / 2) + ); + + --progress-steps-line-width: 2px; + --progress-steps-line-width-desktop: 2px; +} + +// LESS vars still needed because used in LESS function .negative-margin() @list-item-padding: 4.25rem 0 0 0; @list-item-padding-desktop-top: 4.25rem; @list-item-padding-desktop: @list-item-padding-desktop-top 0 1.2rem 0; @list-item-padding-desktop-vertical: 2rem 1.5rem 2rem 5.25rem; -@circle-size: 30px; -@circle-size-desktop: 40px; - -@vertical-left: 1.7rem; -@vertical-margin: ((@circle-size-desktop / 2) - (@line-width-desktop / 2)); - -@line-width: 2px; -@line-width-desktop: 2px; - .negative-margin (@margin-list) { @length: length(@margin-list); @@ -50,7 +64,7 @@ list-style: none; margin: 0; padding: 0; - background-color: @brand-bg-white; + background-color: var(--bg-white); display: flex; justify-content: space-between; position: relative; @@ -60,19 +74,19 @@ flex: 0 1 100%; flex-grow: 1; position: relative; - padding: @list-item-padding; + padding: var(--progress-steps-list-item-padding); text-align: center; line-height: 1rem; overflow: hidden; height: 0; - color: @text-gray; + color: var(--text-gray); > 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/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..12b7e72e4b 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; @@ -195,7 +194,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 +228,7 @@ body { --text-link: #1c7d2e; --text-hover: var(--brand-primary); --text-disabled: var(--brand-secondary-light-2); + --text-gray: var(--brand-secondary); /* 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;