chore: move react-intl to peer dependencies and fix direction switcher

package.json

@@ -55,7 +55,6 @@
     "prop-types": "^15.8.1",
     "react-bootstrap": "^1.6.4",
     "react-focus-on": "^3.5.4",
-    "react-intl": "^5.25.0",
     "react-popper": "^2.2.5",
     "react-proptype-conditional-require": "^1.0.4",
     "react-responsive": "^8.2.0",
@@ -66,7 +65,8 @@
   },
   "peerDependencies": {
     "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0"
+    "react-dom": "^16.8.6 || ^17.0.0",
+    "react-intl": "^5.25.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",

src/Alert/index.jsx

@@ -70,7 +70,7 @@ const Alert = React.forwardRef(({
                 {closeLabel || (
                   <FormattedMessage
                     id="pgn.Alert.closeLabel"
-                    defaultMessage={ALERT_CLOSE_LABEL_TEXT}
+                    defaultMessage="Dismiss"
                     description="Label of a close button on Alert component"
                   />
                 )}

src/DataTable/ExpandAll.jsx

@@ -10,15 +10,15 @@ const ExpandAll = ({ getToggleAllRowsExpandedProps, isAllRowsExpanded }) => (
         <FormattedMessage
           id="pgn.DataTable.ExpandAll.collapseAllLabel"
           defaultMessage="Collapse all"
-          description="Title of the filters components"
+          description="Label of an action button that collapses all expandable rows of DataTable."
         />
       </Button>
     ) : (
       <Button variant="link" size="inline">
         <FormattedMessage
           id="pgn.DataTable.ExpandAll.expandAllLabel"
           defaultMessage="Expand all"
-          description="Title of the filters components"
+          description="Label of an action button that expands all expandable rows of DataTable."
         />
       </Button>
     )}

src/DataTable/selection/BaseSelectionStatus.jsx

@@ -51,7 +51,7 @@ const BaseSelectionStatus = ({
             <FormattedMessage
               id="pgn.DataTable.BaseSelectionStatus.selectAllText"
               defaultMessage="Select all {itemCount}"
-              description="Clear selection button label"
+              description="A label for select all button."
               values={{ itemCount }}
             />
           )}
@@ -68,7 +68,7 @@ const BaseSelectionStatus = ({
             <FormattedMessage
               id="pgn.DataTable.BaseSelectionStatus.clearSelectionText"
               defaultMessage="Clear selection"
-              description="Clear selection button label"
+              description="A label of clear all selection button."
             />
           )}
         </Button>

src/DataTable/tests/FilterStatus.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { IntlProvider } from 'react-intl';
 
 import FilterStatus from '../FilterStatus';
 import { Button } from '../..';
@@ -25,7 +26,11 @@ const filterPropsNoFiltered = {
 
 // eslint-disable-next-line react/prop-types
 const FilterStatusWrapper = ({ value, props }) => (
-  <DataTableContext.Provider value={value}><FilterStatus {...props} /></DataTableContext.Provider>
+  <IntlProvider locale="en" messages={{}}>
+    <DataTableContext.Provider value={value}>
+      <FilterStatus {...props} />
+    </DataTableContext.Provider>
+  </IntlProvider>
 );
 
 describe('<FilterStatus />', () => {

www/gatsby-node.js

@@ -28,7 +28,7 @@ exports.onCreateWebpackConfig = ({ actions }) => {
         // in ./node_modules
         react: path.resolve(__dirname, 'node_modules/react/'),
         'react-dom': path.resolve(__dirname, 'node_modules/react-dom/'),
-        'react-intl': path.resolve(__dirname, '../node_modules/react-intl/'),
+        'react-intl': path.resolve(__dirname, 'node_modules/react-intl/'),
       },
     },
   })