@dxc-technology/halstack-react 0.0.0-89de434 → 0.0.0-8a597df

package/icon/Icon.accessibility.test.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Icon = _interopRequireDefault(require("./Icon"));
+describe("Icon component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+            icon: "home"
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/icon/Icon.js

@@ -25,7 +25,7 @@ var DxcIcon = function DxcIcon(_ref) {
     "aria-hidden": "true"
   });
 };
-var IconContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Material Symbols Outlined\";\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: \"liga\";\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  -moz-osx-font-smoothing: grayscale;\n  font-variation-settings: ", ";\n  ::before {\n    content: \"", "\";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: \"Material Symbols Outlined\";\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: \"liga\";\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  -moz-osx-font-smoothing: grayscale;\n  font-variation-settings: ", ";\n  ::before {\n    content: \"", "\";\n  }\n"])), function (props) {
   return props.filled ? "'FILL' 1" : "'FILL' 0";
 }, function (props) {
   return props.icon;

package/icon/Icon.stories.tsx

@@ -13,11 +13,13 @@ export const Chromatic = () => (
   <>
     <Title title="Icon component" theme="light" level={2} />
     <ExampleContainer>
-      <DxcIcon icon="home" />
-      <DxcIcon icon="filled_home" />
+      <DxcTypography as="p" fontSize="1.5rem">
+        <DxcIcon icon="home" />
+        <DxcIcon icon="filled_home" />
+      </DxcTypography>
     </ExampleContainer>
     <ExampleContainer>
-      <DxcTypography as="p" color="#b182e3">
+      <DxcTypography as="p" fontSize="1.5rem" color="#b182e3">
         <DxcIcon icon="home" />
         <DxcIcon icon="filled_home" />
       </DxcTypography>

package/image/Image.accessibility.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Image = _interopRequireDefault(require("./Image"));
+describe("Image component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+            alt: "Example image",
+            width: "100%",
+            src: "https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg",
+            caption: "Caption"
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for lazy-loading mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+            alt: "Example image",
+            width: "100%",
+            src: "https://images.ctfassets.net/hrltx12pl8hq/5596z2BCR9KmT1KeRBrOQa/4070fd4e2f1a13f71c2c46afeb18e41c/shutterstock_451077043-hero1.jpg",
+            caption: "Caption",
+            lazyLoading: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/layout/ApplicationLayout.js

@@ -15,7 +15,7 @@ var _Sidenav = _interopRequireDefault(require("../sidenav/Sidenav"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _variables = require("../common/variables");
 var _Icons = _interopRequireDefault(require("./Icons"));
-var _SidenavContext = require("./SidenavContext");
+var _SidenavContext = require("../sidenav/SidenavContext");
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

package/layout/Icons.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var layoutIcons = {
   facebookLogo: /*#__PURE__*/_react["default"].createElement("svg", {
     version: "1.1",
-    id: "Capa_1",
     x: "0px",
     y: "0px",
     width: "438.536px",
@@ -36,7 +35,6 @@ var layoutIcons = {
   })),
   linkedinLogo: /*#__PURE__*/_react["default"].createElement("svg", {
     version: "1.1",
-    id: "Capa_1",
     x: "0px",
     y: "0px",
     width: "438.536px",

package/link/Link.accessibility.test.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Link = _interopRequireDefault(require("./Link.tsx"));
+var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  viewBox: "0 0 24 24",
+  enableBackground: "new 0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", {
+  id: "Bounding_Box"
+}, /*#__PURE__*/_react["default"].createElement("rect", {
+  fill: "none",
+  width: "24",
+  height: "24"
+})), /*#__PURE__*/_react["default"].createElement("g", {
+  id: "Master"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z"
+})));
+describe("Link component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+            href: "https://www.google.com",
+            icon: icon,
+            iconPosition: "before",
+            margin: "medium"
+          }, "Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+            href: "https://www.google.com",
+            icon: icon,
+            iconPosition: "after",
+            margin: "medium"
+          }, "Link"))), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+            href: "https://www.google.com",
+            icon: icon,
+            iconPosition: "before",
+            margin: "medium",
+            disabled: true
+          }, "Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+            href: "https://www.google.com",
+            icon: icon,
+            iconPosition: "after",
+            margin: "medium",
+            disabled: true
+          }, "Link"))), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for new-window mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, container, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+            href: "https://www.google.com",
+            icon: icon,
+            iconPosition: "before",
+            margin: "medium",
+            newWindow: true
+          }, "Link"), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+            href: "https://www.google.com",
+            icon: icon,
+            iconPosition: "after",
+            margin: "medium",
+            newWindow: true
+          }, "Link"))), container = _render3.container;
+          _context3.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});

package/link/Link.js

@@ -14,7 +14,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-var _templateObject, _templateObject2, _templateObject3;
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _templateObject, _templateObject2;
 var _excluded = ["inheritColor", "disabled", "icon", "iconPosition", "href", "newWindow", "onClick", "margin", "tabIndex", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -24,8 +25,8 @@ var LinkContent = /*#__PURE__*/_react["default"].memo(function (_ref) {
     children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, iconPosition === "after" && children, icon && /*#__PURE__*/_react["default"].createElement(LinkIconContainer, {
     iconPosition: iconPosition
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(LinkIcon, {
-    src: icon
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), iconPosition === "before" && children);
 });
 var DxcLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
@@ -104,12 +105,13 @@ var StyledLink = _styledComponents["default"].div(_templateObject || (_templateO
 }, function (props) {
   return "color: ".concat(props.theme.activeFontColor, " !important;\n       border-bottom-color: ").concat(props.theme.activeUnderlineColor, " !important;");
 });
-var LinkIcon = _styledComponents["default"].img(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
-var LinkIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n  align-self: center;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var LinkIconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  ", ";\n  overflow: hidden;\n  align-self: center;\n\n  font-size: ", ";\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
 }, function (props) {
   return "".concat(props.iconPosition === "before" ? "margin-right" : "margin-left", ": ").concat(props.theme.iconSpacing);
+}, function (props) {
+  return props.theme.iconSize;
 });
 var _default = exports["default"] = DxcLink;

package/link/Link.stories.tsx

@@ -33,7 +33,7 @@ export const Chromatic = () => (
       <Title title="Disabled" theme="light" level={4} />
       <DxcLink disabled>Test</DxcLink>
       <Title title="Icon before" theme="light" level={4} />
-      <DxcLink href="https://www.google.com" icon={icon} iconPosition="before">
+      <DxcLink href="https://www.google.com" icon="lock" iconPosition="before">
         Test
       </DxcLink>
       <Title title="Icon after" theme="light" level={4} />
@@ -76,7 +76,7 @@ export const Chromatic = () => (
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Long text with hover" theme="light" level={4} />
       Lorem{" "}
-      <DxcLink href="https://www.google.com" icon={icon}>
+      <DxcLink href="https://www.google.com" icon="filled_home">
         Test
       </DxcLink>{" "}
       ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

package/link/types.d.ts

@@ -17,7 +17,7 @@ export type LinkProps = {
      */
     inheritColor?: boolean;
     /**
-     * Element or path used as the icon that will be placed next to the link text.
+     * Material Symbol name or SVG element as the icon that will be placed next to the link text.
      */
     icon?: string | SVG;
     /**

package/nav-tabs/NavTabs.accessibility.test.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _NavTabs = _interopRequireDefault(require("./NavTabs.tsx"));
+var favoriteIcon = 'filled_Favorite';
+var pinIcon = 'Location_On';
+describe("Tabs component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], {
+            iconPosition: "left"
+          }, /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
+            href: "/test1",
+            icon: favoriteIcon,
+            active: true
+          }, "Tab 1"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
+            href: "/test2",
+            icon: favoriteIcon,
+            disabled: true
+          }, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
+            href: "/test3",
+            icon: pinIcon,
+            notificationNumber: 12
+          }, "Tab 3"))), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

package/nav-tabs/NavTabs.d.ts

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

package/nav-tabs/NavTabs.js

@@ -5,17 +5,17 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.NavTabsContext = void 0;
+exports["default"] = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Tab = _interopRequireDefault(require("./Tab"));
+var _NavTabsContext = require("./NavTabsContext");
 var _templateObject, _templateObject2;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var NavTabsContext = exports.NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
 var getPropInChild = function getPropInChild(child, propName) {
   return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
 };
@@ -81,7 +81,7 @@ var DxcNavTabs = function DxcNavTabs(_ref) {
     onKeyDown: handleOnKeyDown,
     role: "tablist",
     "aria-label": "Navigation tabs"
-  }, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
+  }, /*#__PURE__*/_react["default"].createElement(_NavTabsContext.NavTabsContext.Provider, {
     value: contextValue
   }, children), /*#__PURE__*/_react["default"].createElement(Underline, null)));
 };

package/nav-tabs/NavTabs.stories.tsx

@@ -16,7 +16,10 @@ const iconSVG = (
   </svg>
 );
 
-const largeIcon = "https://www.iconpacks.net/icons/1/free-pin-icon-48-thumb.png";
+
+const favoriteIcon = 'filled_Favorite'
+
+const pinIcon = 'Location_On';
 
 const opinionatedTheme = {
   navTabs: {
@@ -105,10 +108,10 @@ export const Chromatic = () => (
         <DxcNavTabs.Tab href="#" disabled icon={iconSVG}>
           Tab 2
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={largeIcon}>
+        <DxcNavTabs.Tab href="#" icon={pinIcon}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={largeIcon}>
+        <DxcNavTabs.Tab href="#" icon={pinIcon}>
           Tab 4
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -116,16 +119,16 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="With icon position left" theme="light" level={4} />
       <DxcNavTabs iconPosition="left">
-        <DxcNavTabs.Tab href="#" active icon={largeIcon}>
+        <DxcNavTabs.Tab href="#" active icon={pinIcon}>
           Tab 1
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" disabled icon={iconSVG}>
+        <DxcNavTabs.Tab href="#" disabled icon={favoriteIcon}>
           Tab 2
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon}>
           Tab 4
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -133,16 +136,16 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="With icon and notification number" theme="light" level={4} />
       <DxcNavTabs>
-        <DxcNavTabs.Tab href="#" active icon={largeIcon} notificationNumber>
+        <DxcNavTabs.Tab href="#" active icon={pinIcon} notificationNumber>
           Tab 1
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" disabled icon={iconSVG} notificationNumber={5}>
+        <DxcNavTabs.Tab href="#" disabled icon={favoriteIcon} notificationNumber={5}>
           Tab 2
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon} notificationNumber={120}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={largeIcon} notificationNumber={12}>
+        <DxcNavTabs.Tab href="#" icon={pinIcon} notificationNumber={12}>
           Tab 4
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -150,16 +153,16 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="With icon on the left and notification number" theme="light" level={4} />
       <DxcNavTabs iconPosition="left">
-        <DxcNavTabs.Tab href="#" active icon={iconSVG} notificationNumber>
+        <DxcNavTabs.Tab href="#" active icon={favoriteIcon} notificationNumber>
           Tab 1
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" disabled icon={iconSVG} notificationNumber={5}>
+        <DxcNavTabs.Tab href="#" disabled icon={favoriteIcon} notificationNumber={5}>
           Tab 2
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={largeIcon} notificationNumber={120}>
+        <DxcNavTabs.Tab href="#" icon={pinIcon} notificationNumber={120}>
           Tab 3
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={12}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon} notificationNumber={12}>
           Tab 4
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -170,10 +173,10 @@ export const Chromatic = () => (
         <DxcNavTabs.Tab href="#" active>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG} disabled notificationNumber={3}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon} disabled notificationNumber={3}>
           Tab 2
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon}>
           Tab 3
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -184,10 +187,10 @@ export const Chromatic = () => (
         <DxcNavTabs.Tab href="#" active>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG} disabled notificationNumber={3}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon} disabled notificationNumber={3}>
           Tab 2
         </DxcNavTabs.Tab>
-        <DxcNavTabs.Tab href="#" icon={iconSVG}>
+        <DxcNavTabs.Tab href="#" icon={favoriteIcon}>
           Tab 3
         </DxcNavTabs.Tab>
       </DxcNavTabs>
@@ -257,16 +260,16 @@ export const Chromatic = () => (
       <Title title="With icon and notification number" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
         <DxcNavTabs>
-          <DxcNavTabs.Tab href="#" active icon={iconSVG} notificationNumber>
+          <DxcNavTabs.Tab href="#" active icon={favoriteIcon} notificationNumber>
             Tab 1
           </DxcNavTabs.Tab>
-          <DxcNavTabs.Tab href="#" disabled icon={iconSVG} notificationNumber={5}>
+          <DxcNavTabs.Tab href="#" disabled icon={favoriteIcon} notificationNumber={5}>
             Tab 2
           </DxcNavTabs.Tab>
-          <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={120}>
+          <DxcNavTabs.Tab href="#" icon={favoriteIcon} notificationNumber={120}>
             Tab 3
           </DxcNavTabs.Tab>
-          <DxcNavTabs.Tab href="#" icon={iconSVG} notificationNumber={12}>
+          <DxcNavTabs.Tab href="#" icon={favoriteIcon} notificationNumber={12}>
             Tab 4
           </DxcNavTabs.Tab>
         </DxcNavTabs>

package/nav-tabs/NavTabs.test.js

@@ -46,7 +46,7 @@ describe("Tabs component tests", function () {
       }, "Tab 2"), /*#__PURE__*/_react["default"].createElement(_NavTabs["default"].Tab, {
         href: "/test3",
         notificationNumber: 1000,
-        icon: "/testIcon.png"
+        icon: "Settings"
       }, "Tab 3"))),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole,
@@ -54,7 +54,6 @@ describe("Tabs component tests", function () {
     expect(getByText("10")).toBeTruthy();
     expect(queryByText("20")).toBeFalsy();
     expect(getByText("+99")).toBeTruthy();
-    expect(getByRole("img")).toBeTruthy();
   });
   test("Tabs render with correct tab index", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NavTabs["default"], {

package/nav-tabs/NavTabsContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NavTabsContextProps } from "./types";
+export declare const NavTabsContext: import("react").Context<NavTabsContextProps>;

package/nav-tabs/NavTabsContext.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavTabsContext = void 0;
+var _react = require("react");
+var NavTabsContext = exports.NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);

package/nav-tabs/Tab.js

@@ -13,9 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Badge = _interopRequireDefault(require("../badge/Badge"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
-var _NavTabs = require("./NavTabs");
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _NavTabsContext = require("./NavTabsContext");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -33,7 +34,7 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var tabRef = (0, _react.useRef)();
   var colorsTheme = (0, _useTheme["default"])();
-  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
+  var _useContext = (0, _react.useContext)(_NavTabsContext.NavTabsContext),
     iconPosition = _useContext.iconPosition,
     tabIndex = _useContext.tabIndex,
     focusedLabel = _useContext.focusedLabel;
@@ -71,9 +72,11 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     onKeyDown: handleOnKeyDown,
     tabIndex: active ? tabIndex : -1
   }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
-    iconPosition: iconPosition
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon
+    iconPosition: iconPosition,
+    active: active,
+    disabled: disabled
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     alignItems: "center",
     gap: "0.5rem"
@@ -92,14 +95,8 @@ var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
     label: typeof notificationNumber === "number" && notificationNumber
   }))));
 });
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n  z-index: 1;\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 : 'transparent';
-}, function (props) {
-  return props.theme.unselectedIconColor;
-}, function (props) {
-  return props.theme.selectedIconColor;
-}, function (props) {
-  return props.theme.disabledIconColor;
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  align-items: stretch;\n  border-bottom: 2px solid ", ";\n  padding: 0.5rem;\n  z-index: 1;\n"])), function (props) {
+  return props.active ? props.theme.selectedUnderlineColor : "transparent";
 });
 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  text-decoration-line: none;\n  cursor: ", ";\n\n  ", "\n"])), function (props) {
   return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
@@ -114,5 +111,7 @@ var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 =
 }, function (props) {
   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 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 TabIconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-size: 24px;\n  color: ", ";\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
+  return props.active ? props.theme.selectedIconColor : props.disabled ? props.theme.disabledIconColor : props.theme.unselectedIconColor;
+});
 var _default = exports["default"] = DxcTab;