[PAR-473] Pass through components from react-responsive and remove custom Responsive components

docs/decisions/0014-removal-of-custom-responsive-components.rst

@@ -0,0 +1,49 @@
+14. Removal of Custom Responsive Components
+-------------------------------------------
+
+Status
+------
+
+Accepted
+
+Context
+_______
+
+Paragon utilizes the `react-responsive <https://www.npmjs.com/package/react-responsive>`_
+NPM package in some components, as well as providing some helper components from
+react-responsive. However, often consumers of Paragon require additional responsive
+functionality than is offered through Paragon itself and as such resort to installing
+react-responsive as a standalone dependency in microfrontends.
+
+If Paragon instead makes react-responsive a passthrough library, consumers of Paragon will
+be able to use react-responsive directly (by importing it from Paragon) rather than needing
+to install it separately. This shouldn’t necessarily have any impact on Paragon’s bundle
+size since react-bootstrap already ships with Paragon; just not all its functionality is
+importable by its consumers.
+
+Decision
+________
+
+We will remove the following components:
+
+- ExtraSmall
+- Small
+- Medium
+- Large
+- ExtraLarge
+- ExtraExtraLarge
+- LargerThanExtraSmall
+
+We will pass through the following components and functionality from react-responsive:
+
+- MediaQuery
+- useMediaQuery
+- Context (as ResponsiveContext)
+
+Consequences
+------------
+
+- Consumers of the current `Responsive` components will need to refactor to the passthrough
+  components from react-responsive.
+- Consumers of Paragon will be able to use components from react-responsive directly, without
+  having to install it separately.

src/Alert/Alert.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import renderer, { act } from 'react-test-renderer';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { breakpoints } from '../Responsive';
+import breakpoints from '../utils/breakpoints';
 import Button from '../Button';
 import Alert from './index';
 import { Info } from '../../icons';

src/Alert/index.jsx

@@ -5,8 +5,8 @@ import BaseAlert from 'react-bootstrap/Alert';
 import divWithClassName from 'react-bootstrap/divWithClassName';
 import { useMediaQuery } from 'react-responsive';
 import { Icon } from '..';
+import breakpoints from '../utils/breakpoints';
 import Button from '../Button';
-import { breakpoints } from '../Responsive';
 import ActionRow from '../ActionRow';
 
 const Alert = React.forwardRef(({

src/Pagination/Pagination.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Context as ResponsiveContext } from 'react-responsive';
-import { breakpoints } from '../Responsive';
+import breakpoints from '../utils/breakpoints';
 import Pagination from './index';
 
 const baseProps = {

src/Pagination/index.jsx

@@ -3,10 +3,11 @@ import { between } from 'airbnb-prop-types';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import MediaQuery from 'react-responsive';
 
 import { Button } from '..';
-import { ExtraSmall, LargerThanExtraSmall } from '../Responsive';
 import Icon from '../Icon';
+import breakpoints from '../utils/breakpoints';
 import newId from '../utils/newId';
 import { ELLIPSIS } from './constants';
 import getPaginationRange from './getPaginationRange';
@@ -286,12 +287,12 @@ class Pagination extends React.Component {
         {this.renderScreenReaderSection()}
         <ul className="pagination">
           {this.renderPreviousButton()}
-          <ExtraSmall>
+          <MediaQuery maxWidth={breakpoints.extraSmall.maxWidth}>
             {this.renderPageOfCountButton()}
-          </ExtraSmall>
-          <LargerThanExtraSmall>
+          </MediaQuery>
+          <MediaQuery minWidth={breakpoints.small.minWidth}>
             {this.renderPageButtons()}
-          </LargerThanExtraSmall>
+          </MediaQuery>
           {this.renderNextButton()}
         </ul>
       </nav>