fix(deps): move test deps to devDependencies (#577)

And remove jest-environment-jsdom altogether as we don't reference it directly.

.github/workflows/release.yml

@@ -4,6 +4,11 @@ on:
     branches:
     - master
     - alpha
+
+permissions:
+  id-token: write  # Required for OIDC
+  contents: write  # For Semantic Release tagging
+
 jobs:
   release:
     name: Release
@@ -13,12 +18,10 @@ jobs:
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
       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
@@ -37,7 +40,6 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
+      run: npx semantic-release@25
       env:
-        GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-      run: npx semantic-release
+        GITHUB_TOKEN: ${{ secrets.OPENEDX_SEMANTIC_RELEASE_GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-20
+24

README.rst

@@ -62,9 +62,9 @@ Cloning and Startup
 
     ``git clone https://github.com/openedx/frontend-component-footer.git``
 
-  2. Use node v18.x.
+  2. Use node v24.x.
 
-    The current version of the micro-frontend build scripts support node 18.
+    The current version of the micro-frontend build scripts support node 24.
     Using other major versions of node *may* work, but this is unsupported.  For
     convenience, this repository includes an .nvmrc file to help in setting the
     correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.

package.json

@@ -34,7 +34,6 @@
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
     "@edx/frontend-platform": "^8.2.1",
-    "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "^14.3.1",
     "@openedx/paragon": "^23.3.0",
     "@testing-library/jest-dom": "^5.16.4",
@@ -45,22 +44,21 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-redux": "8.1.3",
-    "react-router-dom": "6.30.0",
+    "react-router-dom": "6.30.2",
     "react-test-renderer": "18.3.1",
     "redux": "4.2.1",
-    "semantic-release": "21.1.2"
+    "semantic-release": "21.1.2",
+    "ts-jest": "^29.1.2"
   },
   "dependencies": {
     "@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",
+    "@fortawesome/react-fontawesome": "0.2.6",
     "@openedx/frontend-plugin-framework": "^1.7.0",
     "classnames": "^2.5.1",
-    "jest-environment-jsdom": "^29.7.0",
-    "lodash": "^4.17.21",
-    "ts-jest": "^29.1.2"
+    "lodash": "^4.17.21"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",

src/components/Footer.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
@@ -17,13 +17,17 @@ const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
 };
 
-class SiteFooter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
-  }
+const SiteFooter = ({
+  supportedLanguages,
+  onLanguageSelected,
+  logo,
+}) => {
+  const intl = useIntl();
+  const { config } = useContext(AppContext);
 
-  externalLinkClickHandler(event) {
+  const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
+
+  const externalLinkClickHandler = (event) => {
     const label = event.currentTarget.getAttribute('href');
     const eventName = EVENT_NAMES.FOOTER_LINK;
     const properties = {
@@ -31,52 +35,39 @@ class SiteFooter extends React.Component {
       label,
     };
     sendTrackEvent(eventName, properties);
-  }
+  };
 
-  render() {
-    const {
-      supportedLanguages,
-      onLanguageSelected,
-      logo,
-      intl,
-    } = this.props;
-    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
-    const { config } = this.context;
-
-    return (
-      <footer
-        role="contentinfo"
-        className="footer d-flex border-top py-3 px-4"
-      >
-        <div className="container-fluid d-flex">
-          <a
-            className="d-block"
-            href={config.LMS_BASE_URL}
-            aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
-          >
-            <img
-              style={{ maxHeight: 45 }}
-              src={logo || config.LOGO_TRADEMARK_URL}
-              alt={intl.formatMessage(messages['footer.logo.altText'])}
-            />
-          </a>
-          <div className="flex-grow-1" />
-          {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
-          )}
-        </div>
-      </footer>
-    );
-  }
-}
-
-SiteFooter.contextType = AppContext;
+  return (
+    <footer
+      role="contentinfo"
+      className="footer d-flex border-top py-3 px-4"
+    >
+      <div className="container-fluid d-flex">
+        <a
+          className="d-block"
+          href={config.LMS_BASE_URL}
+          aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+          onClick={externalLinkClickHandler}
+        >
+          <img
+            style={{ maxHeight: 45 }}
+            src={logo || config.LOGO_TRADEMARK_URL}
+            alt={intl.formatMessage(messages['footer.logo.altText'])}
+          />
+        </a>
+        <div className="flex-grow-1" />
+        {showLanguageSelector && (
+          <LanguageSelector
+            options={supportedLanguages}
+            onSubmit={onLanguageSelected}
+          />
+        )}
+      </div>
+    </footer>
+  );
+};
 
 SiteFooter.propTypes = {
-  intl: intlShape.isRequired,
   logo: PropTypes.string,
   onLanguageSelected: PropTypes.func,
   supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
@@ -91,5 +82,5 @@ SiteFooter.defaultProps = {
   supportedLanguages: [],
 };
 
-export default injectIntl(SiteFooter);
+export default SiteFooter;
 export { EVENT_NAMES };

src/components/Footer.test.jsx

@@ -8,6 +8,7 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import Footer from './Footer';
 import FooterSlot from '../plugin-slots/FooterSlot';
+import StudioFooterHelpSectionSlot from '../plugin-slots/StudioFooterHelpSectionSlot';
 
 const FooterWithContext = ({ locale = 'es' }) => {
   const contextValue = useMemo(() => ({
@@ -90,3 +91,32 @@ describe('<Footer />', () => {
     });
   });
 });
+
+describe('<StudioFooterHelpSectionSlot />', () => {
+  const SectionWithContext = ({ locale = 'es' }) => {
+    const contextValue = useMemo(() => ({
+      authenticatedUser: null,
+      config: {
+        LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+        LMS_BASE_URL: process.env.LMS_BASE_URL,
+      },
+    }), []);
+
+    return (
+      <IntlProvider locale={locale}>
+        <AppContext.Provider
+          value={contextValue}
+        >
+          <StudioFooterHelpSectionSlot />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+  };
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<SectionWithContext />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/LanguageSelector.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 
 const LanguageSelector = ({
-  intl, options, onSubmit, ...props
+  options, onSubmit, ...props
 }) => {
+  const intl = useIntl();
   const handleSubmit = (e) => {
     e.preventDefault();
     const languageCode = e.target.elements['site-footer-language-select'].value;
@@ -47,7 +48,6 @@ const LanguageSelector = ({
 };
 
 LanguageSelector.propTypes = {
-  intl: intlShape.isRequired,
   onSubmit: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string,
@@ -55,4 +55,4 @@ LanguageSelector.propTypes = {
   })).isRequired,
 };
 
-export default injectIntl(LanguageSelector);
+export default LanguageSelector;

src/components/__snapshots__/Footer.test.jsx.snap

@@ -12,6 +12,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
       aria-label="edX Home"
       className="d-block"
       href="http://localhost:18000"
+      onClick={[Function]}
     >
       <img
         alt="Powered by Open edX"
@@ -81,6 +82,7 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
       aria-label="edX Home"
       className="d-block"
       href="http://localhost:18000"
+      onClick={[Function]}
     >
       <img
         alt="Powered by Open edX"
@@ -111,6 +113,7 @@ exports[`<Footer /> renders correctly renders without a language selector in es
       aria-label="edX Home"
       className="d-block"
       href="http://localhost:18000"
+      onClick={[Function]}
     >
       <img
         alt="Powered by Open edX"
@@ -128,3 +131,68 @@ exports[`<Footer /> renders correctly renders without a language selector in es
   </div>
 </footer>
 `;
+
+exports[`<StudioFooterHelpSectionSlot /> renders correctly 1`] = `
+[
+  <div
+    className="m-0 mt-6 row align-items-center justify-content-center"
+  >
+    <div
+      className="col border-top mr-2"
+    />
+    <button
+      className="btn btn-outline-primary btn-sm"
+      data-testid="helpToggleButton"
+      disabled={false}
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="pgn__icon pgn__icon__sm btn-icon-before"
+      >
+        <svg
+          aria-hidden={true}
+          fill="none"
+          focusable={false}
+          height={24}
+          role="img"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm1 17h-2v-2h2v2Zm2.07-7.75-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      Looking for help with Studio?
+      <span
+        className="pgn__icon pgn__icon__sm btn-icon-after"
+      >
+        <svg
+          aria-hidden={true}
+          fill="none"
+          focusable={false}
+          height={24}
+          role="img"
+          viewBox="0 0 24 24"
+          width={24}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      className="col border-top ml-2"
+    />
+  </div>,
+  <div
+    className="px-4 container-mw-xl container-fluid"
+  />,
+]
+`;

src/components/studio-footer/StudioFooter.jsx

@@ -1,21 +1,19 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
   ActionRow,
-  Button,
   Container,
   Hyperlink,
-  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';
 import StudioFooterLogoSlot from '../../plugin-slots/StudioFooterLogoSlot';
+import StudioFooterHelpSectionSlot from '../../plugin-slots/StudioFooterHelpSectionSlot';
 
 ensureConfig([
   'LMS_BASE_URL',
@@ -32,76 +30,18 @@ const StudioFooter = ({
   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">
-        <div className="col border-top mr-2" />
-        <Button
-          data-testid="helpToggleButton"
-          variant="outline-primary"
-          onClick={() => setIsOpen(!isOpen)}
-          iconBefore={Help}
-          iconAfter={isOpen ? ExpandLess : ExpandMore}
-          size="sm"
-        >
-          {isOpen ? intl.formatMessage(messages.closeHelpButtonLabel)
-            : intl.formatMessage(messages.openHelpButtonLabel)}
-        </Button>
-        <div className="col border-top ml-2" />
-      </div>
+      <StudioFooterHelpSectionSlot containerProps={containerProps} />
       <Container
         size="xl"
         className={classNames('px-4', containerClassName)}
         {...restContainerProps}
       >
-        <TransitionReplace>
-          {isOpen ? (
-            <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
-              <ActionRow.Spacer />
-              <Button as="a" href="https://docs.openedx.org/" size="sm">
-                <FormattedMessage {...messages.edxDocumentationButtonLabel} />
-              </Button>
-              <Button
-                as="a"
-                href="https://openedx.org/"
-                size="sm"
-                data-testid="openEdXPortalButton"
-              >
-                <FormattedMessage {...messages.openEdxPortalButtonLabel} />
-              </Button>
-              <Button
-                as="a"
-                href="https://www.edx.org/course/edx101-overview-of-creating-an-edx-course#.VO4eaLPF-n1"
-                size="sm"
-              >
-                <FormattedMessage {...messages.edx101ButtonLabel} />
-              </Button>
-              <Button
-                as="a"
-                href="https://www.edx.org/course/studiox-creating-a-course-with-edx-studio"
-                size="sm"
-              >
-                <FormattedMessage {...messages.studioXButtonLabel} />
-              </Button>
-              {!isEmpty(config.SUPPORT_EMAIL) && (
-                <Button
-                  as="a"
-                  href={`mailto:${config.SUPPORT_EMAIL}`}
-                  size="sm"
-                  data-testid="contactUsButton"
-                >
-                  <FormattedMessage {...messages.contactUsButtonLabel} />
-                </Button>
-              )}
-              <ActionRow.Spacer />
-            </ActionRow>
-          ) : null}
-        </TransitionReplace>
         <ActionRow className="pt-3 m-0 x-small">
           © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_SITE_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
           <ActionRow.Spacer />

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

@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import StudioFooterSlot from '../../plugin-slots/StudioFooterSlot';
@@ -77,7 +78,7 @@ describe('Footer', () => {
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
       await user.click(helpToggleButton);
-      expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
+      expect(screen.getByTestId('openEdXDemoCourseButton')).toBeVisible();
     });
     it('should not show contact us button', async () => {
       const user = userEvent.setup();

src/components/studio-footer/help-components/HelpButton.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+} from '@openedx/paragon';
+import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import messages from '../messages';
+
+const HelpButton = ({ isOpen, setIsOpen }) => {
+  const intl = useIntl();
+  return (
+    <Button
+      data-testid="helpToggleButton"
+      variant="outline-primary"
+      onClick={() => setIsOpen(!isOpen)}
+      iconBefore={Help}
+      iconAfter={isOpen ? ExpandLess : ExpandMore}
+      size="sm"
+    >
+      {isOpen ? intl.formatMessage(messages.closeHelpButtonLabel)
+        : intl.formatMessage(messages.openHelpButtonLabel)}
+    </Button>
+  );
+};
+
+HelpButton.propTypes = {
+  setIsOpen: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default HelpButton;

src/components/studio-footer/help-components/HelpButton.test.jsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from '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';
+import HelpButton from './HelpButton';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line react/prop-types
+const ButtonWithContext = ({ locale = 'en', isOpen, setIsOpen }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: { },
+  }), []);
+
+  return (
+    <IntlProvider locale={locale}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <HelpButton isOpen={isOpen} setIsOpen={setIsOpen} />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+describe('HelpButton', () => {
+  const mockSetIsOpen = jest.fn();
+
+  beforeEach(() => {
+    mockSetIsOpen.mockClear();
+  });
+
+  it('renders with "open" label when isOpen is false', () => {
+    render(<ButtonWithContext isOpen={false} setIsOpen={mockSetIsOpen} />);
+    expect(screen.getByTestId('helpToggleButton')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(/help|open/i);
+  });
+
+  it('renders with "close" label when isOpen is true', () => {
+    render(<ButtonWithContext isOpen setIsOpen={mockSetIsOpen} />);
+    expect(screen.getByTestId('helpToggleButton')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent(/close|help/i);
+  });
+
+  it('calls setIsOpen with the toggled value when clicked', async () => {
+    const user = userEvent.setup();
+    const { rerender } = render(<ButtonWithContext isOpen={false} setIsOpen={mockSetIsOpen} />);
+    await user.click(screen.getByTestId('helpToggleButton'));
+    expect(mockSetIsOpen).toHaveBeenCalledWith(true);
+    rerender(<ButtonWithContext isOpen setIsOpen={mockSetIsOpen} />);
+    await user.click(screen.getByTestId('helpToggleButton'));
+    expect(mockSetIsOpen).toHaveBeenCalledWith(false);
+  });
+});

src/components/studio-footer/help-components/HelpContent.jsx

@@ -0,0 +1,62 @@
+import React, { useContext } from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
+import isEmpty from 'lodash/isEmpty';
+import { ensureConfig } from '@edx/frontend-platform';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+} from '@openedx/paragon';
+import messages from '../messages';
+
+ensureConfig([
+  'SUPPORT_EMAIL',
+], 'Studio Footer Help Content component');
+
+const BUTTONS = [
+  {
+    as: 'a',
+    href: 'https://docs.openedx.org/en/latest/educators/quickstarts/build_a_course.html',
+    size: 'sm',
+    message: messages.educatorsDocsButtonLabel,
+    dataTestid: null,
+  },
+  {
+    as: 'a',
+    href: 'https://training.openedx.io/courses/course-v1:OpenedX+DemoX+Demo_Course/about',
+    size: 'sm',
+    message: messages.openEdxDemoCourseButtonLabel,
+    dataTestid: 'openEdXDemoCourseButton',
+  },
+];
+
+const HelpContent = () => {
+  const { config } = useContext(AppContext);
+  return (
+    <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
+      <ActionRow.Spacer />
+
+      {BUTTONS.map(({
+        as, href, size, message, dataTestid,
+      }) => (
+        <Button as={as} href={href} size={size} key={message.id} data-testid={dataTestid}>
+          <FormattedMessage {...message} />
+        </Button>
+      ))}
+
+      {!isEmpty(config.SUPPORT_EMAIL) && (
+        <Button
+          as="a"
+          href={`mailto:${config.SUPPORT_EMAIL}`}
+          size="sm"
+          data-testid="contactUsButton"
+        >
+          <FormattedMessage {...messages.contactUsButtonLabel} />
+        </Button>
+      )}
+      <ActionRow.Spacer />
+    </ActionRow>
+  );
+};
+
+export default HelpContent;

src/components/studio-footer/help-components/HelpContent.test.jsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import HelpContent from './HelpContent';
+import '@testing-library/jest-dom';
+import messages from '../messages';
+
+// eslint-disable-next-line react/prop-types
+const ContentWithContext = ({ locale = 'en', config = {} }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config,
+  }), [config]);
+
+  return (
+    <IntlProvider locale={locale}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <HelpContent />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+describe('HelpContent', () => {
+  it('renders all help buttons', () => {
+    const config = { SUPPORT_EMAIL: 'support@example.com' };
+    render(<ContentWithContext config={config} />);
+    expect(screen.getByText(messages.educatorsDocsButtonLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.openEdxDemoCourseButtonLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('does not render contact button if SUPPORT_EMAIL is empty', () => {
+    render(<ContentWithContext config={{ SUPPORT_EMAIL: null }} />);
+    expect(screen.queryByTestId('contactUsButton')).not.toBeInTheDocument();
+  });
+
+  it('renders ActionRow with correct test id', () => {
+    render(<ContentWithContext />);
+    expect(screen.getByTestId('helpButtonRow')).toBeInTheDocument();
+  });
+});

src/components/studio-footer/help-components/HelpSection.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+  Container,
+  TransitionReplace,
+} from '@openedx/paragon';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import StudioFooterHelpButtonSlot from '../../../plugin-slots/StudioFooterHelpButtonSlot';
+import StudioFooterHelpContentlot from '../../../plugin-slots/StudioFooterHelpContentSlot';
+
+const HelpSection = ({ containerProps }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const { containerClassName, ...restContainerProps } = containerProps || {};
+  return (
+    <>
+      <div className="m-0 mt-6 row align-items-center justify-content-center">
+        <div className="col border-top mr-2" />
+        <StudioFooterHelpButtonSlot
+          setIsOpen={setIsOpen}
+          isOpen={isOpen}
+        />
+        <div className="col border-top ml-2" />
+      </div>
+      <Container
+        size="xl"
+        className={classNames('px-4', containerClassName)}
+        {...restContainerProps}
+      >
+        {isOpen && <TransitionReplace><StudioFooterHelpContentlot /></TransitionReplace> }
+      </Container>
+    </>
+  );
+};
+
+HelpSection.propTypes = {
+  containerProps: PropTypes.shape(Container.propTypes),
+};
+
+HelpSection.defaultProps = {
+  containerProps: {},
+};
+
+export default HelpSection;

src/components/studio-footer/help-components/HelpSection.test.jsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import HelpSection from './HelpSection';
+import '@testing-library/jest-dom';
+
+// eslint-disable-next-line react/prop-types
+const HelpSectionWithContext = ({ locale = 'en', config = {}, containerProps = null }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config,
+  }), [config]);
+
+  return (
+    <IntlProvider locale={locale}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <HelpSection containerProps={containerProps} />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+describe('HelpSection', () => {
+  it('renders the HelpButton', () => {
+    render(<HelpSectionWithContext />);
+    expect(screen.getByTestId('helpToggleButton')).toBeInTheDocument();
+  });
+
+  it('does not show HelpContent by default', () => {
+    render(<HelpSectionWithContext />);
+    expect(screen.queryByTestId('helpButtonRow')).not.toBeInTheDocument();
+  });
+
+  it('shows HelpContent when HelpButton is clicked', () => {
+    render(<HelpSectionWithContext />);
+    const button = screen.getByTestId('helpToggleButton');
+    fireEvent.click(button);
+    expect(screen.getByTestId('helpButtonRow')).toBeInTheDocument();
+  });
+
+  it('hides HelpContent when HelpButton is clicked twice', () => {
+    render(<HelpSectionWithContext containerProps={{ containerClassName: 'container', size: 'xl' }} />);
+    const button = screen.getByTestId('helpToggleButton');
+    fireEvent.click(button);
+    expect(screen.queryByTestId('helpButtonRow')).toBeInTheDocument();
+    fireEvent.click(button);
+    expect(screen.queryByTestId('helpButtonRow')).not.toBeInTheDocument();
+  });
+});

src/components/studio-footer/messages.js

@@ -11,25 +11,15 @@ const messages = defineMessages({
     defaultMessage: 'Hide Studio help',
     description: 'Label for button that closes the collapsed section with help buttons',
   },
-  edxDocumentationButtonLabel: {
-    id: 'authoring.footer.help.edxDocumentation.button.label',
-    defaultMessage: 'edX documentation',
-    description: 'Label for button that links to the edX documentation site',
+  educatorsDocsButtonLabel: {
+    id: 'authoring.footer.help.educatorsDocs.button.label',
+    defaultMessage: 'Open edX Educators Docs',
+    description: 'Label for button that links to the build a course quickstart site',
   },
-  openEdxPortalButtonLabel: {
-    id: 'authoring.footer.help.openEdxPortal.button.label',
-    defaultMessage: 'Open edX portal',
-    description: 'Label for button that links to the Open edX portal',
-  },
-  edx101ButtonLabel: {
-    id: 'authoring.footer.help.edx101.button.label',
-    defaultMessage: 'Enroll in edX 101',
-    description: 'Label for button that links to the edX 101 course',
-  },
-  studioXButtonLabel: {
-    id: 'authoring.footer.help.studioX.button.label',
-    defaultMessage: 'Enroll in StudioX',
-    description: 'Label for button that links to the edX StudioX course',
+  openEdxDemoCourseButtonLabel: {
+    id: 'authoring.footer.help.openEdxDemoCourse.button.label',
+    defaultMessage: 'Open edX Demo Course',
+    description: 'Label for button that links to the open edX demo course portal',
   },
   contactUsButtonLabel: {
     id: 'authoring.footer.help.contactUs.button.label',

src/plugin-slots/StudioFooterHelpButtonSlot/README.md

@@ -0,0 +1,47 @@
+# StudioFooterLogoSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer_help_button.v1`
+
+## Description
+
+This slot is used to repace/modify/hide the help button to the studio footer.
+
+## Examples
+
+### Add your custom button.
+
+The following `env.config.jsx` will add a custom help button to the studio footer.
+
+![Screenshot of modified help button](./images/custom_help_button.png)
+
+```jsx
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+import {
+  Button,
+} from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.studio_footer_help_button.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'studio_footer_helpbutton_addition',
+            type: DIRECT_PLUGIN,
+            priority: 40,
+            RenderWidget: ({isOpen, setIsOpen}) => {
+              return (
+                <Button className="button button1" onClick={() => setIsOpen(!isOpen)}>Custom Help Button</Button>
+              )
+            }
+          }
+        },
+      ],
+    }
+  },
+};
+
+export default config;
+```

src/plugin-slots/StudioFooterHelpButtonSlot/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PropTypes from 'prop-types';
+import HelpButton from '../../components/studio-footer/help-components/HelpButton';
+
+const StudioFooterHelpButtonSlot = ({ isOpen, setIsOpen }) => (
+  <PluginSlot id="org.openedx.frontend.layout.studio_footer_help_button.v1" pluginProps={{ isOpen, setIsOpen }}>
+    <HelpButton isOpen={isOpen} setIsOpen={setIsOpen} />
+  </PluginSlot>
+);
+
+StudioFooterHelpButtonSlot.propTypes = {
+  setIsOpen: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+};
+
+export default StudioFooterHelpButtonSlot;

src/plugin-slots/StudioFooterHelpContentSlot/README.md

@@ -0,0 +1,50 @@
+# StudioFooterLogoSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer_help-content.v1`
+
+## Description
+
+This slot is used to repace/modify/hide the help content to the studio footer.
+
+## Examples
+
+### Add a custom help content.
+
+The following `env.config.jsx` will add a custom help content to the studio footer.
+
+![Screenshot of modified help content](./images/custom_help_content.png)
+
+```jsx
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+import {
+  Hyperlink,
+} from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.studio_footer_help-content.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'studio_footer_helpcontent_addition',
+            type: DIRECT_PLUGIN,
+            priority: 40,
+            RenderWidget: () => {
+              return (
+                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '20px 5px' }}> 
+                  <p>Custom Help content</p>
+                  <Hyperlink destination="https://example.com/">more help</Hyperlink>
+                </div>
+              )
+            }
+          }
+        },
+      ],
+    }
+  },
+};
+
+export default config;
+```

src/plugin-slots/StudioFooterHelpContentSlot/index.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import HelpContent from '../../components/studio-footer/help-components/HelpContent';
+
+const StudioFooterHelpContentSlot = () => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.studio_footer_help-content.v1"
+  >
+    <HelpContent />
+  </PluginSlot>
+);
+
+export default StudioFooterHelpContentSlot;

src/plugin-slots/StudioFooterHelpSectionSlot/README.md

@@ -0,0 +1,53 @@
+# StudioFooterLogoSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer_help_section.v1`
+
+## Description
+
+This slot is used to repace/modify/hide the help section to the studio footer.
+
+![Screenshot of modified help section](./images/custom_help_section.png)
+
+## Examples
+
+### Customize help section.
+
+The following `env.config.jsx` will add a custom help section to the studio footer.
+
+```jsx
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+import {
+  Hyperlink,
+  Button,
+} from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.studio_footer_help_section.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'studio_footer_helpsection_addition',
+            type: DIRECT_PLUGIN,
+            priority: 40,
+            RenderWidget: () => {
+              return (
+                <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '20px 5px' }}> 
+                  <p>Custom Help Section custizable as needed </p>
+                  <Button className="button button1">Go to home</Button>
+                  <Hyperlink destination="https://example.com/">About</Hyperlink>
+                  <Hyperlink destination="https://example.com/">Info</Hyperlink>
+                </div>
+              )
+            }
+          }
+        },
+      ],
+    }
+  },
+};
+
+export default config;
+```

src/plugin-slots/StudioFooterHelpSectionSlot/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PropTypes from 'prop-types';
+import {
+  Container,
+} from '@openedx/paragon';
+import HelpSection from '../../components/studio-footer/help-components/HelpSection';
+
+const StudioFooterHelpSectionSlot = ({ containerProps }) => (
+  <PluginSlot id="org.openedx.frontend.layout.studio_footer_help_section.v1">
+    <HelpSection containerProps={containerProps} />
+  </PluginSlot>
+);
+
+StudioFooterHelpSectionSlot.propTypes = {
+  containerProps: PropTypes.shape(Container.propTypes),
+};
+
+export default StudioFooterHelpSectionSlot;