@dxc-technology/halstack-react 11.0.0 → 12.0.0

package/tabs/Tabs.js

@@ -15,39 +15,23 @@ var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _Tab = _interopRequireDefault(require("./Tab"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 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); }
-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; }
-var arrowIcons = {
-  left: /*#__PURE__*/_react["default"].createElement("svg", {
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"
-  })),
-  right: /*#__PURE__*/_react["default"].createElement("svg", {
-    focusable: "false",
-    viewBox: "0 0 24 24",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"
-  }))
-};
+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 && {}.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 useResize = function useResize(refTabList) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     viewWidth = _useState2[0],
     setViewWidth = _useState2[1];
   var handleWindowSizeChange = (0, _react.useCallback)(function () {
-    var _refTabList$current;
-    setViewWidth(refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current = refTabList.current) === null || _refTabList$current === void 0 ? void 0 : _refTabList$current.offsetWidth);
+    var _refTabList$current$o, _refTabList$current;
+    setViewWidth((_refTabList$current$o = refTabList === null || refTabList === void 0 ? void 0 : (_refTabList$current = refTabList.current) === null || _refTabList$current === void 0 ? void 0 : _refTabList$current.offsetWidth) !== null && _refTabList$current$o !== void 0 ? _refTabList$current$o : 0);
   }, [refTabList]);
   (0, _react.useEffect)(function () {
-    window.addEventListener("load", handleWindowSizeChange);
+    handleWindowSizeChange();
     window.addEventListener("resize", handleWindowSizeChange);
     return function () {
-      window.removeEventListener("load", handleWindowSizeChange);
       window.removeEventListener("resize", handleWindowSizeChange);
     };
   }, [handleWindowSizeChange]);
@@ -282,7 +266,9 @@ var DxcTabs = function DxcTabs(_ref) {
     "aria-label": translatedLabels.tabs.scrollLeft,
     tabIndex: scrollLeftEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
-  }, arrowIcons.left), /*#__PURE__*/_react["default"].createElement(TabsContent, null, /*#__PURE__*/_react["default"].createElement(TabsContentScroll, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "keyboard_arrow_left"
+  })), /*#__PURE__*/_react["default"].createElement(TabsContent, null, /*#__PURE__*/_react["default"].createElement(TabsContentScroll, {
     translateScroll: translateScroll,
     ref: refTabList,
     enabled: enabledIndicator
@@ -324,7 +310,9 @@ var DxcTabs = function DxcTabs(_ref) {
     "aria-label": translatedLabels.tabs.scrollRight,
     tabIndex: scrollRightEnabled ? tabIndex : -1,
     minHeightTabs: minHeightTabs
-  }, arrowIcons.right))));
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "keyboard_arrow_right"
+  })))));
 };
 var Underline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.theme.dividerThickness;
@@ -349,7 +337,7 @@ var Tabs = _styledComponents["default"].div(_templateObject3 || (_templateObject
 }, function (props) {
   return props.theme.unselectedBackgroundColor;
 });
-var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: center;\n  min-width: ", ";\n  height: ", "px;\n  padding: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 1.25rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    cursor: default;\n    svg {\n      visibility: hidden;\n    }\n    &:focus {\n      outline: none;\n    }\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n  }\n\n  svg {\n    align-self: center;\n    height: 20px;\n    width: 20px;\n    fill: ", ";\n  }\n"])), function (props) {
+var ScrollIndicator = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: ", ";\n  justify-content: center;\n  min-width: ", ";\n  height: ", "px;\n  padding: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 1.25rem;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " solid 1px;\n    outline-offset: -1px;\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    cursor: default;\n    display: none;\n    svg {\n      visibility: hidden;\n    }\n    &:focus {\n      outline: none;\n    }\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n  }\n\n  span {\n    align-self: center;\n    height: 20px;\n    width: 20px;\n  }\n\n  span::before {\n    color: ", ";\n  }\n"])), function (props) {
   return props.enabled ? "flex" : "none";
 }, function (props) {
   return props.theme.scrollButtonsWidth;

package/tabs/Tabs.stories.tsx

@@ -3,10 +3,16 @@ import DxcTabs from "./Tabs";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 export default {
   title: "Tabs",
   component: DxcTabs,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
 };
 
 const iconSVG = (
@@ -71,13 +77,11 @@ const firstDisabledTabs: any = [
 
 const tabsNotification = tabs.map((tab, index) => ({
   ...tab,
-  notificationNumber: (index === 0 && true) || (index === 1 && 5) || (index === 2 && 200),
+  notificationNumber: (index === 0 && true) || (index === 1 && 5) || (index === 2 && 100) || (index === 3 && 200),
 }));
 
 const tabsIcon = tabs.map((tab, index) =>
-  index <= tabs.length / 2
-    ? { ...tab, icon: "https://cdn-icons-png.flaticon.com/512/5039/5039041.png" }
-    : { ...tab, icon: iconSVG }
+  index <= tabs.length / 2 ? { ...tab, icon: "mail" } : { ...tab, icon: iconSVG }
 );
 
 const tabsNotificationIcon = tabsNotification.map((tab) => ({ ...tab, icon: iconSVG }));

package/tabs/Tabs.test.js

@@ -73,26 +73,8 @@ describe("Tabs component tests", function () {
     expect(tabs[1].getAttribute("aria-selected")).toBe("false");
     expect(tabs[2].getAttribute("aria-selected")).toBe("true");
   });
-  test("Tabs render with correct icons", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
-        tabs: [{
-          label: "Tab-1",
-          icon: "/testIcon1.png"
-        }, {
-          label: "Tab-2",
-          icon: "/testIcon2.png"
-        }, {
-          label: "Tab-3",
-          icon: "/testIcon3.png"
-        }]
-      })),
-      getAllByRole = _render4.getAllByRole;
-    expect(getAllByRole("img")[0].getAttribute("src")).toBe("/testIcon1.png");
-    expect(getAllByRole("img")[1].getAttribute("src")).toBe("/testIcon2.png");
-    expect(getAllByRole("img")[2].getAttribute("src")).toBe("/testIcon3.png");
-  });
   test("Tabs render with disabled tab", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: [{
           label: "Tab-1",
           isDisabled: true
@@ -100,18 +82,18 @@ describe("Tabs component tests", function () {
           label: "Tab-2"
         }]
       })),
-      getAllByRole = _render5.getAllByRole;
+      getAllByRole = _render4.getAllByRole;
     expect(getAllByRole("tab")[0].hasAttribute("disabled")).toBeTruthy();
     expect(getAllByRole("tab")[1].hasAttribute("disabled")).toBeFalsy();
   });
   test("Uncontrolled tabs", function () {
     var onTabClick = jest.fn();
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: sampleTabs,
         onTabClick: onTabClick
       })),
-      getByText = _render6.getByText,
-      getAllByRole = _render6.getAllByRole;
+      getByText = _render5.getByText,
+      getAllByRole = _render5.getAllByRole;
     var tabs = getAllByRole("tab");
     var tab1 = getByText("Tab-1");
     var tab2 = getByText("Tab-2");
@@ -128,12 +110,12 @@ describe("Tabs component tests", function () {
   });
   test("Controlled tabs", function () {
     var onTabClick = jest.fn();
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: sampleTabs,
         onTabClick: onTabClick,
         activeTabIndex: 0
       })),
-      getAllByRole = _render7.getAllByRole;
+      getAllByRole = _render6.getAllByRole;
     var tabs = getAllByRole("tab");
     _react2.fireEvent.click(tabs[1]);
     expect(onTabClick).toHaveBeenCalledWith(1);
@@ -148,11 +130,11 @@ describe("Tabs component tests", function () {
   });
   test("Uncontrolled tabs should have focus in the first non-disabled tab", function () {
     var onTabClick = jest.fn();
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: sampleTabsLastTabNonDisabled,
         onTabClick: onTabClick
       })),
-      getAllByRole = _render8.getAllByRole;
+      getAllByRole = _render7.getAllByRole;
     var tabs = getAllByRole("tab");
     expect(tabs[0].hasAttribute("disabled")).toBeTruthy();
     expect(tabs[1].hasAttribute("disabled")).toBeTruthy();
@@ -163,12 +145,12 @@ describe("Tabs component tests", function () {
   });
   test("Controlled tabs with active index in disabled tab should not change focus to the first available tab", function () {
     var onTabClick = jest.fn();
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: sampleTabsLastTabNonDisabled,
         onTabClick: onTabClick,
         activeTabIndex: 0
       })),
-      getAllByRole = _render9.getAllByRole;
+      getAllByRole = _render8.getAllByRole;
     var tabs = getAllByRole("tab");
     expect(tabs[0].getAttribute("aria-selected")).toBe("true");
     expect(tabs[1].getAttribute("aria-selected")).toBe("false");
@@ -187,13 +169,13 @@ describe("Tabs component tests", function () {
   });
   test("Select tabs with keyboard event arrows", function () {
     var onTabClick = jest.fn();
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: sampleTabs,
         onTabClick: onTabClick
       })),
-      getByText = _render10.getByText,
-      getByRole = _render10.getByRole,
-      getAllByRole = _render10.getAllByRole;
+      getByText = _render9.getByText,
+      getByRole = _render9.getByRole,
+      getAllByRole = _render9.getAllByRole;
     var tabList = getByRole("tablist");
     var tab1 = getByText("Tab-1");
     var tabs = getAllByRole("tab");
@@ -265,13 +247,13 @@ describe("Tabs component tests", function () {
   });
   test("Skip disabled tab with keyboard event arrows", function () {
     var onTabClick = jest.fn();
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tabs["default"], {
         tabs: sampleTabsMiddleDisabled,
         onTabClick: onTabClick
       })),
-      getByText = _render11.getByText,
-      getByRole = _render11.getByRole,
-      getAllByRole = _render11.getAllByRole;
+      getByText = _render10.getByText,
+      getByRole = _render10.getByRole,
+      getAllByRole = _render10.getAllByRole;
     var tabList = getByRole("tablist");
     var tab1 = getByText("Tab-1");
     var tabs = getAllByRole("tab");

package/tabs/types.d.ts

@@ -27,7 +27,7 @@ export type TabLabelProps = TabCommonProps & {
      */
     label: string;
     /**
-     * Element or path used as the icon that will be displayed in the tab.
+     * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
     icon?: string | SVG;
 };
@@ -37,7 +37,7 @@ export type TabIconProps = TabCommonProps & {
      */
     label?: string;
     /**
-     * Element or path used as the icon that will be displayed in the tab.
+     * Material Symbol name or SVG element used as the icon that will be displayed in the tab.
      */
     icon: string | SVG;
 };

package/tag/Tag.accessibility.test.js

@@ -0,0 +1,69 @@
+"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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Tag = _interopRequireDefault(require("./Tag.tsx"));
+var icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  viewBox: "0 0 24 24",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+}));
+describe("Tag 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(_Tag["default"], {
+            label: "tag-test",
+            icon: icon,
+            iconBgColor: "#fabada",
+            margin: "medium",
+            size: "medium",
+            labelPosition: "before"
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.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 new-window 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(_Tag["default"], {
+            label: "tag-test",
+            icon: icon,
+            iconBgColor: "#fabada",
+            margin: "medium",
+            size: "medium",
+            labelPosition: "before",
+            newWindow: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/tag/Tag.js

@@ -15,9 +15,10 @@ var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _utils = require("../common/utils");
 var _Box = _interopRequireDefault(require("../box/Box"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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; }
+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 && {}.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 DxcTag = function DxcTag(_ref) {
   var icon = _ref.icon,
     _ref$label = _ref.label,
@@ -48,8 +49,8 @@ var DxcTag = function DxcTag(_ref) {
     shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
   }, /*#__PURE__*/_react["default"].createElement(TagContent, null, labelPosition === "before" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     iconBgColor: iconBgColor
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TagIcon, {
-    src: icon
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), labelPosition === "after" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label)));
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.tag
@@ -114,7 +115,7 @@ var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateOb
 var StyledButton = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border-radius: 4px;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font-family: inherit;\n  width: 100%;\n  :focus {\n    outline: 2px solid ", ";\n  }\n"])), function (props) {
   return props.theme.focusColor;
 });
-var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_ref8) {
+var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  font-size: 24px;\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_ref8) {
   var iconBgColor = _ref8.iconBgColor;
   return iconBgColor;
 }, function (props) {
@@ -128,8 +129,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templ
 }, function (props) {
   return props.theme.iconHeight;
 });
-var TagIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
-var TagLabel = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  flex-grow: 1;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"])), function (props) {
+var TagLabel = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  flex-grow: 1;\n  text-align: center;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n"])), function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.fontSize;

package/tag/Tag.stories.tsx

@@ -47,14 +47,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With label and icon" theme="light" level={4} />
-      <DxcTag
-        label="Tag"
-        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
-      />
+      <DxcTag label="Tag" icon="person" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With right icon" theme="light" level={4} />
-      <DxcTag label="Tag" icon={icon} labelPosition="before" />
+      <DxcTag label="Tag" icon="group" labelPosition="before" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Icon background color" theme="light" level={4} />
@@ -67,7 +64,7 @@ export const Chromatic = () => (
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="With action focused" theme="light" level={4} />
       <DxcTag
-        icon={icon}
+        icon="done"
         label="Tag"
         onClick={() => {
           console.log("click");
@@ -110,7 +107,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size" theme="light" level={4} />
-      <DxcTag label="Medium size medium s" size="medium" icon={icon} />
+      <DxcTag label="Medium size medium s" size="medium" icon="person" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size with ellipsis" theme="light" level={4} />

package/tag/Tag.test.js

@@ -20,29 +20,21 @@ describe("Tag component tests", function () {
       getByText = _render2.getByText;
     expect(getByText("tag-test")).toBeTruthy();
   });
-  test("Tag renders with correct icon", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
-        label: "tag-test",
-        icon: "/test-icon.jpg"
-      })),
-      getByRole = _render3.getByRole;
-    expect(getByRole("img").getAttribute("src")).toBe("/test-icon.jpg");
-  });
   test("Tag renders with link href", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
         label: "tag-test",
         linkHref: "/test/page"
       })),
-      getByRole = _render4.getByRole;
+      getByRole = _render3.getByRole;
     expect(getByRole("link").getAttribute("href")).toBe("/test/page");
   });
   test("Call correct function on click", function () {
     var onClick = jest.fn();
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
         label: "tag-test",
         onClick: onClick
       })),
-      getByText = _render5.getByText;
+      getByText = _render4.getByText;
     _react2.fireEvent.click(getByText("tag-test"));
     expect(onClick).toHaveBeenCalled();
   });

package/tag/types.d.ts

@@ -47,7 +47,7 @@ type TagCommonProps = {
 };
 type TagLabelProps = TagCommonProps & {
     /**
-     * Element or path used as the icon that will be placed next to the label.
+     * Material Symbol name or SVG element used as the icon that will be placed next to the label.
      */
     icon?: string | SVG;
     /**
@@ -57,7 +57,7 @@ type TagLabelProps = TagCommonProps & {
 };
 type TagIconProps = TagCommonProps & {
     /**
-     * Element or path used as the icon that will be placed next to the label.
+     * Material Symbol name or SVG element used as the icon that will be placed next to the label.
      */
     icon: string | SVG;
     /**

package/text-input/Suggestion.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 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; }
+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 && {}.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 transformSpecialChars = function transformSpecialChars(str) {
   var specialCharsRegex = /[\\*()\[\]{}+?/]/;
   var value = str;

package/text-input/Suggestions.js

@@ -10,12 +10,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 var _Suggestion = _interopRequireDefault(require("./Suggestion"));
-var _Icons = _interopRequireDefault(require("./Icons"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
+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 && {}.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 Suggestions = function Suggestions(_ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -27,7 +26,6 @@ var Suggestions = function Suggestions(_ref) {
     suggestionOnClick = _ref.suggestionOnClick,
     styles = _ref.styles;
   var translatedLabels = (0, _useTranslatedLabels["default"])();
-  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var listboxRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     var _listboxRef$current, _visualFocusedOptionE;
@@ -45,12 +43,12 @@ var Suggestions = function Suggestions(_ref) {
     },
     ref: listboxRef,
     role: "listbox",
-    backgroundType: backgroundType,
-    style: styles
+    style: styles,
+    "aria-label": "Suggestions"
   }, !isSearching && !searchHasErrors && suggestions.length > 0 && suggestions.map(function (suggestion, index) {
     return /*#__PURE__*/_react["default"].createElement(_Suggestion["default"], {
-      key: "suggestion-".concat(index),
-      id: "suggestion-".concat(index),
+      key: "".concat(id, "-suggestion-").concat(index),
+      id: "".concat(id, "-suggestion-").concat(index),
       value: value,
       onClick: suggestionOnClick,
       suggestion: suggestion,
@@ -58,14 +56,21 @@ var Suggestions = function Suggestions(_ref) {
       visuallyFocused: visualFocusIndex === index,
       highlighted: highlightedSuggestions
     });
-  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, translatedLabels.textInput.searchingMessage), searchHasErrors && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
-    backgroundType: backgroundType
-  }, _Icons["default"].error), translatedLabels.textInput.fetchingDataErrorMessage));
+  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, {
+    role: "option"
+  }, translatedLabels.textInput.searchingMessage), searchHasErrors && /*#__PURE__*/_react["default"].createElement("span", {
+    role: "option"
+  }, /*#__PURE__*/_react["default"].createElement(SuggestionsError, {
+    role: "alert",
+    "aria-live": "assertive"
+  }, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_error"
+  })), translatedLabels.textInput.fetchingDataErrorMessage)));
 };
 var SuggestionsContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 304px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 0.25rem 0;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
 }, function (props) {
-  return props.error ? props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
+  return props.error ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
 }, function (props) {
   return props.theme.listOptionFontColor;
 }, function (props) {
@@ -80,8 +85,8 @@ var SuggestionsContainer = _styledComponents["default"].ul(_templateObject || (_
 var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  color: ", ";\n  line-height: 1.715em;\n"])), function (props) {
   return props.theme.systemMessageFontColor;
 });
-var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n"])), function (props) {
-  return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
+var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  font-size: 18px;\n  color: ", ";\n"])), function (props) {
+  return props.theme.errorIconColor;
 });
 var SuggestionsError = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  align-items: center;\n  line-height: 1.715em;\n  color: ", ";\n"])), function (props) {
   return props.theme.errorListDialogFontColor;