chore: update playwright

.github/workflows/tests.yml

@@ -57,7 +57,7 @@ jobs:
           globalPackages: http-server
 
       - name: Install Playwright
-        run: npx playwright@1.20.0 install --with-deps
+        run: npx playwright@1.27.1 install --with-deps
 
       - name: Link locale packages and install their dependencies
         run: yarn bootstrap

CONTRIBUTING.md

@@ -38,9 +38,9 @@ The core team will review your pull request and will either merge it, request ch
 
 ### Setup end-to-end (e2e) tests
 
-1. Install Playwright `npx playwright@1.20.0 install --with-deps`
+1. Install Playwright `npx playwright@1.27.1 install --with-deps`
 2. Install and link any cross-dependencies: `yarn bootstrap`
-3. Run storybook `yarn storybook` and the e2e tests in parallel `yarn test:e2e` 
+3. Run storybook `yarn storybook` and the e2e tests in parallel `yarn test:e2e`
 
 ## Development Workflow
 

package.json

@@ -17,11 +17,11 @@
     "specify:pull": "specify pull",
     "specify:sync": "specify sync",
     "storybook": "lerna run storybook --stream",
+    "test": "lerna run test --stream",
+    "test:watch": "lerna --scope @strapi/design-system exec -- yarn test:watch",
     "test:e2e": "lerna run test:e2e --stream",
     "test:e2e:ci": "lerna run test:e2e:ci",
     "test:e2e:watch": "lerna --scope @strapi/design-system exec -- yarn test:e2e:watch",
-    "test": "lerna run test --stream",
-    "test:watch": "lerna --scope @strapi/design-system exec -- yarn test:watch",
     "test:snapshots": "lerna --scope @strapi/design-system exec -- yarn  test -u",
     "release": "lerna version --no-push --no-git-tag-version && yarn setup && git commit -am \"Releasing\" && lerna publish from-package --contents dist"
   },
@@ -30,12 +30,10 @@
     "chokidar-cli": "^3.0.0",
     "fs-extra": "^10.0.0",
     "husky": "=4",
-    "jest-styled-components": "^7.1.1",
     "lerna": "^4.0.0",
     "lint-staged": ">=10",
     "plop": "^2.7.4",
-    "rimraf": "^3.0.2",
-    "url-loader": "^4.1.1"
+    "rimraf": "^3.0.2"
   },
   "husky": {
     "hooks": {

packages/strapi-design-system/.npmignore

@@ -1,4 +1,3 @@
-node_modules
 storybook-static
 .DS_Store
 src

packages/strapi-design-system/package.json

@@ -3,14 +3,20 @@
   "version": "1.2.5",
   "main": "index.js",
   "license": "MIT",
+  "dependencies": {
+    "@floating-ui/react-dom": "^1.0.0",
+    "@internationalized/number": "^3.1.1",
+    "compute-scroll-into-view": "^1.0.17",
+    "prop-types": "^15.7.2"
+  },
   "devDependencies": {
     "@babel/core": "^7.13.10",
     "@babel/plugin-transform-runtime": "^7.13.2",
     "@babel/preset-env": "^7.13.0",
     "@babel/preset-react": "^7.12.13",
     "@figspec/react": "^0.1.5",
     "@juggle/resize-observer": "^3.4.0",
-    "@playwright/test": "1.20.0",
+    "@playwright/test": "1.27.1",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
     "@storybook/addon-links": "^6.5.13",
@@ -30,6 +36,7 @@
     "eslint-plugin-react": "^7.22.0",
     "intl": "^1.2.5",
     "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "jest-styled-components": "^7.1.1",
     "prettier": "^2.2.1",
     "qs": "^6.10.3",
@@ -40,7 +47,8 @@
     "storybook-dark-mode": "^1.1.2",
     "styled-components": "^5.3.6",
     "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^4.5.0"
+    "webpack-cli": "^4.5.0",
+    "url-loader": "^4.1.1"
   },
   "peerDependencies": {
     "@strapi/icons": "^1.2.4",
@@ -49,13 +57,6 @@
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1"
   },
-  "dependencies": {
-    "@floating-ui/react-dom": "^1.0.0",
-    "@internationalized/number": "^3.1.1",
-    "compute-scroll-into-view": "^1.0.17",
-    "jest-environment-jsdom": "^29.2.2",
-    "prop-types": "^15.7.2"
-  },
   "scripts": {
     "analyze:bundle": "cross-env BUNDLE_ANALYZE=1 webpack",
     "prebuild": "rimraf dist",

packages/strapi-design-system/src/Accordion/__tests__/Accordion.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Accordion', () => {
   test.describe('light theme', () => {

packages/strapi-design-system/src/Accordion/__tests__/AccordionKeyboard.e2e.js

@@ -1,5 +1,5 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
-const { test, expect } = require('@playwright/test');
+import { injectAxe, checkA11y } from 'axe-playwright';
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('Accordion Keyboard Navigable', () => {
   test.beforeEach(async ({ page }) => {

packages/strapi-design-system/src/Alert/__tests__/Alert.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Alert', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Avatar/__tests__/Avatar.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Avatar', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Badge/__tests__/Badge.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Badge', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/BaseButton/__tests__/BaseButton.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('BaseButton', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/BaseCheckbox/__tests__/BaseCheckbox.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('BaseCheckbox', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/BaseLink/__tests__/BaseLink.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('BaseLink', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/BaseRadio/__tests__/BaseRadio.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('BaseRadio', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Box/__tests__/Box.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Box', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Breadcrumbs/__tests__/Breadcrumbs.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Breadcrumbs', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Button/__tests__/Button.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Button', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Card/__tests__/Card.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('Card', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/CarouselInput/__tests__/CarouselImage.e2e.js

@@ -1,4 +1,4 @@
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('CarouselImage', () => {
   test('a tooltip should appear with the alt text if the src fails to load', async ({ page }) => {

packages/strapi-design-system/src/CarouselInput/__tests__/CarouselInput.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('CarouselInput', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Checkbox/__tests__/Checkbox.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('Checkbox', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Combobox/__tests__/Combobox.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('Combobox', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/DatePicker/__tests__/DatePicker.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('DatePicker', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Dialog/__tests__/Dialog.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, getViolations } = require('axe-playwright');
+import { injectAxe, getViolations } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('Dialog', () => {
   test.beforeEach(async ({ page }) => {

packages/strapi-design-system/src/Divider/__tests__/Divider.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Divider', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/EmptyStateLayout/__tests__/EmptyStateLayout.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('EmptyStateLayout', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Field/__tests__/Field.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Field', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Flex/__tests__/Flex.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Flex', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/FocusTrap/__tests__/FocusTrap.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test, expect } = require('@playwright/test');
+import { test, expect } from '@playwright/test';
 
 test.describe.parallel('FocusTrap', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Grid/__tests__/Grid.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('Grid', () => {
   test.describe('light mode', () => {

packages/strapi-design-system/src/Icon/__tests__/Icon.e2e.js

@@ -1,6 +1,6 @@
-const { injectAxe, checkA11y } = require('axe-playwright');
+import { injectAxe, checkA11y } from 'axe-playwright';
 
-const { test } = require('@playwright/test');
+import { test } from '@playwright/test';
 
 test.describe.parallel('IconButton', () => {
   test.describe('light mode', () => {