misc(NavigationTab) update the API to allow leftSpacing object (#1726)

* misc(NavigationTab) update the API to allow leftSpacing object * misc: update NavigationTab invocations to use new API
getlago · Sep 10, 2024 · d360fc8 · d360fc8
1 parent d14648c
commit d360fc8
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 22 deletions.
diff --git a/src/components/designSystem/NavigationTab.tsx b/src/components/designSystem/NavigationTab.tsx
@@ -3,13 +3,16 @@ import { ReactNode, useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 
+import { ResponsiveStyleValue, setResponsiveProperty } from '~/core/utils/responsiveProps'
 import { theme } from '~/styles'
 
 import { Icon, IconName } from './Icon'
 import { Skeleton } from './Skeleton'
 
+type LeftSpacing = 0 | 16 | 48
+
 type NavigationTabProps = {
-  leftPadding?: boolean
+  leftSpacing?: ResponsiveStyleValue<LeftSpacing>
   loading?: boolean
   name?: string
   tabs: {
@@ -53,7 +56,7 @@ const a11yProps = (index: number) => {
 }
 
 export const NavigationTab = ({
-  leftPadding = false,
+  leftSpacing = 16,
   loading,
   name = 'Navigation tab',
   tabs,
@@ -97,7 +100,7 @@ export const NavigationTab = ({
           aria-label={name}
           onChange={handleChange}
           value={value}
-          $leftPadding={leftPadding}
+          $leftSpacing={leftSpacing}
           $nonHiddenTabsLength={nonHiddenTabs.length}
         >
           {nonHiddenTabs.length >= 2
@@ -152,21 +155,19 @@ const TabsWrapper = styled.div`
   box-shadow: ${theme.shadows[7]};
 `
 
-const LocalTabs = styled(Tabs)<{ $leftPadding: boolean; $nonHiddenTabsLength: number }>`
+const LocalTabs = styled(Tabs)<{
+  $leftSpacing: ResponsiveStyleValue<LeftSpacing>
+  $nonHiddenTabsLength: number
+}>`
   align-items: center;
   overflow: visible;
   min-height: ${({ $nonHiddenTabsLength }) => ($nonHiddenTabsLength > 1 ? theme.spacing(13) : 0)};
 
-  ${({ $leftPadding }) =>
-    !!$leftPadding &&
-    css`
-      padding-left: ${theme.spacing(12)};
-      width: fit-content;
-
-      ${theme.breakpoints.down('md')} {
-        padding-left: ${theme.spacing(4)};
-      }
-    `};
+  ${({ $leftSpacing }) => {
+    return css`
+      ${setResponsiveProperty('paddingLeft', $leftSpacing)}
+    `
+  }}
 
   .MuiTabs-indicator {
     /* We hide the default MUI selected tab indicator. It's manually handled by us bellow */

diff --git a/src/layouts/CustomerInvoiceDetails.tsx b/src/layouts/CustomerInvoiceDetails.tsx
@@ -791,7 +791,12 @@ const CustomerInvoiceDetails = () => {
               </div>
             </MainInfos>
           )}
-          <NavigationTab name="Invoice details tab switcher" tabs={tabsOptions} loading={loading} />
+          <NavigationTab
+            leftSpacing={0}
+            name="Invoice details tab switcher"
+            tabs={tabsOptions}
+            loading={loading}
+          />
           <Outlet />
         </Content>
       )}

diff --git a/src/layouts/Developers.tsx b/src/layouts/Developers.tsx
@@ -32,7 +32,13 @@ const Developers = () => {
           {translate('text_6271200984178801ba8bdebe')}
         </Typography>
       </PageHeader>
-      <NavigationTab leftPadding tabs={tabsOptions} />
+      <NavigationTab
+        leftSpacing={{
+          default: 16,
+          md: 48,
+        }}
+        tabs={tabsOptions}
+      />
       <Content>
         <Outlet />
       </Content>

diff --git a/src/pages/CustomerDetails.tsx b/src/pages/CustomerDetails.tsx
@@ -340,6 +340,7 @@ const CustomerDetails = () => {
 
             <StyledTabs data-test="customer-navigation-wrapper">
               <NavigationTab
+                leftSpacing={0}
                 tabs={[
                   {
                     title: translate('text_628cf761cbe6820138b8f2e4'),

diff --git a/src/pages/InvoicesPage.tsx b/src/pages/InvoicesPage.tsx
@@ -231,7 +231,10 @@ const InvoicesPage = () => {
         </HeaderRigthBlock>
       </PageHeader>
       <NavigationTab
-        leftPadding
+        leftSpacing={{
+          default: 16,
+          md: 48,
+        }}
         tabs={[
           {
             title: translate('text_63ac86d797f728a87b2f9f85'),

diff --git a/src/pages/PlanDetails.tsx b/src/pages/PlanDetails.tsx
@@ -183,7 +183,7 @@ const PlanDetails = () => {
         </PlanBlockInfos>
       </PlanBlockWrapper>
       <NavigationTab
-        leftPadding
+        leftSpacing={48}
         loading={isPlanLoading}
         tabs={[
           {

diff --git a/src/pages/__devOnly/DesignSystem.tsx b/src/pages/__devOnly/DesignSystem.tsx
@@ -143,7 +143,7 @@ const DesignSystem = () => {
         <Typography variant="caption">Only visible in dev mode</Typography>
       </PageHeader>
       <NavigationTab
-        leftPadding
+        leftSpacing={48}
         name="Design system tab switcher"
         tabs={[
           {

diff --git a/src/pages/settings/AnrokIntegrationDetails.tsx b/src/pages/settings/AnrokIntegrationDetails.tsx
@@ -198,7 +198,10 @@ const AnrokIntegrationDetails = () => {
       </MainInfos>
 
       <NavigationTab
-        leftPadding
+        leftSpacing={{
+          default: 16,
+          md: 48,
+        }}
         loading={loading}
         tabs={[
           {

diff --git a/src/pages/settings/NetsuiteIntegrationDetails.tsx b/src/pages/settings/NetsuiteIntegrationDetails.tsx
@@ -198,7 +198,10 @@ const NetsuiteIntegrationDetails = () => {
       </MainInfos>
 
       <NavigationTab
-        leftPadding
+        leftSpacing={{
+          default: 16,
+          md: 48,
+        }}
         loading={loading}
         tabs={[
           {

diff --git a/src/pages/settings/XeroIntegrationDetails.tsx b/src/pages/settings/XeroIntegrationDetails.tsx
@@ -191,7 +191,10 @@ const XeroIntegrationDetails = () => {
       </MainInfos>
 
       <NavigationTab
-        leftPadding
+        leftSpacing={{
+          default: 16,
+          md: 48,
+        }}
         loading={loading}
         tabs={[
           {