Feature/oc 13122 - NavTabs Design Tokens

lib/src/common/variables.js

@@ -12,7 +12,9 @@ export const globalTokens = {
   hal_grey_s_40: "#666666",
   hal_black: "#000000",
   color_grey_800: "#4d4d4d",
+  color_grey_700: "#666666",
   color_grey_600: "#808080",
+
   color_grey_50: "#fafafa",
   color_grey_a_100: "#0000000d",
   color_grey_a_200: "#0000001a",
@@ -26,7 +28,7 @@ export const globalTokens = {
   hal_purple_s_38: "#5f249f",
   hal_purple_d_30: "#4b1c7d",
   hal_purple_d_20: "#321353",
-  hal_purple_d_70: "#9a6bb2",
+  hal_purple_d_70: "#9A6bb2",
   color_purple_600: "#7d2fd0",
   color_purple_300: "#cbacec",
 
@@ -37,6 +39,7 @@ export const globalTokens = {
   hal_blue_s_35: "#0067b3",
   hal_blue_d_20: "#003c66",
   color_blue_200: "#cceaff",
+
   color_blue_500: "#33aaff",
   color_blue_50: "#f5fbff",
 
@@ -680,6 +683,25 @@ export const componentTokens = {
     activeUnderlineColor: globalTokens.hal_black,
     focusColor: globalTokens.hal_blue_l_50,
   },
+  navTabs: {
+    selectedBackgroundColor: globalTokens.white,
+    unselectedBackgroundColor: globalTokens.white,
+    hoverBackgroundColor: globalTokens.color_grey_a_100,
+    pressedBackgroundColor: globalTokens.color_grey_a_200,
+    selectedFontColor: globalTokens.color_grey_700,
+    unselectedFontColor: globalTokens.color_grey_700,
+    disabledFontColor: globalTokens.hal_grey_l_60,
+    focusOutline: globalTokens.hal_blue_l_50,
+    selectedUnderlineColor: globalTokens.hal_purple_s_38,
+    dividerColor: globalTokens.hal_grey_l_75,
+    fontFamily: globalTokens.type_sans,
+    fontSize: globalTokens.type_scale_03,
+    fontStyle: globalTokens.type_normal,
+    fontWeight: globalTokens.type_regular,
+    selectedIconColor: globalTokens.color_grey_700,
+    unselectedIconColor: globalTokens.color_grey_700,
+    disabledIconColor: globalTokens.hal_grey_l_60
+  },
   paginator: {
     backgroundColor: globalTokens.hal_grey_l_95,
     fontColor: globalTokens.hal_black,

lib/src/tabs-nav/NavTabs.tsx

@@ -76,7 +76,7 @@ const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPro
   };
 
   return (
-    <ThemeProvider theme={colorsTheme.tabs}>
+    <ThemeProvider theme={colorsTheme.navTabs}>
       <NavTabsContainer onKeyDown={handleOnKeyDown} role="tablist" aria-label="Navigation tabs">
         <NavTabsContext.Provider value={contextValue}>{children}</NavTabsContext.Provider>
       </NavTabsContainer>

lib/src/tabs-nav/Tab.tsx

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import DxcBadge from "../badge/Badge";
 import { NavTabsContext } from "./NavTabs";
 import { TabProps } from "./types";
+import DxcTypography from "../typography/Typography";
+import useTheme from '../useTheme';
 
 const DxcTab = forwardRef(
   (
@@ -12,6 +14,7 @@ const DxcTab = forwardRef(
     const tabRef: React.MutableRefObject<HTMLAnchorElement> = createRef();
 
     const { iconPosition, tabIndex, hasIcons, focusedLabel } = useContext(NavTabsContext);
+    const colorsTheme = useTheme();
 
     useLayoutEffect(() => {
       focusedLabel === children.toString() && tabRef?.current?.focus();
@@ -54,8 +57,25 @@ const DxcTab = forwardRef(
             </TabIconContainer>
           )}
           <LabelContainer>
-            {children}
-            {notificationNumber && (
+          <DxcTypography
+            color={
+              disabled
+                ? colorsTheme.navTabs.disabledFontColor
+                : active
+                ? colorsTheme.navTabs.selectedFontColor
+                : colorsTheme.navTabs.unselectedFontColor
+            }
+            fontFamily={colorsTheme.navTabs.fontFamily}
+            fontSize={colorsTheme.navTabs.fontSize}
+            fontStyle={colorsTheme.navTabs.fontStyle}
+            fontWeight={colorsTheme.navTabs.fontWeight}
+            textAlign="center"
+            letterSpacing="0.025em"
+            lineHeight="1.715em"
+          >            {children}
+
+          </DxcTypography>
+          {notificationNumber && (
               <BadgeContainer>
                 <DxcBadge notificationText={notificationNumber > 99 ? "+99" : notificationNumber} disabled={disabled} />
               </BadgeContainer>
@@ -71,7 +91,7 @@ type TabContainerProps = {
   active?: boolean;
 };
 const TabContainer = styled.div<TabContainerProps>`
-  border-bottom: 2px solid ${(props) => (props.active ? "#6f2c91" : "#0000001a")};
+  border-bottom: 2px solid ${(props) => (props.active ? props.theme.selectedUnderlineColor : props.theme.dividerColor)};
 `;
 
 type TabStyleProps = {
@@ -85,13 +105,10 @@ const Tab = styled.a<TabStyleProps>`
   justify-content: center;
   align-items: center;
 
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 1rem;
-  color: ${(props) => (props.disabled ? "#0000004D" : "#333333")};
+
   text-decoration-color: transparent;
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  background: ${(props) => (props.theme.selectedBackgroundColor)};
 
   height: ${(props) => (props.hasIcon && props.iconPosition === "top" ? "66px" : "32px")};
   min-width: 164px;
@@ -103,15 +120,15 @@ const Tab = styled.a<TabStyleProps>`
   ${(props) =>
     !props.disabled &&
     `:hover {
-    background: #0000000D;
+    background: ${props.theme.hoverBackgroundColor};
   }
 
   :focus {
-    outline: 2px solid #33aaff};
+    outline: 2px solid ${props.theme.focusOutline};
   }
 
   :active {
-    background: #0000001A;
+    background: ${props.theme.pressedBackgroundColor};
     outline: 2px solid #33aaff};
   }`}
 `;
@@ -128,6 +145,19 @@ const TabIconContainer = styled.div<TabIconContainerProps>`
   svg {
     height: 24px;
     width: 24px;
+    color: ${(props) => props.theme.unselectedIconColor};
+  }
+
+  &[aria-selected="true"] {
+    svg {
+      color: ${(props) => props.theme.selectedIconColor};
+    }
+  }
+
+  &[aria-disabled="true"] {
+    svg {
+      color: ${(props) => props.theme.disabledIconColor};
+    }
   }
 `;