Fix radio context provider missing (#874)

This is a temporary fix for a bug that stems from a paragon component, SelectableBox. So we're using our own copy from fronten-lib-content-components.

package-lock.json

@@ -15,7 +15,7 @@
         "@edx/frontend-component-footer": "^13.0.2",
         "@edx/frontend-component-header": "^5.0.2",
         "@edx/frontend-enterprise-hotjar": "^2.0.0",
-        "@edx/frontend-lib-content-components": "^2.1.0",
+        "@edx/frontend-lib-content-components": "^2.1.1",
         "@edx/frontend-platform": "7.0.1",
         "@edx/openedx-atlas": "^0.6.0",
         "@fortawesome/fontawesome-svg-core": "1.2.36",
@@ -2632,9 +2632,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-content-components": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.1.0.tgz",
-      "integrity": "sha512-KokFOM3qynOXZWPMU6IFxRyMK0AZAtSplvKOYm/azn8kESTGFGufkYHve3gRWWQfg5LYXef8++e3H0A6/y7yjw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-content-components/-/frontend-lib-content-components-2.1.1.tgz",
+      "integrity": "sha512-VCEhFfLkK+o08g7Ts9YgYNb8GHd6d9Mw8lTT1L2OIMsDC2ncFHBUGOfzmoRt+M3cJMb2nAL7Yh4wvNxhgRhhuA==",
       "dependencies": {
         "@codemirror/lang-html": "^6.0.0",
         "@codemirror/lang-xml": "^6.0.0",
@@ -2648,6 +2648,7 @@
         "@reduxjs/toolkit": "^1.8.1",
         "@tinymce/tinymce-react": "^3.14.0",
         "babel-polyfill": "6.26.0",
+        "classnames": "^2.5.1",
         "codemirror": "^6.0.0",
         "fast-xml-parser": "^4.0.10",
         "frontend-components-tinymce-advanced-plugins": "^1.0.3",
@@ -2692,6 +2693,11 @@
         "react": ">=16.8.0"
       }
     },
+    "node_modules/@edx/frontend-lib-content-components/node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/@edx/frontend-lib-content-components/node_modules/react-responsive": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",

package.json

@@ -42,7 +42,7 @@
     "@edx/frontend-component-footer": "^13.0.2",
     "@edx/frontend-component-header": "^5.0.2",
     "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-lib-content-components": "^2.1.0",
+    "@edx/frontend-lib-content-components": "^2.1.1",
     "@edx/frontend-platform": "7.0.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",

src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx

@@ -9,7 +9,7 @@ import {
   ModalDialog,
   useCheckboxSetValues,
 } from '@openedx/paragon';
-import SelectableBox from '../../../../generic/SelectableBox';
+import { SelectableBox } from '@edx/frontend-lib-content-components';
 import messages from './messages';
 import { getCheckedFilters, getFilterOptions, processFilters } from './utils';
 

src/generic/SelectableBox/SelectableBoxSet.jsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { getInputType } from './getInputType';
-
-const INPUT_TYPES = [
-  'radio',
-  'checkbox',
-];
-
-const DEFAULT_COLUMNS_NUMBER = 2;
-
-const SelectableBoxSet = React.forwardRef(({
-  children,
-  name,
-  value,
-  defaultValue,
-  onChange,
-  type,
-  columns,
-  className,
-  ariaLabel,
-  ariaLabelledby,
-  ...props
-}, ref) => {
-  const inputType = getInputType('SelectableBoxSet', type);
-
-  // eslint-disable-next-line no-console
-  console.debug('SelectableBoxSet Props: ', {
-    children,
-    name,
-    value,
-    defaultValue,
-    onChange,
-    type,
-    columns,
-    className,
-    ariaLabel,
-    ariaLabelledby,
-    ...props,
-  });
-
-  return React.createElement(
-    inputType,
-    {
-      name,
-      value,
-      defaultValue,
-      onChange,
-      ref,
-      className: classNames(
-        'pgn__selectable_box-set',
-        `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`,
-        className,
-      ),
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledby,
-      ...props,
-    },
-    children,
-  );
-});
-
-SelectableBoxSet.propTypes = {
-  /** Specifies a name for the group of `SelectableBox`'es. */
-  name: PropTypes.string.isRequired,
-  /** Content of the `SelectableBoxSet`. */
-  children: PropTypes.node,
-  /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */
-  onChange: PropTypes.func,
-  /** Indicates selected `SelectableBox`'es. */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
-  /** Specifies default values for the `SelectableBox`'es. */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Indicates the input type: checkbox or radio. */
-  type: PropTypes.oneOf(INPUT_TYPES),
-  /**
-   * Specifies number of `SelectableBox`'es in a row.
-   *
-   * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`.
-   * Max number of columns: `12`.
-   */
-  columns: PropTypes.number,
-  /** A class that is be appended to the base element. */
-  className: PropTypes.string,
-  /**
-   * The ID of the label for the `SelectableBoxSet`.
-   *
-   * An accessible label must be provided to the `SelectableBoxSet`.
-   */
-  ariaLabelledby: PropTypes.string,
-  /**
-   * A label for the `SelectableBoxSet`.
-   *
-   * If not using `ariaLabelledby`, then `ariaLabel` must be provided */
-  // eslint-disable-next-line react/forbid-prop-types
-  ariaLabel: PropTypes.any, // requiredWhenNot(PropTypes.string, 'ariaLabelledby'),
-};
-
-SelectableBoxSet.defaultProps = {
-  children: undefined,
-  onChange: () => {},
-  value: undefined,
-  defaultValue: undefined,
-  type: 'radio',
-  columns: DEFAULT_COLUMNS_NUMBER,
-  className: undefined,
-  ariaLabelledby: undefined,
-  ariaLabel: undefined,
-};
-
-export default SelectableBoxSet;

src/generic/SelectableBox/getInputType.jsx

@@ -1,26 +0,0 @@
-import {
-  Form, CheckboxControl, RadioControl,
-} from '@openedx/paragon';
-
-// eslint-disable-next-line import/prefer-default-export,consistent-return
-export const getInputType = (component, type) => {
-  if (component === 'SelectableBox') {
-    switch (type) {
-    case 'radio':
-      return RadioControl;
-    case 'checkbox':
-      return CheckboxControl;
-    default:
-      return RadioControl;
-    }
-  } else if (component === 'SelectableBoxSet') {
-    switch (type) {
-    case 'radio':
-      return Form.RadioSet;
-    case 'checkbox':
-      return Form.CheckboxSet;
-    default:
-      return Form.RadioSet;
-    }
-  }
-};

src/generic/SelectableBox/index.jsx

@@ -1,7 +0,0 @@
-import { SelectableBox as ParagonSelectableBox } from '@openedx/paragon';
-import SelectableBoxSet from './SelectableBoxSet';
-
-const SelectableBox = ParagonSelectableBox;
-
-SelectableBox.Set = SelectableBoxSet;
-export default SelectableBox;