@dxc-technology/halstack-react 0.0.0-509f1eb → 0.0.0-50acff4

package/card/Card.accessibility.test.js

@@ -0,0 +1,36 @@
+"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 _Card = _interopRequireDefault(require("./Card"));
+describe("Card 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(_Card["default"], {
+            linkHref: "https://www.dxc.com",
+            imageSrc: "https://picsum.photos/id/1022/200/300",
+            imagePosition: "after",
+            imagePadding: "xsmall",
+            margin: "medium",
+            imageBgColor: "yellow",
+            imageCover: true
+          }, "test-card")), 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);
+  })));
+});

package/card/Card.js

@@ -16,7 +16,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Box = _interopRequireDefault(require("../box/Box"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 DxcCard = function DxcCard(_ref) {
   var imageSrc = _ref.imageSrc,
     _ref$imageBgColor = _ref.imageBgColor,
@@ -64,7 +64,8 @@ var DxcCard = function DxcCard(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(TagImage, {
     imagePadding: imagePadding,
     imageCover: imageCover,
-    src: imageSrc
+    src: imageSrc,
+    alt: "Card image"
   })), /*#__PURE__*/_react["default"].createElement(CardContent, null, children)))));
 };
 var Card = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  text-decoration: none;\n  ", "\n"])), function (_ref2) {

package/card/Card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcCard from "./Card";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 
 export default {
   title: "Card",

package/card/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/card/Card.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Card = _interopRequireDefault(require("./Card.tsx"));
+var _Card = _interopRequireDefault(require("./Card"));
 describe("Card component tests", function () {
   test("Card renders with correct content", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Card["default"], null, "test-card")),

package/checkbox/Checkbox.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/Checkbox.accessibility.test.js

@@ -0,0 +1,87 @@
+"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 _Checkbox = _interopRequireDefault(require("./Checkbox"));
+describe("Checkbox 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(_Checkbox["default"], {
+            label: "Checkbox",
+            labelPosition: "after",
+            name: "name",
+            size: "fitContent",
+            value: "checkboxValue",
+            margin: "small",
+            defaultChecked: true,
+            optional: true
+          })), 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 read-only 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(_Checkbox["default"], {
+            label: "Checkbox",
+            labelPosition: "after",
+            name: "name",
+            size: "fitContent",
+            value: "checkboxValue",
+            margin: "small",
+            readOnly: 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);
+  })));
+  it("Should not have basic accessibility issues for disabled 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(_Checkbox["default"], {
+            label: "Checkbox",
+            labelPosition: "after",
+            name: "name",
+            size: "fitContent",
+            value: "checkboxValue",
+            margin: "small",
+            disabled: true
+          })), container = _render3.container;
+          _context3.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+});

package/checkbox/Checkbox.js

@@ -13,16 +13,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
-var _uuid = require("uuid");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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 checkedIcon = /*#__PURE__*/_react["default"].createElement("svg", {
   fill: "currentColor",
   focusable: "false",
-  "aria-hidden": "true",
   viewBox: "0 0 24 24"
 }, /*#__PURE__*/_react["default"].createElement("path", {
   d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
@@ -50,13 +48,11 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     size = _ref$size === void 0 ? "fitContent" : _ref$size,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState = (0, _react.useState)("label-checkbox-".concat((0, _uuid.v4)())),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-    labelId = _useState2[0];
-  var _useState3 = (0, _react.useState)(defaultChecked),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    innerChecked = _useState4[0],
-    setInnerChecked = _useState4[1];
+  var labelId = "label-checkbox-".concat((0, _react.useId)());
+  var _useState = (0, _react.useState)(defaultChecked),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    innerChecked = _useState2[0],
+    setInnerChecked = _useState2[1];
   var checkboxRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
@@ -91,12 +87,12 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   }, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     id: labelId,
     disabled: disabled,
-    labelPosition: labelPosition
+    labelPosition: labelPosition,
+    "aria-label": label
   }, label, optional && " ".concat(translatedLabels.formFields.optionalLabel)), /*#__PURE__*/_react["default"].createElement(ValueInput, {
     type: "checkbox",
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
     name: name,
-    "aria-hidden": "true",
     value: value,
     disabled: disabled,
     readOnly: true
@@ -108,7 +104,8 @@ var DxcCheckbox = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     "aria-disabled": disabled,
     "aria-readonly": readOnly,
     "aria-required": !disabled && !optional,
-    "aria-labelledby": labelId,
+    "aria-labelledby": label ? labelId : undefined,
+    "aria-label": label ? undefined : "Checkbox",
     checked: checked !== null && checked !== void 0 ? checked : innerChecked,
     disabled: disabled,
     readOnly: readOnly,

package/checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/checkbox/Checkbox.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 describe("Checkbox component tests", function () {
   test("Checkbox renders with correct aria-labelledby and aria-required", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {

package/chip/Chip.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/chip/Chip.accessibility.test.js

@@ -0,0 +1,67 @@
+"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 _Chip = _interopRequireDefault(require("./Chip"));
+var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  version: "1.1",
+  x: "0px",
+  y: "0px",
+  width: "438.536px",
+  height: "438.536px",
+  viewBox: "0 0 438.536 438.536",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123\nC8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126\nh274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225\nC438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402\nc0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401\nc-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+})));
+describe("Chip 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(_Chip["default"], {
+            margin: "small",
+            prefixIcon: iconSVG,
+            suffixIcon: iconSVG,
+            label: "Chip"
+          })), 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 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(_Chip["default"], {
+            margin: "small",
+            prefixIcon: iconSVG,
+            suffixIcon: iconSVG,
+            label: "Chip",
+            disabled: 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/chip/Chip.js

@@ -13,9 +13,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 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 DxcChip = function DxcChip(_ref) {
   var label = _ref.label,
     suffixIcon = _ref.suffixIcon,
@@ -34,26 +35,28 @@ var DxcChip = function DxcChip(_ref) {
     margin: margin
   }, prefixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickPrefix === "function" ? "button" : undefined,
+    "aria-label": typeof onClickPrefix === "function" ? "Prefix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickPrefix === "function" && !disabled,
     tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
     onClick: function onClick() {
       return onClickPrefix && !disabled && onClickPrefix();
     }
-  }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: prefixIcon
+  }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: prefixIcon
   }) : prefixIcon), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     disabled: disabled
   }, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickSuffix === "function" ? "button" : undefined,
+    "aria-label": typeof onClickSuffix === "function" ? "Suffix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickSuffix === "function" && !disabled,
     tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
     onClick: function onClick() {
       return !disabled && (onClickSuffix === null || onClickSuffix === void 0 ? void 0 : onClickSuffix());
     }
-  }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: suffixIcon
+  }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: suffixIcon
   }) : suffixIcon)));
 };
 var calculateWidth = function calculateWidth(margin) {
@@ -106,7 +109,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_tem
 }, function (props) {
   return props.disabled ? props.theme.disabledFontColor : props.theme.fontColor;
 });
-var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  ", "\n\n  ", "\n\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  ", "\n\n  ", "\n\n  font-size: ", ";\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
   return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 }, function (_ref3) {
   var interactuable = _ref3.interactuable;
@@ -117,5 +120,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templ
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
 });
 var _default = exports["default"] = DxcChip;

package/chip/Chip.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import DxcChip from "./Chip";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
@@ -13,7 +13,6 @@ export default {
 const iconSVG = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -64,20 +63,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
-      <DxcChip
-        label="Chip with prefix and suffix"
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled chip" theme="light" level={4} />
-      <DxcChip
-        label="Disabled"
-        disabled
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis" theme="light" level={4} />
@@ -146,22 +136,13 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Chip with prefix and suffix" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcChip
-          label="Chip"
-          prefixIcon={iconSVG}
-          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-        />
+        <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with prefix and suffix" theme="light" level={4} />
       <HalstackProvider theme={opinionatedTheme}>
-        <DxcChip
-          label="Chip"
-          disabled
-          prefixIcon={iconSVG}
-          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-        />
+        <DxcChip label="Chip" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -199,7 +180,7 @@ const ChipPrefixFocused = () => (
 const ChipSuffixFocused = () => (
   <ExampleContainer>
     <Title title="Chip with suffix" theme="light" level={4} />
-    <DxcChip label="Chip with suffix" suffixIcon="https://cdn.iconscout.com/icon/free/png-256/free-delete-2902143-2411575.png" onClickSuffix={() => {}} />
+    <DxcChip label="Chip with suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} />
   </ExampleContainer>
 );
 

package/chip/Chip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/chip/Chip.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Chip = _interopRequireDefault(require("./Chip.tsx"));
+var _Chip = _interopRequireDefault(require("./Chip"));
 describe("Chip component tests", function () {
   test("Chip renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
@@ -16,26 +16,26 @@ describe("Chip component tests", function () {
     var onClick = jest.fn();
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
         label: "Chip",
-        prefixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
+        prefixIcon: "nutrition",
         onClickPrefix: onClick
       })),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-    _react2.fireEvent.click(getByRole("img"));
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
   test("Calls correct function when clicking on suffix icon", function () {
     var onClick = jest.fn();
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
         label: "Chip",
-        suffixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
+        suffixIcon: "nutrition",
         onClickSuffix: onClick
       })),
       getByText = _render3.getByText,
       getByRole = _render3.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-    _react2.fireEvent.click(getByRole("img"));
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
 });

package/common/coreTokens.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Halstack Color Palette 
+ * Halstack Color Palette
  * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
  */
 var CoreColorTokens = {
@@ -112,10 +112,10 @@ var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(k
   return CoreColorTokens[key];
 };
 /**
- * Halstack Spacing Principles 
+ * Halstack Spacing Values
  * @link https://developer.dxc.com/halstack/next/principles/spacing/
  */
-var SpacingTokens = {
+var CoreSpacingTokens = {
   spacing_0: "0rem",
   spacing_2: "0.125rem",
   spacing_4: "0.25rem",
@@ -132,7 +132,7 @@ var SpacingTokens = {
   spacing_96: "6rem",
   spacing_112: "7rem"
 };
-var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), SpacingTokens), {}, {
+var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), CoreSpacingTokens), {}, {
   inherit: "inherit",
   // Typography
   type_sans: "Open Sans, sans-serif",