refactor: bottom navigation in dtraderV2 with component from quill (d…

…eriv-com#16638)

* refactor: refactored bottom navigation in dtraderV2 with component from quill

* refactor: removed comment and added variable in botton-nav scss file

* fix: remove bottom-nav background color

packages/account/package.json

@@ -35,7 +35,7 @@
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.29.10",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "1.13.42",
+        "@deriv-com/quill-ui": "1.15.0",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
         "@deriv/integration": "1.0.0",

packages/core/package.json

@@ -98,7 +98,7 @@
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.12.1",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.13.42",
+        "@deriv-com/quill-ui": "1.15.0",
         "@deriv-com/translations": "1.3.5",
         "@deriv-com/ui": "1.29.10",
         "@deriv-com/utils": "^0.0.25",

packages/trader/package.json

@@ -90,7 +90,7 @@
     "dependencies": {
         "@deriv-com/analytics": "1.12.1",
         "@deriv-com/quill-tokens": "^2.0.4",
-        "@deriv-com/quill-ui": "1.13.42",
+        "@deriv-com/quill-ui": "1.15.0",
         "@deriv-com/utils": "^0.0.25",
         "@deriv-com/ui": "1.29.10",
         "@deriv/api-types": "1.0.172",

packages/trader/src/AppV2/Components/BottomNav/__tests__/bottom-nav.spec.tsx

@@ -5,27 +5,20 @@ import { StoreProvider, mockStore } from '@deriv/stores';
 import BottomNav from '../bottom-nav';
 import { BrowserRouter } from 'react-router-dom';
 
-jest.mock('../bottom-nav-item', () => {
-    return jest.fn(({ index, setSelectedIndex }) => (
-        <button onClick={() => setSelectedIndex(index)}>MockedBottomNavItem</button>
-    ));
-});
-
 jest.mock('@deriv-com/quill-ui', () => ({
+    ...jest.requireActual('@deriv-com/quill-ui'),
     Badge: jest.fn(() => {
         return 'MockedBadge';
     }),
 }));
 describe('BottomNav', () => {
     const mockedTradeContainer = <div>MockedTrade</div>;
-    const mockedMarketsContainer = <div>MockedMarkets</div>;
     const mockedPositionsContainer = <div>MockedPositions</div>;
     const renderedBottomNav = (
         <StoreProvider store={mockStore({})}>
             <BrowserRouter>
                 <BottomNav>
                     <div>{mockedTradeContainer}</div>
-                    <div>{mockedMarketsContainer}</div>
                     <div>{mockedPositionsContainer}</div>
                 </BottomNav>
             </BrowserRouter>
@@ -37,15 +30,16 @@ describe('BottomNav', () => {
     });
     it('should render the correct number of BottomNavItem components', () => {
         render(renderedBottomNav);
-        expect(screen.getAllByText(/MockedBottomNavItem/i)).toHaveLength(2);
+        expect(screen.getByText('Positions')).toBeInTheDocument();
+        expect(screen.getByText('Trade')).toBeInTheDocument();
     });
     it('should render MockedTrade by default since selected index is 0', () => {
         render(renderedBottomNav);
         expect(screen.getByText('MockedTrade')).toBeInTheDocument();
     });
     it('should render MockedPositions if 2nd MockedBottomNavItem is selected', () => {
         render(renderedBottomNav);
-        userEvent.click(screen.getAllByText('MockedBottomNavItem')[1]);
+        userEvent.click(screen.getByText('Positions'));
         expect(screen.getByText('MockedPositions')).toBeInTheDocument();
     });
 });

packages/trader/src/AppV2/Components/BottomNav/bottom-nav.scss

@@ -1,17 +1,14 @@
+$BOTTOM_NAV_HEIGHT: var(--core-spacing-2800);
+
 .bottom-nav {
     display: flex;
     flex-direction: column;
     height: 100%;
-
     &-container {
-        display: flex;
-        padding: var(--core-spacing-200) var(--core-spacing-400);
-        align-items: flex-start;
-        gap: var(--core-spacing-500);
+        padding: var(--core-spacing-200);
         width: 100%;
-        height: var(--core-size-2800);
-        border-top: 1px solid var(--core-color-opacity-black-100); // waiting on quill tokens in deriv-app
-        background-color: var(--core-color-solid-slate-50);
+        border-top: 1px solid var(--core-color-opacity-black-100);
+        height: $BOTTOM_NAV_HEIGHT;
     }
     &-selection {
         flex: 1;
@@ -20,36 +17,17 @@
         scrollbar-width: none;
     }
     &-item {
-        all: unset;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        flex: 1 0 0;
-        height: var(--core-size-2400);
-
+        font-size: var(--core-fontSize-50);
+        &__position-badge {
+            z-index: 1;
+        }
         &--active {
-            .bottom-nav-item-label {
+            .quill-navigation-bottom-bar__action-label {
                 color: var(--core-color-opacity-coral-600);
             }
-            svg,
-            svg path {
-                fill: var(--core-color-opacity-coral-600);
-            }
-        }
-        &__label {
-            font-size: var(--core-fontSize-50);
-            line-height: var(--core-lineHeight-100);
-        }
-        &__icon {
-            width: var(--core-size-1200);
-            height: var(--core-size-1200);
-            display: flex;
-            align-items: center;
-            justify-content: center;
 
-            .badge__base {
-                z-index: 1;
+            svg {
+                fill: var(--core-color-opacity-coral-600);
             }
         }
     }

packages/trader/src/AppV2/Components/BottomNav/bottom-nav.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import classNames from 'classnames';
+import clsx from 'clsx';
 import { observer } from 'mobx-react';
 import { Localize } from '@deriv/translations';
 import { routes } from '@deriv/shared';
 import { StandaloneChartCandlestickRegularIcon, StandaloneClockThreeRegularIcon } from '@deriv/quill-icons';
-import { Badge } from '@deriv-com/quill-ui';
+import { Badge, Navigation } from '@deriv-com/quill-ui';
 import { useStore } from '@deriv/stores';
-import BottomNavItem from './bottom-nav-item';
 import { useHistory, useLocation } from 'react-router';
 
 type BottomNavProps = {
@@ -41,6 +41,7 @@ const BottomNav = observer(({ children, className, onScroll }: BottomNavProps) =
                         color='danger'
                         size='sm'
                         contentSize='sm'
+                        className='bottom-nav-item__position-badge'
                     >
                         <StandaloneClockThreeRegularIcon
                             iconSize='sm'
@@ -69,18 +70,20 @@ const BottomNav = observer(({ children, className, onScroll }: BottomNavProps) =
             <div className='bottom-nav-selection' onScroll={onScroll}>
                 {children}
             </div>
-            <div className='bottom-nav-container'>
+            <Navigation.Bottom className='bottom-nav-container' onChange={(_, index) => handleSelect(index)}>
                 {bottomNavItems.map((item, index) => (
-                    <BottomNavItem
+                    <Navigation.BottomAction
                         key={index}
                         index={index}
+                        activeIcon={item.icon}
                         icon={item.icon}
-                        selectedIndex={selectedIndex}
                         label={item.label}
-                        setSelectedIndex={handleSelect}
+                        selected={index === selectedIndex}
+                        showLabel
+                        className={clsx('bottom-nav-item', index === selectedIndex && 'bottom-nav-item--active')}
                     />
                 ))}
-            </div>
+            </Navigation.Bottom>
         </div>
     );
 });