From 0dd78bd61943cfd60c42ed00e5200912f6d0b9ec Mon Sep 17 00:00:00 2001 From: Raphael Ferrand Date: Tue, 31 Oct 2023 15:20:35 +0100 Subject: [PATCH] SWED-2279 fix test jest + style space colour-grid --- package-lock.json | 46 +- package.json | 2 +- .../Color/__snapshots__/index.test.js.snap | 861 ++++++++++++++++++ src/App/Identity/identity/Color/index.test.js | 25 +- src/App/components/DisplayColor/index.js | 2 +- src/less/documentation-swedbankpay.less | 2 + 6 files changed, 900 insertions(+), 38 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0c51694a5b..8be124ccbb 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.38.1", + "@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,12 +3355,12 @@ } }, "node_modules/@playwright/test": { - "version": "1.38.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", - "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", + "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": { - "playwright": "1.38.1" + "playwright": "1.39.0" }, "bin": { "playwright": "cli.js" @@ -12743,12 +12743,12 @@ } }, "node_modules/playwright": { - "version": "1.38.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", - "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "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.38.1" + "playwright-core": "1.39.0" }, "bin": { "playwright": "cli.js" @@ -12761,9 +12761,9 @@ } }, "node_modules/playwright-core": { - "version": "1.38.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", - "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", + "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" @@ -20517,12 +20517,12 @@ } }, "@playwright/test": { - "version": "1.38.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz", - "integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==", + "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": { - "playwright": "1.38.1" + "playwright": "1.39.0" } }, "@polka/url": { @@ -27618,19 +27618,19 @@ } }, "playwright": { - "version": "1.38.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz", - "integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==", + "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.38.1" + "playwright-core": "1.39.0" } }, "playwright-core": { - "version": "1.38.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz", - "integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==", + "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": { diff --git a/package.json b/package.json index 61cd95b6a5..02ed6d2892 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.38.1", + "@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/Identity/identity/Color/__snapshots__/index.test.js.snap b/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap index 96fd64c570..4061c000d7 100644 --- a/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap +++ b/src/App/Identity/identity/Color/__snapshots__/index.test.js.snap @@ -655,6 +655,867 @@ exports[`Core: Color MainColors renders 1`] = ` `; +exports[`Core: Color SwedbankPay BackgroundColors renders 1`] = ` +
+

+ 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. + +

+
+
  • +
    +
    + + + BG Orange + + + + + bg-orange + + + + + #FFF1E4 + + +
    +
    • +
  • +
    +
    + + + BG Brown + + + + + bg-brown + + + + + #EBE7E2 + + +
    +
    • +
  • +
    +
    + + + BG White + + + + + bg-white + + + + + #FFFFFF + + +
    +
    • +
  • +
    +
    + + + BG Turquoise + + + + + bg-turquoise + + + + + #EBF8F2 + + +
    +
    • +
  • +
    +
    + + + BG Gray + + + + + bg-grey + + + + + #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 + + + + + #4D9C0F + + +
    +
    • +
  • +
    +
    + + + Success light + + + + + system-success-light + + + + + #EFF8D2 + + +
    +
    • +
  • +
    +
    + + + Warning + + + + + system-warning + + + + + #EE7023 + + +
    +
    • +
  • +
    +
    + + + Warning light + + + + + system-warning-light + + + + + #FBEADB + + +
    +
    • +
    +
    +
  • +
    +
    + + + Info + + + + + system-info + + + + + #335BB1 + + +
    +
    • +
  • +
    +
    + + + Info light + + + + + system-info-light + + + + + #E0EAF9 + + +
    +
    • +
  • +
    +
    + + + Error + + + + + system-error + + + + + #D82E2A + + +
    +
    • +
  • +
    +
    + + + Error light + + + + + system-error-light + + + + + #FFE9E9 + + +
    +
    • +
    +
    +
    +
    +`; + +exports[`Core: Color SwedbankPay TextColors renders 1`] = ` +
    +

    + Text colors +

    +
    +
    +
    +

    + Default mode +

    +

    + + 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. + +

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

    + For dark backgrounds +

    +

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

    +
      +
    • +
      +
      + + + Text White + + + + + text-white + + + + + #FFFFFF + + +
      +
      • +
    • +
      +
      + + + Text Muted White + + + + + text-muted-light + + + + + ##A38B80 + + +
      +
      • +
    +
    +
    + +
    +
    +
    +
    +

    + Disabled +

    +

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

    +
      +
    • +
      +
      + + + Text Disabled + + + + + text-disabled + + + + + #D4C4BC + + +
      +
      • +
    +
    +
    + +
    +
    +
    +
    +`; + exports[`Core: Color SystemColors renders 1`] = `

    { }); }); - describe("TextColors", () => { + describe("SwedbankPay TextColors", () => { it("is defined", () => { - expect(TextColors).toBeDefined(); + expect(SBTextColors).toBeDefined(); }); it("renders", () => { - const wrapper = renderer.create(); + const wrapper = renderer.create(); expect(wrapper.toJSON()).toMatchSnapshot(); }); }); - describe("BackgroundColors", () => { + describe("SwedbankPay BackgroundColors", () => { it("is defined", () => { - expect(BackgroundColors).toBeDefined(); + expect(SBBackgroundColors).toBeDefined(); }); it("renders", () => { - const wrapper = renderer.create(); + const wrapper = renderer.create(); expect(wrapper.toJSON()).toMatchSnapshot(); }); }); - describe("SystemColors", () => { + describe("SwedbankPay SystemColors", () => { it("is defined", () => { - expect(SystemColors).toBeDefined(); + expect(SBSystemColors).toBeDefined(); }); it("renders", () => { - const wrapper = renderer.create(); + const wrapper = renderer.create(); expect(wrapper.toJSON()).toMatchSnapshot(); }); diff --git a/src/App/components/DisplayColor/index.js b/src/App/components/DisplayColor/index.js index 4d61d20095..fba4ed8010 100644 --- a/src/App/components/DisplayColor/index.js +++ b/src/App/components/DisplayColor/index.js @@ -11,7 +11,7 @@ const DisplayColor = ({ }) => { if (isSizeLarge) { return ( -
    +
    diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less index 27c437475b..3bfc46653f 100644 --- a/src/less/documentation-swedbankpay.less +++ b/src/less/documentation-swedbankpay.less @@ -1346,6 +1346,7 @@ .color-group { display: flex; flex-wrap: wrap; + justify-content: space-around; &.color-group-table { display: grid; @@ -1370,6 +1371,7 @@ &.color-grid { display: grid; + justify-content: space-evenly; gap: 5px 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));