From 4c3bdc686076f87f96f9c3cb70fdf8b9caf4437e Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Thu, 28 Sep 2023 13:55:31 +0200 Subject: [PATCH 1/3] SWED-2288 style refactor btn-bank-id btn-secondary --- src/less/components/button.less | 51 +++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/src/less/components/button.less b/src/less/components/button.less index 0e2addef66..f5d384170e 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -85,28 +85,8 @@ background-color: var(--btn-primary-color); } - &.btn-bank-id { - display: flex; - justify-content: center; - - i.bank-id { - height: 1.5rem; - width: 1.5rem; - display: inline-flex; - background-image: none; - margin-left: 0.5rem; - background-color: var(--btn-primary-text-color); - - &-no, - &.no { - mask-image: url("../../icons/bank-id/bankid_no.svg"); - } - - &-se, - &.se { - mask-image: url("../../icons/bank-id/bankid_se.svg"); - } - } + &.btn-bank-id i.bank-id { + background-color: var(--btn-primary-text-color); } } @@ -125,6 +105,33 @@ box-shadow: inset 0 0 0 3px var(--btn-active-color); border-color: var(--btn-active-color); } + + &.btn-bank-id i.bank-id { + background-color: var(--btn-secondary-text-color); + } + } + + &:is(.btn-primary, .btn-secondary).btn-bank-id { + display: flex; + justify-content: center; + + i.bank-id { + height: 1.5rem; + width: 1.5rem; + display: inline-flex; + background-image: none; + margin-left: 0.5rem; + + &-no, + &.no { + mask-image: url("../../icons/bank-id/bankid_no.svg"); + } + + &-se, + &.se { + mask-image: url("../../icons/bank-id/bankid_se.svg"); + } + } } &.btn-tertiary { From ae17865610b8317b4880d93dd0c9cbe9b8361d67 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Mon, 2 Oct 2023 15:24:59 +0200 Subject: [PATCH 2/3] SWED-2288 documentation button bank-id type --- RELEASE_NOTES.md | 1 + .../components/Buttons/constants.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 6cd7e5b03f..547f278b96 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -9,6 +9,7 @@ ### Non breaking UI changes - add possibility to disable rotation of the dropdown toggle icon on active state +- add possibility to style bank-id button as secondary ## Testing diff --git a/src/App/ComponentsDocumentation/components/Buttons/constants.js b/src/App/ComponentsDocumentation/components/Buttons/constants.js index d8f54782b7..50d35e1bb3 100644 --- a/src/App/ComponentsDocumentation/components/Buttons/constants.js +++ b/src/App/ComponentsDocumentation/components/Buttons/constants.js @@ -289,6 +289,24 @@ export const overviewButtons = { }, ], }, + { + id: "button-type", + title: "Button type", + values: [ + { + name: "Primary", + value: { + type: "primary", + }, + }, + { + name: "Secondary", + value: { + type: "secondary", + }, + }, + ], + }, ], }, title: "BankID button", From 14c5b78438d6538cbe5e6012b7b127a82a5f2d59 Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Mon, 2 Oct 2023 16:02:25 +0200 Subject: [PATCH 3/3] SWED-2288 fix E2E topbar test fail iOS --- package-lock.json | 68 ++++++++++++------- package.json | 2 +- .../components/Topbar/topbar.e2e.spec.js | 20 +++--- 3 files changed, 57 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index c9bb6181c4..83524d1ac6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/preset-env": "7.20.2", "@babel/preset-react": "^7.18.6", - "@playwright/test": "^1.34.3", + "@playwright/test": "^1.38.1", "@sentry/webpack-plugin": "^1.20.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", @@ -3355,22 +3355,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.34.3", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz", - "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", + "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", "dev": true, "dependencies": { - "@types/node": "*", - "playwright-core": "1.34.3" + "playwright": "1.38.1" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" - }, - "optionalDependencies": { - "fsevents": "2.3.2" + "node": ">=16" } }, "node_modules/@polka/url": { @@ -12746,16 +12742,34 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", + "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "dev": true, + "dependencies": { + "playwright-core": "1.38.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, "node_modules/playwright-core": { - "version": "1.34.3", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz", - "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", + "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", "dev": true, "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } }, "node_modules/postcss": { @@ -20503,14 +20517,12 @@ } }, "@playwright/test": { - "version": "1.34.3", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz", - "integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", + "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", "dev": true, "requires": { - "@types/node": "*", - "fsevents": "2.3.2", - "playwright-core": "1.34.3" + "playwright": "1.38.1" } }, "@polka/url": { @@ -27605,10 +27617,20 @@ "find-up": "^4.0.0" } }, + "playwright": { + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", + "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "dev": true, + "requires": { + "fsevents": "2.3.2", + "playwright-core": "1.38.1" + } + }, "playwright-core": { - "version": "1.34.3", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz", - "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==", + "version": "1.38.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", + "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", "dev": true }, "postcss": { diff --git a/package.json b/package.json index 94d10e3415..61cd95b6a5 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/preset-env": "7.20.2", "@babel/preset-react": "^7.18.6", - "@playwright/test": "^1.34.3", + "@playwright/test": "^1.38.1", "@sentry/webpack-plugin": "^1.20.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js index 5955bd156a..9612da40a2 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js +++ b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js @@ -9,12 +9,12 @@ test("Topbar page exist", async ({ page }) => { }) .click(); await expect(page.getByRole("link", { name: "Topbar" })).toHaveCount( - page.viewportSize().width < 991 ? 1 : 2, + page.viewportSize().width < 991 ? 1 : 2 ); await page.getByText("call_to_actionTopbararrow_forward").click(); await expect(page).toHaveTitle(/Topbar/); await expect( - page.getByRole("heading", { name: "Topbar", exact: true, level: 1 }), + page.getByRole("heading", { name: "Topbar", exact: true, level: 1 }) ).toBeVisible(); }); @@ -44,7 +44,9 @@ let brand; * @param {string} tabBtnText text of the doc preview container tab */ const clickDocPreviewTab = async (page, tabBtnText) => { - await page.getByRole("link", { name: tabBtnText, exact: true }).click(); + await page + .getByRole("link", { name: tabBtnText, exact: true }) + .click({ force: true }); }; test.describe("visual regressions topbar", () => { @@ -56,14 +58,14 @@ test.describe("visual regressions topbar", () => { test(`general UI closed`, async ({ page }) => { await expect( - page.getByRole("heading", { name: "Topbar", exact: true }), + page.getByRole("heading", { name: "Topbar", exact: true }) ).toBeVisible(); for (const topbarTab of topbarTabs) { clickDocPreviewTab(page, topbarTab.btnText); await expect( - page.locator(".component-preview-content > div"), + page.locator(".component-preview-content > div") ).toHaveScreenshot(`${brand}-topbar-${topbarTab.name}-closed.png`); } }); @@ -77,9 +79,9 @@ test.describe("visual regressions topbar", () => { await page.locator("#demo-topbar").getByRole("link").nth(2).hover(); await expect( - page.locator("#demo-topbar").getByRole("navigation"), + page.locator("#demo-topbar").getByRole("navigation") ).toHaveScreenshot( - `${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png`, + `${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png` ); } }); @@ -96,7 +98,7 @@ test.describe("visual regressions topbar", () => { : page.locator(".component-preview-content > div"); await expect(modalContainer).toHaveScreenshot( - `${brand}-topbar-${topbarTab.name}-opened.png`, + `${brand}-topbar-${topbarTab.name}-opened.png` ); } }); @@ -105,7 +107,7 @@ test.describe("visual regressions topbar", () => { page, }) => { for (const topbarTab of topbarTabs.filter( - (tab) => tab.desktopTopbar && !tab.isLegacy, + (tab) => tab.desktopTopbar && !tab.isLegacy )) { clickDocPreviewTab(page, topbarTab.btnText);