@openedx/paragon 23.14.9 → 23.15.0

package/src/Sheet/__snapshots__/Sheet.test.jsx.snap

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
-<sheet-container>
+<div
+  className="sheet-container"
+  data-testid="sheet-container"
+>
   <div
     className="pgn__sheet-skrim"
     role="presentation"
@@ -28,11 +31,14 @@ exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
       />
     </div>
   </focus-on>
-</sheet-container>
+</div>
 `;
 
 exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
-<sheet-container>
+<div
+  className="sheet-container"
+  data-testid="sheet-container"
+>
   <div
     className="pgn__sheet-skrim hidden"
     role="presentation"
@@ -59,11 +65,14 @@ exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
       />
     </div>
   </focus-on>
-</sheet-container>
+</div>
 `;
 
 exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
-<sheet-container>
+<div
+  className="sheet-container"
+  data-testid="sheet-container"
+>
   <div
     className="pgn__sheet-skrim hidden"
     role="presentation"
@@ -96,5 +105,5 @@ exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
       </div>
     </div>
   </focus-on>
-</sheet-container>
+</div>
 `;

package/src/Sheet/index.jsx

@@ -26,13 +26,16 @@ class Sheet extends React.Component {
   }
 
   renderSheet() {
-    const { children, position, variant } = this.props;
+    const {
+      children, position, variant, className,
+    } = this.props;
     return (
       <div
         className={classNames(
           'pgn__sheet-component',
           `pgn__sheet__${variant}`,
           position,
+          className,
         )}
         role="alert"
         aria-live="polite"
@@ -50,12 +53,13 @@ class Sheet extends React.Component {
       blocking,
       show,
       onClose,
+      containerClassName,
     } = this.props;
     if (!show) {
       return null;
     }
     return (
-      <SheetContainer>
+      <SheetContainer className={classNames(containerClassName)}>
         <div
           className={classNames(
             'pgn__sheet-skrim',
@@ -80,6 +84,10 @@ Sheet.propTypes = {
   blocking: PropTypes.bool,
   /** an element rendered inside the sheet */
   children: PropTypes.node,
+  /** A class that is appended to the sheet container element. */
+  containerClassName: PropTypes.string,
+  /** A class that is appended to the sheet element. */
+  className: PropTypes.string,
   /** a string designating the sheet's position on the window */
   position: PropTypes.oneOf([
     POSITIONS.left,
@@ -102,6 +110,8 @@ Sheet.defaultProps = {
   show: true,
   onClose: () => {},
   variant: VARIANTS.light,
+  containerClassName: undefined,
+  className: undefined,
 };
 
 export default Sheet;

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

@@ -1,20 +1,32 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
 
-const DIRECTION_VARIANTS = [
-  'horizontal',
-  'vertical',
-];
+interface StackProps {
+  /** Specifies the content of the `Stack`. */
+  children: React.ReactNode;
+  /** Specifies direction of the children blocks (column/row). */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * Specifies inner space between children blocks.
+   *
+   * Valid values are based on `the spacing classes`:
+   * `0, 0.5, ... 6`.
+   */
+  gap?: number;
+  /** Specifies the order of the children. */
+  reversed?: boolean;
+  /** Specifies an additional `className` to add to the base element. */
+  className?: string;
+}
 
 const Stack = forwardRef(({
-  direction,
-  gap,
-  reversed,
+  direction = 'vertical',
+  gap = 0,
+  reversed = false,
   children,
   className,
   ...rest
-}, ref) => (
+}: StackProps, ref: ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(
@@ -29,29 +41,4 @@ const Stack = forwardRef(({
   </div>
 ));
 
-Stack.propTypes = {
-  /** Specifies the content of the `Stack`. */
-  children: PropTypes.node.isRequired,
-  /** Specifies direction of the children blocks (column/row). */
-  direction: PropTypes.oneOf(DIRECTION_VARIANTS),
-  /**
-   * Specifies inner space between children blocks.
-   *
-   * Valid values are based on `the spacing classes`:
-   * `0, 0.5, ... 6`.
-   */
-  gap: PropTypes.number,
-  /** Specifies the order of the children. */
-  reversed: PropTypes.bool,
-  /** Specifies an additional `className` to add to the base element. */
-  className: PropTypes.string,
-};
-
-Stack.defaultProps = {
-  direction: 'vertical',
-  gap: 0,
-  className: undefined,
-  reversed: false,
-};
-
 export default Stack;

package/src/Tabs/{Tab.jsx → Tab.tsx}

@@ -1,33 +1,25 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BaseTab from 'react-bootstrap/Tab';
 
-function Tab(props) {
-  return <BaseTab {...props} />;
-}
-
-Tab.propTypes = {
+interface TabProps {
   /** Specifies the `Tab` navigation title. */
-  title: PropTypes.node.isRequired,
+  title: React.ReactNode;
   /** Specifies notification bubble content. It appears on the top right of the `Tab`. */
-  notification: PropTypes.node,
+  notification?: React.ReactNode;
   /** Specifies whether `Tab` is disabled. */
-  disabled: PropTypes.bool,
+  disabled?: boolean;
   /**
    * A unique identifier for the Component, the `eventKey` makes it distinguishable
    * from others in a set. Similar to React's `key` prop, in that it only needs to be
    * unique amongst the Components siblings, not globally.
    */
-  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  eventKey?: string | number;
   /** Specifies class name to append to the base element. */
-  tabClassName: PropTypes.string,
-};
+  tabClassName?: string;
+}
 
-Tab.defaultProps = {
-  notification: undefined,
-  disabled: undefined,
-  eventKey: undefined,
-  tabClassName: undefined,
-};
+function Tab(props: TabProps) {
+  return <BaseTab {...props} />;
+}
 
 export default Tab;

package/src/index.ts

@@ -42,6 +42,7 @@ export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
 export { default as Spinner } from './Spinner';
+export { default as Stack } from './Stack';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
@@ -217,8 +218,6 @@ export { default as CardView } from './DataTable/CardView';
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as Skeleton, SkeletonTheme } from './Skeleton/index';
 // @ts-ignore: has yet to be converted to TypeScript
-export { default as Stack } from './Stack';
-// @ts-ignore: has yet to be converted to TypeScript
 export { default as ToggleButton, ToggleButtonGroup } from './ToggleButton';
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as Sticky } from './Sticky';

package/src/Card/CardBody.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const CardBody = React.forwardRef(({ className, children, ...rest }, ref) => (
-  <div className={classNames('pgn__card-body', className)} ref={ref} {...rest}>
-    {children}
-  </div>
-));
-
-CardBody.propTypes = {
-  /** Specifies the content of the component. */
-  children: PropTypes.node,
-  /** The class to append to the base element. */
-  className: PropTypes.string,
-};
-
-CardBody.defaultProps = {
-  children: undefined,
-  className: undefined,
-};
-
-export default CardBody;

package/src/Card/CardDivider.jsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const CardDivider = React.forwardRef(({ className, ...props }, ref) => (
-  <div className={classNames('pgn__card-divider', className)} ref={ref} {...props} />
-));
-
-CardDivider.propTypes = {
-  /** Specifies class name to append to the base element. */
-  className: PropTypes.string,
-};
-
-CardDivider.defaultProps = {
-  className: undefined,
-};
-
-export default CardDivider;

package/src/Menu/MenuItem.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Icon from '../Icon';
-
-function MenuItem({
-  as,
-  children,
-  defaultSelected,
-  iconAfter,
-  iconBefore,
-  ...props
-}) {
-  const className = classNames(props.className, 'pgn__menu-item');
-
-  return React.createElement(
-    as,
-    {
-      ...props,
-      className,
-    },
-    (
-      <>
-        {iconBefore && <Icon className="btn-icon-before" src={iconBefore} />}
-        <span className="pgn__menu-item-text">{children}</span>
-        <span className="pgn__menu-item-content-spacer" />
-        {iconAfter && <Icon className="btn-icon-after" src={iconAfter} />}
-      </>
-    ),
-  );
-}
-
-MenuItem.propTypes = {
-  /** Specifies that this ``MenuItem`` is selected inside the ``SelectMenu`` */
-  defaultSelected: PropTypes.bool,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /** Specifies the content of the ``MenuItem`` */
-  children: PropTypes.node,
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies the jsx before the content of the ``MenuItem`` */
-  iconBefore: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
-  /** Specifies the jsx after the content of the ``MenuItem`` */
-  iconAfter: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
-};
-
-MenuItem.defaultProps = {
-  defaultSelected: false,
-  as: 'button',
-  className: undefined,
-  children: null,
-  iconBefore: undefined,
-  iconAfter: undefined,
-};
-
-export default MenuItem;