diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 9ac40d894c..0047b60a68 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -1,19 +1,20 @@ # Changelog -## [10.8.5] - 25.08.2023 +## \[10.8.6\] - 13.09.2023 ## Bug Fixes -- We reverted back the way CSS stylesheets were imported internally. It caused a regression bug, svg files would not load when imported from CSS properties (e.g. checkbox, ...). Paths resolution were failing. (not an issue for projects importing CSS via CDN, only for the ones importing styles via the local npm package) - ## Component changes ### 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 -- E2E tests for topbar +- E2E tests for dropdown component ## Design System website -- fix a homepage UI bug (section's height) +- expand components preview containers to full screen (only in Topbar component for now) diff --git a/package-lock.json b/package-lock.json index c9bb6181c4..3380519da6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@swedbankpay/design-guide", - "version": "10.8.5", + "version": "10.8.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@swedbankpay/design-guide", - "version": "10.8.5", + "version": "10.8.6", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -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.39.0", "@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.39.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", + "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", "dev": true, "dependencies": { - "@types/node": "*", - "playwright-core": "1.34.3" + "playwright": "1.39.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" - }, - "optionalDependencies": { - "fsevents": "2.3.2" + "node": ">=16" } }, "node_modules/@polka/url": { @@ -5738,9 +5734,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001523", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001523.tgz", - "integrity": "sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==", + "version": "1.0.30001547", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz", + "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==", "dev": true, "funding": [ { @@ -12746,22 +12742,40 @@ "node": ">=8" } }, + "node_modules/playwright": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", + "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "dev": true, + "dependencies": { + "playwright-core": "1.39.0" + }, + "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.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", "dev": true, "bin": { "playwright-core": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" } }, "node_modules/postcss": { - "version": "8.4.25", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz", - "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "dev": true, "funding": [ { @@ -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.39.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", + "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", "dev": true, "requires": { - "@types/node": "*", - "fsevents": "2.3.2", - "playwright-core": "1.34.3" + "playwright": "1.39.0" } }, "@polka/url": { @@ -22399,9 +22411,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001523", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001523.tgz", - "integrity": "sha512-I5q5cisATTPZ1mc588Z//pj/Ox80ERYDfR71YnvY7raS/NOk8xXlZcB0sF7JdqaV//kOaa6aus7lRfpdnt1eBA==", + "version": "1.0.30001547", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001547.tgz", + "integrity": "sha512-W7CrtIModMAxobGhz8iXmDfuJiiKg1WADMO/9x7/CLNin5cpSbuBjooyoIUVB5eyCc36QuTVlkVa1iB2S5+/eA==", "dev": true }, "chalk": { @@ -27605,16 +27617,26 @@ "find-up": "^4.0.0" } }, + "playwright": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", + "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "dev": true, + "requires": { + "fsevents": "2.3.2", + "playwright-core": "1.39.0" + } + }, "playwright-core": { - "version": "1.34.3", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz", - "integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", "dev": true }, "postcss": { - "version": "8.4.25", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.25.tgz", - "integrity": "sha512-7taJ/8t2av0Z+sQEvNzCkpDynl0tX3uJMCODi6nT3PfASC7dYCWV9aQ+uiCf+KBD4SEFcu+GvJdGdwzQ6OSjCw==", + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", "dev": true, "requires": { "nanoid": "^3.3.6", diff --git a/package.json b/package.json index 94d10e3415..2eb9a0ecb1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@swedbankpay/design-guide", - "version": "10.8.5", + "version": "10.8.6", "description": "Swedbank Pay Design Guide", "main": "src/scripts/main/index.js", "scripts": { @@ -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.39.0", "@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/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/__snapshots__/index.test.js.snap index 2d4b6b35bb..68d389bdea 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.8.5 + 10.8.6 `; diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png index e7622c52cb..ff38a1c34b 100644 Binary files a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-chromium-darwin.png index 8d10db36aa..d2c48dc42d 100644 Binary files a/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Accordion/accordion.e2e.spec.js-snapshots/SwedbankPay-accordions-chromium-darwin.png differ 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", diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-Mobile-Chrome-darwin.png index d3c0ba0922..635a9e264f 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-chromium-darwin.png index 9f218d2f20..06d0627b8c 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-button-chromium-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 313106dc33..4f1e5b6835 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/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png index 3a19fb4ab6..923cedc13f 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png index cf2beaf8c7..429f153c41 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png index 37e5a4fc21..cbdb9cafa5 100644 Binary files a/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Dialog/dialog.e2e.spec.js-snapshots/SwedbankPay-dialog-modal-screen-chromium-darwin.png differ 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 c2eb637aea..d11dd40a1e 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Dropdown/__snapshots__/index.test.js.snap @@ -292,6 +292,18 @@ exports[`Documentation: Dropdown DeveloperDocumentation renders 1`] = ` > Developer Documentation +

+ Style +

+

+ Add + + .no-rotation + + CSS class on the dropdown toggle to disable the icon rotation. +

JavaScript methods

diff --git a/src/App/ComponentsDocumentation/components/Dropdown/constants.js b/src/App/ComponentsDocumentation/components/Dropdown/constants.js index 6483b0415e..639a2c4a66 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/constants.js +++ b/src/App/ComponentsDocumentation/components/Dropdown/constants.js @@ -147,7 +147,7 @@ const dropdownSidebarOptions = () => ({ ], }, { - id: "preffered_position", + id: "preferred_position", title: "Position", values: [ { @@ -186,6 +186,19 @@ const dropdownSidebarOptions = () => ({ ], }, ], + checkbox: [ + { + inputs: [ + { + id: "toggle-icon-rotation", + name: "Disable toggle icon rotation", + value: { + noRotation: true, + }, + }, + ], + }, + ], }); export const overviewDropdown = { @@ -237,7 +250,7 @@ export const overviewDropdown = { ], }, { - id: "preffered_position", + id: "preferred_position", title: "Position", values: [ { @@ -276,6 +289,19 @@ export const overviewDropdown = { ], }, ], + checkbox: [ + { + inputs: [ + { + id: "toggle-icon-rotation", + name: "Disable toggle icon rotation", + value: { + noRotation: true, + }, + }, + ], + }, + ], }, title: "Select", description: ( @@ -485,6 +511,7 @@ export const howToUse = [ icon="filter_list" iconAfter={false} largePadding={true} + noRotation={true} /> + await ( + await page.locator(".showcase-panel-advanced").getAttribute("class") + ).includes("options-active"); + +const openOptions = async (page) => { + const areOptionsDisplayed = await checkIfOptionsDisplayed(page); + + if (!areOptionsDisplayed) { + await page.getByRole("button", { name: "Open options menu" }).click(); + } +}; + +const closeOptions = async (page) => { + const areOptionsDisplayed = await checkIfOptionsDisplayed(page); + + if (areOptionsDisplayed) { + await page.getByRole("button", { name: "Close options menu" }).click(); + } +}; + +test("Dropdown page exist", async ({ page }) => { + await page.goto("http://localhost:3000/"); + await page + .getByRole("link", { + name: "Components Find all currently available components here", + }) + .click(); + await expect(page.getByRole("link", { name: "Dropdown" })).toHaveCount( + page.viewportSize().width < 991 ? 1 : 2 + ); + await page.getByText("expand_moreDropdownarrow_forward").click(); + await expect(page).toHaveTitle(/Dropdown/); + await expect( + page.getByRole("heading", { name: "Dropdown", exact: true, level: 1 }) + ).toBeVisible(); +}); +test.describe(`dropdown visual regressions`, () => { + /** + * @type string + */ + let brand; + /** + * @type {import("@playwright/test").Locator} + */ + let previewContainer; + + test.beforeEach(async ({ page }) => { + await page.goto("http://localhost:3000/components/dropdown"); + + brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx"; + previewContainer = await page.locator(".component-preview-content > div"); + }); + + test(`visual regresion dropdown - toggle normal`, async ({ page }) => { + await expect(previewContainer).toHaveScreenshot( + `${brand}-dropdown-toggle-normal.png` + ); + }); + test(`visual regresion dropdown - toggle hovered`, async ({ page }) => { + await previewContainer.getByRole("button").hover(); + await expect(previewContainer).toHaveScreenshot( + `${brand}-dropdown-toggle-hovered.png` + ); + }); + test(`visual regresion dropdown - toggle active`, async ({ page }) => { + await previewContainer.getByRole("button").click(); + await expect(previewContainer).toHaveScreenshot( + `${brand}-dropdown-toggle-active.png` + ); + }); + test(`visual regresion dropdown - select dropdown opened`, async ({ + page, + }) => { + await previewContainer.getByRole("button").click(); + await expect(page.locator(".component-preview-content")).toHaveScreenshot( + `${brand}-dropdown-select-opened-previewContainer.png` + ); + await expect( + previewContainer.getByText( + "VISA Mastercard AMEX Maestro card Stripe Vipps Swish" + ) + ).toHaveScreenshot(`${brand}-dropdown-select-opened-dropdownContainer.png`); + }); +}); + +test.describe(`dropdown options behave correctly`, () => { + /** + * @type string + */ + let brand; + /** + * @type {import("@playwright/test").Locator} + */ + let previewContainer; + + test.beforeEach(async ({ page }) => { + await page.goto("http://localhost:3000/components/dropdown"); + + brand = (await page.title()).includes("Swedbank") ? "SwedbankPay" : "PayEx"; + previewContainer = await page.locator(".component-preview-content > div"); + }); + + test("dropdown options - disable rotation", async ({ page }) => { + await expect(previewContainer.getByRole("button")).not.toHaveClass( + "no-rotation" + ); + await expect(previewContainer.getByRole("button").locator("i")).toHaveCSS( + "transform", + "none" + ); + await previewContainer.getByRole("button").click(); + await expect(previewContainer.getByRole("button").locator("i")).toHaveCSS( + "transform", + "matrix(-1, 0, 0, -1, 0, 0)" + ); + await previewContainer.getByRole("button").first().click(); + await expect(previewContainer.getByRole("button").locator("i")).toHaveCSS( + "transform", + "none" + ); + await openOptions(page); + await page + .getByLabel("Disable toggle icon rotation") + .click({ force: true }); + await closeOptions(page); + await expect(previewContainer.getByRole("button").first()).toHaveClass( + /no-rotation/ + ); + await previewContainer.getByRole("button").click(); + await expect( + previewContainer.getByRole("button").first().locator("i") + ).toHaveCSS("transform", "none"); + }); + // TODO: test toggle type + test("dropdown options - menu width", async ({ page }) => { + const buttonWidth = ( + await previewContainer.getByRole("button").first().boundingBox() + ).width; + + await previewContainer.getByRole("button").first().click(); + await expect( + ( + await previewContainer.locator(".dropdown-menu").boundingBox() + ).width + ).not.toBe(buttonWidth); + await previewContainer.getByRole("button").first().click(); + await openOptions(page); + await page.getByLabel("Full width").click({ force: true }); + await closeOptions(page); + await previewContainer.getByRole("button").first().click(); + await expect( + ( + await previewContainer.locator(".dropdown-menu").boundingBox() + ).width + ).toBe(buttonWidth); + }); + // TODO: test menu position + // TODO: test states (error, etc) + // TODO: test keyboard navigation + // TODO: test accessibility + // TODO: test custom content + // TODO: test navigation inside modal +}); diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..1f1ba73d96 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..9ae1b5353f Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-chromium-darwin.png new file mode 100644 index 0000000000..f783b9c3bc Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-firefox-darwin.png new file mode 100644 index 0000000000..787b23fb4b Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-webkit-darwin.png new file mode 100644 index 0000000000..abbf06a318 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-dropdownContainer-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..5454e90d1a Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..d1e4492424 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png new file mode 100644 index 0000000000..43ff59b3c8 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png new file mode 100644 index 0000000000..48fad3f5e6 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png new file mode 100644 index 0000000000..c66aa36a68 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-select-opened-previewContainer-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..365b4d709f Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..64d21446e8 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png new file mode 100644 index 0000000000..27800de0d3 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png new file mode 100644 index 0000000000..3bc547b689 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png new file mode 100644 index 0000000000..74142915dd Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-active-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..af9847cac2 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..377dd4941d Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png new file mode 100644 index 0000000000..4a5d987ded Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png new file mode 100644 index 0000000000..9bf3f88a38 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png new file mode 100644 index 0000000000..67110fa5ec Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-hovered-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..160571b8cf Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..d35c8072e9 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-Mobile-Safari-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png new file mode 100644 index 0000000000..7f0c5e1445 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png new file mode 100644 index 0000000000..f979c625f4 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-firefox-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png new file mode 100644 index 0000000000..763693f351 Binary files /dev/null and b/src/App/ComponentsDocumentation/components/Dropdown/dropdown.e2e.spec.js-snapshots/SwedbankPay-dropdown-toggle-normal-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Dropdown/index.js b/src/App/ComponentsDocumentation/components/Dropdown/index.js index 5d5fda3473..5f85a025c3 100644 --- a/src/App/ComponentsDocumentation/components/Dropdown/index.js +++ b/src/App/ComponentsDocumentation/components/Dropdown/index.js @@ -93,6 +93,11 @@ const ContentGuidelines = () => ( const DeveloperDocumentation = () => (

Developer Documentation

+

Style

+

+ Add CSS class on the + dropdown toggle to disable the icon rotation. +

JavaScript methods

Use to initialize diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-Mobile-Chrome-darwin.png index eedf459ae7..f526a8b9ac 100644 Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-chromium-darwin.png index f51edfcfd2..93f48d9bb9 100644 Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png index 6b945a1382..e666679797 100644 Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png index f75aee0f83..b8fbde2971 100644 Binary files a/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Expandable/expandable.e2e.spec.js-snapshots/SwedbankPay-expandable-icons-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png index 2c4b6e490e..8d9678a2f3 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png index a52a54e8aa..050846bf66 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-danger-toast-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png index a61ddfafda..e30fae1196 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png index 150000374d..9c5ffaaa0f 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-neutral-toast-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png index 4c602f2b7f..2e9e31591d 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png index b83547ea82..7c80796134 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-success-toast-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png index 5a1d5c0f9b..f4fe883a51 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-Mobile-Chrome-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png index a7a960a676..61f4aaeca7 100644 Binary files a/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png and b/src/App/ComponentsDocumentation/components/Toast/toast.e2e.spec.js-snapshots/SwedbankPay-warning-toast-chromium-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/Topbar/index.js b/src/App/ComponentsDocumentation/components/Topbar/index.js index 9c0311b703..93b17934c5 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/index.js +++ b/src/App/ComponentsDocumentation/components/Topbar/index.js @@ -44,6 +44,7 @@ const Overview = () => ( showCasePanel codeFigure showCasePanelAdvanced={topbarShowcase} + showExpandPreview={true} />

When to consider something else