chore: deprecate react-bootstrap

Adslot · Oct 5, 2021 · 4c03929 · 4c03929
1 parent bece5f9
commit 4c03929
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 292 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -11,7 +11,6 @@ module.exports = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|less|scss)$': 'identity-obj-proxy',
-    '^react-bootstrap(.*)$': '<rootDir>/node_modules/react-bootstrap$1',
   },
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -114,7 +114,6 @@
     "prettier": "^2.3.2",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
-    "react-bootstrap": "^0.31.5",
     "react-datepicker": "github:Adslot/react-datepicker#2a1ebb8618e1996c321331ef01d290424272d126",
     "react-dev-utils": "^12.0.0-next.31",
     "react-docgen": "^5.4.0",

diff --git a/src/components/ConfirmModal/__snapshots__/index.spec.jsx.snap b/src/components/ConfirmModal/__snapshots__/index.spec.jsx.snap
@@ -2,45 +2,53 @@
 
 exports[`<ConfirmModal /> should show modal when \`show\` is true 1`] = `
 <div
-  class="confirm-modal-component fade in modal"
-  data-testid="confirm-modal-wrapper"
-  role="dialog"
-  style="display: block; padding-right: 0px;"
-  tabindex="-1"
+  class="aui--action-panel is-small action-modal confirm-modal-component"
+  data-testid="action-panel-wrapper"
 >
   <div
-    class="modal-sm modal-dialog"
+    class="aui--action-panel-header has-actions"
+    data-testid="action-panel-header"
   >
     <div
-      class="modal-content"
-      role="document"
+      class="title"
+      data-testid="action-panel-title"
+    />
+    <span
+      class="actions"
     >
-      <div
-        class="modal-body"
-        data-testid="confirm-modal-body"
+      <button
+        class="aui--button btn-default close-button"
+        data-test-selector="header-close-button"
+        data-testid="button-wrapper"
+        type="button"
       >
-        <p>
-          Are you sure?
-        </p>
-      </div>
-      <div
-        class="modal-footer"
-        data-testid="confirm-modal-footer"
+        <div
+          class="aui--button-children-container"
+        >
+          Cancel
+        </div>
+      </button>
+      <button
+        class="aui--button btn-primary"
+        data-test-selector="confirm-modal-confirm"
+        data-testid="confirm-modal-confirm"
+        type="button"
       >
-        <button
-          class="aui--button btn-primary"
-          data-test-selector="confirm-modal-confirm"
-          data-testid="confirm-modal-confirm"
-          type="button"
+        <div
+          class="aui--button-children-container"
         >
-          <div
-            class="aui--button-children-container"
-          >
-            Confirm
-          </div>
-        </button>
-      </div>
-    </div>
+          Confirm
+        </div>
+      </button>
+    </span>
+  </div>
+  <div
+    class="aui--action-panel-body"
+    data-testid="action-panel-body"
+  >
+    <p>
+      Are you sure?
+    </p>
   </div>
 </div>
 `;
diff --git a/src/components/ConfirmModal/index.jsx b/src/components/ConfirmModal/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Modal from 'react-bootstrap/lib/Modal';
+import ActionPanel from '../ActionPanel';
 import Button from '../Button';
 
 const ConfirmModalComponent = ({
@@ -22,42 +22,29 @@ const ConfirmModalComponent = ({
   };
 
   return (
-    <Modal
-      data-testid="confirm-modal-wrapper"
-      className="confirm-modal-component"
-      show={show}
-      bsSize="small"
-      keyboard={false}
-    >
-      {modalTitle ? (
-        <Modal.Header data-testid="confirm-modal-header">
-          <Modal.Title data-testid="confirm-modal-title">{modalTitle}</Modal.Title>
-        </Modal.Header>
-      ) : null}
-      <Modal.Body data-testid="confirm-modal-body">
-        <p>{modalDescription}</p>
-      </Modal.Body>
-      <Modal.Footer data-testid="confirm-modal-footer">
-        {modalClose ? (
+    show && (
+      <ActionPanel
+        isModal
+        data-testid="confirm-modal-wrapper"
+        className="confirm-modal-component"
+        size="small"
+        title={modalTitle}
+        onClose={cancelAction}
+        closeIcon={buttonCancelLabel}
+        actionButton={
           <Button
-            data-testid="confirm-modal-cancel"
-            inverse
-            onClick={cancelAction}
-            data-test-selector="confirm-modal-cancel"
+            data-testid="confirm-modal-confirm"
+            theme="primary"
+            onClick={applyAction}
+            data-test-selector="confirm-modal-confirm"
           >
-            {buttonCancelLabel}
+            {buttonConfirmLabel}
           </Button>
-        ) : null}
-        <Button
-          data-testid="confirm-modal-confirm"
-          theme="primary"
-          onClick={applyAction}
-          data-test-selector="confirm-modal-confirm"
-        >
-          {buttonConfirmLabel}
-        </Button>
-      </Modal.Footer>
-    </Modal>
+        }
+      >
+        <p>{modalDescription}</p>
+      </ActionPanel>
+    )
   );
 };
 
@@ -98,6 +85,7 @@ ConfirmModalComponent.defaultProps = {
   modalApply: () => {
     throw new Error('AdslotUi ConfirmModal needs a modalApply handler');
   },
+  modalTitle: '',
   modalDescription: 'Are you sure?',
   show: false,
 };