Merge pull request binary-com#13 from farhan-nurzi-deriv/P2PS-755/ref…

…actor-toggle-container-component FarhanNurzi/P2PS-755/Refactor toggle container component
ameerul-deriv · May 30, 2023 · b5f7c37 · b5f7c37
2 parents 55f3385 + 2af57dc
commit b5f7c37
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 15 deletions.
diff --git a/...ntainer/__test__/toggle-container.spec.js → ...ainer/__tests__/toggle-container.spec.tsx b/...ntainer/__test__/toggle-container.spec.js → ...ainer/__tests__/toggle-container.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import ToggleContainer from '../toggle-container.jsx';
+import ToggleContainer from '../toggle-container';
 
 describe('<ToggleContainer/>', () => {
     it('should act as a wrapper for the child component', () => {
@@ -10,6 +10,7 @@ describe('<ToggleContainer/>', () => {
             </ToggleContainer>
         );
 
+        expect(screen.getByTestId('dt_toggle_container')).toHaveClass('toggle-container');
         expect(screen.getByText('Child component')).toBeInTheDocument();
     });
 });
diff --git a/packages/p2p/src/components/toggle-container/index.ts b/packages/p2p/src/components/toggle-container/index.ts
@@ -0,0 +1,4 @@
+import ToggleContainer from './toggle-container';
+import './toggle-container.scss';
+
+export default ToggleContainer;
diff --git a/packages/p2p/src/components/toggle-container/toggle-container.jsx b/packages/p2p/src/components/toggle-container/toggle-container.jsx
diff --git a/packages/p2p/src/components/toggle-container/toggle-container.tsx b/packages/p2p/src/components/toggle-container/toggle-container.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ToggleContainer = ({ children }: React.PropsWithChildren<unknown>) => (
+    <div className='toggle-container' data-testid='dt_toggle_container'>
+        {children}
+    </div>
+);
+
+export default ToggleContainer;
diff --git a/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx b/packages/p2p/src/pages/buy-sell/buy-sell-header.jsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite';
 import classNames from 'classnames';
 import { buy_sell } from 'Constants/buy-sell';
 import { localize } from 'Components/i18next';
-import ToggleContainer from 'Components/toggle-container/toggle-container';
+import ToggleContainer from 'Components/toggle-container';
 import SortDropdown from 'Pages/buy-sell/sort-dropdown';
 import { useStores } from 'Stores';
 import CurrencyDropdown from 'Pages/buy-sell/currency-dropdown.jsx';

diff --git a/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx b/packages/p2p/src/pages/my-profile/my-profile-header/my-profile-header.jsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react-lite';
 import { ButtonToggle } from '@deriv/components';
-import ToggleContainer from 'Components/toggle-container/toggle-container';
+import ToggleContainer from 'Components/toggle-container';
 import { localize } from 'Components/i18next';
 import { my_profile_tabs } from 'Constants/my-profile-tabs';
 import { useStores } from 'Stores';

diff --git a/packages/p2p/src/pages/orders/order-table/order-table.jsx b/packages/p2p/src/pages/orders/order-table/order-table.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ButtonToggle } from '@deriv/components';
 import { observer } from 'mobx-react-lite';
 import { localize } from 'Components/i18next';
-import ToggleContainer from 'Components/toggle-container/toggle-container';
+import ToggleContainer from 'Components/toggle-container';
 import { order_list } from 'Constants/order-list';
 import { useStores } from 'Stores';
 import OrderTableContent from './order-table-content.jsx';