feat: add support for Paragon design tokens (#303)

---------

Co-authored-by: Diana Catalina Olarte <diana.olarte@edunext.co>

.github/workflows/ci.yml

@@ -9,9 +9,6 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
     steps:
     - name: Checkout
       uses: actions/checkout@v4
@@ -20,7 +17,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.gitignore

@@ -10,4 +10,4 @@ src/i18n/transifex_input.json
 temp/babel-plugin-react-intl
 /.vscode
 module.config.js
-src/i18n/messages
+src/i18n/messages

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-footer"
+  description: "A generic footer for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
 
 @import "@edx/frontend-component-footer/footer";

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

package.json

@@ -13,7 +13,8 @@
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "test:watch": "npm run test -- --watch"
   },
   "files": [
     "/dist"
@@ -36,28 +37,30 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.1",
+    "@edx/frontend-platform": "^8.2.1",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.5",
-    "@openedx/frontend-plugin-framework": "^1.1.2",
-    "@openedx/paragon": "^22.8.1",
+    "@openedx/frontend-build": "^14.3.1",
+    "@openedx/frontend-plugin-framework": "^1.5.0",
+    "@openedx/paragon": "^23.3.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.1",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/user-event": "^14.6.1",
     "husky": "8.0.3",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.26.2",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "8.1.3",
+    "react-router-dom": "6.28.2",
+    "react-test-renderer": "18.3.1",
     "redux": "4.2.1",
     "semantic-release": "21.1.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
     "classnames": "^2.5.1",
     "jest-environment-jsdom": "^29.7.0",
@@ -66,9 +69,9 @@
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.11.3 < 23.0.0",
+    "@openedx/paragon": ">= 21.11.3 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   }
 }

src/_footer.scss

@@ -1,5 +1,5 @@
 $gray-footer: #fcfcfc !default;
 
 .footer {
-  background-color: $gray-footer;
+  background-color: var(--pgn-color-light-100, $gray-footer);
 }

src/components/Footer.test.jsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
@@ -76,19 +77,13 @@ describe('<Footer />', () => {
   });
 
   describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', () => {
+    it('calls onLanguageSelected prop when a language is changed', async () => {
+      const user = userEvent.setup();
       const mockHandleLanguageSelected = jest.fn();
       render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
 
-      fireEvent.submit(screen.getByTestId('site-footer-submit-btn'), {
-        target: {
-          elements: {
-            'site-footer-language-select': {
-              value: 'es',
-            },
-          },
-        },
-      });
+      await user.selectOptions(screen.getByRole('combobox'), 'es');
+      await user.click(screen.getByTestId('site-footer-submit-btn'));
 
       expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
     });

src/components/studio-footer/StudioFooter.test.jsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -56,35 +57,40 @@ describe('Footer', () => {
     });
   });
   describe('help section expanded view', () => {
-    it('help button should read Hide Studio help', () => {
+    it('help button should read Hide Studio help', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
         .toBeVisible();
     });
-    it('help button link row should be visible', () => {
+    it('help button link row should be visible', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('helpButtonRow')).toBeVisible();
     });
-    it('Open edX portal button should be visible', () => {
+    it('Open edX portal button should be visible', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
     });
-    it('should not show contact us button', () => {
+    it('should not show contact us button', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.queryByTestId('contactUsButton')).toBeNull();
     });
-    it('should show contact us button', () => {
+    it('should show contact us button', async () => {
+      const user = userEvent.setup();
       render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('contactUsButton')).toBeVisible();
     });
   });

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',