@dxc-technology/halstack-react 0.0.0-4e1277a → 0.0.0-4e3dbad

package/header/Header.js

@@ -15,25 +15,10 @@ var _Icons = require("./Icons");
 var _variables = require("../common/variables");
 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, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var closeIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  height: "24",
-  width: "24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6Z"
-}));
-var hamburgerIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  width: "24",
-  height: "24"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  d: "M3,8H21a1,1,0,0,0,0-2H3A1,1,0,0,0,3,8Zm18,8H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Zm0-5H3a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"
-}));
+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 Dropdown = function Dropdown(props) {
   return /*#__PURE__*/_react["default"].createElement(HeaderDropdown, null, /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], props));
 };
@@ -109,15 +94,20 @@ var DxcHeader = function DxcHeader(_ref2) {
     onClick: onClick
   }, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, headerLogo)), isResponsive && responsiveContent && /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(ChildContainer, null, /*#__PURE__*/_react["default"].createElement(HamburguerTrigger, {
     tabIndex: tabIndex,
-    onClick: handleMenu
-  }, hamburgerIcon, translatedLabels.header.hamburguerTitle)), /*#__PURE__*/_react["default"].createElement(ResponsiveMenu, {
+    onClick: handleMenu,
+    "aria-label": "Show options"
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "menu"
+  }), translatedLabels.header.hamburguerTitle)), /*#__PURE__*/_react["default"].createElement(ResponsiveMenu, {
     hasVisibility: isMenuVisible
   }, /*#__PURE__*/_react["default"].createElement(ResponsiveIconsContainer, null, /*#__PURE__*/_react["default"].createElement(ResponsiveLogoContainer, null, headerResponsiveLogo), /*#__PURE__*/_react["default"].createElement(CloseAction, {
     tabIndex: tabIndex,
     onClick: handleMenu,
     "aria-label": translatedLabels.header.closeIcon,
     title: translatedLabels.header.closeIcon
-  }, closeIcon)), /*#__PURE__*/_react["default"].createElement(Content, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "close"
+  }))), /*#__PURE__*/_react["default"].createElement(Content, {
     isResponsive: isResponsive,
     responsiveContent: responsiveContent,
     handleMenu: handleMenu,
@@ -161,7 +151,7 @@ var ChildContainer = _styledComponents["default"].div(_templateObject6 || (_temp
 var ContentContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  justify-content: flex-end;\n  width: calc(100% - 186px);\n  color: ", ";\n"])), function (props) {
   return props.theme.contentColor;
 });
-var HamburguerTrigger = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 54px;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  background-color: transparent;\n  :hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n  & > svg {\n    fill: ", ";\n  }\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  text-transform: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (props) {
+var HamburguerTrigger = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 54px;\n  cursor: pointer;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  background-color: transparent;\n  :hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: ", " auto 1px;\n  }\n  & > svg {\n    fill: ", ";\n  }\n  & > span {\n    font-size: 24px;\n  }\n  font-family: ", ";\n  font-style: ", ";\n  font-size: ", ";\n  text-transform: ", ";\n  font-weight: ", ";\n  color: ", ";\n"])), function (props) {
   return props.theme.hamburguerHoverColor;
 }, function (props) {
   return props.theme.hamburguerFocusColor;
@@ -200,7 +190,7 @@ var ResponsiveLogoContainer = _styledComponents["default"].div(_templateObject11
   return props.theme.logoWidth;
 });
 var ResponsiveIconsContainer = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var CloseAction = _styledComponents["default"].button(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  padding: 6px;\n  border: unset;\n  border-radius: 2px;\n  background-color: transparent;\n  cursor: pointer;\n\n  :focus,\n  :focus-visible {\n    outline: ", " auto 1px;\n  }\n\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
+var CloseAction = _styledComponents["default"].button(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: center;\n  align-content: center;\n  padding: 6px;\n  border: unset;\n  border-radius: 2px;\n  background-color: transparent;\n  cursor: pointer;\n\n  :focus,\n  :focus-visible {\n    outline: ", " auto 1px;\n  }\n  font-size: 24px;\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
   return props.theme.hamburguerFocusColor;
 });
 var MenuContent = _styledComponents["default"].div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  height: 100%;\n  color: ", ";\n"])), function (props) {

package/header/Header.stories.tsx

@@ -3,14 +3,30 @@ import DxcHeader from "./Header";
 import DxcButton from "../button/Button";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { userEvent, waitFor, within } from "@storybook/testing-library";
+import { userEvent, waitFor, within } from "@storybook/test";
 import DxcFlex from "../flex/Flex";
 import DxcLink from "../link/Link";
 import { HalstackProvider } from "../HalstackContext";
+import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { disabledRules } from "../../test/accessibility/rules/specific/header/disabledRules";
+import preview from "../../.storybook/preview";
 
 export default {
   title: "Header",
   component: DxcHeader,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, enabled: false })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+    },
+  },
 };
 
 const options: any = [

package/header/Header.test.d.ts

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

package/header/Header.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 _Header = _interopRequireDefault(require("./Header.tsx"));
+var _Header = _interopRequireDefault(require("./Header"));
 describe("Header component tests", function () {
   beforeAll(function () {
     Object.defineProperty(window, "matchMedia", {

package/header/Icons.js

@@ -12,17 +12,12 @@ var dxcLogo = exports.dxcLogo = /*#__PURE__*/_react["default"].createElement("sv
   height: "40",
   viewBox: "0 0 73 40"
 }, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {
-  id: "g10",
   transform: "translate(0)"
-}, /*#__PURE__*/_react["default"].createElement("g", {
-  id: "g12"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  id: "path14",
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
   d: "M91.613-28.177v2.514H90.231V-28.15l-2.415-3.82h1.616l1.5,2.532,1.526-2.532h1.571ZM83.9-25.555A3.15,3.15,0,0,1,80.6-28.8v-.018a3.231,3.231,0,0,1,3.294-3.262,3.442,3.442,0,0,1,2.469.865l-.87,1.054a2.311,2.311,0,0,0-1.643-.64,1.891,1.891,0,0,0-1.8,1.964v.018a1.886,1.886,0,0,0,1.9,2,2.2,2.2,0,0,0,1.3-.378v-.9H83.858v-1.2h2.729v2.738A4.071,4.071,0,0,1,83.9-25.555Zm-6.416-3.261a1.913,1.913,0,0,0-1.9-1.982A1.883,1.883,0,0,0,73.7-28.835v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,77.486-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018A3.255,3.255,0,0,1,75.6-32.078a3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,75.583-25.555Zm-9.173-.108V-31.97h1.382v5.045h3.133v1.261Zm-3.433-3.153a1.913,1.913,0,0,0-1.9-1.982,1.883,1.883,0,0,0-1.886,1.964v.018a1.913,1.913,0,0,0,1.9,1.982A1.883,1.883,0,0,0,62.978-28.8Zm-1.9,3.261a3.225,3.225,0,0,1-3.33-3.243v-.018a3.255,3.255,0,0,1,3.348-3.262,3.225,3.225,0,0,1,3.331,3.243v.018A3.255,3.255,0,0,1,61.075-25.555Zm-6.508-.108-3.043-4.009v4.009H50.159V-31.97h1.275l2.944,3.883V-31.97h1.364v6.306Zm-8.246,0v-2.531h-2.55v2.531H42.389V-31.97h1.382v2.5h2.55v-2.5H47.7v6.306Zm-8.432.108A3.178,3.178,0,0,1,34.666-28.8v-.018a3.2,3.2,0,0,1,3.276-3.262,3.237,3.237,0,0,1,2.478.973l-.88,1.018a2.315,2.315,0,0,0-1.606-.712,1.866,1.866,0,0,0-1.822,1.964v.018a1.87,1.87,0,0,0,1.822,1.982,2.265,2.265,0,0,0,1.651-.739l.88.891A3.206,3.206,0,0,1,37.889-25.555Zm-9.805-.108V-31.97h4.739v1.235H29.458v1.279h2.962v1.234H29.458V-26.9h3.411v1.234ZM24.322-30.69v5.027H22.939V-30.69H21.028v-1.28h5.206v1.28H24.322",
   transform: "translate(-21.028 65.555)",
   fill: "#010101"
 }), /*#__PURE__*/_react["default"].createElement("path", {
-  id: "path16",
   d: "M75.836-76.712a8.975,8.975,0,0,1,2.246-3.9,8.393,8.393,0,0,1,6.058-2.457h9.824v-5.67H84.139a14.611,14.611,0,0,0-10.232,4.221,14.509,14.509,0,0,0-3.076,4.536,11.913,11.913,0,0,0-.973,3.271Zm0,4.325a8.978,8.978,0,0,0,2.246,3.9,8.394,8.394,0,0,0,6.058,2.457h9.824v5.67H84.139A14.611,14.611,0,0,1,73.907-64.58a14.506,14.506,0,0,1-3.076-4.536,11.91,11.91,0,0,1-.973-3.271ZM57.522-69.832l-7.5,9.473H42.581L53.818-74.55,42.581-88.739H50.02l7.5,9.472,7.5-9.472h7.439L61.225-74.55l11.237,14.19H65.023Zm-12.336-6.88a11.935,11.935,0,0,0-.973-3.271,14.515,14.515,0,0,0-3.076-4.536A14.612,14.612,0,0,0,30.9-88.739H21.081v5.67H30.9a8.394,8.394,0,0,1,6.058,2.457,8.978,8.978,0,0,1,2.246,3.9Zm0,4.325a11.932,11.932,0,0,1-.973,3.271,14.511,14.511,0,0,1-3.076,4.536A14.611,14.611,0,0,1,30.9-60.359H21.081v-5.67H30.9a8.4,8.4,0,0,0,6.058-2.457,8.981,8.981,0,0,0,2.246-3.9h5.978",
   transform: "translate(-21.049 88.739)",
   fill: "#603494"

package/heading/Heading.accessibility.test.d.ts

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

package/heading/Heading.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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Heading = _interopRequireDefault(require("./Heading"));
+describe("Heading 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(_Heading["default"], {
+            text: "my-heading-test",
+            level: 1,
+            margin: "medium",
+            weight: "bold"
+          })), 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/heading/Heading.js

@@ -14,7 +14,7 @@ var _variables = require("../common/variables");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcHeading = function DxcHeading(_ref) {
   var _ref$level = _ref.level,
     level = _ref$level === void 0 ? 1 : _ref$level,

package/heading/Heading.test.d.ts

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

package/heading/Heading.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 _Heading = _interopRequireDefault(require("./Heading.tsx"));
+var _Heading = _interopRequireDefault(require("./Heading"));
 describe("Heading component tests", function () {
   test("Heading renders with default level", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
@@ -153,17 +153,4 @@ describe("Heading component tests", function () {
       level: 4
     })).toBeTruthy();
   });
-  test("Heading renders with level 5 and invalid as", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
-        text: "my-heading-test",
-        level: 5,
-        as: "h4afdssf"
-      })),
-      getByText = _render13.getByText,
-      getByRole = _render13.getByRole;
-    expect(getByText("my-heading-test")).toBeTruthy();
-    expect(getByRole("heading", {
-      level: 5
-    })).toBeTruthy();
-  });
 });

package/icon/Icon.accessibility.test.d.ts

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

package/icon/Icon.accessibility.test.js

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

package/icon/Icon.js

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

package/icon/Icon.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import DxcIcon from "./Icon";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { DxcTypography } from "../main";
+import DxcTypography from "../typography/Typography";
 
 export default {
   title: "Icon",
@@ -13,11 +13,13 @@ export const Chromatic = () => (
   <>
     <Title title="Icon component" theme="light" level={2} />
     <ExampleContainer>
-      <DxcIcon icon="home" />
-      <DxcIcon icon="filled_home" />
+      <DxcTypography as="p" fontSize="1.5rem">
+        <DxcIcon icon="home" />
+        <DxcIcon icon="filled_home" />
+      </DxcTypography>
     </ExampleContainer>
     <ExampleContainer>
-      <DxcTypography as="p" color="#b182e3">
+      <DxcTypography as="p" fontSize="1.5rem" color="#b182e3">
         <DxcIcon icon="home" />
         <DxcIcon icon="filled_home" />
       </DxcTypography>

package/image/Image.accessibility.test.d.ts

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

package/image/Image.accessibility.test.js

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

package/image/Image.js

@@ -13,7 +13,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
 var _templateObject;
 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 CaptionWrapper = function CaptionWrapper(_ref) {
   var condition = _ref.condition,
     wrapper = _ref.wrapper,

package/layout/ApplicationLayout.js

@@ -17,9 +17,10 @@ var _variables = require("../common/variables");
 var _Icons = _interopRequireDefault(require("./Icons"));
 var _SidenavContext = require("../sidenav/SidenavContext");
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _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 year = new Date().getFullYear();
 var Main = function Main(_ref) {
   var children = _ref.children;
@@ -84,9 +85,9 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
   var headerContent = header || defaultHeader();
   var footerContent = footer || defaultFooter();
   var main = childTypeExists(childrenArray, Main);
-  var handleResize = function handleResize() {
+  var handleResize = (0, _react.useCallback)(function () {
     setIsResponsive(window.matchMedia("(max-width: ".concat(_variables.responsiveSizes.medium, "rem)")).matches);
-  };
+  }, []);
   var handleSidenavVisibility = function handleSidenavVisibility() {
     setIsSidenavVisibleResponsive(function (isSidenavVisibleResponsive) {
       return !isSidenavVisibleResponsive;
@@ -98,7 +99,7 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
     return function () {
       window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, [handleResize]);
   (0, _react.useEffect)(function () {
     !isResponsive && setIsSidenavVisibleResponsive(false);
   }, [isResponsive]);
@@ -110,7 +111,9 @@ var DxcApplicationLayout = function DxcApplicationLayout(_ref2) {
     onClick: handleSidenavVisibility,
     "aria-label": visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle,
     title: translatedLabels.applicationLayout.visibilityToggleTitle
-  }, _Icons["default"].hamburgerIcon, visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "Menu"
+  }), visibilityToggleLabel)), /*#__PURE__*/_react["default"].createElement(BodyContainer, null, /*#__PURE__*/_react["default"].createElement(_SidenavContext.SidenavContextProvider, {
     value: setIsSidenavVisibleResponsive
   }, sidenav && (isResponsive ? isSidenavVisibleResponsive : true) && /*#__PURE__*/_react["default"].createElement(SidenavContainer, null, sidenav)), /*#__PURE__*/_react["default"].createElement(MainContainer, null, /*#__PURE__*/_react["default"].createElement(MainContentContainer, null, main), footerContent)));
 };
@@ -121,7 +124,7 @@ var ApplicationLayoutContainer = _styledComponents["default"].div(_templateObjec
 });
 var HeaderContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 3;\n"])));
 var VisibilityToggle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 64px;\n  left: 0;\n  right: 0;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  padding: 4px 16px;\n  width: 100%;\n  background-color: #f2f2f2;\n  user-select: none;\n  z-index: 2;\n"])));
-var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 12px 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n  color: #000;\n  cursor: pointer;\n\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  & > svg {\n    height: 20px;\n    width: 20px;\n  }\n"])));
+var HamburgerTrigger = _styledComponents["default"].button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  border: 0px solid transparent;\n  border-radius: 2px;\n  padding: 12px 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  font-family: Open Sans, sans-serif;\n  font-weight: 600;\n  font-size: 14px;\n  color: #000;\n  cursor: pointer;\n\n  :active {\n    background-color: #cccccc;\n  }\n  :focus,\n  :focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px #0095ff;\n  }\n  span::before {\n    font-size: 20px;\n  }\n"])));
 var BodyContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  flex: 1;\n"])));
 var SidenavContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: sticky;\n  top: 64px;\n  display: flex;\n  height: calc(100vh - 64px);\n  z-index: 1;\n\n  @media (max-width: ", "rem) {\n    position: absolute;\n    top: 0px;\n    height: 100%;\n  }\n"])), _variables.responsiveSizes.medium);
 var MainContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n"])));

package/layout/Icons.d.ts

@@ -3,6 +3,5 @@ declare const layoutIcons: {
     facebookLogo: React.JSX.Element;
     xLogo: React.JSX.Element;
     linkedinLogo: React.JSX.Element;
-    hamburgerIcon: React.JSX.Element;
 };
 export default layoutIcons;

package/layout/Icons.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var layoutIcons = {
   facebookLogo: /*#__PURE__*/_react["default"].createElement("svg", {
     version: "1.1",
-    id: "Capa_1",
     x: "0px",
     y: "0px",
     width: "438.536px",
@@ -36,7 +35,6 @@ var layoutIcons = {
   })),
   linkedinLogo: /*#__PURE__*/_react["default"].createElement("svg", {
     version: "1.1",
-    id: "Capa_1",
     x: "0px",
     y: "0px",
     width: "438.536px",
@@ -45,14 +43,6 @@ var layoutIcons = {
     fill: "#FFFFFF"
   }, /*#__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 C8.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 h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225 C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332 c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41 c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708 c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92 c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991 c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974 c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64 H370.873z"
-  }))),
-  hamburgerIcon: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24",
-    width: "24",
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z"
-  }))
+  })))
 };
 var _default = exports["default"] = layoutIcons;

package/link/Link.accessibility.test.d.ts

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

package/link/Link.accessibility.test.js

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