New icon props to Tabs component

Author: Kubit

src/components/tabs/stories/tabs.stories.tsx

@@ -30,8 +30,8 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 export const Tabs: Story = {
   args: {
     variant: Object.values(variantsObject[themeSelected].TabsVariantType || {})[0] as string,
-    leftIcon: { icon: ICONS.ICON_CHEVRON_UP },
-    rightIcon: { icon: ICONS.ICON_CHEVRON_DOWN },
+    leftIcon: { icon: ICONS.ICON_CHEVRON_LEFT },
+    rightIcon: { icon: ICONS.ICON_CHEVRON_RIGHT },
     unMountContent: true,
     content: [
       <ReplaceContent key="content-0" width="100%">
@@ -43,6 +43,12 @@ export const Tabs: Story = {
       <ReplaceContent key="content-2" width="100%">
         Content third tab
       </ReplaceContent>,
+      <ReplaceContent key="content-3" width="100%">
+        Content fourth tab
+      </ReplaceContent>,
+      <ReplaceContent key="content-4" width="100%">
+        Content fifth tab
+      </ReplaceContent>,
     ],
     tabs: [
       {
@@ -56,6 +62,12 @@ export const Tabs: Story = {
       {
         content: 'Third tab',
       },
+      {
+        content: 'Fourth tab',
+      },
+      {
+        content: 'Fifth tab',
+      },
     ],
     themeArgs: themesObject[themeSelected][STYLES_NAME.PRIMARY_TABS],
   },

src/components/tabs/tabsStandAlone.tsx

@@ -56,32 +56,54 @@ const TabsStandAloneComponent = (
     tabsLength: tabsLength,
     selectedTab: props.selectedTab,
   });
+  const disabledIconLeft = position === 0;
+  const disabledIconRight = position >= tabsLength - numTabsInView;
 
   const buildIconLeft = () =>
-    position !== 0 && (
+    tabsLength > numTabsInView && (
       <TabsLeftArrowContainerStyled
         aria-label={props.leftControlAriaLabel}
         data-testid={`${dataTestId}-icon-left`}
+        disabled={disabledIconLeft}
         styles={props.styles}
         tabIndex={0}
         type={ButtonType.BUTTON}
-        onClick={() => handleClickIcon(false)}
+        onClick={() => {
+          if (!disabledIconLeft) {
+            handleClickIcon(false);
+          }
+        }}
       >
-        <ElementOrIcon customIconStyles={props.styles.leftIcon} {...props.leftIcon} />
+        <ElementOrIcon
+          customIconStyles={
+            !disabledIconLeft ? props.styles.leftIcon : props.styles.leftIcon?.disabled
+          }
+          {...props.leftIcon}
+        />
       </TabsLeftArrowContainerStyled>
     );
 
   const buildIconRight = () =>
-    position < tabsLength - numTabsInView && (
+    tabsLength > numTabsInView && (
       <TabsRightArrowContainerStyled
         aria-label={props.rightControlAriaLabel}
         data-testid={`${dataTestId}-icon-right`}
+        disabled={disabledIconRight}
         styles={props.styles}
         tabIndex={0}
         type={ButtonType.BUTTON}
-        onClick={() => handleClickIcon(true)}
+        onClick={() => {
+          if (!disabledIconRight) {
+            handleClickIcon(true);
+          }
+        }}
       >
-        <ElementOrIcon customIconStyles={props.styles.rightIcon} {...props.rightIcon} />
+        <ElementOrIcon
+          customIconStyles={
+            !disabledIconRight ? props.styles.rightIcon : props.styles.rightIcon?.disabled
+          }
+          {...props.rightIcon}
+        />
       </TabsRightArrowContainerStyled>
     );
 

src/components/tabs/types/tabsTheme.ts

@@ -16,11 +16,15 @@ export type TabsVariantStylesType = {
   arrowLeftIconContainer?: Omit<CommonStyleType, 'MOBILE'> & {
     [DeviceBreakpointsType.MOBILE]?: CommonStyleType & { focusVisible?: CommonStyleType };
   };
-  leftIcon?: IconTypes;
+  leftIcon?: IconTypes & {
+    disabled?: IconTypes;
+  };
   arrowRightIconContainer?: Omit<CommonStyleType, 'MOBILE'> & {
     [DeviceBreakpointsType.MOBILE]?: CommonStyleType & { focusVisible?: CommonStyleType };
   };
-  rightIcon?: IconTypes;
+  rightIcon?: IconTypes & {
+    disabled?: IconTypes;
+  };
   firstTabButton?: CommonStyleType;
   lastTabButton?: CommonStyleType;
   oneTabContainer?: CommonStyleType;