@dxc-technology/halstack-react 0.0.0-59b9187 → 0.0.0-5a4d834

package/breadcrumbs/dropdownTheme.d.ts

@@ -0,0 +1,53 @@
+declare const _default: {
+    dropdown: {
+        buttonIconSize: string;
+        buttonPaddingTop: string;
+        buttonPaddingBottom: string;
+        buttonPaddingLeft: string;
+        buttonPaddingRight: string;
+        buttonHeight: string;
+        buttonBorderRadius: string;
+        buttonBorderColor: string;
+        optionFontSize: string;
+        optionPaddingTop: string;
+        optionPaddingBottom: string;
+        optionPaddingLeft: string;
+        optionPaddingRight: string;
+        buttonBackgroundColor: string;
+        hoverButtonBackgroundColor: string;
+        activeButtonBackgroundColor: string;
+        buttonFontFamily: string;
+        buttonFontSize: string;
+        buttonFontStyle: string;
+        buttonFontWeight: string;
+        buttonFontColor: string;
+        buttonIconSpacing: string;
+        buttonIconColor: string;
+        buttonBorderStyle: string;
+        buttonBorderThickness: string;
+        disabledColor: string;
+        disabledButtonBackgroundColor: string;
+        disabledButtonBorderColor: string;
+        optionBackgroundColor: string;
+        hoverOptionBackgroundColor: string;
+        activeOptionBackgroundColor: string;
+        optionFontFamily: string;
+        optionFontStyle: string;
+        optionFontWeight: string;
+        optionFontColor: string;
+        optionIconSize: string;
+        optionIconSpacing: string;
+        optionIconColor: string;
+        caretIconSize: string;
+        caretIconColor: string;
+        caretIconSpacing: string;
+        borderRadius: string;
+        borderStyle: string;
+        borderThickness: string;
+        borderColor: string;
+        scrollBarThumbColor: string;
+        scrollBarTrackColor: string;
+        focusColor: string;
+    };
+};
+export default _default;

package/breadcrumbs/dropdownTheme.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _default = exports["default"] = {
+  dropdown: {
+    // Breadcrumbs tokens
+    buttonIconSize: _coreTokens["default"].spacing_16,
+    buttonPaddingTop: _coreTokens["default"].spacing_4,
+    buttonPaddingBottom: _coreTokens["default"].spacing_4,
+    buttonPaddingLeft: _coreTokens["default"].spacing_4,
+    buttonPaddingRight: _coreTokens["default"].spacing_4,
+    buttonHeight: "24px",
+    buttonBorderRadius: "2px",
+    buttonBorderColor: _coreTokens["default"].color_transparent,
+    optionFontSize: "14px",
+    optionPaddingTop: _coreTokens["default"].spacing_0,
+    optionPaddingBottom: _coreTokens["default"].spacing_0,
+    optionPaddingLeft: _coreTokens["default"].spacing_16,
+    optionPaddingRight: _coreTokens["default"].spacing_16,
+    // Dropdown tokens
+    buttonBackgroundColor: _coreTokens["default"].color_white,
+    hoverButtonBackgroundColor: _coreTokens["default"].color_grey_100,
+    activeButtonBackgroundColor: _coreTokens["default"].color_grey_300,
+    buttonFontFamily: _coreTokens["default"].type_sans,
+    buttonFontSize: _coreTokens["default"].type_scale_03,
+    buttonFontStyle: _coreTokens["default"].type_normal,
+    buttonFontWeight: _coreTokens["default"].type_regular,
+    buttonFontColor: _coreTokens["default"].color_black,
+    buttonIconSpacing: "10px",
+    buttonIconColor: _coreTokens["default"].color_black,
+    buttonBorderStyle: _coreTokens["default"].border_none,
+    buttonBorderThickness: _coreTokens["default"].border_width_0,
+    disabledColor: _coreTokens["default"].color_grey_500,
+    disabledButtonBackgroundColor: _coreTokens["default"].color_transparent,
+    disabledButtonBorderColor: _coreTokens["default"].color_transparent,
+    optionBackgroundColor: _coreTokens["default"].color_white,
+    hoverOptionBackgroundColor: _coreTokens["default"].color_grey_100,
+    activeOptionBackgroundColor: _coreTokens["default"].color_grey_300,
+    optionFontFamily: _coreTokens["default"].type_sans,
+    optionFontStyle: _coreTokens["default"].type_normal,
+    optionFontWeight: _coreTokens["default"].type_regular,
+    optionFontColor: _coreTokens["default"].color_black,
+    optionIconSize: "20px",
+    optionIconSpacing: "10px",
+    optionIconColor: _coreTokens["default"].color_black,
+    caretIconSize: "24px",
+    caretIconColor: _coreTokens["default"].color_black,
+    caretIconSpacing: "12px",
+    borderRadius: "4px",
+    borderStyle: _coreTokens["default"].border_none,
+    borderThickness: _coreTokens["default"].border_width_0,
+    borderColor: _coreTokens["default"].color_transparent,
+    scrollBarThumbColor: _coreTokens["default"].color_grey_700,
+    scrollBarTrackColor: _coreTokens["default"].color_grey_300,
+    focusColor: _coreTokens["default"].color_blue_600
+  }
+};

package/breadcrumbs/types.d.ts

@@ -0,0 +1,40 @@
+type Item = {
+    href?: string;
+    label: string;
+};
+type Props = {
+    /**
+     * Provides a label that describes the type of navigation enabled by
+     * the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of objects representing the items of the breadcrumbs.
+     */
+    items: Item[];
+    /**
+     * Number of items before showing a collapsed version of the
+     * breadcrumbs. It can't be lower than two (root/collapsed action and
+     * current page).
+     */
+    itemsBeforeCollapse?: number;
+    /**
+     * Callback for custom navigation with third-party libraries such as
+     * Next ('useRouter') or React Router ('useNavigate').
+     * This function will be called when an item is clicked,
+     * receiving its 'href' as a parameter.
+     * @param href
+     * @returns
+     */
+    onItemClick?: (href: string) => void;
+    /**
+     * When items are collapsed, whether the root item should always be
+     * displayed or not.
+     */
+    showRoot?: boolean;
+};
+export type ItemPropsType = Item & {
+    isCurrentPage?: boolean;
+    onClick?: (href: string) => void;
+};
+export default Props;

package/breadcrumbs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/bulleted-list/BulletedList.accessibility.test.d.ts

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

package/bulleted-list/BulletedList.accessibility.test.js

@@ -5,8 +5,20 @@ 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 _axeHelper = require("../../test/accessibility/axe-helper.js");
 var _BulletedList = _interopRequireDefault(require("./BulletedList"));
+var icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+}));
 describe("Bulleted List component accessibility tests", function () {
   it("Should not have basic accessibility issues for disc mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;
@@ -17,7 +29,7 @@ describe("Bulleted List component accessibility tests", function () {
             type: "disc"
           }, /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Code"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Usage"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Specifications"))), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -37,7 +49,7 @@ describe("Bulleted List component accessibility tests", function () {
             icon: icon
           }, /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Code"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Usage"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Specifications"))), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -56,7 +68,7 @@ describe("Bulleted List component accessibility tests", function () {
             type: "number"
           }, /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Code"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Usage"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Specifications"))), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -75,7 +87,7 @@ describe("Bulleted List component accessibility tests", function () {
             type: "square"
           }, /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Code"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Usage"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Specifications"))), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();
@@ -94,7 +106,7 @@ describe("Bulleted List component accessibility tests", function () {
             type: "circle"
           }, /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Code"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Usage"), /*#__PURE__*/_react["default"].createElement(_BulletedList["default"].Item, null, "Specifications"))), container = _render5.container;
           _context5.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context5.sent;
           expect(results).toHaveNoViolations();

package/bulleted-list/BulletedList.js

@@ -15,7 +15,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 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 BulletedListItem = function BulletedListItem(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);

package/button/Button.accessibility.test.d.ts

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

package/button/Button.accessibility.test.js

@@ -5,8 +5,8 @@ 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 _Button = _interopRequireDefault(require("./Button.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Button = _interopRequireDefault(require("./Button"));
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   width: "24px",
   height: "24px",
@@ -35,7 +35,7 @@ describe("Button component accessibility tests", function () {
             type: "button"
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -62,7 +62,7 @@ describe("Button component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -88,7 +88,7 @@ describe("Button component accessibility tests", function () {
             type: "button"
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -114,7 +114,7 @@ describe("Button component accessibility tests", function () {
             type: "button"
           })), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();

package/button/Button.js

@@ -16,7 +16,7 @@ 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 DxcButton = function DxcButton(_ref) {
   var _ref$label = _ref.label,
     label = _ref$label === void 0 ? "" : _ref$label,

package/button/Button.stories.tsx

@@ -87,15 +87,15 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Only icon" theme="light" level={4} />
-      <DxcButton icon="filled_bottom_app_bar" />
+      <DxcButton icon="filled_bottom_app_bar" title="Button with no label" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Big icon (SVG)" theme="light" level={4} />
-      <DxcButton icon={facebookIcon} />
+      <DxcButton icon={facebookIcon} title="Facebook" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small icon (SVG)" theme="light" level={4} />
-      <DxcButton icon={smallIcon} />
+      <DxcButton icon={smallIcon} title="Button with no label" />
     </ExampleContainer>
     <Title title="Secondary" theme="light" level={2} />
     <ExampleContainer>

package/button/Button.test.d.ts

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

package/button/Button.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 _Button = _interopRequireDefault(require("./Button.tsx"));
+var _Button = _interopRequireDefault(require("./Button"));
 describe("Button component tests", function () {
   test("Button renders with correct text", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/card/Card.accessibility.test.d.ts

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

package/card/Card.accessibility.test.js

@@ -5,8 +5,8 @@ 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 _Card = _interopRequireDefault(require("./Card.tsx"));
+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;
@@ -23,7 +23,7 @@ describe("Card component accessibility tests", function () {
             imageCover: true
           }, "test-card")), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();

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

@@ -5,8 +5,8 @@ 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 _Checkbox = _interopRequireDefault(require("./Checkbox.tsx"));
+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;
@@ -24,7 +24,7 @@ describe("Checkbox component accessibility tests", function () {
             optional: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -49,7 +49,7 @@ describe("Checkbox component accessibility tests", function () {
             readOnly: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -74,7 +74,7 @@ describe("Checkbox component accessibility tests", function () {
             disabled: true
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();

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

@@ -5,8 +5,8 @@ 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 _Chip = _interopRequireDefault(require("./Chip.tsx"));
+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",
@@ -31,7 +31,7 @@ describe("Chip component accessibility tests", function () {
             label: "Chip"
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -54,7 +54,7 @@ describe("Chip component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/chip/Chip.js

@@ -16,7 +16,7 @@ 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,
@@ -35,6 +35,7 @@ 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,
@@ -47,6 +48,7 @@ var DxcChip = function DxcChip(_ref) {
     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,

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";

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"], {

package/common/coreTokens.d.ts

@@ -92,7 +92,6 @@ export type CoreColorTokens = keyof typeof CoreColorTokens;
 declare const CoreTokens: {
     inherit: string;
     type_sans: string;
-    type_scale_root: string;
     type_scale_08: string;
     type_scale_07: string;
     type_scale_06: string;