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

---------

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

.github/workflows/ci.yml

@@ -14,12 +14,10 @@ jobs:
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.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

.nvmrc

@@ -1 +1 @@
-18
+20

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,38 +37,41 @@
   "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.0.14",
-    "@openedx/frontend-plugin-framework": "^1.1.2",
-    "@openedx/paragon": "22.7.0",
+    "@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.25.1",
-    "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.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
+    "@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",
     "lodash": "^4.17.21",
     "ts-jest": "^29.1.2"
   },
   "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.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import _ from 'lodash';
-import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
@@ -12,6 +12,9 @@ import {
   TransitionReplace,
 } from '@openedx/paragon';
 import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
 import messages from './messages';
 
 ensureConfig([
@@ -26,12 +29,14 @@ ensureConfig([
 ], 'Studio Footer component');
 
 const StudioFooter = ({
-  // injected
-  intl,
+  containerProps,
 }) => {
+  const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const { config } = useContext(AppContext);
 
+  const { containerClassName, ...restContainerProps } = containerProps || {};
+
   return (
     <>
       <div className="m-0 mt-6 row align-items-center justify-content-center">
@@ -49,7 +54,11 @@ const StudioFooter = ({
         </Button>
         <div className="col border-top ml-2" />
       </div>
-      <Container size="xl" className="px-4">
+      <Container
+        size="xl"
+        className={classNames('px-4', containerClassName)}
+        {...restContainerProps}
+      >
         <TransitionReplace>
           {isOpen ? (
             <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
@@ -139,8 +148,11 @@ const StudioFooter = ({
 };
 
 StudioFooter.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
+  containerProps: PropTypes.shape(Container.propTypes),
 };
 
-export default injectIntl(StudioFooter);
+StudioFooter.defaultProps = {
+  containerProps: {},
+};
+
+export default StudioFooter;

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: '/',