@openedx/paragon 23.14.8 → 23.14.9

package/src/DataTable/tablecontrolbar.mdx

@@ -73,22 +73,22 @@ It always shows the `SmartStatus` component. If applicable, it displays the `Dro
       Filter: CheckboxFilter,
       filter: 'includesValue',
       filterChoices: [{
-        name: 'russian white',
+        name: 'Russian white',
         number: 1,
         value: 'russian white',
       },
       {
-        name: 'orange tabby',
+        name: 'Orange Tabby',
         number: 2,
         value: 'orange tabby',
       },
       {
-        name: 'brown tabby',
+        name: 'Brown Tabby',
         number: 3,
         value: 'brown tabby',
       },
       {
-        name: 'siamese',
+        name: 'Siamese',
         number: 1,
         value: 'siamese',
       }]

package/src/DataTable/tablefilters.mdx

@@ -104,22 +104,22 @@ all filters will be rendered in the dropdown.
       Filter: CheckboxFilter,
       filter: 'includesValue',
       filterChoices: [{
-        name: 'russian white',
+        name: 'Russian white',
         number: 1,
         value: 'russian white',
       },
       {
-        name: 'orange tabby',
+        name: 'Orange Tabby',
         number: 2,
         value: 'orange tabby',
       },
       {
-        name: 'brown tabby',
+        name: 'Brown Tabby',
         number: 3,
         value: 'brown tabby',
       },
       {
-        name: 'siamese',
+        name: 'Siamese',
         number: 1,
         value: 'siamese',
       }]
@@ -227,22 +227,22 @@ all filters will be rendered in the dropdown.
       Filter: CheckboxFilter,
       filter: 'includesValue',
       filterChoices: [{
-        name: 'russian white',
+        name: 'Russian white',
         number: 1,
         value: 'russian white',
       },
       {
-        name: 'orange tabby',
+        name: 'Orange Tabby',
         number: 2,
         value: 'orange tabby',
       },
       {
-        name: 'brown tabby',
+        name: 'Brown Tabby',
         number: 3,
         value: 'brown tabby',
       },
       {
-        name: 'siamese',
+        name: 'Siamese',
         number: 1,
         value: 'siamese',
       }]

package/src/DataTable/tests/DataTable.test.jsx

@@ -14,13 +14,11 @@ const additionalColumns = [
   {
     id: 'action',
     Header: 'Action',
-    // eslint-disable-next-line react/prop-types
     Cell: () => <div>extra content</div>,
   },
   {
     id: 'action2',
     Header: 'More',
-    // eslint-disable-next-line react/prop-types
     Cell: () => <div>extra content</div>,
   },
 ];
@@ -227,8 +225,12 @@ describe('<DataTable />', () => {
     [{ manualFilters: true, pageCount: 1 }, { manualFilters: true, manualPagination: false, manualSortBy: false }],
     [{ manualPagination: true, pageCount: 1 }, { manualFilters: false, manualPagination: true, manualSortBy: false }],
     [{ manualSortBy: true, pageCount: 1 }, { manualFilters: false, manualPagination: false, manualSortBy: true }],
-    // eslint-disable-next-line max-len, object-curly-newline
-    [{ manualSortBy: true, manualFilters: true, manualPagination: true, pageCount: 1 }, { manualFilters: true, manualPagination: true, manualSortBy: true }],
+    [
+      {
+        manualSortBy: true, manualFilters: true, manualPagination: true, pageCount: 1,
+      },
+      { manualFilters: true, manualPagination: true, manualSortBy: true },
+    ],
   ])('calls useTable with the correct manual settings %#', (additionalProps, expected) => {
     const spy = jest.spyOn(reactTable, 'useTable');
     render(<DataTableWrapper {...props} {...additionalProps} />);

package/src/DataTable/tests/TableHeaderCell.test.jsx

@@ -14,7 +14,6 @@ const props = {
   headerClassName: 'align-me',
 };
 
-// eslint-disable-next-line react/prop-types
 function FakeTable({ ...rest }) {
   return <table><thead><tr><TableHeaderCell {...rest} /></tr></thead></table>;
 }

package/src/DataTable/utils/tests/getTableArgs.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable object-curly-newline */
 import {
   useSortBy, useFilters, useRowSelect, usePagination, useExpanded,
 } from 'react-table';
@@ -19,7 +18,9 @@ describe('getTableArgs', () => {
     [{ tableOptions, isFilterable: true, isSelectable: true }, [tableOptions, useFilters, useRowSelect]],
     [{ tableOptions, isFilterable: true, isExpandable: true }, [tableOptions, useFilters, useExpanded]],
     [
-      { tableOptions, isFilterable: true, isSelectable: true, isSortable: true, isPaginated: true, isExpandable: true },
+      {
+        tableOptions, isFilterable: true, isSelectable: true, isSortable: true, isPaginated: true, isExpandable: true,
+      },
       [tableOptions, useFilters, useSortBy, useExpanded, usePagination, useRowSelect],
     ],
     [

package/src/DataTable/utils/tests/getVisibleColumns.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable object-curly-newline */
-
 import getVisibleColumns, { selectColumn } from '../getVisibleColumns';
 
 describe('getVisibleColums', () => {

package/src/Dropdown/index.jsx

@@ -9,15 +9,14 @@ import Button from '../Button';
 import IconButton from '../IconButton';
 
 const Dropdown = React.forwardRef(
-  // eslint-disable-next-line prefer-arrow-callback
-  function Dropdown({
+  ({
     show,
     autoClose,
     onToggle,
     variant,
     className,
     ...rest
-  }, ref) {
+  }, ref) => {
     const [internalShow, setInternalShow] = React.useState(show);
     const isClosingPermitted = (source) => {
       // autoClose=false only permits close on button click
@@ -89,12 +88,11 @@ Dropdown.defaultProps = {
 };
 
 const DropdownToggle = React.forwardRef(
-  // eslint-disable-next-line prefer-arrow-callback
-  function DropdownToggle({
+  ({
     as,
     bsPrefix,
     ...otherProps
-  }, ref) {
+  }, ref) => {
     // hide arrow from the toggle if it is rendered as IconButton
     // because it hinders the positioning of IconButton
     const prefix = as === IconButton ? 'pgn__dropdown-toggle-iconbutton' : bsPrefix;
@@ -117,16 +115,13 @@ DropdownToggle.defaultProps = {
 };
 
 Dropdown.Item = React.forwardRef(
-  // eslint-disable-next-line prefer-arrow-callback
-  function DropdownItem({ className, ...otherProps }, ref) {
-    return (
-      <BaseDropdownItem
-        className={classNames(className, 'pgn__dropdown-item')}
-        ref={ref}
-        {...otherProps}
-      />
-    );
-  },
+  ({ className, ...otherProps }, ref) => (
+    <BaseDropdownItem
+      className={classNames(className, 'pgn__dropdown-item')}
+      ref={ref}
+      {...otherProps}
+    />
+  ),
 );
 
 Dropdown.Item.propTypes = {

package/src/Form/tests/useCheckboxSetValues.test.jsx

@@ -1,8 +1,8 @@
-/* eslint-disable react/button-has-type */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import Button from '../../Button';
 import useCheckboxSetValues from '../useCheckboxSetValues';
 
 const VALUES = 'values';
@@ -14,10 +14,18 @@ function Example() {
   return (
     <>
       <span data-testid={VALUES}>{values.join(' ')}</span>
-      <button data-testid="add" onClick={() => add('provolone')}>Add</button>
-      <button data-testid="remove" onClick={() => remove('provolone')}>Remove</button>
-      <button data-testid="set" onClick={() => set(['cheddar', 'swiss', 'provolone'])}>Set</button>
-      <button data-testid="clear" onClick={() => clear()}>Clear</button>
+      <Button onClick={() => add('provolone')}>
+        Add
+      </Button>
+      <Button onClick={() => remove('provolone')}>
+        Remove
+      </Button>
+      <Button onClick={() => set(['cheddar', 'swiss', 'provolone'])}>
+        Set
+      </Button>
+      <Button onClick={() => clear()}>
+        Clear
+      </Button>
     </>
   );
 }
@@ -31,7 +39,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can append a value', async () => {
     render(<Example />);
-    const addButton = screen.getByTestId('add');
+    const addButton = screen.getByRole('button', { name: 'Add' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(addButton);
@@ -41,7 +49,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can remove a value', async () => {
     render(<Example />);
-    const removeButton = screen.getByTestId('remove');
+    const removeButton = screen.getByRole('button', { name: 'Remove' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(removeButton);
@@ -51,7 +59,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can replace all values', async () => {
     render(<Example />);
-    const setButton = screen.getByTestId('set');
+    const setButton = screen.getByRole('button', { name: 'Set' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(setButton);
@@ -61,7 +69,7 @@ describe('useCheckboxSetValues', () => {
 
   it('can clear all values', async () => {
     render(<Example />);
-    const clearButton = screen.getByTestId('clear');
+    const clearButton = screen.getByRole('button', { name: 'Clear' });
     const values = screen.getByTestId(VALUES);
 
     await userEvent.click(clearButton);

package/src/Modal/ModalDialogHeader.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -37,4 +36,9 @@ ModalDialogHeader.propTypes = {
   className: PropTypes.string,
 };
 
+ModalDialogHeader.defaultProps = {
+  as: 'div',
+  className: '',
+};
+
 export default ModalDialogHeader;

package/src/Modal/ModalLayer.tsx

@@ -4,15 +4,14 @@ import { FocusOn } from 'react-focus-on';
 import Portal from './Portal';
 import { ModalContextProvider } from './ModalContext';
 
-// istanbul ignore next
 function ModalBackdrop({ onClick }: { onClick?: () => void }) {
   return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     <div
       className="pgn__modal-backdrop"
       onClick={onClick}
       onKeyDown={onClick}
       data-testid="modal-backdrop"
+      role="presentation"
     />
   );
 }

package/src/Modal/tests/ModalLayer.test.tsx

@@ -5,7 +5,6 @@ import userEvent from '@testing-library/user-event';
 
 import ModalLayer from '../ModalLayer';
 
-/* eslint-disable react/prop-types */
 jest.mock('../Portal', () => function PortalMock(props: any) {
   const { children, ...otherProps } = props;
   return (
@@ -66,7 +65,7 @@ describe('<ModalLayer />', () => {
     });
   });
 
-  test('when isOpen is false the dialog is not rendered', () => {
+  it('when isOpen is false the dialog is not rendered', () => {
     render(
       <ModalLayer isOpen={false} onClose={jest.fn()}>
         <Dialog />

package/src/OverflowScroll/data/constants.js

@@ -1,3 +1 @@
-/* eslint-disable import/prefer-default-export */
-
 export const OVERFLOW_SCROLL_ITEM_CLASS = 'pgn__overflow-scroll-item';

package/src/ProductTour/index.jsx

@@ -111,16 +111,14 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     }
     setCurrentCheckpointData(null);
   };
-  /* eslint-disable */
   /**
    * Takes the final checkpoint array index value and looks for an existing onEnd callback.
-   * 
-   * If an onEnd callback exist on checkpointIndex value and it is the final checkpoint 
-   * in the array, the onEnd callback will be called for the parent, and individual onEnd object. 
-   * 
-   * @param {Integer} checkpointIndex 
+   *
+   * If an onEnd callback exist on checkpointIndex value and it is the final checkpoint
+   * in the array, the onEnd callback will be called for the parent, and individual onEnd object.
+   *
+   * @param {Integer} checkpointIndex
    */
-  /* eslint-enable */
   const handleEnd = (checkpointIndex) => {
     setIndex(0);
     setIsTourEnabled(false);

package/src/ProgressBar/utils.js

@@ -25,7 +25,6 @@ export const placeInfoAtZero = (
       horizontalMargin += annotationOnly ? 0.0 : elementParams.width;
     }
   }
-  // eslint-disable-next-line no-param-reassign
   ref.current.style[direction === 'rtl' ? 'marginRight' : 'marginLeft'] = `${-horizontalMargin}px`;
   return true;
 };

package/src/SelectableBox/tests/SelectableBox.test.jsx

@@ -38,7 +38,6 @@ describe('<SelectableBox />', () => {
     it('renders with radio input type if neither checkbox nor radio is passed', () => {
       // Mock the `console.error` is intentional because an invalid `type` prop
       // with `wrongType` specified for `ForwardRef` expects one of the ['radio','flag'] parameters.
-      // eslint-disable-next-line no-console
       const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       render(<SelectableRadio type="wrongType" />);
       const selectableBox = screen.getByRole('button');

package/src/SelectableBox/utils.js

@@ -1,6 +1,5 @@
 import Form, { CheckboxControl, RadioControl } from '../Form';
 
-// eslint-disable-next-line import/prefer-default-export,consistent-return
 export const getInputType = (component, type) => {
   if (component === 'SelectableBox') {
     switch (type) {
@@ -21,4 +20,5 @@ export const getInputType = (component, type) => {
         return Form.RadioSet;
     }
   }
+  return null;
 };

package/src/Sticky/index.jsx

@@ -18,7 +18,6 @@ const Sticky = React.forwardRef(({
   const defaultRef = React.useRef();
   const resolvedRef = ref || defaultRef;
 
-  // eslint-disable-next-line consistent-return
   useLayoutEffect(() => {
     if (resolvedRef.current) {
       const stickyElement = resolvedRef.current;
@@ -45,6 +44,7 @@ const Sticky = React.forwardRef(({
         observer.unobserve(stickyElement);
       };
     }
+    return undefined;
   }, [position, resolvedRef]);
 
   return (

package/src/TransitionReplace/README.md

@@ -37,7 +37,7 @@ TransitionReplace expects only one child at any time. Swap content inside the co
           </div>
         )}
       </TransitionReplace>
-      <Button variant="primary" onClick={() => setIsEditing(!isEditing)}>
+      <Button onClick={() => setIsEditing(!isEditing)}>
         Toggle
       </Button>
     </div>
@@ -112,7 +112,7 @@ function DemoTransitionReplace() {
 
   return (
     <div>
-      <Button variant="primary" className="mb-2" onClick={changeContent}>
+      <Button className="mb-2" onClick={changeContent}>
         Next Quote
       </Button>
       <div

package/src/TransitionReplace/TransitionReplace.test.jsx

@@ -1,9 +1,9 @@
-/* eslint-disable no-plusplus, react/prop-types */
 import React from 'react';
 import { render } from '@testing-library/react';
 
 import TransitionReplace from '.';
 
+/* eslint-disable-next-line react/prop-types */
 function TestReplacement({ showContentA, ...props }) {
   return (
     <TransitionReplace {...props}>

package/src/asInput/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -84,7 +83,6 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
       };
     }
 
-    /* eslint-disable react/no-did-update-set-state */
     componentDidUpdate(prevProps) {
       const updatedState = {};
       if (this.props.value !== prevProps.value) {
@@ -135,7 +133,6 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
 
     getLabel() {
       return (
-        // eslint-disable-next-line jsx-a11y/label-has-for
         <label
           id={`label-${this.state.id}`}
           htmlFor={this.state.id}

package/src/hooks/tests/useToggle.test.tsx

@@ -1,8 +1,8 @@
-/* eslint-disable react/button-has-type */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+import Button from '../../Button';
 import { useToggle } from '../..';
 import { ToggleHandlers } from '../useToggleHook';
 
@@ -19,16 +19,15 @@ const resetHandlerMocks = () => {
   mockHandleToggle.mockReset();
 };
 
-// eslint-disable-next-line react/prop-types
 function FakeComponent({ defaultIsOn, handlers }: { defaultIsOn: boolean, handlers: ToggleHandlers }) {
   const [isOn, setOn, setOff, toggle] = useToggle(defaultIsOn, handlers);
 
   return (
     <div>
       <div data-testid="toggle-value">{isOn ? TOGGLE_IS_ON : TOGGLE_IS_OFF}</div>
-      <button id="set-on" onClick={setOn}>set on</button>
-      <button id="set-off" onClick={setOff}>set off</button>
-      <button id="toggle" onClick={toggle}>toggle</button>
+      <Button onClick={setOn}>set on</Button>
+      <Button onClick={setOff}>set off</Button>
+      <Button onClick={toggle}>toggle</Button>
     </div>
   );
 }

package/src/setupTest.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import 'regenerator-runtime/runtime';
 
 import '@testing-library/jest-dom';

package/src/utils/index.ts

@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as newId } from './newId';