@openedx/paragon 22.6.1 → 22.8.0

package/src/IconButton/__snapshots__/IconButton.test.tsx.snap

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<IconButton /> <IconButton.IconButtonWithTooltip> renders with required props 1`] = `
+<button
+  aria-label="alternative"
+  className="btn-icon btn-icon-primary btn-icon-md"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  type="button"
+>
+  <span
+    className="btn-icon__icon-container"
+  >
+    <span
+      className="pgn__icon btn-icon__icon"
+    >
+      <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="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </span>
+</button>
+`;
+
+exports[`<IconButton /> renders with deprecated props 1`] = `
+<button
+  aria-label="alternative"
+  className="btn-icon btn-icon-primary btn-icon-md"
+  onClick={[Function]}
+  type="button"
+>
+  <span
+    className="btn-icon__icon-container"
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
+      data-icon="InfoOutlineIcon"
+      data-prefix="pgn"
+      focusable="false"
+      role="img"
+      style={{}}
+      viewBox="0 0 function SvgInfoOutline(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z",
+    fill: "currentColor"
+  }));
+} undefined"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        style={{}}
+      />
+    </svg>
+  </span>
+</button>
+`;
+
+exports[`<IconButton /> renders with required props 1`] = `
+<button
+  aria-label="alternative"
+  className="btn-icon btn-icon-primary btn-icon-md"
+  onClick={[Function]}
+  type="button"
+>
+  <span
+    className="btn-icon__icon-container"
+  >
+    <span
+      className="pgn__icon btn-icon__icon"
+    >
+      <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="M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+  </span>
+</button>
+`;

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

@@ -1,12 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { type Placement } from 'react-bootstrap/Overlay';
+
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
+import Icon from '../Icon';
 
-const IconButton = React.forwardRef(({
+interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+  iconAs?: typeof Icon | typeof FontAwesomeIcon,
+  /** Additional CSS class[es] to apply to this button */
+  className?: string;
+  /** Alt text for your icon. For best practice, avoid using alt text to describe
+   * the image in the `IconButton`. Instead, we recommend describing the function
+   * of the button. */
+  alt: string;
+  /** Changes icon styles for dark background */
+  invertColors?: boolean;
+  /** An icon component to render. Example import of a Paragon icon component:
+   * `import { Check } from '@openedx/paragon/icons';`
+   * */
+  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like "div",
+  // but we only want to allow components like 'Add' (a specific icon component function/class)
+  src?: React.ComponentType;
+  /** Extra class names that will be added to the icon */
+  iconClassNames?: string;
+  /** Click handler for the button */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
+  isActive?: boolean;
+  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */
+  icon?: { prefix?: string; iconName?: string, icon?: any[] },
+  /** Type of button (uses Bootstrap options) */
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';
+  /** size of button to render */
+  size?: 'sm' | 'md' | 'inline';
+  /** no children */
+  children?: never;
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, Props>(({
   className,
   alt,
   invertColors,
@@ -18,6 +52,7 @@ const IconButton = React.forwardRef(({
   variant,
   iconAs,
   isActive,
+  children, // unused, just here because we don't want it to be part of 'attrs'
   ...attrs
 }, ref) => {
   const invert = invertColors ? 'inverse-' : '';
@@ -50,7 +85,7 @@ const IconButton = React.forwardRef(({
       <span className="btn-icon__icon-container">
         <IconComponent
           className={classNames('btn-icon__icon', iconClassNames)}
-          icon={icon}
+          icon={icon as any}
           src={src}
         />
       </span>
@@ -60,7 +95,7 @@ const IconButton = React.forwardRef(({
 
 IconButton.defaultProps = {
   iconAs: undefined,
-  src: null,
+  src: undefined,
   icon: undefined,
   iconClassNames: undefined,
   className: undefined,
@@ -69,6 +104,7 @@ IconButton.defaultProps = {
   size: 'md',
   onClick: () => {},
   isActive: false,
+  children: undefined,
 };
 
 IconButton.propTypes = {
@@ -76,11 +112,11 @@ IconButton.propTypes = {
   className: PropTypes.string,
   /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
    *  but is going to be deprecated soon, please use Paragon's icons instead. */
-  iconAs: PropTypes.elementType,
+  iconAs: PropTypes.elementType as any,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@openedx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/icons';`
    * */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
+  src: PropTypes.elementType as any,
   /** Alt text for your icon. For best practice, avoid using alt text to describe
    * the image in the `IconButton`. Instead, we recommend describing the function
    * of the button. */
@@ -93,7 +129,7 @@ IconButton.propTypes = {
     iconName: PropTypes.string,
     // eslint-disable-next-line react/forbid-prop-types
     icon: PropTypes.array,
-  }),
+  }) as any,
   /** Extra class names that will be added to the icon */
   iconClassNames: PropTypes.string,
   /** Click handler for the button */
@@ -106,38 +142,40 @@ IconButton.propTypes = {
   isActive: PropTypes.bool,
 };
 
+interface PropsWithTooltip extends Props {
+  /** choose from https://popper.js.org/docs/v2/constructors/#options */
+  tooltipPlacement: Placement,
+  /** any content to pass to tooltip content area */
+  tooltipContent: React.ReactNode,
+}
+
 /**
- *
- * @param { object } args Arguments
- * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options
- * @param { React.Component } args.tooltipContent any content to pass to tooltip content area
- * @returns { IconButton } a button wrapped in overlaytrigger
+ * An icon button wrapped in overlaytrigger to display a tooltip.
  */
 function IconButtonWithTooltip({
-  tooltipPlacement, tooltipContent, variant, invertColors, ...props
-}) {
-  const invert = invertColors ? 'inverse-' : '';
+  tooltipPlacement, tooltipContent, ...props
+}: PropsWithTooltip) {
+  const invert = props.invertColors ? 'inverse-' : '';
   return (
     <OverlayTrigger
       placement={tooltipPlacement}
       overlay={(
         <Tooltip
           id={`iconbutton-tooltip-${tooltipPlacement}`}
-          variant={invert ? 'light' : ''}
+          variant={invert ? 'light' : undefined}
         >
           {tooltipContent}
         </Tooltip>
       )}
     >
-      <IconButton variant={variant} invertColors={invertColors} {...props} />
+      <IconButton {...props} />
     </OverlayTrigger>
   );
 }
 
 IconButtonWithTooltip.defaultProps = {
+  ...IconButton.defaultProps,
   tooltipPlacement: 'top',
-  variant: 'primary',
-  invertColors: false,
 };
 
 IconButtonWithTooltip.propTypes = {
@@ -151,7 +189,9 @@ IconButtonWithTooltip.propTypes = {
   invertColors: PropTypes.bool,
 };
 
-IconButton.IconButtonWithTooltip = IconButtonWithTooltip;
+(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;
 
-export default IconButton;
+export default IconButton as typeof IconButton & {
+  IconButtonWithTooltip: typeof IconButtonWithTooltip,
+};
 export { IconButtonWithTooltip };

package/src/Menu/SelectMenu.jsx

@@ -15,6 +15,7 @@ function SelectMenu({
   children,
   className,
   variant,
+  disabled,
   ...props
 }) {
   const [triggerTarget, setTriggerTarget] = useState(null);
@@ -89,6 +90,7 @@ function SelectMenu({
         variant={variant}
         iconAfter={ExpandMore}
         onClick={open}
+        disabled={disabled}
       >
         {selected !== undefined && children[selected] ? children[selected].props.children : defaultMessage}
       </Button>
@@ -131,12 +133,15 @@ SelectMenu.propTypes = {
   className: PropTypes.string,
   /** Specifies variant to use. */
   variant: PropTypes.string,
+  /** Specifies if the `SelectMenu` is disabled. */
+  disabled: PropTypes.bool,
 };
 
 SelectMenu.defaultProps = {
   defaultMessage: SELECT_MENU_DEFAULT_MESSAGE,
   className: undefined,
   variant: 'outline-primary',
+  disabled: false,
 };
 
 const SelectMenuWithDeprecatedProp = withDeprecatedProps(SelectMenu, 'SelectMenu', {

package/src/Menu/SelectMenu.test.jsx

@@ -58,6 +58,12 @@ describe('correct rendering', () => {
     const button = screen.getByRole('button');
     expect(button).toHaveClass('btn-brand');
   });
+
+  it('renders as disabled', () => {
+    render(DefaultSelectMenu({ disabled: true }));
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
 });
 
 describe('mouse behavior & keyboard behavior', () => {

package/src/Menu/select-menu.md

@@ -56,3 +56,11 @@ The ``Modal`` brings focus to the first menu element upon the click of the trigg
   <MenuItem>M. Hortens</MenuItem>
 </SelectMenu>
 ```
+
+## Disabled 
+
+```jsx live
+<SelectMenu disabled>
+  <MenuItem>A Menu Item</MenuItem>
+</SelectMenu>
+```

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

@@ -1,10 +1,14 @@
 import React from 'react';
-import BaseOverlay from 'react-bootstrap/Overlay';
-import BaseOverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import BaseOverlay, { type OverlayProps, type Placement } from 'react-bootstrap/Overlay';
+import BaseOverlayTrigger, { type OverlayTriggerProps, type OverlayTriggerType } from 'react-bootstrap/OverlayTrigger';
 import Fade from 'react-bootstrap/Fade';
 import PropTypes from 'prop-types';
 
-const PLACEMENT_VARIANTS = [
+// Note: The only thing this file adds to the base component is propTypes validation.
+// As more Paragon consumers adopt TypeScript, we could consider removing almost all of this code
+// and just re-export the Overlay and OverlayTrigger components from react-bootstrap unmodified.
+
+const PLACEMENT_VARIANTS: Placement[] = [
   'auto-start',
   'auto',
   'auto-end',
@@ -22,16 +26,16 @@ const PLACEMENT_VARIANTS = [
   'left-start',
 ];
 
-const TRIGGER_VARIANTS = [
+const TRIGGER_VARIANTS: OverlayTriggerType[] = [
   'hover',
   'click',
   'focus',
 ];
 
-function Overlay(props) {
+function Overlay(props: OverlayProps) {
   return <BaseOverlay {...props} />;
 }
-function OverlayTrigger(props) {
+function OverlayTrigger(props: OverlayTriggerProps) {
   return (
     <BaseOverlayTrigger {...props}>
       {props.children}

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

@@ -1,9 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import BaseTooltip from 'react-bootstrap/Tooltip';
+import BaseTooltip, { type TooltipProps as BaseTooltipProps } from 'react-bootstrap/Tooltip';
+import { type Placement } from 'react-bootstrap/Overlay';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
 
-const PLACEMENT_VARIANTS = [
+interface TooltipProps extends BaseTooltipProps {
+  variant?: 'light';
+}
+
+const PLACEMENT_VARIANTS: Placement[] = [
   'auto-start',
   'auto',
   'auto-end',
@@ -21,7 +27,7 @@ const PLACEMENT_VARIANTS = [
   'left-start',
 ];
 
-const Tooltip = React.forwardRef(({
+const Tooltip: ComponentWithAsProp<'div', TooltipProps> = React.forwardRef(({
   children,
   variant,
   ...props

package/src/index.d.ts

@@ -8,8 +8,12 @@ export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container, ContainerSize } from './Container';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
+export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -38,7 +42,6 @@ export const
 export const CheckBox: any; // from './CheckBox';
 export const CheckBoxGroup: any; // from './CheckBoxGroup';
 export const CloseButton: any; // from './CloseButton';
-export const Container: any; // from './Container';
 export const Layout: any, Col: any, Row: any; // from './Layout';
 export const Collapse: any; // from './Collapse';
 export const Collapsible: any; // from './Collapsible';
@@ -73,7 +76,6 @@ export const
   FormAutosuggestOption: any,
   InputGroup: any;
 // from './Form';
-export const IconButton: any, IconButtonWithTooltip: any; // from './IconButton';
 export const IconButtonToggle: any; // from './IconButtonToggle';
 export const Input: any; // from './Input';
 export const InputSelect: any; // from './InputSelect';
@@ -106,7 +108,6 @@ export const
   NavLink: any;
 // from './Nav';
 export const Navbar: any, NavbarBrand: any, NAVBAR_LABEL: string; // from './Navbar';
-export const Overlay: any, OverlayTrigger: any; // from './Overlay';
 export const PageBanner: any, PAGE_BANNER_DISMISS_ALT_TEXT: string; // from './PageBanner';
 export const
   Pagination: any,
@@ -145,7 +146,6 @@ export const
 // from './Tabs';
 export const TextArea: any; // from './TextArea';
 export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
-export const Tooltip: any; // from './Tooltip';
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';
 export const ValidationMessage: any; // from './ValidationMessage';

package/src/index.js

@@ -10,6 +10,9 @@ export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
+export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Tooltip } from './Tooltip';
 
 // // // // // // // // // // // // // // // // // // // // // // // // // // //
 // Things that don't have types
@@ -73,7 +76,6 @@ export {
   FormAutosuggestOption,
   InputGroup,
 } from './Form';
-export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as IconButtonToggle } from './IconButtonToggle';
 export { default as Input } from './Input';
 export { default as InputSelect } from './InputSelect';
@@ -106,7 +108,6 @@ export {
   NavLink,
 } from './Nav';
 export { default as Navbar, NavbarBrand, NAVBAR_LABEL } from './Navbar';
-export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as PageBanner, PAGE_BANNER_DISMISS_ALT_TEXT } from './PageBanner';
 export {
   default as Pagination,
@@ -145,7 +146,6 @@ export {
 } from './Tabs';
 export { default as TextArea } from './TextArea';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
-export { default as Tooltip } from './Tooltip';
 export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';

package/src/Container/index.jsx

@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import RBContainer from 'react-bootstrap/Container';
-import PropTypes from 'prop-types';
-
-const SIZE_CLASS_NAMES = {
-  xs: 'container-mw-xs',
-  sm: 'container-mw-sm',
-  md: 'container-mw-md',
-  lg: 'container-mw-lg',
-  xl: 'container-mw-xl',
-};
-
-const Container = forwardRef(({ size, children, ...props }, ref) => (
-  <RBContainer
-    {...props}
-    ref={ref}
-    className={classNames(
-      props.className,
-      SIZE_CLASS_NAMES[size],
-    )}
-  >
-    {children}
-  </RBContainer>
-));
-
-Container.propTypes = {
-  ...RBContainer.propTypes,
-  /** Override the base element */
-  as: PropTypes.elementType,
-  /** Specifies the contents of the container */
-  children: PropTypes.node,
-  /** Fill all available space at any breakpoint */
-  fluid: PropTypes.bool,
-  /** Set the maximum width for the container */
-  size: PropTypes.oneOf(Object.keys(SIZE_CLASS_NAMES)),
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string,
-};
-
-Container.defaultProps = {
-  as: 'div',
-  children: undefined,
-  fluid: true,
-  size: undefined,
-  bsPrefix: 'container',
-};
-
-export default Container;

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

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<IconButton /> renders with required props 1`] = `
-<button
-  aria-label="alternative"
-  className="btn-icon btn-icon-primary btn-icon-md"
-  onClick={[Function]}
-  type="button"
->
-  <span
-    className="btn-icon__icon-container"
-  >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
-      data-icon="InfoOutlineIcon"
-      data-prefix="pgn"
-      focusable="false"
-      role="img"
-      src={null}
-      style={{}}
-      viewBox="0 0 function SvgInfoOutline(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z",
-    fill: "currentColor"
-  }));
-} undefined"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill="currentColor"
-        style={{}}
-      />
-    </svg>
-  </span>
-</button>
-`;