@nauedu/frontend-component-header 20.0.0 → 20.1.0

package/dist/studio-header/HeaderBody.test.tsx

@@ -1,102 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { MemoryRouter } from 'react-router-dom';
-
-import HeaderBody from './HeaderBody';
-import messages from './messages';
-
-const mockOnNavigate = jest.fn();
-const mockSearchButtonAction = jest.fn();
-const mockToggleModalPopup = jest.fn();
-const mockSetModalPopupTarget = jest.fn();
-
-const defaultProps = {
-  studioBaseUrl: 'https://example.com',
-  logoutUrl: 'https://example.com/logout',
-  onNavigate: mockOnNavigate,
-  setModalPopupTarget: mockSetModalPopupTarget,
-  toggleModalPopup: mockToggleModalPopup,
-  searchButtonAction: mockSearchButtonAction,
-  username: 'testuser',
-  authenticatedUserAvatar: 'avatar.png',
-  isAdmin: true,
-  isMobile: false,
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  logo: 'logo.png',
-  logoAltText: 'Test Logo',
-  number: '101',
-  org: 'EDX',
-  title: 'Test Course',
-  outlineLink: '/courses/edx/course-101',
-};
-
-const RootWrapper = (props) => (
-  <MemoryRouter>
-    <IntlProvider locale="en" messages={{}}>
-      <HeaderBody {...props} />
-    </IntlProvider>
-  </MemoryRouter>
-);
-
-describe('HeaderBody Component', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('renders the logo and brand navigation', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const logoImage = screen.getByAltText(defaultProps.logoAltText);
-    expect(logoImage).toBeInTheDocument();
-    expect(logoImage).toHaveAttribute('src', defaultProps.logo);
-  });
-
-  it('renders course lockup information', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const courseTitle = screen.getByText(defaultProps.title);
-    const courseOrgNumber = screen.getByText(`${defaultProps.org} ${defaultProps.number}`);
-
-    expect(courseTitle).toBeInTheDocument();
-    expect(courseOrgNumber).toBeInTheDocument();
-  });
-
-  it('renders a course lock-up link with the correct outline URL', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const courseLockUpLink = screen.getByTestId('course-lock-up-block');
-    expect(courseLockUpLink.getAttribute('href')).toBe(defaultProps.outlineLink);
-  });
-
-  it('displays search button and triggers searchButtonAction on click', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const searchButton = screen.getByLabelText(messages['header.label.search.nav'].defaultMessage);
-    expect(searchButton).toBeInTheDocument();
-
-    fireEvent.click(searchButton);
-    expect(mockSearchButtonAction).toHaveBeenCalled();
-  });
-
-  it('displays user menu with username and avatar', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const userMenu = screen.getByText(defaultProps.username);
-    const avatarImage = screen.getByAltText(defaultProps.username);
-
-    expect(userMenu).toBeInTheDocument();
-    expect(avatarImage).toHaveAttribute('src', defaultProps.authenticatedUserAvatar);
-  });
-
-  it('toggles mobile menu popup when button is clicked in mobile view', () => {
-    render(<RootWrapper {...defaultProps} isMobile isModalPopupOpen={false} />);
-
-    const menuButton = screen.getByTestId('mobile-menu-button');
-    fireEvent.click(menuButton);
-
-    expect(mockToggleModalPopup).toHaveBeenCalled();
-  });
-});

package/dist/studio-header/HeaderBody.tsx

@@ -1,196 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import classNames from 'classnames';
-import {
-  ActionRow,
-  Button,
-  Container,
-  Icon,
-  IconButton,
-  Nav,
-  Row,
-} from '@openedx/paragon';
-import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
-
-import CourseLockUp from './CourseLockUp';
-import UserMenu from './UserMenu';
-import BrandNav from './BrandNav';
-import NavDropdownMenu from './NavDropdownMenu';
-import messages from './messages';
-
-const HeaderBody = ({
-  logo,
-  logoAltText,
-  number,
-  org,
-  title,
-  username,
-  isAdmin,
-  studioBaseUrl,
-  logoutUrl,
-  authenticatedUserAvatar,
-  isMobile,
-  setModalPopupTarget,
-  toggleModalPopup,
-  isModalPopupOpen,
-  isHiddenMainMenu,
-  mainMenuDropdowns,
-  outlineLink,
-  searchButtonAction,
-  containerProps,
-}) => {
-  const intl = useIntl();
-
-  const renderBrandNav = (
-    <BrandNav
-      {...{
-        studioBaseUrl,
-        logo,
-        logoAltText,
-      }}
-    />
-  );
-
-  const { className: containerClassName, ...restContainerProps } = containerProps || {};
-
-  return (
-    <Container
-      size="xl"
-      className={classNames('px-2.5', containerClassName)}
-      {...restContainerProps}
-    >
-      <ActionRow as="header">
-        {isHiddenMainMenu ? (
-          <Row className="flex-nowrap ml-4">
-            {renderBrandNav}
-          </Row>
-        ) : (
-          <>
-            {isMobile ? (
-              <Button
-                ref={setModalPopupTarget}
-                className="d-inline-flex align-items-center"
-                variant="tertiary"
-                onClick={toggleModalPopup}
-                iconBefore={isModalPopupOpen ? Close : MenuIcon}
-                data-testid="mobile-menu-button"
-              >
-                Menu
-              </Button>
-            ) : (
-              <div className="w-25">
-                <Row className="m-0 flex-nowrap align-items-center">
-                  {renderBrandNav}
-                  <CourseLockUp
-                    {...{
-                      outlineLink,
-                      number,
-                      org,
-                      title,
-                    }}
-                  />
-                </Row>
-              </div>
-            )}
-            {isMobile ? (
-              <>
-                <ActionRow.Spacer />
-                {renderBrandNav}
-              </>
-            ) : (
-              <Nav data-testid="desktop-menu" className="ml-2">
-                {mainMenuDropdowns.map(dropdown => {
-                  const { id, buttonTitle, items } = dropdown;
-                  return (
-                    <NavDropdownMenu
-                      key={id}
-                      {...{
-                        id, buttonTitle, items,
-                      }}
-                    />
-                  );
-                })}
-              </Nav>
-            )}
-          </>
-        )}
-        <ActionRow.Spacer />
-        {searchButtonAction && (
-          <Nav>
-            <IconButton
-              src={Search}
-              iconAs={Icon}
-              onClick={searchButtonAction}
-              aria-label={intl.formatMessage(messages['header.label.search.nav'])}
-              alt={intl.formatMessage(messages['header.label.search.nav'])}
-            />
-          </Nav>
-        )}
-        <Nav>
-          <UserMenu
-            {...{
-              username,
-              studioBaseUrl,
-              logoutUrl,
-              authenticatedUserAvatar,
-              isAdmin,
-              isMobile,
-            }}
-          />
-        </Nav>
-      </ActionRow>
-    </Container>
-  );
-};
-
-HeaderBody.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func,
-  toggleModalPopup: PropTypes.func,
-  isModalPopupOpen: PropTypes.bool,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
-  isMobile: PropTypes.bool,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-HeaderBody.defaultProps = {
-  setModalPopupTarget: null,
-  toggleModalPopup: null,
-  isModalPopupOpen: false,
-  logo: null,
-  logoAltText: null,
-  number: '',
-  org: '',
-  title: '',
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  isMobile: false,
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-  containerProps: {},
-};
-
-export default HeaderBody;

package/dist/studio-header/MobileHeader.tsx

@@ -1,74 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useToggle, ModalPopup } from '@openedx/paragon';
-import HeaderBody from './HeaderBody';
-import MobileMenu from './MobileMenu';
-
-const MobileHeader = ({
-  mainMenuDropdowns,
-  ...props
-}) => {
-  const [isOpen, , close, toggle] = useToggle(false);
-  const [target, setTarget] = useState(null);
-
-  return (
-    <>
-      {/* @ts-expect-error The type of 'props' is any until we convert from propTypes to TypeScript interface/types */}
-      <HeaderBody
-        {...props}
-        isMobile
-        setModalPopupTarget={setTarget}
-        toggleModalPopup={toggle}
-        isModalPopupOpen={isOpen}
-      />
-      <ModalPopup
-        hasArrow
-        placement="bottom"
-        positionRef={target}
-        isOpen={isOpen}
-        onClose={close}
-        onEscapeKey={close}
-        className="mobile-menu-container"
-      >
-        <MobileMenu {...{ mainMenuDropdowns }} />
-      </ModalPopup>
-    </>
-  );
-};
-
-MobileHeader.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-  logoutUrl: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-  number: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  org: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  title: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  logo: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  logoAltText: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  authenticatedUserAvatar: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  username: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-  isAdmin: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
-};
-
-MobileHeader.defaultProps = {
-  logo: null,
-  logoAltText: null,
-  number: null,
-  org: null,
-  title: null,
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-};
-
-export default MobileHeader;

package/dist/studio-header/MobileMenu.test.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-
-import '@testing-library/jest-dom/extend-expect';
-import MobileMenu from './MobileMenu';
-
-const mockOnNavigate = jest.fn();
-
-const defaultProps = {
-  mainMenuDropdowns: [
-    {
-      id: 'menu1',
-      buttonTitle: 'Menu 1',
-      items: [
-        { href: '/menu1/item1', title: 'Item 1' },
-        { href: '/menu1/item2', title: 'Item 2' },
-      ],
-    },
-    {
-      id: 'menu2',
-      buttonTitle: 'Menu 2',
-      items: [
-        { href: 'https://external-link.com', title: 'External Link' },
-      ],
-    },
-  ],
-  onNavigate: mockOnNavigate,
-};
-
-const RootWrapper = (props) => (
-  <MemoryRouter>
-    <MobileMenu {...props} />
-  </MemoryRouter>
-);
-
-describe('MobileMenu Component', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('renders the mobile menu with dropdowns and items', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const menu1Title = screen.getByText('Menu 1');
-    const menu2Title = screen.getByText('Menu 2');
-
-    expect(menu1Title).toBeInTheDocument();
-    expect(menu2Title).toBeInTheDocument();
-  });
-
-  test('navigates to internal URL when item is clicked', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const menu1Title = screen.getByText(defaultProps.mainMenuDropdowns[0].buttonTitle);
-    fireEvent.click(menu1Title);
-
-    const menuItem = screen.getByText(defaultProps.mainMenuDropdowns[0].items[0].title);
-    expect(menuItem.getAttribute('href')).toBe(defaultProps.mainMenuDropdowns[0].items[0].href);
-  });
-
-  test('navigates to an external URL when external link is clicked', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const menu2Title = screen.getByText(defaultProps.mainMenuDropdowns[1].buttonTitle);
-    fireEvent.click(menu2Title);
-
-    const externalLink = screen.getByText(defaultProps.mainMenuDropdowns[1].items[0].title);
-    expect(externalLink.getAttribute('href')).toBe(defaultProps.mainMenuDropdowns[1].items[0].href);
-  });
-
-  test('renders empty state when there are no dropdowns', () => {
-    render(<RootWrapper mainMenuDropdowns={[]} onNavigate={mockOnNavigate} />);
-
-    const mobileMenu = screen.getByTestId('mobile-menu');
-    expect(mobileMenu).toBeInTheDocument();
-
-    const menuItems = screen.queryAllByRole('listitem');
-    expect(menuItems.length).toBe(0);
-  });
-});

package/dist/studio-header/MobileMenu.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Collapsible } from '@openedx/paragon';
-import { Link } from 'react-router-dom';
-
-const MobileMenu = ({ mainMenuDropdowns }) => (
-  <div
-    className="ml-4 p-2 bg-light-100 border border-gray-200 small rounded"
-    data-testid="mobile-menu"
-  >
-    <div>
-      {mainMenuDropdowns.map(dropdown => {
-        const { id, buttonTitle, items } = dropdown;
-        return (
-          <Collapsible
-            className="border-light-100"
-            title={buttonTitle}
-            key={id}
-          >
-            <ul className="p-0" style={{ listStyleType: 'none' }}>
-              {items.map(item => (
-                <li className="mobile-menu-item">
-                  <Link to={item.href}>
-                    {item.title}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </Collapsible>
-        );
-      })}
-    </div>
-  </div>
-);
-
-MobileMenu.propTypes = {
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-};
-MobileMenu.defaultProps = {
-  mainMenuDropdowns: [],
-};
-
-export default MobileMenu;

package/dist/studio-header/NavDropdownMenu.test.tsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { MemoryRouter } from 'react-router-dom';
-
-import NavDropdownMenu from './NavDropdownMenu';
-
-const defaultProps = {
-  id: 'menu-id',
-  buttonTitle: 'Menu',
-  items: [
-    { href: '/item1', title: 'Item 1' },
-    { href: 'https://external.com', title: 'External Link' },
-  ],
-};
-
-const RootWrapper = (props) => (
-  <MemoryRouter>
-    <NavDropdownMenu {...props} />
-  </MemoryRouter>
-);
-
-describe('NavDropdownMenu Component', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('renders the dropdown button with correct title', () => {
-    render(<NavDropdownMenu {...defaultProps} />);
-
-    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
-    expect(dropdownButton).toBeInTheDocument();
-  });
-
-  test('renders all dropdown items', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
-    fireEvent.click(dropdownButton);
-
-    const item1 = screen.getByText(defaultProps.items[0].title);
-    const externalLink = screen.getByText(defaultProps.items[1].title);
-
-    expect(item1).toBeInTheDocument();
-    expect(externalLink).toBeInTheDocument();
-  });
-
-  test('calls onNavigate with the correct URL for internal link', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
-    fireEvent.click(dropdownButton);
-
-    const item1 = screen.getByText(defaultProps.items[0].title);
-    expect(item1.getAttribute('href')).toBe(defaultProps.items[0].href);
-  });
-
-  test('navigates to external URL when external link is clicked', () => {
-    render(<RootWrapper {...defaultProps} />);
-
-    const dropdownButton = screen.getByRole('button', { name: defaultProps.buttonTitle });
-    fireEvent.click(dropdownButton);
-
-    const externalLink = screen.getByText(defaultProps.items[1].title);
-    expect(externalLink.getAttribute('href')).toBe(defaultProps.items[1].href);
-  });
-});

package/dist/studio-header/NavDropdownMenu.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  Dropdown,
-  DropdownButton,
-} from '@openedx/paragon';
-import { Link } from 'react-router-dom';
-
-const NavDropdownMenu = ({
-  id,
-  buttonTitle,
-  items,
-}) => (
-  <DropdownButton
-    id={id}
-    title={buttonTitle}
-    variant="outline-primary"
-    className="mr-2"
-  >
-    {items.map(item => (
-      <Dropdown.Item
-        as={Link}
-        key={`${item.title}-dropdown-item`}
-        to={item.href}
-        className="small"
-      >
-        {item.title}
-      </Dropdown.Item>
-    ))}
-  </DropdownButton>
-);
-
-NavDropdownMenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  buttonTitle: PropTypes.node.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    href: PropTypes.string.isRequired,
-    title: PropTypes.node.isRequired,
-  })).isRequired,
-};
-
-export default NavDropdownMenu;