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

package/alert/Alert.js

@@ -14,72 +14,10 @@ var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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 alertIcons = {
-  close: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "20",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  })),
-  info: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
-  })),
-  success: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
-  })),
-  warning: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
-  })),
-  error: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "23",
-    height: "23",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z",
-    fill: "currentColor"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }))
-};
 var DxcAlert = function DxcAlert(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? "info" : _ref$type,
@@ -112,10 +50,20 @@ var DxcAlert = function DxcAlert(_ref) {
     size: size
   }, /*#__PURE__*/_react["default"].createElement(AlertInfo, null, /*#__PURE__*/_react["default"].createElement(AlertIcon, {
     type: type
-  }, type === "info" && alertIcons.info || type === "confirm" && alertIcons.success || type === "warning" && alertIcons.warning || type === "error" && alertIcons.error), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, null, getTypeText()), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), onClose && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
+  }, type === "info" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_info"
+  }) || type === "confirm" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_check_circle"
+  }) || type === "warning" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_warning"
+  }) || type === "error" && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_cancel"
+  })), /*#__PURE__*/_react["default"].createElement(AlertText, null, /*#__PURE__*/_react["default"].createElement(AlertTitle, null, getTypeText()), inlineText && inlineText !== "" && "-", /*#__PURE__*/_react["default"].createElement(AlertInlineText, null, inlineText)), onClose && /*#__PURE__*/_react["default"].createElement(AlertCloseAction, {
     onClick: onClose,
     tabIndex: tabIndex
-  }, alertIcons.close)), children && /*#__PURE__*/_react["default"].createElement(AlertContent, null, children))));
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "close"
+  }))), children && /*#__PURE__*/_react["default"].createElement(AlertContent, null, children))));
 };
 var sizes = {
   small: "280px",
@@ -229,7 +177,7 @@ var AlertInlineText = _styledComponents["default"].div(_templateObject6 || (_tem
 }, function (props) {
   return props.theme.inlineTextFontColor;
 });
-var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 12px;\n  padding-right: ", ";\n  padding-left: ", ";\n\n  color: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 12px;\n  padding-right: ", ";\n  padding-left: ", ";\n\n  color: ", ";\n\n  font-size: ", ";\n"])), function (props) {
   return props.theme.iconPaddingRight;
 }, function (props) {
   return props.theme.iconPaddingLeft;
@@ -237,14 +185,12 @@ var AlertIcon = _styledComponents["default"].span(_templateObject7 || (_template
   return props.type === "info" && props.theme.infoIconColor || props.type === "confirm" && props.theme.successIconColor || props.type === "warning" && props.theme.warningIconColor || props.type === "error" && props.theme.errorIconColor;
 }, function (props) {
   return props.theme.iconSize;
-}, function (props) {
-  return props.theme.iconSize;
 });
 var AlertText = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex-grow: 1;\n  align-items: center;\n  overflow: hidden;\n"])));
 var AlertContent = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  flex: 1 1 auto;\n  padding: ", ";\n  overflow-y: auto;\n"])), function (props) {
   return "".concat(props.theme.contentPaddingTop, " ").concat(props.theme.contentPaddingRight, " ").concat(props.theme.contentPaddingBottom, " ").concat(props.theme.contentPaddingLeft);
 });
-var AlertCloseAction = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  margin-left: 12px;\n  background-color: transparent;\n  color: #000000;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+var AlertCloseAction = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  justify-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 20px;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  margin-left: 12px;\n  background-color: transparent;\n  color: #000000;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus,\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.hoverActionBackgroundColor;
 }, function (props) {
   return props.theme.focusActionBorderColor;

package/badge/Badge.accessibility.test.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Badge = _interopRequireDefault(require("./Badge.tsx"));
+var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var icon = /*#__PURE__*/_react["default"].createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 17H13V11H11V17ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 9H13V7H11V9Z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M11 7H13V9H11V7ZM11 11H13V17H11V11Z"
+}), /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
+}));
+describe("Badge component accessibility tests", function () {
+  it("Should not have basic accessibility issues for contextual mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "blue",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "green",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "grey",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "orange",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "purple",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "red",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            color: "yellow",
+            mode: "contextual",
+            label: "Label",
+            size: "small",
+            icon: icon,
+            title: "Badge1"
+          }))), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for notification mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            mode: "notification",
+            label: 100,
+            size: "large",
+            icon: icon,
+            notificationLimit: 99,
+            title: "Badge2"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            mode: "notification",
+            label: 50,
+            size: "large",
+            icon: icon,
+            notificationLimit: 99,
+            title: "Badge2"
+          }), /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+            mode: "notification",
+            label: 1000000,
+            size: "large",
+            icon: icon,
+            notificationLimit: 99999999,
+            title: "Badge2"
+          }))), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

package/badge/Badge.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _coreTokens = _interopRequireDefault(require("../common/coreTokens"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 var contextualColorMap = {
   grey: {
@@ -111,9 +112,8 @@ var DxcBadge = function DxcBadge(_ref2) {
     alignItems: "center"
   }, icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     size: size
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: icon,
-    alt: title
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: icon
   }) : icon), /*#__PURE__*/_react["default"].createElement(Label, {
     label: label,
     notificationLimit: notificationLimit,
@@ -148,7 +148,9 @@ var BadgeContainer = _styledComponents["default"].div(_templateObject || (_templ
 }, function (props) {
   return props.label ? getPadding(props.mode, props.size) : "";
 });
-var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  img,\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  font-size: ", ";\n\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+  return sizeMap[props.size].iconSize;
+}, function (props) {
   return sizeMap[props.size].iconSize;
 }, function (props) {
   return sizeMap[props.size].iconSize;

package/badge/Badge.stories.tsx

@@ -63,14 +63,14 @@ export const Chromatic = () => (
       <Title title="Medium" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge label="Label" />
-        <DxcBadge label="Label" icon={icon} />
+        <DxcBadge label="Label" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge label="Label" size="large" />
-        <DxcBadge label="Label" size="large" icon={icon} />
+        <DxcBadge label="Label" size="large" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <Title title="Blue" theme="light" level={3} />
@@ -78,7 +78,7 @@ export const Chromatic = () => (
       <Title title="Small" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="blue" label="Label" size="small" />
-        <DxcBadge color="blue" label="Label" size="small" icon={icon} />
+        <DxcBadge color="blue" label="Label" size="small" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
@@ -100,14 +100,14 @@ export const Chromatic = () => (
       <Title title="Small" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="green" label="Label" size="small" />
-        <DxcBadge color="green" label="Label" size="small" icon={icon} />
+        <DxcBadge color="green" label="Label" size="small" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="green" label="Label" />
-        <DxcBadge color="green" label="Label" icon={icon} />
+        <DxcBadge color="green" label="Label" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
@@ -123,7 +123,7 @@ export const Chromatic = () => (
       <Title title="Small" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="orange" label="Label" size="small" />
-        <DxcBadge color="orange" label="Label" size="small" icon={icon} />
+        <DxcBadge color="orange" label="Label" size="small" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
@@ -145,14 +145,14 @@ export const Chromatic = () => (
       <Title title="Small" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="red" label="Label" size="small" />
-        <DxcBadge color="red" label="Label" size="small" icon={icon} />
+        <DxcBadge color="red" label="Label" size="small" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="red" label="Label" />
-        <DxcBadge color="red" label="Label" icon={icon} />
+        <DxcBadge color="red" label="Label" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
@@ -167,7 +167,7 @@ export const Chromatic = () => (
       <Title title="Small" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="yellow" label="Label" size="small" />
-        <DxcBadge color="yellow" label="Label" size="small" icon={icon} />
+        <DxcBadge color="yellow" label="Label" size="small" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>
@@ -181,7 +181,7 @@ export const Chromatic = () => (
       <Title title="Large" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="yellow" label="Label" size="large" />
-        <DxcBadge color="yellow" label="Label" size="large" icon={icon} />
+        <DxcBadge color="yellow" label="Label" size="large" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <Title title="Purple" theme="light" level={3} />
@@ -189,7 +189,7 @@ export const Chromatic = () => (
       <Title title="Small" theme="light" level={4} />
       <DxcFlex gap="3rem" alignItems="center">
         <DxcBadge color="purple" label="Label" size="small" />
-        <DxcBadge color="purple" label="Label" size="small" icon={icon} />
+        <DxcBadge color="purple" label="Label" size="small" icon="done" />
       </DxcFlex>
     </ExampleContainer>
     <ExampleContainer>

package/badge/types.d.ts

@@ -42,7 +42,7 @@ export type CommonProps = {
      */
     title?: string;
     /**
-     * Element or path used as the icon that will be placed next to the badge label in contextual mode.
+     *  Material Symbol name or SVG element used as the icon that will be placed next to the badge label in contextual mode.
      */
     icon?: string | SVG;
     /**

package/box/Box.accessibility.test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _Box = _interopRequireDefault(require("../box/Box.tsx"));
+describe("Box 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(_Box["default"], {
+            shadowDepth: 0,
+            margin: "medium",
+            size: "small",
+            display: "flex"
+          }, "Box")), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+});

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

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _BulletedList = _interopRequireDefault(require("./BulletedList"));
+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;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_BulletedList["default"], {
+            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);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for icon 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(_BulletedList["default"], {
+            type: "icon",
+            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);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for number 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(_BulletedList["default"], {
+            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);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it("Should not have basic accessibility issues for square mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, container, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_BulletedList["default"], {
+            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);
+        case 3:
+          results = _context4.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  it("Should not have basic accessibility issues for circle mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var _render5, container, results;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_BulletedList["default"], {
+            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);
+        case 3:
+          results = _context5.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+});

package/bulleted-list/BulletedList.js

@@ -12,6 +12,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _Flex = _interopRequireDefault(require("../flex/Flex"));
 var _Typography = _interopRequireDefault(require("../typography/Typography"));
 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; }
@@ -35,8 +36,8 @@ var DxcBulletedList = function DxcBulletedList(_ref2) {
   }, _react["default"].Children.map(children, function (child, index) {
     return /*#__PURE__*/_react["default"].createElement(ListItem, null, /*#__PURE__*/_react["default"].createElement(GeneralContent, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       color: colorsTheme.bulletedList.fontColor
-    }, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Square, null)) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Circle, null)) : type === "icon" ? /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Icon, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-      src: icon
+    }, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Square, null)) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Circle, null)) : type === "icon" ? /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Icon, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+      icon: icon
     }) : icon)) : /*#__PURE__*/_react["default"].createElement(Bullet, null, /*#__PURE__*/_react["default"].createElement(Disc, null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
       color: colorsTheme.bulletedList.fontColor
     }, child)));
@@ -46,10 +47,12 @@ DxcBulletedList.Item = BulletedListItem;
 var ListContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ul,\n  ol {\n    padding: 0;\n    margin: 0;\n  }\n"])));
 var Bullet = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-self: flex-start;\n  align-items: center;\n  height: 1.5rem;\n"])));
 var GeneralContent = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n"])));
-var Icon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  width: auto;\n  margin-right: ", ";\n  align-content: center;\n  color: ", ";\n\n  svg,\n  img {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
+var Icon = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  width: auto;\n  margin-right: ", ";\n  align-content: center;\n  color: ", ";\n\n  font-size: ", ";\n  svg {\n    height: ", ";\n    width: ", ";\n  }\n"])), function (props) {
   return props.theme.bulletMarginRight;
 }, function (props) {
   return props.theme.fontColor;
+}, function (props) {
+  return props.theme.bulletIconWidth;
 }, function (props) {
   return props.theme.bulletIconHeight;
 }, function (props) {

package/bulleted-list/BulletedList.stories.tsx

@@ -26,7 +26,7 @@ export const Chromatic = () => (
         <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>
       </DxcBulletedList>
       <Title title="Icon list (path)" level={4} />
-      <DxcBulletedList type="icon" icon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg">
+      <DxcBulletedList type="icon" icon="filled_check_circle">
         <DxcBulletedList.Item>Code</DxcBulletedList.Item>
         <DxcBulletedList.Item>Usage</DxcBulletedList.Item>
         <DxcBulletedList.Item>Specifications</DxcBulletedList.Item>