@openedx/paragon 23.14.9 → 23.15.0

package/src/Card/CardBody.tsx

@@ -0,0 +1,19 @@
+import React, { ForwardedRef } from 'react';
+import classNames from 'classnames';
+
+interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Specifies the content of the component. */
+  children?: React.ReactNode;
+  /** The class to append to the base element. */
+  className?: string;
+}
+
+const CardBody = React.forwardRef(({
+  className, children, ...rest
+}: CardBodyProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div className={classNames('pgn__card-body', className)} ref={ref} {...rest}>
+    {children}
+  </div>
+));
+
+export default CardBody;

package/src/Card/{CardContext.jsx → CardContext.tsx}

@@ -1,14 +1,31 @@
-import React, { createContext } from 'react';
-import PropTypes from 'prop-types';
+import React, { createContext, ReactNode } from 'react';
 
-const CardContext = createContext({});
+interface CardContextData {
+  /** Specifies which orientation to use. */
+  orientation: 'horizontal' | 'vertical';
+  /** Specifies loading state. */
+  isLoading: boolean;
+  /** Specifies `Card` style variant */
+  variant: 'light' | 'dark' | 'muted';
+}
+
+const CardContext = createContext<CardContextData>({
+  orientation: 'vertical',
+  isLoading: false,
+  variant: 'light',
+});
+
+interface CardContextProviderProps extends Partial<CardContextData> {
+  /** Specifies content of the component. */
+  children?: ReactNode;
+}
 
 function CardContextProvider({
-  orientation,
+  orientation = 'vertical',
   children,
-  isLoading,
-  variant,
-}) {
+  isLoading = false,
+  variant = 'light',
+}: CardContextProviderProps) {
   return (
     <CardContext.Provider value={{ orientation, isLoading, variant }}>
       {children}
@@ -16,23 +33,5 @@ function CardContextProvider({
   );
 }
 
-CardContextProvider.propTypes = {
-  /** Specifies which orientation to use. */
-  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-  /** Specifies loading state. */
-  isLoading: PropTypes.bool,
-  /** Specifies content of the component. */
-  children: PropTypes.node,
-  /** Specifies `Card` style variant */
-  variant: PropTypes.oneOf(['light', 'dark', 'muted']),
-};
-
-CardContextProvider.defaultProps = {
-  orientation: 'vertical',
-  isLoading: false,
-  children: null,
-  variant: 'light',
-};
-
 export { CardContextProvider };
 export default CardContext;

package/src/Card/CardDivider.tsx

@@ -0,0 +1,13 @@
+import React, { forwardRef, ForwardedRef } from 'react';
+import classNames from 'classnames';
+
+interface CardDividerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Specifies class name to append to the base element. */
+  className?: string;
+}
+
+const CardDivider = forwardRef(({ className, ...props }: CardDividerProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div className={classNames('pgn__card-divider', className)} ref={ref} {...props} />
+));
+
+export default CardDivider;

package/src/Card/{CardGrid.jsx → CardGrid.tsx}

@@ -1,15 +1,38 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, ReactNode } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
+interface CardGridProps {
+  /** The class name for the CardGrid component */
+  className?: string;
+  /** The Card components to organize into a responsive grid */
+  children: ReactNode;
+  /**
+   * An object containing the desired column size at each breakpoint, following a similar
+   * props API as ``react-bootstrap/Col``
+   */
+  columnSizes?: {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+  };
+  /** Whether to disable the default equal height cards across rows in the card grid */
+  hasEqualColumnHeights?: boolean;
+}
+
 function CardGrid({
   className,
   children,
-  columnSizes,
-  hasEqualColumnHeights,
-}) {
+  columnSizes = {
+    sm: 12,
+    lg: 6,
+    xl: 4,
+  },
+  hasEqualColumnHeights = true,
+}: CardGridProps) {
   const cards = useMemo(
     () => React.Children.map(children, (card) => (
       <Col
@@ -36,34 +59,4 @@ function CardGrid({
   );
 }
 
-CardGrid.propTypes = {
-  /** The class name for the CardGrid component */
-  className: PropTypes.string,
-  /** The Card components to organize into a responsive grid */
-  children: PropTypes.node.isRequired,
-  /**
-   * An object containing the desired column size at each breakpoint, following a similar
-   * props API as ``react-bootstrap/Col``
-   */
-  columnSizes: PropTypes.shape({
-    xs: PropTypes.number,
-    sm: PropTypes.number,
-    md: PropTypes.number,
-    lg: PropTypes.number,
-    xl: PropTypes.number,
-  }),
-  /** Whether to disable the default equal height cards across rows in the card grid */
-  hasEqualColumnHeights: PropTypes.bool,
-};
-
-CardGrid.defaultProps = {
-  className: undefined,
-  columnSizes: {
-    sm: 12,
-    lg: 6,
-    xl: 4,
-  },
-  hasEqualColumnHeights: true,
-};
-
 export default CardGrid;

package/src/DataTable/{TableCell.jsx → TableCell.tsx}

@@ -1,8 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode, TdHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-function TableCell({ getCellProps, render, column }) {
+interface TableCellProps {
+  /** Props for the td element */
+  getCellProps: () => TdHTMLAttributes<HTMLTableCellElement>;
+  /** Function that renders the cell contents. Will be called with the string 'Cell' */
+  render: (type: 'Cell') => ReactNode;
+  /** Table column */
+  column: {
+    /** Class(es) to be applied to the cells in the given column */
+    cellClassName?: string;
+  };
+}
+function TableCell({ getCellProps, render, column }: TableCellProps) {
   const { className, ...rest } = getCellProps();
   return (
     <td {...rest} className={classNames('pgn__data-table-cell-wrap', className, column.cellClassName)}>
@@ -11,16 +21,4 @@ function TableCell({ getCellProps, render, column }) {
   );
 }
 
-TableCell.propTypes = {
-  /** Props for the td element */
-  getCellProps: PropTypes.func.isRequired,
-  /** Function that renders the cell contents. Will be called with the string 'Cell' */
-  render: PropTypes.func.isRequired,
-  /** Table column */
-  column: PropTypes.shape({
-    /** Class(es) to be applied to the cells in the given column */
-    cellClassName: PropTypes.string,
-  }).isRequired,
-};
-
 export default TableCell;

package/src/DataTable/{TableHeaderCell.jsx → TableHeaderCell.tsx}

@@ -1,10 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../Icon';
 import { ArrowDropDown, ArrowDropUp, ArrowDropUpDown } from '../../icons';
 
-export function SortIndicator({ isSorted, isSortedDesc }) {
+interface SortIndicatorProps {
+  /** Indicates whether or not a column is sorted */
+  isSorted: boolean;
+  /** Indicates whether the column is sorted in descending order */
+  isSortedDesc: boolean;
+}
+
+export function SortIndicator({ isSorted, isSortedDesc }: SortIndicatorProps) {
   if (!isSorted) {
     return <Icon style={{ opacity: 0.5 }} src={ArrowDropUpDown} data-testid="arrow-drop-up-down" />;
   }
@@ -16,14 +22,32 @@ export function SortIndicator({ isSorted, isSortedDesc }) {
   return <Icon src={ArrowDropUp} data-testid="arrow-drop-up" />;
 }
 
-SortIndicator.propTypes = {
-  isSorted: PropTypes.bool.isRequired,
-  isSortedDesc: PropTypes.bool.isRequired,
-};
+interface TableHeaderCellProps {
+  /** Returns props for the th element */
+  getHeaderProps: (...args: any[]) => Record<string, any>;
+  /** Indicates whether or not a column is sorted */
+  isSorted?: boolean;
+  /** Renders the header content. Passed the string 'Header' */
+  render: (type: 'Header') => React.ReactNode;
+  /** Indicates whether the column is sorted in descending order */
+  isSortedDesc?: boolean;
+  /** Gets props related to sorting that will be passed to th */
+  getSortByToggleProps?: (...args: any[]) => Record<string, any>;
+  /** Indicates whether a column is sortable */
+  canSort?: boolean;
+  /** Class(es) to be applied to header cells */
+  headerClassName?: string;
+}
 
 function TableHeaderCell({
-  getHeaderProps, render, canSort, getSortByToggleProps, isSorted, isSortedDesc, headerClassName,
-}) {
+  getHeaderProps,
+  render,
+  canSort = false,
+  getSortByToggleProps = () => ({}),
+  isSorted = false,
+  isSortedDesc = false,
+  headerClassName,
+}: TableHeaderCellProps) {
   const toggleProps = canSort && getSortByToggleProps ? getSortByToggleProps() : {};
 
   return (
@@ -36,29 +60,4 @@ function TableHeaderCell({
   );
 }
 
-TableHeaderCell.defaultProps = {
-  headerClassName: null,
-  isSorted: false,
-  isSortedDesc: false,
-  canSort: false,
-  getSortByToggleProps: () => {},
-};
-
-TableHeaderCell.propTypes = {
-  /** Returns props for the th element */
-  getHeaderProps: PropTypes.func.isRequired,
-  /** Indicates whether or not a column is sorted */
-  isSorted: PropTypes.bool,
-  /** Renders the header content. Passed the string 'Header' */
-  render: PropTypes.func.isRequired,
-  /** Indicates whether the column is sorted in descending order */
-  isSortedDesc: PropTypes.bool,
-  /** Gets props related to sorting that will be passed to th */
-  getSortByToggleProps: PropTypes.func,
-  /** Indicates whether a column is sortable */
-  canSort: PropTypes.bool,
-  /** Class(es) to be applied to header cells */
-  headerClassName: PropTypes.string,
-};
-
 export default TableHeaderCell;

package/src/Menu/MenuItem.tsx

@@ -0,0 +1,49 @@
+import React, {
+  ReactElement, ReactNode, ElementType, createElement, ComponentType,
+} from 'react';
+import classNames from 'classnames';
+import Icon from '../Icon';
+
+interface MenuItemProps {
+  /** Specifies that this `MenuItem` is selected inside the `SelectMenu` */
+  defaultSelected?: boolean;
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /** Specifies the content of the `MenuItem` */
+  children: ReactNode;
+  /** Specifies the base element */
+  as?: ElementType;
+  /** Specifies the jsx before the content of the `MenuItem` */
+  iconBefore?: ReactElement | ElementType;
+  /** Specifies the jsx after the content of the `MenuItem` */
+  iconAfter?: ReactElement | ElementType;
+}
+function MenuItem({
+  as = 'button',
+  children,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  defaultSelected = false,
+  iconAfter,
+  iconBefore,
+  ...props
+}: MenuItemProps) {
+  const className = classNames(props.className, 'pgn__menu-item');
+
+  return createElement(
+    as,
+    {
+      ...props,
+      className,
+    },
+    (
+      <>
+        {iconBefore && <Icon className="btn-icon-before" src={iconBefore as ComponentType} />}
+        <span className="pgn__menu-item-text">{children}</span>
+        <span className="pgn__menu-item-content-spacer" />
+        {iconAfter && <Icon className="btn-icon-after" src={iconAfter as ComponentType} />}
+      </>
+    ),
+  );
+}
+
+export default MenuItem;

package/src/Menu/{index.jsx → index.tsx}

@@ -1,18 +1,30 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ElementType, ReactNode, createElement } from 'react';
 import classNames from 'classnames';
 import useArrowKeyNavigation from '../hooks/useArrowKeyNavigationHook';
 
+interface MenuProps {
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /**
+   * Specifies the CSS selector string that indicates to which elements
+   * the user can navigate using the arrow keys
+   */
+  arrowKeyNavigationSelector?: string;
+  /** Specifies the base element */
+  as?: ElementType;
+  /** Specifies the content of the menu */
+  children?: ReactNode;
+}
 function Menu({
-  as,
-  arrowKeyNavigationSelector,
+  as = 'div',
+  arrowKeyNavigationSelector = 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
   children,
   ...props
-}) {
+}: MenuProps) {
   const parentRef = useArrowKeyNavigation({ selectors: arrowKeyNavigationSelector });
   const className = classNames(props.className, 'pgn__menu');
 
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,
@@ -28,25 +40,4 @@ function Menu({
   );
 }
 
-Menu.propTypes = {
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /**
-   * Specifies the CSS selector string that indicates to which elements
-   * the user can navigate using the arrow keys
-   */
-  arrowKeyNavigationSelector: PropTypes.string,
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies the content of the menu */
-  children: PropTypes.node,
-};
-
-Menu.defaultProps = {
-  className: undefined,
-  arrowKeyNavigationSelector: 'a:not(:disabled),button:not(:disabled),input:not(:disabled)',
-  as: 'div',
-  children: null,
-};
-
 export default Menu;

package/src/PageBanner/{index.jsx → index.tsx}

@@ -1,5 +1,4 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import { Close } from '../../icons';
 import Icon from '../Icon';
@@ -13,11 +12,34 @@ export const VARIANTS = {
   warning: 'warning',
   accentA: 'accentA',
   accentB: 'accentB',
-};
+} as const;
+
+interface PageBannerProps {
+  /** An element rendered inside the `Page Banner`. */
+  children: ReactNode;
+  /** Boolean used to control whether `Page Banner` is dismissible. */
+  dismissible: boolean;
+  /** An element to be set as the dismiss button's alt text (preferably a translated string). */
+  dismissAltText: string;
+  /** A function to be called on dismiss of the `Page Banner`. */
+  onDismiss: () => void;
+  /** Boolean used to control whether the Page Banner shows. */
+  show: boolean;
+  /** A string designating which color variant of the `Page Banner` to display.
+   * The full list of variants can be seen [here.](https://github.com/openedx/paragon/blob/release-23.x/src/PageBanner/index.tsx)
+   */
+  variant: keyof typeof VARIANTS;
+}
 
 function PageBanner({
-  children, dismissible, dismissAltText, onDismiss, show, variant, ...rest
-}) {
+  children,
+  dismissible = false,
+  dismissAltText = PAGE_BANNER_DISMISS_ALT_TEXT,
+  onDismiss = () => {},
+  show = true,
+  variant = VARIANTS.accentA,
+  ...rest
+}: PageBannerProps) {
   if (!show) {
     return null;
   }
@@ -52,28 +74,4 @@ function PageBanner({
   );
 }
 
-PageBanner.propTypes = {
-  /** An element rendered inside the `Page Banner`. */
-  children: PropTypes.node,
-  /** Boolean used to control whether `Page Banner` is dismissible. */
-  dismissible: PropTypes.bool,
-  /** An element to be set as the dismiss button's alt text (preferably a translated string). */
-  dismissAltText: PropTypes.node,
-  /** A function to be called on dismiss of the `Page Banner`. */
-  onDismiss: PropTypes.func,
-  /** Boolean used to control whether the Page Banner shows. */
-  show: PropTypes.bool,
-  /** A string designating which color variant of the `Page Banner` to display */
-  variant: PropTypes.oneOf([VARIANTS.light, VARIANTS.dark, VARIANTS.warning, VARIANTS.accentA, VARIANTS.accentB]),
-};
-
-PageBanner.defaultProps = {
-  children: undefined,
-  dismissible: false,
-  dismissAltText: PAGE_BANNER_DISMISS_ALT_TEXT,
-  onDismiss: () => {},
-  show: true,
-  variant: VARIANTS.accentA,
-};
-
 export default PageBanner;

package/src/Sheet/Sheet.test.jsx

@@ -6,11 +6,12 @@ import Sheet, { POSITIONS, VARIANTS } from '.';
 
 /* eslint-disable react/prop-types */
 jest.mock('./SheetContainer', () => function SheetContainerMock(props) {
-  const { children, ...otherProps } = props;
+  const { children, className, ...otherProps } = props;
+  const allClasses = ['sheet-container', className].filter(Boolean).join(' ');
   return (
-    <sheet-container {...otherProps}>
+    <div data-testid="sheet-container" className={allClasses} {...otherProps}>
       {children}
-    </sheet-container>
+    </div>
   );
 });
 
@@ -53,5 +54,64 @@ describe('<Sheet />', () => {
       const { container: container2 } = render(<Sheet />);
       expect(container2.firstChild).not.toBeNull();
     });
+
+    it('renders with custom className', () => {
+      const customClassName = 'custom-class';
+      const { container } = render(<Sheet className={customClassName} />);
+      const sheetElement = container.querySelector('.pgn__sheet-component');
+
+      expect(sheetElement).toBeInTheDocument();
+      expect(sheetElement).toHaveClass('pgn__sheet-component');
+      expect(sheetElement).toHaveClass(customClassName);
+    });
+
+    it('handles multiple custom className', () => {
+      const customClasses = 'class-one class-two';
+      const { container } = render(<Sheet className={customClasses} />);
+      const sheetElement = container.querySelector('.pgn__sheet-component');
+
+      expect(sheetElement).toHaveClass('pgn__sheet-component');
+      expect(sheetElement).toHaveClass('class-one');
+      expect(sheetElement).toHaveClass('class-two');
+    });
+
+    it('renders with custom className on SheetContainer', () => {
+      const customClassName = 'custom-container-class';
+      const { getByTestId } = render(<Sheet containerClassName={customClassName} />);
+      const sheetContainer = getByTestId('sheet-container');
+
+      expect(sheetContainer).toBeInTheDocument();
+      expect(sheetContainer).toHaveClass('sheet-container');
+      expect(sheetContainer).toHaveClass(customClassName);
+    });
+
+    it('handles multiple custom className values on SheetContainer', () => {
+      const customClasses = 'container-one container-two';
+      const { getByTestId } = render(<Sheet containerClassName={customClasses} />);
+      const sheetContainer = getByTestId('sheet-container');
+
+      expect(sheetContainer).toBeInTheDocument();
+      expect(sheetContainer).toHaveClass('sheet-container');
+      expect(sheetContainer).toHaveClass('container-one');
+      expect(sheetContainer).toHaveClass('container-two');
+    });
+
+    it('handles className and containerClassName simultaneously', () => {
+      const containerClass = 'container-class';
+      const sheetClass = 'sheet-class';
+      const { getByTestId, container } = render(
+        <Sheet containerClassName={containerClass} className={sheetClass} />,
+      );
+      const sheetContainer = getByTestId('sheet-container');
+      const sheetElement = container.querySelector('.pgn__sheet-component');
+
+      expect(sheetContainer).toBeInTheDocument();
+      expect(sheetContainer).toHaveClass('sheet-container');
+      expect(sheetContainer).toHaveClass(containerClass);
+
+      expect(sheetElement).toBeInTheDocument();
+      expect(sheetElement).toHaveClass('pgn__sheet-component');
+      expect(sheetElement).toHaveClass(sheetClass);
+    });
   });
 });

package/src/Sheet/SheetContainer.jsx

@@ -1,23 +1,44 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 class SheetContainer extends React.Component {
   constructor(props) {
     super(props);
     this.sheetRootName = 'sheet-root';
+    this.updateRootElement();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.className !== this.props.className) {
+      this.updateRootElement();
+    }
+  }
+
+  updateRootElement = () => {
+    const { className } = this.props;
+
+    /* istanbul ignore next */
     if (typeof document === 'undefined') {
       this.rootElement = null;
-    } else if (document.getElementById(this.sheetRootName)) {
-      this.rootElement = document.getElementById(this.sheetRootName);
-    } else {
-      const rootElement = document.createElement('div');
+      return;
+    }
+
+    let rootElement = document.getElementById(this.sheetRootName);
+
+    if (!rootElement) {
+      rootElement = document.createElement('div');
       rootElement.setAttribute('id', this.sheetRootName);
-      rootElement.setAttribute('class', 'sheet-container');
       rootElement.setAttribute('data-testid', 'sheet-container');
-      this.rootElement = document.body.appendChild(rootElement);
+      document.body.appendChild(rootElement);
     }
-  }
+
+    const classes = classNames('sheet-container', className);
+    rootElement.setAttribute('class', classes);
+
+    this.rootElement = rootElement;
+  };
 
   render() {
     if (this.rootElement) {
@@ -32,6 +53,12 @@ class SheetContainer extends React.Component {
 
 SheetContainer.propTypes = {
   children: PropTypes.node.isRequired,
+  /** Additional CSS classes to apply to the sheet container */
+  className: PropTypes.string,
+};
+
+SheetContainer.defaultProps = {
+  className: undefined,
 };
 
 export default SheetContainer;

package/src/Sheet/SheetContainer.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import SheetContainer from './SheetContainer';
 
 const childId1 = 'sheet-container-TEST-child1';
@@ -31,4 +31,37 @@ describe('<SheetContainer />', () => {
     const childEl2 = screen.getByText(childContent2);
     expect(childEl2).toBeTruthy();
   });
+
+  it('applies custom className if provided', () => {
+    const customClass = 'custom-class';
+    render(<SheetContainer className={customClass}>{child1}</SheetContainer>);
+    const rootEl = screen.getByTestId('sheet-container');
+    expect(rootEl).toBeTruthy();
+    expect(rootEl.className).toContain('sheet-container');
+    expect(rootEl.className).toContain(customClass);
+  });
+
+  it('calls updateRootElement when className changes (componentDidUpdate)', () => {
+    const { rerender } = render(
+      <SheetContainer className="first-class">
+        <div>Content</div>
+      </SheetContainer>,
+    );
+
+    const sheetRoot = document.getElementById('sheet-root');
+    expect(sheetRoot).toHaveClass('sheet-container');
+    expect(sheetRoot).toHaveClass('first-class');
+
+    act(() => {
+      rerender(
+        <SheetContainer className="second-class">
+          <div>Content</div>
+        </SheetContainer>,
+      );
+    });
+
+    expect(sheetRoot).toHaveClass('sheet-container');
+    expect(sheetRoot).toHaveClass('second-class');
+    expect(sheetRoot).not.toHaveClass('first-class');
+  });
 });