Merge branch 'main' into ci/pipelines

* main:
  Replace PDM logo (#411)
  Add playwright e2e tests (#394)
  Update breakpoints to the new Tailwind config (#408)
  Create a global audio player (amongst many smaller improvements) (#399)
  Create Skeleton components (#392)
  Tailwind breakpoints (#403)
  Avoid error using only local translation files (#367)
  Add base Button component (#372)
  Use Tailwind RTL styles everywhere (#355)
  Add a dependencies section and remove the redundant title (#379)
  🔄 Synced file(s) with WordPress/openverse (#384)
  Fix filters not being set on SSR (#386)

.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
   env: {
     browser: true,
     node: true,
-    'cypress/globals': true,
   },
   parserOptions: {
     parser: 'babel-eslint',
@@ -18,7 +17,7 @@ module.exports = {
     'plugin:@intlify/vue-i18n/recommended',
   ],
   // required to lint *.vue files
-  plugins: ['vue', 'cypress', 'vuejs-accessibility', 'unicorn'],
+  plugins: ['vue', 'vuejs-accessibility', 'unicorn'],
   // add your custom rules here
   rules: {
     semi: [2, 'never'],

.github/ISSUE_TEMPLATE/component_spec.md

@@ -2,12 +2,9 @@
 name: Component spec
 about: Describe a new component to be developed for the design system
 labels: "🕹 aspect: interface, 🌟 goal: addition, 🚦 status: awaiting triage, 🟨 priority: medium"
-title: "<Replace this with the component name>"
+title: "Component: <Replace this with the component name>"
 ---
 
-## Component: Title
-<!-- Replace 'Title' above with the actual component title. -->
-
 ## Description
 <!-- Describe the component, including different states. Do not include screenshots. -->
 
@@ -43,6 +40,9 @@ title: "<Replace this with the component name>"
 ## Code samples
 <!-- Share pseudocode templates or high-level implementation code; or delete the section entirely. -->
 
+## Dependencies
+<!-- Name the components that this component depends on, including issues or PRs; or delete the section entirely if the component is independent. -->
+
 ## References
 <!-- Include as many references to prior art as you deem necessary or helpful. -->
 

.github/workflows/ci.yml

@@ -41,4 +41,4 @@ jobs:
         run: npm run format:test
 
       - name: Run tests
-        run: npm run test:unit
+        run: npm run i18n:get-translations && npm run test:unit

.github/workflows/pr_ping.yml

@@ -10,8 +10,8 @@ jobs:
   send_message:
     name: Send message
     if: |
-      ${{ github.event.pull_request.user.login != 'dependabot[bot]' }} &&
-      ${{ !startsWith(github.event.pull_request.title, '🔄') }}
+      github.actor != 'dependabot[bot]' &&
+      !startsWith(github.event.pull_request.title, '🔄')
     runs-on: ubuntu-latest
     steps:
     - name: Send Slack notification

.gitignore

@@ -26,3 +26,4 @@ src/locales/*.json
 .nuxt-storybook
 storybook-static
 .vercel
+/src/locales/scripts/valid-locales.json

README.md

@@ -56,6 +56,16 @@ You can run the unit tests by executing:
 npm run test
 ```
 
+To run the e2e tests, run:
+
+```bash
+npm run test:e2e
+```
+
+You might have to run `npx playwright install` to get the browsers installed if e2e tests fail.
+
+When writing e2e tests, you can also use `npm run generate-e2e-tests` to generate tests and test selectors.
+
 ### localhost tunneling
 
 If you want to make your local development server accessible to the internet (for testing or showing someone something you're working on), you can use [`ngrok`](https://ngrok.com/). Follow the documentation on the `ngrok` site to install it and set it up. Once you have it installed, get the development server for Openverse running and in a separate window/tab, run:

jest.config.js

@@ -1,4 +1,9 @@
 module.exports = {
+  globals: {
+    'vue-jest': {
+      experimentalCSSCompile: false,
+    },
+  },
   moduleFileExtensions: ['js', 'vue', 'json'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',

nuxt.config.js

@@ -134,6 +134,7 @@ export default {
       '~/components/MediaInfo',
       '~/components/MetaSearch',
       '~/components/MediaTag',
+      '~/components/Skeleton',
     ],
   },
   plugins: [
@@ -166,9 +167,9 @@ export default {
   },
   modules: [
     '@nuxtjs/sentry',
-    '@nuxtjs/sitemap',
     'nuxt-ssr-cache',
     '@nuxtjs/i18n',
+    '@nuxtjs/sitemap',
   ],
   i18n: {
     locales: [