@dxc-technology/halstack-react 0.0.0-64fdce7 → 0.0.0-6501724

package/header/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Padding = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Padding = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/heading/Heading.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 

package/heading/Heading.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Heading = _interopRequireDefault(require("./Heading"));
+var _Heading = _interopRequireDefault(require("./Heading.tsx"));
 
 describe("Heading component tests", function () {
   test("Heading renders with default level", function () {

package/inset/Inset.stories.tsx

@@ -205,7 +205,7 @@ export const Chromatic = () => (
     </Container>
     <Title title="Inside a flex column" level={4} />
     <Container>
-      <DxcFlex direction="column" gap="0.75rem">
+      <DxcFlex direction="column" gap="1rem">
         <Placeholder></Placeholder>
         <DxcInset top="0.25rem" right="1.5rem" bottom="2rem" left="4rem">
           <Placeholder></Placeholder>
@@ -225,5 +225,6 @@ const Placeholder = styled.div`
   min-height: 40px;
   min-width: 120px;
   border: 1px solid #a46ede;
+  border-radius: 0.5rem;
   background-color: #e5d5f6;
 `;

package/layout/ApplicationLayout.d.ts

@@ -4,14 +4,14 @@ declare const DxcApplicationLayout: {
     ({ visibilityToggleLabel, header, sidenav, footer, children, }: AppLayoutPropsType): JSX.Element;
     Header: {
         ({ underlined, content, responsiveContent, onClick, margin, padding, tabIndex, }: import("../header/types").default): JSX.Element;
-        Dropdown: (props: any) => JSX.Element;
+        Dropdown: (props: import("../dropdown/types").default) => JSX.Element;
     };
     Main: ({ children }: AppLayoutMainPropsType) => JSX.Element;
     Footer: ({ socialLinks, bottomLinks, copyright, children, padding, margin, tabIndex, }: import("../footer/types").default) => JSX.Element;
     SideNav: {
-        ({ children, title }: import("../sidenav/types").default): JSX.Element;
+        ({ title, children }: import("../sidenav/types").default): JSX.Element;
         Section: ({ children }: import("../sidenav/types").SidenavSectionPropsType) => JSX.Element;
-        Group: ({ children, title, collapsable, icon }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
+        Group: ({ title, collapsable, icon, children }: import("../sidenav/types").SidenavGroupPropsType) => JSX.Element;
         Link: React.ForwardRefExoticComponent<import("../sidenav/types").SidenavLinkPropsType & React.RefAttributes<HTMLAnchorElement>>;
         Title: ({ children }: import("../sidenav/types").SidenavTitlePropsType) => JSX.Element;
     };

package/layout/ApplicationLayout.js

@@ -23,7 +23,7 @@ var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _Icons = require("./Icons");
 

package/layout/types.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-declare type ChildrenType = AppLayoutMainPropsType | AppLayoutSidenavPropsType;
 export declare type AppLayoutMainPropsType = {
     /**
      * Everything between the tags will be displayed as the content of the main part of the application.
@@ -35,8 +34,8 @@ declare type AppLayoutPropsType = {
      */
     footer?: React.ReactNode;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * Use the DxcApplicationLayout.Main provided to render main content.
      */
-    children: React.ReactElement<ChildrenType> | React.ReactElement<ChildrenType>[];
+    children: React.ReactElement<AppLayoutMainPropsType>;
 };
 export default AppLayoutPropsType;

package/link/Link.js

@@ -21,7 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -82,7 +82,7 @@ var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   })));
 });
 
-var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: baseline;\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  text-decoration-color: transparent;\n  width: fit-content;\n\n  ", "\n  ", "\n  color: ", ";\n  ", "\n\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
+var StyledLink = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: baseline;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-size: ", ";\n  font-weight: ", ";\n  font-style: ", ";\n  font-family: ", ";\n  text-decoration-color: transparent;\n  width: fit-content;\n  ", "\n  ", "\n  color: ", ";\n  ", "\n  &:visited {\n    color: ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    ", "\n  }\n  &:focus {\n    border-radius: 2px;\n    outline: 2px solid ", ";\n    ", "\n  }\n  &:active {\n    ", "\n  }\n"])), function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -105,7 +105,7 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
 }, function (props) {
   return props.disabled && "cursor: default;";
 }, function (props) {
-  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledColor;
+  return props.inheritColor ? "inherit" : !props.disabled ? props.theme.fontColor : props.theme.disabledFontColor;
 }, function (props) {
   return props.disabled ? "pointer-events: none;" : "";
 }, function (props) {

package/link/Link.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import DxcLink from "./Link";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Link",
@@ -19,6 +20,12 @@ const icon = (
   </svg>
 );
 
+const opinionatedTheme = {
+  link: {
+    baseColor: "#5f249f",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <Title title="With anchor" theme="light" level={2} />
@@ -189,5 +196,58 @@ export const Chromatic = () => (
         Test
       </DxcLink>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink disabled>Test</DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icon before" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink href="https://www.google.com" icon={icon} iconPosition="before">
+          Test
+        </DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink disabled>Test</DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icon after" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink onClick={() => {}} icon={icon} iconPosition="after">
+          Test
+        </DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="With link hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink onClick={() => {}}>Test</DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="With link focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink onClick={() => {}}>Test</DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="With link active" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcLink onClick={() => {}}>Test</DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-visited">
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="With link visited" theme="light" level={4} />
+        <DxcLink href="https://www.google.com">Test</DxcLink>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );

package/link/Link.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Link = _interopRequireDefault(require("./Link"));
+var _Link = _interopRequireDefault(require("./Link.tsx"));
 
 describe("Link component tests", function () {
   test("Link renders with correct text", function () {
@@ -33,9 +33,7 @@ describe("Link component tests", function () {
     expect(getByText("Link").hasAttribute("href")).toBeFalsy();
 
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-      onClick: function onClick() {
-        return console.log("Andorra");
-      },
+      onClick: function onClick() {},
       disabled: true
     }, "LinkButton")),
         getByTextLinkButton = _render4.getByText;

package/link/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;

package/main.d.ts

@@ -34,11 +34,12 @@ import DxcRadioGroup from "./radio-group/RadioGroup";
 import DxcBleed from "./bleed/Bleed";
 import DxcInset from "./inset/Inset";
 import DxcQuickNav from "./quick-nav/QuickNav";
-import DxcNavTabs from "./tabs-nav/NavTabs";
+import DxcNavTabs from "./nav-tabs/NavTabs";
 import DxcFlex from "./flex/Flex";
 import DxcTypography from "./typography/Typography";
 import DxcParagraph from "./paragraph/Paragraph";
 import DxcBulletedList from "./bulleted-list/BulletedList";
+import DxcGrid from "./grid/Grid";
 import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
 import { BackgroundColorProvider } from "./BackgroundColorContext";
-export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };
+export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, DxcGrid, };

package/main.js

@@ -115,6 +115,12 @@ Object.defineProperty(exports, "DxcFlex", {
     return _Flex["default"];
   }
 });
+Object.defineProperty(exports, "DxcGrid", {
+  enumerable: true,
+  get: function get() {
+    return _Grid["default"];
+  }
+});
 Object.defineProperty(exports, "DxcHeading", {
   enumerable: true,
   get: function get() {
@@ -350,7 +356,7 @@ var _Inset = _interopRequireDefault(require("./inset/Inset"));
 
 var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
 
-var _NavTabs = _interopRequireDefault(require("./tabs-nav/NavTabs"));
+var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
 
 var _Flex = _interopRequireDefault(require("./flex/Flex"));
 
@@ -360,6 +366,8 @@ var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
 
 var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
 
+var _Grid = _interopRequireDefault(require("./grid/Grid"));
+
 var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
 
 var _BackgroundColorContext = require("./BackgroundColorContext");

package/{tabs-nav → nav-tabs}/NavTabs.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
-import { NavTabsContextProps, NavTabsProps } from "./types";
+import NavTabsPropsType, { NavTabsContextProps } from "./types";
 export declare const NavTabsContext: React.Context<NavTabsContextProps>;
 declare const DxcNavTabs: {
-    ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
+    ({ iconPosition, tabIndex, children }: NavTabsPropsType): JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
 };
 export default DxcNavTabs;

package/{tabs-nav → nav-tabs}/NavTabs.js

@@ -68,23 +68,20 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
       children = _ref.children;
-  var colorsTheme = (0, _useTheme["default"])();
 
   var _useState = (0, _react.useState)(null),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      innerFocus = _useState2[0],
-      setInnerFocus = _useState2[1];
+      innerFocusIndex = _useState2[0],
+      setInnerFocusIndex = _useState2[1];
 
+  var colorsTheme = (0, _useTheme["default"])();
   var contextValue = (0, _react.useMemo)(function () {
     return {
       iconPosition: iconPosition,
       tabIndex: tabIndex,
-      hasIcons: _react["default"].Children.toArray(children).some(function (child) {
-        return getPropInChild(child, "icon");
-      }),
-      focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
+      focusedLabel: innerFocusIndex === null ? undefined : getLabelFromTab(children[innerFocusIndex])
     };
-  }, [iconPosition, tabIndex, innerFocus]);
+  }, [iconPosition, tabIndex, innerFocusIndex]);
 
   var handleOnKeyDown = function handleOnKeyDown(event) {
     var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
@@ -95,19 +92,19 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
       case "Left":
       case "ArrowLeft":
         event.preventDefault();
-        setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
+        setInnerFocusIndex(getPreviousTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
         break;
 
       case "Right":
       case "ArrowRight":
         event.preventDefault();
-        setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
+        setInnerFocusIndex(getNextTabIndex(children, innerFocusIndex === null ? activeTab : innerFocusIndex));
         break;
     }
   };
 
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.tabs
+    theme: colorsTheme.navTabs
   }, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
     onKeyDown: handleOnKeyDown,
     role: "tablist",

package/{tabs-nav → nav-tabs}/NavTabs.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import DxcNavTabs from "./NavTabs";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "NavTabs",
@@ -15,7 +16,14 @@ const iconSVG = (
   </svg>
 );
 
-const largeIcon = "https://www.iconpacks.net/icons/1/free-pin-icon-48-thumb.png"
+const largeIcon = "https://www.iconpacks.net/icons/1/free-pin-icon-48-thumb.png";
+
+const opinionatedTheme = {
+  navTabs: {
+    baseColor: "#666666",
+    accentColor: "#5f249f",
+  },
+};
 
 export const Chromatic = () => (
   <>
@@ -168,5 +176,99 @@ export const Chromatic = () => (
         </DxcNavTabs.Tab>
       </DxcNavTabs>
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With long label and left icon alignment" theme="light" level={4} />
+      <DxcNavTabs iconPosition="left">
+        <DxcNavTabs.Tab href="#" active>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" icon={iconSVG} disabled notificationNumber={3}>
+          Tab 2
+        </DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+          Tab 3
+        </DxcNavTabs.Tab>
+      </DxcNavTabs>
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Only label" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered tabs" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused tabs" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived tabs" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 3</DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#">Tab 4</DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon and notification number" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcNavTabs>
+          <DxcNavTabs.Tab href="#" active icon={iconSVG} notificationNumber>
+            Tab 1
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" disabled icon={iconSVG} notificationNumber={5}>
+            Tab 2
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
+            Tab 3
+          </DxcNavTabs.Tab>
+          <DxcNavTabs.Tab href="#" icon={iconSVG}>
+            Tab 4
+          </DxcNavTabs.Tab>
+        </DxcNavTabs>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );

package/{tabs-nav → nav-tabs}/NavTabs.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _NavTabs = _interopRequireDefault(require("./NavTabs"));
+var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
 
 describe("Tabs component tests", function () {
   test("Tabs render with correct labels and attributes", function () {

package/{tabs-nav → nav-tabs}/Tab.js

@@ -21,9 +21,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+
 var _NavTabs = require("./NavTabs");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _templateObject, _templateObject2, _templateObject3;
 
 var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
 
@@ -42,15 +48,15 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
       notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
       children = _ref.children,
       otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var tabRef = /*#__PURE__*/(0, _react.createRef)();
+  var tabRef = (0, _react.useRef)();
+  var colorsTheme = (0, _useTheme["default"])();
 
   var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
       iconPosition = _useContext.iconPosition,
       tabIndex = _useContext.tabIndex,
-      hasIcons = _useContext.hasIcons,
       focusedLabel = _useContext.focusedLabel;
 
-  (0, _react.useLayoutEffect)(function () {
+  (0, _react.useEffect)(function () {
     var _tabRef$current;
 
     focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
@@ -62,8 +68,8 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     switch (event.key) {
       case " ":
       case "Enter":
-        tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
         event.preventDefault();
+        tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
         break;
     }
   };
@@ -71,19 +77,19 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
   return /*#__PURE__*/_react["default"].createElement(TabContainer, {
     active: active,
     role: "tab",
-    "aria-selected": active
+    "aria-selected": active,
+    "aria-disabled": disabled
   }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
-    href: !disabled && href ? href : undefined,
+    href: !disabled ? href : undefined,
     disabled: disabled,
+    active: active,
     iconPosition: iconPosition,
-    hasIcon: hasIcons,
+    hasIcon: icon != null ? true : false,
     ref: function ref(anchorRef) {
       tabRef.current = anchorRef;
 
       if (_ref2) {
-        if (typeof _ref2 === "function") _ref2(anchorRef);else {
-          _ref2.current = anchorRef;
-        }
+        if (typeof _ref2 === "function") _ref2(anchorRef);else _ref2.current = anchorRef;
       }
     },
     onKeyDown: handleOnKeyDown,
@@ -92,37 +98,49 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     iconPosition: iconPosition
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: icon
-  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, children, notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
-    notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
+  }) : icon), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    alignItems: "center",
+    gap: "0.5rem"
+  }, /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
+    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), notificationNumber && /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    notificationText: typeof notificationNumber === "number" && notificationNumber > 99 ? "+99" : notificationNumber,
     disabled: disabled
-  })))));
+  }))));
 });
 
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 2px solid ", ";\n"])), function (props) {
-  return props.active ? "#6f2c91" : "#0000001a";
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n\n  svg {\n    color: ", ";\n  }\n  &[aria-selected=\"true\"] {\n    svg {\n      color: ", ";\n    }\n  }\n  &[aria-disabled=\"true\"] {\n    svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.active ? props.theme.selectedUnderlineColor : props.theme.dividerColor;
+}, function (props) {
+  return props.theme.unselectedIconColor;
+}, function (props) {
+  return props.theme.selectedIconColor;
+}, function (props) {
+  return props.theme.disabledIconColor;
 });
 
-var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  font-family: \"Open Sans\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 1rem;\n  color: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n\n  border-radius: 4px;\n\n  ", "\n"])), function (props) {
+var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n  gap: ", ";\n  height: ", ";\n  min-width: 176px;\n  min-height: 44px;\n  padding: 0.375rem;\n  border-radius: 4px;\n  background: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {
   return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
 }, function (props) {
-  return props.disabled ? "#0000004D" : "#333333";
+  return props.hasIcon && props.iconPosition === "top" ? "0.375rem" : "0.625rem";
 }, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
+  return props.hasIcon && props.iconPosition === "top" ? "78px" : "100%";
 }, function (props) {
-  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
+  return props.active ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor;
 }, function (props) {
-  return !props.disabled && ":hover {\n    background: #0000000D;\n  }\n\n  :focus {\n    outline: 2px solid #33aaff};\n  }\n\n  :active {\n    background: #0000001A;\n    outline: 2px solid #33aaff};\n  }";
-});
-
-var TabIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-bottom: ", ";\n  margin-right: ", ";\n\n  img,\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
-  return props.iconPosition === "top" && "0.375rem";
+  return props.disabled ? "not-allowed" : "pointer";
 }, function (props) {
-  return props.iconPosition === "left" && "0.625rem";
+  return !props.disabled && "\n      :hover {\n        background: ".concat(props.theme.hoverBackgroundColor, ";\n      }\n      :focus {\n        outline: 2px solid ").concat(props.theme.focusOutline, ";\n      }\n      :active {\n        background: ").concat(props.theme.pressedBackgroundColor, ";\n        outline: 2px solid #33aaff};\n      }\n  ");
 });
 
-var LabelContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
-
-var BadgeContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 0.5rem;\n"])));
+var TabIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n\n  img,\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 var _default = DxcTab;
 exports["default"] = _default;