diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 44d453041f..a9e9494403 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -5,11 +5,12 @@ about: Create a report to help us improve -**Describe the bug** +## Describe the bug Provide a more detailed introduction to the issue itself, and why you consider it to be a bug. -**To Reproduce** +## To Reproduce + Steps to reproduce the behavior: 1. Go to '...' @@ -17,35 +18,35 @@ Steps to reproduce the behavior: 3. Scroll down to '....' 4. See error -**Expected behavior** +## Expected behavior A clear and concise description of what you expected to happen. -**Actual behavior** +## Actual behavior A clear and concise description of what actually happened. -**Possible fix** +## Possible fix Not obligatory, but suggest a fix or reason for the bug. -**Screenshots** +## Screenshots If applicable, add screenshots to help explain your problem. -**Desktop (please complete the following information):** +## Desktop (please complete the following information): -- OS: [e.g. iOS] -- Browser [e.g. chrome, safari] -- Version [e.g. 22] +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] -**Smartphone (please complete the following information):** +## Smartphone (please complete the following information): -- Device: [e.g. iPhone6] -- OS: [e.g. iOS8.1] -- Browser [e.g. stock browser, safari] -- Version [e.g. 22] +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] -**Additional context** +## Additional context Add any other context about the problem here. diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index c6af069854..22c78df899 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -6,7 +6,11 @@ ## Component changes -- Topbar - v2 experimental stage - disabled by default (migration involves breaking changes) +- new Colors + +- Colors utilities: + - removed the possibility to combine text-color utility classes WITH `.text-muted` to decrease their opacity + - `.text-muted` class still exist, but it will always mean a full opacity color ### Non breaking UI changes @@ -14,4 +18,4 @@ ## Design System website -- Add the new Playbook section in Identity +- Update the Colors page for SwedbankPay side diff --git a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap index e4ffacbddb..3b2f225d7f 100644 --- a/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/ActionList/__snapshots__/index.test.js.snap @@ -672,7 +672,7 @@ exports[`Components: ActionList renders 1`] = ` className="row" >

-

- Background colors -

-

- To maintain an open and welcoming experience we mostly use no background color, that is white. Our background colors have a functional role and are used to organize, structure or highlight a section. Apricot is our primary background color, gray and light turquoise are complementary. - -

-
-
-
- - - -
-
-

- White -

- - bg-white - - - #FFFFFF - -
-
- - - - - - - - check_circle - -
-
-
-
-
-
- - - -
-
-

- Apricot -

- - bg-primary - - - #FBF2EA - -
-
- - - - - - - - error - -
-
- - - - - - - - check_circle - -
-
-
-
-
-
- - - -
-
-

- Turquoise lighter -

- - bg-secondary - - - #EBF8F2 - -
-
- - - - - - - - error - -
-
- - - - - - - - check_circle - -
-
-
-
-
-
- - - -
-
-

- Gray -

- - bg-tertiary - - - #EBE7E2 - -
-
- - - - - - - - error - -
-
- - - - - - - - check_circle - -
-
-
-
-
-
- - - -
-
-

- Gray light -

- - bg-quaternary - - - #F9F8F6 - -
-
- - - - - - - - error - -
-
- - - - - - - - check_circle - -
-
-
-
-
- -`; - exports[`Core: Color CommunicationColors renders 1`] = ` -
+

@@ -417,7 +14,7 @@ exports[`Core: Color CommunicationColors renders 1`] = `

+

The primary color of Swedbank Pay is yellow, it is used to give a unified appearance and create visual recognition. Yellow is an energetic and vibrant color that matches the brand of Swedbank Pay. In complement to this, Swedbank Pay uses a selection of colors from Swedbank´s color palette.

- +
+
+
+
+
- - - Figure 1. - - A selection of colors from the Swedbank Pay color palette. -
`; @@ -505,7 +107,7 @@ exports[`Core: Color MainColors renders 1`] = ` className="color-group flex-wrap" >
#2A9D3F -
-
- - - - - - - - error - -
-
- - - - - - - - error - -
-
#3C3C3C -
-
- - - - - - - - error - -
-
- - - - - - - - error - -
-
#C8C8C8 -
-
- - - - - - - - error - -
-
- - - - - - - - error - -
-
#000000 -
-
- - - - - - - - error - -
-
- - - - - - - - error - -
-
#FFFFFF -
-
- - - - - - - - error - -
-
- - - - - - - - error - -
-

`; -exports[`Core: Color SystemColors renders 1`] = ` -
+exports[`Core: Color SwedbankPay BackgroundColors renders 1`] = ` +

- System colors + Background colors

- Our system colors include error, warning, success and info. These are used on different types of system messages that needs the users attention. + To maintain an open and welcoming experience we mostly use no background color, that is white. Our background colors have a functional role and are used to organize, structure or highlight a section. Apricot is our primary background color, gray and light turquoise are complementary. +

-
- - - -
+ className="color-swatch color-box-small " + style={ + Object { + "--bg-color": "var(--bg-orange, #FFF1E4)", + } + } + />
-

- Error dark -

- - system-error-dark - - - #8c0d14 + + + BG Orange + -
-
+ - - - - - - - - check_circle - -
-
+ + + - - - - - - - - error - -
-
+ #FFF1E4 + +
-
-
+
  • - - - -
    + className="color-swatch color-box-small " + style={ + Object { + "--bg-color": "var(--bg-brown, #EBE7E2)", + } + } + />
    -

    - Error -

    - - system-error - - - #B5111A + + + BG Brown + -
    -
    + - - - - - - - - check_circle - -
    -
    + + + - - - - - - - - error - -
    -
    + #EBE7E2 + +
    -
    • -
    +
  • - - - -
    + className="color-swatch color-box-small border" + style={ + Object { + "--bg-color": "var(--bg-white, #FFFFFF)", + } + } + />
    -

    - Error light -

    - - system-error-light - - - #FCEEE9 + + + BG White + -
    -
    + - - - - - - - - error - -
    -
    + + + - - - - - - - - check_circle - -
    -
    + #FFFFFF + +
    -
    • -
    +
  • - - - -
    + className="color-swatch color-box-small " + style={ + Object { + "--bg-color": "var(--bg-turquoise, #EBF8F2)", + } + } + />
    -

    - Warning -

    - - system-warning - - - #EE7023 + + + BG Turquoise + -
    -
    + - - - - - - - - check_circle - -
    -
    + + + - - - - - - - - check_circle - -
    -
    + #EBF8F2 + +
    -
    • -
    +
  • - - - -
    + className="color-swatch color-box-small border" + style={ + Object { + "--bg-color": "var(--bg-grey, #F9F8F6)", + } + } + />
    -

    - Warning light -

    - - system-warning-light - - - #FEF2E2 + + + BG Gray + -
    -
    + - - - - - - - - error - -
    -
    + + + - - - - - - - - check_circle - -
    -
    + #F9F8F6 + +
    -
    • + +
    +
    +`; + +exports[`Core: Color SwedbankPay SystemColors renders 1`] = ` +
    +

    + System colors +

    +

    + Our system colors include error, warning, success and info. These are used on different types of system messages that needs the users attention. +

    +
    - - - -
    -
    -

    - Success -

    - - system-success - - - #3C7213 - -
    +
    - - - - - - - - check_circle - + + + Success + + + + + system-success + + + + + #4D9C0F + +
    + +
  • +
    - - - - - - - - error - + + + Success light + + + + + system-success-light + + + + + #E7F8D2 + +
    -
    -
    • -
    -
    -
    - - - -
    -
    -

    - Success light -

    - - system-success-light - - - #F2F7EB - -
    +
  • +
    - - - - - - - - error - + + + Warning + + + + + system-warning + + + + + #EE7023 + +
    +
    • +
  • +
    - - - - - - - - check_circle - + + + Warning light + + + + + system-warning-light + + + + + #FBEADB + +
    -
    -
    • -
    -
    -
    - - - +
    -

    - Info -

    - - system-info - - - #3961A7 - -
    +
    - - - - - - - - check_circle - + + + Info + + + + + system-info + + + + + #335BB1 + +
    + +
  • +
    - - - - - - - - error - + + + Info light + + + + + system-info-light + + + + + #E0EAF9 + +
    -
    -
    • -
    -
    -
    - - - -
    -
    -

    - Info light -

    - - system-info-light - - - #EBF1FA - -
    +
  • +
    - - - - - - - - error - + + + Error + + + + + system-error + + + + + #D82E2A + +
    +
    • +
  • +
    - - - - - - - - check_circle - + + + Error light + + + + + system-error-light + + + + + #FFE9E9 + +
    -
    +
    • `; -exports[`Core: Color TextColors renders 1`] = ` -
    -

    +

    Text colors -

    -

    - Brown-solid is our default text color that should be used for all normal text besides links and text on dark backgrounds or images. For links, use turquoise and for text on dark backgrounds or images use white. A lighter brown is used as a muted text color for smaller or less important text that shouldn"t be the primary focus. -

    +
    - - - -
    -
    +

    + Default mode +

    - Brown solid + + Text Default + + + is our default text color on light backgrounds. + + + Text Muted + + + is used as a muted text color for smaller or less important text that shouldn’t be the primary focus. +

    - - brown-solid - - - #2F2424 - -
    -
    - - - - - - - - check_circle - -
    -
    -
    -
    -
    -
    - - - +
    +
    + + + Text default + + + + + text-default + + + + + #2F2424 + + +
    + +
  • +
    +
    + + + Text muted + + + + + text-muted + + + + + #72605E + + +
    +
    • +
    -

    - Brown medium -

    - - text-muted - - - #72605E - -
    -
    - - - - - - - - check_circle - -
    -
    - - - - - - - - error - -
    -
    +
    - - - -
    -
    +

    + For dark backgrounds +

    - Turquoise dark + + White + + is default color for text on backgrounds, and + + + Text Muted light + + + is used for secondary text.

    - - text-link - - - #257886 - -
    -
    - - - - - - - - check_circle - -
    -
    +
    + + + Text White + + + + + text-white + + + + + #FFFFFF + + +
    + +
  • - - - - - - - - error - -
    • -
    +
    +
    + + + Text Muted White + + + + + text-muted-light + + + + + #A38B80 + + +
    + +
    -
    -
    - - - +
    +
    +
    +

    + Disabled +

    - White + For disabled black buttons and text we use + + + Text Disabled + + .

    - - text-white - - - #FFFFFF - -
    -
    - - - - - - - - check_circle - -
    -
    +
    +
    + + + Text Disabled + + + + + text-disabled + + + + + #D4C4BC + + +
    + + +
    +
    +
    diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js b/src/App/Identity/identity/Color/colors.e2e.spec.js new file mode 100644 index 0000000000..5e5722a6c0 --- /dev/null +++ b/src/App/Identity/identity/Color/colors.e2e.spec.js @@ -0,0 +1,154 @@ +// @ts-check +const { test, expect } = require("@playwright/test"); + +test("Color page exist", async ({ page }) => { + await page.goto("http://localhost:3000/"); + await page + .getByRole("link", { + name: "Identity Learn about our fundamental principles", + }) + .click(); + + if (page.viewportSize().width > 991) { + await expect( + page.getByRole("link", { + name: "Color", + }) + ).toHaveCount(1); + await page.getByRole("link", { name: "Color" }).click(); + } else { + await expect( + page.getByRole("link", { + name: "Color", + }) + ).toHaveCount(0); + await page.getByLabel("Open menu").click(); + await page.getByRole("button", { name: "Identity" }).click(); + + await expect( + page.getByRole("link", { + name: "Color", + }) + ).toHaveCount(1); + await page.getByRole("link", { name: "Color" }).click(); + } +}); + +const getAllColorGroupsSections = async (page) => + await page.locator("section", { has: page.locator(".color-group") }).all(); + +const hexToRgb = (hex) => { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + + hex = hex.replace(shorthandRegex, (m, r, g, b) => { + return r + r + g + g + b + b; + }); + + const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + + return result + ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16), + } + : null; +}; + +// TODO: remove topbar before screenshots (probably need to use vanilla JS, no Playwright methods seem to be existing in order to achieve thiat) +// TODO: once done. make this a function, and make it a utility function that can be used in other E2E tests + +test(`visual regresion Color Identity page`, async ({ page }) => { + await page.goto("http://localhost:3000/identity/color"); + + // force to wait for page to be actually rendered. Else locators will return empty array since locator() methods does not auto-wait + await expect( + page.getByRole("heading", { level: 2, name: "Primary colors" }) + ).toBeVisible(); + + const colorGroupsSections = await getAllColorGroupsSections(page); + + const brand = (await page.title()).includes("Swedbank") + ? "SwedbankPay" + : "PayEx"; + + await expect(await colorGroupsSections).toHaveLength(6); + + for (const colorGroupSection of await colorGroupsSections) { + const sectionName = await colorGroupSection + .getByRole("heading", { level: 2 }) + .textContent(); + + if ((await colorGroupSection.locator(".color-group").all().length) > 1) { + const colorGroupSubSections = await colorGroupSection + .locator(".row", { has: page.locator(".color-group") }) + .all(); + + for (const colorGroupSubSection of await colorGroupSubSections) { + const subSectionName = await colorGroupSubSection + .getByRole("heading", { + level: 3, + }) + .textContent(); + + await expect(colorGroupSubSection).toHaveScreenshot( + `${brand}-color-${sectionName}-${subSectionName}.png`, + { mask: [await page.locator("#dg-topbar")] } + ); + } + } else { + await expect( + colorGroupSection.locator(".color-group").first() + ).toHaveScreenshot(`${brand}-color-${sectionName}.png`, { + mask: [await page.locator("#dg-topbar")], + }); + } + } +}); + +test(`Compare Color CSS computed values Desktop to their spec written in their swatch (computed value VS hex specified AND of the CSS custom-property (CSS variable) exists - `, async ({ + page, +}) => { + await page.goto("http://localhost:3000/identity/color"); + + // force to wait for page to be actually rendered. Else locators will return empty array since locator() methods does not auto-wait + await expect( + page.getByRole("heading", { level: 2, name: "Primary colors" }) + ).toBeVisible(); + + // iterate over each colorGroup + + // TODO: fix it also for the SVG ones, not only for the divs (color-box VS color-swatch) + // in each color-group, iterate over each color watch to check 2 things. 1st if its computed color corresponds to the hex value set as subTitle. 2nd to check if the color computed comes from the css custom-property" + + await page + .locator("li", { has: page.locator("small", { hasText: "#" }) }) + .all() + .then(async (colorSwatchContainers) => { + for (const colorSwatchContainer of await colorSwatchContainers) { + const expectedColorHexValue = await colorSwatchContainer + .locator("small") + .filter({ hasText: "#" }) + .first() + .textContent(); + + const expectedColorRGBValue = await `rgb(${ + hexToRgb(expectedColorHexValue)?.r + }, ${hexToRgb(expectedColorHexValue)?.g}, ${ + hexToRgb(expectedColorHexValue)?.b + })`; + + const colorSwatch = await colorSwatchContainer + .locator(".color-swatch") + .first(); + + // compare HEX value to CSS computed value + + await expect(colorSwatch).toHaveCSS( + "background-color", + expectedColorRGBValue + ); + } + }); +}); diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..28776af021 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-Mobile-Safari-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..fcbac6b6a2 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-chromium-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-chromium-darwin.png new file mode 100644 index 0000000000..ccc24bbf27 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-firefox-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-firefox-darwin.png new file mode 100644 index 0000000000..29b1a63f21 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-webkit-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-webkit-darwin.png new file mode 100644 index 0000000000..884bf533c6 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Background-colors-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..4413995cc5 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-Mobile-Safari-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..639b3a7fdf Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-chromium-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-chromium-darwin.png new file mode 100644 index 0000000000..7df138a3a0 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-firefox-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-firefox-darwin.png new file mode 100644 index 0000000000..efad1b90cc Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-webkit-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-webkit-darwin.png new file mode 100644 index 0000000000..a23e0e6af7 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Brand-accent-colors-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..dc1e98e968 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-Mobile-Safari-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..3439e8adc3 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-chromium-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-chromium-darwin.png new file mode 100644 index 0000000000..6200a4f5fd Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-firefox-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-firefox-darwin.png new file mode 100644 index 0000000000..2dca44f39f Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-webkit-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-webkit-darwin.png new file mode 100644 index 0000000000..dd5253970e Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Color-pool-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..27415894be Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-Mobile-Safari-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..1da313220b Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-chromium-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-chromium-darwin.png new file mode 100644 index 0000000000..326a287b2a Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-firefox-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-firefox-darwin.png new file mode 100644 index 0000000000..55c71e69c4 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-webkit-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-webkit-darwin.png new file mode 100644 index 0000000000..2c78d6d7ee Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Primary-colors-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..2bfdccdd79 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-Mobile-Safari-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..4c36b5e843 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-chromium-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-chromium-darwin.png new file mode 100644 index 0000000000..595d38ed91 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-firefox-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-firefox-darwin.png new file mode 100644 index 0000000000..5781ccd997 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-webkit-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-webkit-darwin.png new file mode 100644 index 0000000000..710cbcff84 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-System-colors-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-Mobile-Chrome-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-Mobile-Chrome-darwin.png new file mode 100644 index 0000000000..674950fe9a Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-Mobile-Chrome-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-Mobile-Safari-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-Mobile-Safari-darwin.png new file mode 100644 index 0000000000..b79121dc6b Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-Mobile-Safari-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-chromium-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-chromium-darwin.png new file mode 100644 index 0000000000..40289483cc Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-chromium-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-firefox-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-firefox-darwin.png new file mode 100644 index 0000000000..59cc76dd14 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-firefox-darwin.png differ diff --git a/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-webkit-darwin.png b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-webkit-darwin.png new file mode 100644 index 0000000000..cfa859f874 Binary files /dev/null and b/src/App/Identity/identity/Color/colors.e2e.spec.js-snapshots/SwedbankPay-color-Text-colors-webkit-darwin.png differ diff --git a/src/App/Identity/identity/Color/index.js b/src/App/Identity/identity/Color/index.js index 64503120f0..8f570308e4 100644 --- a/src/App/Identity/identity/Color/index.js +++ b/src/App/Identity/identity/Color/index.js @@ -9,7 +9,7 @@ const brand = process.env.brand; const basename = process.env.basename; const Lead = () => ( -
    +

    The primary color of Swedbank Pay is yellow, it is used to give a unified appearance and create visual recognition. Yellow is an energetic and @@ -17,22 +17,19 @@ const Lead = () => ( this, Swedbank Pay uses a selection of colors from Swedbank´s color palette.

    -
    - - - Figure 1.A selection of colors - from the Swedbank Pay color palette. - +
    +
    +
    +
    +
    +
    +
    ); const ColorContrast = () => ( -
    +

    Color contrast

    It is important to maintain sufficient color contrast in our products to @@ -42,7 +39,7 @@ const ColorContrast = () => ( color decisions, we showcase the contrast ratio of each color to our default text (brown) and background (white) color here.{" "}

    -
    +