@dxc-technology/halstack-react 0.0.0-9e54008 → 0.0.0-9e83fd2

package/HalstackContext.d.ts

@@ -1320,7 +1320,7 @@ declare const HalstackLanguageContext: React.Context<DeepPartial<{
 }>>;
 /**
  * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
- * This is an extension of the already extisting Partial type, which only allows one level of partiality.
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
  */
 declare type DeepPartial<T> = {
     [P in keyof T]?: Partial<T[P]>;

package/HalstackContext.js

@@ -305,7 +305,7 @@ var parseLabels = function parseLabels(labels) {
 };
 /**
  * This type is used to allow partial themes and labels objects to be passed to the HalstackProvider.
- * This is an extension of the already extisting Partial type, which only allows one level of partiality.
+ * This is an extension of the already existing Partial type, which only allows one level of partiality.
  */
 
 

package/button/Button.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import ButtonPropsType from "./types";
-declare const DxcButton: ({ label, mode, disabled, iconPosition, type, icon, onClick, margin, size, tabIndex, }: ButtonPropsType) => JSX.Element;
+declare const DxcButton: ({ label, mode, disabled, iconPosition, title, type, icon, onClick, margin, size, tabIndex, }: ButtonPropsType) => JSX.Element;
 export default DxcButton;

package/button/Button.js

@@ -31,22 +31,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var sizes = {
-  small: "42px",
-  medium: "120px",
-  large: "240px",
-  fillParent: "100%",
-  fitContent: "fit-content"
-};
-
-var calculateWidth = function calculateWidth(margin, size) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
 var DxcButton = function DxcButton(_ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
@@ -56,6 +40,7 @@ var DxcButton = function DxcButton(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
+      title = _ref.title,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "button" : _ref$type,
       icon = _ref.icon,
@@ -72,31 +57,50 @@ var DxcButton = function DxcButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.button
   }, /*#__PURE__*/_react["default"].createElement(Button, {
-    type: type,
-    mode: mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode,
+    "aria-label": title,
     disabled: disabled,
+    onClick: function onClick() {
+      _onClick();
+    },
     tabIndex: disabled ? -1 : tabIndex,
+    title: title,
+    type: type,
+    $mode: mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode,
+    hasLabel: label ? true : false,
+    hasIcon: icon ? true : false,
+    iconPosition: iconPosition,
     backgroundType: backgroundType,
     size: size,
-    margin: margin,
-    onClick: function onClick() {
-      _onClick();
-    }
-  }, label && iconPosition === "after" && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
-    icon: icon,
-    iconPosition: iconPosition
-  }, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
-    label: label,
-    iconPosition: iconPosition
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
+    margin: margin
+  }, label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, null, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: icon
-  }) : icon), label && iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
-    icon: icon,
-    iconPosition: iconPosition
-  }, label)));
+  }) : icon)));
+};
+
+var sizes = {
+  small: "42px",
+  medium: "120px",
+  large: "240px",
+  fillParent: "100%",
+  fitContent: "fit-content"
+};
+
+var calculateWidth = function calculateWidth(margin, size) {
+  return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
+};
+
+var getButtonStyles = function getButtonStyles(props) {
+  var $mode = props.$mode,
+      backgroundType = props.backgroundType,
+      disabled = props.disabled;
+  return "\n    border-radius: ".concat($mode === "primary" ? props.theme.primaryBorderRadius : $mode === "secondary" ? props.theme.secondaryBorderRadius : props.theme.textBorderRadius, ";\n    border-width: ").concat($mode === "primary" ? props.theme.primaryBorderThickness : $mode === "secondary" ? props.theme.secondaryBorderThickness : props.theme.textBorderThickness, ";\n    border-style: ").concat($mode === "primary" ? props.theme.primaryBorderStyle : $mode === "secondary" ? props.theme.secondaryBorderStyle : props.theme.textBorderStyle, ";\n    font-family: ").concat($mode === "primary" ? props.theme.primaryFontFamily : $mode === "secondary" ? props.theme.secondaryFontFamily : props.theme.textFontFamily, ";\n    font-size: ").concat($mode === "primary" ? props.theme.primaryFontSize : $mode === "secondary" ? props.theme.secondaryFontSize : props.theme.textFontSize, ";\n    font-weight: ").concat($mode === "primary" ? props.theme.primaryFontWeight : $mode === "secondary" ? props.theme.secondaryFontWeight : props.theme.textFontWeight, ";\n    background-color: ").concat($mode === "primary" ? backgroundType === "dark" ? props.theme.primaryBackgroundColorOnDark : props.theme.primaryBackgroundColor : $mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor : backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor, ";\n    color: ").concat($mode === "primary" ? backgroundType === "dark" ? props.theme.primaryFontColorOnDark : props.theme.primaryFontColor : $mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor : backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor, ";\n    border-color: ").concat($mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryBorderColorOnDark : props.theme.secondaryBorderColor : "", ";\n    &:hover {\n      background-color: ").concat($mode === "primary" ? backgroundType === "dark" ? props.theme.primaryHoverBackgroundColorOnDark : props.theme.primaryHoverBackgroundColor : $mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryHoverBackgroundColorOnDark : props.theme.secondaryHoverBackgroundColor : backgroundType === "dark" ? props.theme.textHoverBackgroundColorOnDark : props.theme.textHoverBackgroundColor, ";\n      color: ").concat($mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor : "", ";\n    }\n    &:focus {\n      border-color: ").concat($mode === "secondary" ? "transparent" : "", ";\n    }\n    &:active {\n      background-color: ").concat($mode === "primary" ? backgroundType === "dark" ? props.theme.primaryActiveBackgroundColorOnDark : props.theme.primaryActiveBackgroundColor : $mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryActiveBackgroundColorOnDark : props.theme.secondaryActiveBackgroundColor : backgroundType === "dark" ? props.theme.textActiveBackgroundColorOnDark : props.theme.textActiveBackgroundColor, ";\n      color: ").concat($mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor : "", ";\n      border-color: ").concat($mode === "secondary" ? "transparent" : "", ";\n      outline: none;\n      box-shadow: ").concat(!disabled ? "0 0 0 2px ".concat(backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor) : "", ";\n    }\n    &:disabled {\n      cursor: not-allowed;\n      background-color: ").concat($mode === "primary" ? backgroundType === "dark" ? props.theme.primaryDisabledBackgroundColorOnDark : props.theme.primaryDisabledBackgroundColor : $mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryDisabledBackgroundColorOnDark : props.theme.secondaryDisabledBackgroundColor : backgroundType === "dark" ? props.theme.textDisabledBackgroundColorOnDark : props.theme.textDisabledBackgroundColor, ";\n      color: ").concat($mode === "primary" ? backgroundType === "dark" ? props.theme.primaryDisabledFontColorOnDark : props.theme.primaryDisabledFontColor : $mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryDisabledFontColorOnDark : props.theme.secondaryDisabledFontColor : backgroundType === "dark" ? props.theme.textDisabledFontColorOnDark : props.theme.textDisabledFontColor, ";\n      border-color: ").concat($mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryDisabledBorderColorOnDark : props.theme.secondaryDisabledBorderColor : "", ";\n    }\n  ");
 };
 
-var Button = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-flex;\n  width: ", ";\n  height: 40px;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 0 0 2px transparent;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  cursor: pointer;\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n  ", "\n"])), function (props) {
+var Button = _styledComponents["default"].button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: ", ";\n  gap: 0.5rem;\n  align-items: center;\n  justify-content: center;\n  width: ", ";\n  height: 40px;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  padding-right: ", ";\n  box-shadow: 0 0 0 2px transparent;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return props.iconPosition === "after" ? "row" : "row-reverse";
+}, function (props) {
+  return calculateWidth(props.margin, props.size);
+}, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -106,16 +110,14 @@ var Button = _styledComponents["default"].button(_templateObject || (_templateOb
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return calculateWidth(props.margin, props.size);
-}, function (props) {
-  return props.theme.paddingLeft;
-}, function (props) {
-  return props.theme.paddingRight;
 }, function (props) {
   return props.theme.paddingTop;
 }, function (props) {
   return props.theme.paddingBottom;
+}, function (props) {
+  return props.hasIcon && !props.hasLabel ? props.theme.paddingLeft : "calc(".concat(props.theme.paddingLeft, " + 8px)");
+}, function (props) {
+  return props.hasIcon && !props.hasLabel ? props.theme.paddingRight : "calc(".concat(props.theme.paddingRight, " + 8px)");
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -127,27 +129,16 @@ var Button = _styledComponents["default"].button(_templateObject || (_templateOb
 }, function (props) {
   return props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor;
 }, function (props) {
-  var mode = props.mode,
-      backgroundType = props.backgroundType,
-      disabled = props.disabled;
-  return "\n        border-radius: ".concat(props.mode === "primary" ? props.theme.primaryBorderRadius : props.mode === "secondary" ? props.theme.secondaryBorderRadius : props.theme.textBorderRadius, ";\n        border-width: ").concat(props.mode === "primary" ? props.theme.primaryBorderThickness : props.mode === "secondary" ? props.theme.secondaryBorderThickness : props.theme.textBorderThickness, ";\n        border-style: ").concat(mode === "primary" ? props.theme.primaryBorderStyle : mode === "secondary" ? props.theme.secondaryBorderStyle : props.theme.textBorderStyle, ";\n        font-family: ").concat(mode === "primary" ? props.theme.primaryFontFamily : mode === "secondary" ? props.theme.secondaryFontFamily : props.theme.textFontFamily, ";\n        font-size: ").concat(mode === "primary" ? props.theme.primaryFontSize : mode === "secondary" ? props.theme.secondaryFontSize : props.theme.textFontSize, ";\n        font-weight: ").concat(mode === "primary" ? props.theme.primaryFontWeight : mode === "secondary" ? props.theme.secondaryFontWeight : props.theme.textFontWeight, ";\n        background-color: ").concat(mode === "primary" ? backgroundType === "dark" ? props.theme.primaryBackgroundColorOnDark : props.theme.primaryBackgroundColor : mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryBackgroundColorOnDark : props.theme.secondaryBackgroundColor : backgroundType === "dark" ? props.theme.textBackgroundColorOnDark : props.theme.textBackgroundColor, ";\n        color: ").concat(mode === "primary" ? backgroundType === "dark" ? props.theme.primaryFontColorOnDark : props.theme.primaryFontColor : mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryFontColorOnDark : props.theme.secondaryFontColor : backgroundType === "dark" ? props.theme.textFontColorOnDark : props.theme.textFontColor, ";\n        border-color: ").concat(mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryBorderColorOnDark : props.theme.secondaryBorderColor : "", ";\n        &:hover {\n          background-color: ").concat(mode === "primary" ? backgroundType === "dark" ? props.theme.primaryHoverBackgroundColorOnDark : props.theme.primaryHoverBackgroundColor : mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryHoverBackgroundColorOnDark : props.theme.secondaryHoverBackgroundColor : backgroundType === "dark" ? props.theme.textHoverBackgroundColorOnDark : props.theme.textHoverBackgroundColor, ";\n          color: ").concat(mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor : "", ";\n        }\n        &:focus {\n          border-color: ").concat(mode === "secondary" ? "transparent" : "", ";\n        }\n        &:active {\n          background-color: ").concat(mode === "primary" ? backgroundType === "dark" ? props.theme.primaryActiveBackgroundColorOnDark : props.theme.primaryActiveBackgroundColor : mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryActiveBackgroundColorOnDark : props.theme.secondaryActiveBackgroundColor : backgroundType === "dark" ? props.theme.textActiveBackgroundColorOnDark : props.theme.textActiveBackgroundColor, ";\n          color: ").concat(mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryHoverFontColorOnDark : props.theme.secondaryHoverFontColor : "", ";\n          border-color: ").concat(mode === "secondary" ? "transparent" : "", ";\n          outline: none;\n          box-shadow: ").concat(!disabled ? "0 0 0 2px ".concat(backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor) : "", ";\n        }\n        &:disabled {\n          cursor: not-allowed;\n          background-color: ").concat(mode === "primary" ? backgroundType === "dark" ? props.theme.primaryDisabledBackgroundColorOnDark : props.theme.primaryDisabledBackgroundColor : mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryDisabledBackgroundColorOnDark : props.theme.secondaryDisabledBackgroundColor : backgroundType === "dark" ? props.theme.textDisabledBackgroundColorOnDark : props.theme.textDisabledBackgroundColor, ";\n          color: ").concat(mode === "primary" ? backgroundType === "dark" ? props.theme.primaryDisabledFontColorOnDark : props.theme.primaryDisabledFontColor : mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryDisabledFontColorOnDark : props.theme.secondaryDisabledFontColor : backgroundType === "dark" ? props.theme.textDisabledFontColorOnDark : props.theme.textDisabledFontColor, ";\n          border-color: ").concat(mode === "secondary" ? backgroundType === "dark" ? props.theme.secondaryDisabledBorderColorOnDark : props.theme.secondaryDisabledBorderColor : "", ";\n        }\n      ");
+  return getButtonStyles(props);
 });
 
-var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  line-height: ", ";\n  font-size: ", ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  text-transform: none;\n  white-space: nowrap;\n  margin-right: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  line-height: ", ";\n  font-size: ", ";\n  text-overflow: ellipsis;\n  overflow: hidden;\n  text-transform: none;\n  white-space: nowrap;\n"])), function (props) {
   return props.theme.labelFontLineHeight;
 }, function (props) {
   return props.theme.fontSize;
-}, function (props) {
-  return !props.icon || props.iconPosition === "before" ? "8px" : "0px";
-}, function (props) {
-  return !props.icon || props.iconPosition === "after" ? "8px" : "0px";
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  img,\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])), function (props) {
-  return !props.label ? "0px" : props.iconPosition === "after" && props.label !== "" && "8px" || "8px";
-}, function (props) {
-  return !props.label ? "0px" : props.iconPosition === "before" && props.label !== "" && "8px" || "8px";
-});
+var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  img,\n  svg {\n    height: 24px;\n    width: 24px;\n  }\n"])));
 
 var _default = DxcButton;
 exports["default"] = _default;

package/button/Button.stories.tsx

@@ -165,7 +165,7 @@ export const Chromatic = () => (
       <Title title="Only icon (image)" theme="light" level={4} />
       <DxcButton
         mode="text"
-        icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
+        icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
       />
     </ExampleContainer>
     <BackgroundColorProvider color="#333333">

package/button/Button.test.js

@@ -32,4 +32,15 @@ describe("Button component tests", function () {
 
     expect(onClick).toHaveBeenCalled();
   });
+  test("Renders with correct accessibility attributes", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      label: "Home",
+      title: "Go home"
+    })),
+        getByRole = _render3.getByRole;
+
+    var button = getByRole("button");
+    expect(button.getAttribute("aria-label")).toBe("Go home");
+    expect(button.getAttribute("title")).toBe("Go home");
+  });
 });

package/button/types.d.ts

@@ -24,6 +24,10 @@ declare type Props = {
      * Whether the icon should appear after or before the label.
      */
     iconPosition?: "before" | "after";
+    /**
+     * Value for the HTML properties title and aria-label.
+     */
+    title?: string;
     /**
      * 'type' html prop of the button.
      */

package/common/coreTokens.js

@@ -23,7 +23,7 @@ var CORE_TOKENS = {
   color_grey_700: "#666666",
   color_grey_800: "#4d4d4d",
   color_grey_900: "#333333",
-  // Trasparent variants
+  // Transparent variants
   color_grey_50_a: "#00000005",
   color_grey_100_a: "#0000000d",
   color_grey_200_a: "#0000001a",

package/date-input/Calendar.js

@@ -19,7 +19,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _main = require("../main");
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -183,7 +183,7 @@ var Calendar = function Calendar(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(CalendarContainer, null, /*#__PURE__*/_react["default"].createElement(_main.DxcFlex, {
+  return /*#__PURE__*/_react["default"].createElement(CalendarContainer, null, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     alignItems: "center",
     justifyContent: "space-between"
   }, weekDays.map(function (weekDay) {

package/file-input/FileItem.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _main = require("../main");
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
@@ -80,7 +80,7 @@ var FileItem = function FileItem(_ref) {
   }) : /*#__PURE__*/_react["default"].createElement(IconPreview, {
     error: error,
     "aria-label": getIconAriaLabel()
-  }, preview)), /*#__PURE__*/_react["default"].createElement(FileItemContent, null, /*#__PURE__*/_react["default"].createElement(FileName, null, fileName), /*#__PURE__*/_react["default"].createElement(_main.DxcFlex, {
+  }, preview)), /*#__PURE__*/_react["default"].createElement(FileItemContent, null, /*#__PURE__*/_react["default"].createElement(FileName, null, fileName), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     gap: "0.25rem"
   }, error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, errorIcon), /*#__PURE__*/_react["default"].createElement(DeleteFileAction, {
     onClick: function onClick() {

package/footer/Footer.js

@@ -27,7 +27,9 @@ var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _Icons = require("./Icons");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -56,57 +58,56 @@ var DxcFooter = function DxcFooter(_ref) {
     }
 
     return colorsTheme.footer.logo;
-  }, [colorsTheme.footer.logo]);
-  var socialLink = socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(function (link, index) {
+  }, [colorsTheme]);
+  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.footer
+  }, /*#__PURE__*/_react["default"].createElement(FooterContainer, {
+    margin: margin
+  }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    justifyContent: "space-between",
+    alignItems: "center",
+    wrap: "wrap",
+    gap: "1.5rem"
+  }, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, footerLogo), /*#__PURE__*/_react["default"].createElement(_Flex["default"], null, socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(function (link, index) {
     return /*#__PURE__*/_react["default"].createElement(SocialAnchor, {
+      href: link.href,
       tabIndex: tabIndex,
+      title: link.title,
+      "aria-label": link.title,
       key: "social".concat(index).concat(link.href),
-      index: index,
-      href: link && link.href ? link.href : ""
-    }, /*#__PURE__*/_react["default"].createElement(SocialIconContainer, null, typeof link.logo === "string" ? /*#__PURE__*/_react["default"].createElement(SocialIconImg, {
+      index: index
+    }, /*#__PURE__*/_react["default"].createElement(SocialIconContainer, null, typeof link.logo === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
       src: link.logo
     }) : link.logo));
-  });
-  var bottomLink = bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (link, index) {
+  }))), /*#__PURE__*/_react["default"].createElement(ChildComponents, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
+    color: colorsTheme.footer.backgroundColor
+  }, children)), /*#__PURE__*/_react["default"].createElement(BottomContainer, null, /*#__PURE__*/_react["default"].createElement(BottomLinks, null, bottomLinks === null || bottomLinks === void 0 ? void 0 : bottomLinks.map(function (link, index) {
     return /*#__PURE__*/_react["default"].createElement("span", {
       key: "bottom".concat(index).concat(link.text)
     }, /*#__PURE__*/_react["default"].createElement(BottomLink, {
-      tabIndex: tabIndex,
-      href: link && link.href ? link.href : ""
-    }, link && link.text ? link.text : ""), /*#__PURE__*/_react["default"].createElement(Point, null, "\xB7"));
-  });
-  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.footer
-  }, /*#__PURE__*/_react["default"].createElement(FooterContainer, {
-    margin: margin
-  }, /*#__PURE__*/_react["default"].createElement(FooterHeader, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, footerLogo), /*#__PURE__*/_react["default"].createElement(SocialLinkContainer, null, socialLink)), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ChildComponents, null, /*#__PURE__*/_react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.footer.backgroundColor
-  }, children)), /*#__PURE__*/_react["default"].createElement(FooterFooter, {
-    className: "footerFooter"
-  }, /*#__PURE__*/_react["default"].createElement(BottomLinks, null, bottomLink), /*#__PURE__*/_react["default"].createElement(Copyright, null, copyright || translatedLabels.footer.copyrightText(new Date().getFullYear()))))));
+      href: link.href,
+      tabIndex: tabIndex
+    }, link.text));
+  })), /*#__PURE__*/_react["default"].createElement(Copyright, null, copyright || translatedLabels.footer.copyrightText(new Date().getFullYear())))));
 };
 
-var FooterContainer = _styledComponents["default"].footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  @media (min-width: ", "rem) {\n    padding: 24px 36px 24px 36px;\n  }\n\n  @media (max-width: ", "rem) {\n    padding: 20px;\n  }\n\n  background-color: ", ";\n  margin-top: ", ";\n  width: 100%;\n  box-sizing: border-box;\n  min-height: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n"])), _variables.responsiveSizes.small, _variables.responsiveSizes.small, function (props) {
-  return props.theme.backgroundColor;
+var FooterContainer = _styledComponents["default"].footer(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  width: 100%;\n  min-height: ", ";\n  margin-top: ", ";\n  background-color: ", ";\n\n  @media (min-width: ", "rem) {\n    padding: 24px 36px 24px 36px;\n  }\n  @media (max-width: ", "rem) {\n    padding: 20px;\n  }\n"])), function (props) {
+  return props.theme.height;
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
-  return props.theme.height;
-});
-
-var FooterHeader = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  flex-wrap: wrap;\n  row-gap: 24px;\n"])));
+  return props.theme.backgroundColor;
+}, _variables.responsiveSizes.small, _variables.responsiveSizes.small);
 
-var FooterFooter = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  @media (min-width: ", "rem) {\n    flex-direction: row;\n  }\n\n  @media (max-width: ", "rem) {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  border-top: ", ";\n  margin-top: 16px;\n"])), _variables.responsiveSizes.small, _variables.responsiveSizes.small, function (props) {
+var BottomContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  @media (min-width: ", "rem) {\n    flex-direction: row;\n  }\n  @media (max-width: ", "rem) {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  border-top: ", ";\n  margin-top: 16px;\n"])), _variables.responsiveSizes.small, _variables.responsiveSizes.small, function (props) {
   return "".concat(props.theme.bottomLinksDividerThickness, " ").concat(props.theme.bottomLinksDividerStyle, " ").concat(props.theme.bottomLinksDividerColor);
 });
 
-var BottomLinks = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  display: inline-flex;\n  flex-wrap: wrap;\n\n  @media (min-width: ", "rem) {\n    max-width: 60%;\n  }\n\n  @media (max-width: ", "rem) {\n    max-width: 100%;\n    width: 100%;\n  }\n\n  & > span:last-child span {\n    display: none;\n  }\n  align-self: center;\n"])), function (props) {
-  return props.theme.bottomLinksDividerSpacing;
-}, _variables.responsiveSizes.small, _variables.responsiveSizes.small);
-
-var ChildComponents = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 16px;\n  overflow: hidden;\n"])));
+var ChildComponents = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 16px;\n  overflow: hidden;\n"])));
 
-var Copyright = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n\n  @media (min-width: ", "rem) {\n    max-width: 40%;\n    text-align: right;\n  }\n\n  @media (max-width: ", "rem) {\n    max-width: 100%;\n    width: 100%;\n    text-align: left;\n  }\n\n  padding-top: ", ";\n"])), function (props) {
+var Copyright = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  padding-top: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  color: ", ";\n\n  @media (min-width: ", "rem) {\n    max-width: 40%;\n    text-align: right;\n  }\n\n  @media (max-width: ", "rem) {\n    max-width: 100%;\n    width: 100%;\n    text-align: left;\n  }\n"])), function (props) {
+  return props.theme.bottomLinksDividerSpacing;
+}, function (props) {
   return props.theme.copyrightFontFamily;
 }, function (props) {
   return props.theme.copyrightFontSize;
@@ -116,31 +117,25 @@ var Copyright = _styledComponents["default"].div(_templateObject6 || (_templateO
   return props.theme.copyrightFontWeight;
 }, function (props) {
   return props.theme.copyrightFontColor;
-}, _variables.responsiveSizes.small, _variables.responsiveSizes.small, function (props) {
-  return props.theme.bottomLinksDividerSpacing;
-});
+}, _variables.responsiveSizes.small, _variables.responsiveSizes.small);
 
-var LogoContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"])), function (props) {
+var LogoContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"])), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var LogoImg = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"])), function (props) {
+var LogoImg = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"])), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var SocialLinkContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-self: center;\n"])));
-
-var SocialAnchor = _styledComponents["default"].a(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"])), function (props) {
+var SocialAnchor = _styledComponents["default"].a(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  margin-left: ", ";\n  border-radius: 4px;\n\n  &:focus {\n    outline: 2px solid #0095ff;\n    outline-offset: 2px;\n  }\n"])), function (props) {
   return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
 });
 
-var SocialIconImg = _styledComponents["default"].img(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])([""])));
-
-var SocialIconContainer = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var SocialIconContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  height: ", ";\n  width: ", ";\n  color: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -148,11 +143,11 @@ var SocialIconContainer = _styledComponents["default"].div(_templateObject12 ||
   return props.theme.socialLinksColor;
 });
 
-var Point = _styledComponents["default"].span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"])), function (props) {
-  return props.theme.bottomLinksFontColor;
-});
+var BottomLinks = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-self: center;\n  padding-top: ", ";\n  color: #fff;\n\n  @media (min-width: ", "rem) {\n    max-width: 60%;\n  }\n  @media (max-width: ", "rem) {\n    max-width: 100%;\n    width: 100%;\n  }\n\n  & > span:not(:first-child):before {\n    content: \"\xB7\";\n    padding: 0 0.5rem;\n  }\n"])), function (props) {
+  return props.theme.bottomLinksDividerSpacing;
+}, _variables.responsiveSizes.small, _variables.responsiveSizes.small);
 
-var BottomLink = _styledComponents["default"].a(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
+var BottomLink = _styledComponents["default"].a(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  border-radius: 2px;\n\n  &:focus {\n    outline: 2px solid #0095ff;\n  }\n"])), function (props) {
   return props.theme.bottomLinksTextDecoration;
 }, function (props) {
   return props.theme.bottomLinksFontColor;

package/footer/Footer.stories.tsx

@@ -26,6 +26,7 @@ const social = [
         </g>
       </svg>
     ),
+    title: "Linkedin",
   },
   {
     href: "https://twitter.com/dxctechnology",
@@ -37,6 +38,7 @@ const social = [
         />
       </svg>
     ),
+    title: "Twitter",
   },
   {
     href: "https://www.facebook.com/DXCTechnology/",
@@ -63,6 +65,7 @@ const social = [
         </g>
       </svg>
     ),
+    title: "Facebook",
   },
 ];
 
@@ -109,6 +112,14 @@ export const Chromatic = () => (
         </div>
       </DxcFooter>
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused bottom and social links" theme="light" level={4} />
+      <DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
+        <div>
+          <a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
+        </div>
+      </DxcFooter>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

package/footer/Footer.test.js

@@ -10,7 +10,8 @@ var _Footer = _interopRequireDefault(require("./Footer.tsx"));
 
 var social = [{
   href: "https://www.test.com/social",
-  logo: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
+  logo: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
+  title: "test"
 }];
 var bottom = [{
   href: "https://www.test.com/bottom",
@@ -89,6 +90,7 @@ describe("Footer component tests", function () {
 
     var socialIcon = getAllByRole("link")[0];
     expect(socialIcon.getAttribute("href")).toBe("https://www.test.com/social");
+    expect(socialIcon.getAttribute("aria-label")).toBe("test");
     var bottomLink = getByText("bottom-link-text");
     expect(bottomLink.getAttribute("href")).toBe("https://www.test.com/bottom");
     expect(getByText("test-copyright")).toBeTruthy();

package/footer/types.d.ts

@@ -8,24 +8,28 @@ declare type Size = {
 };
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type SocialLink = {
+    /**
+     * URL of the page the link goes to.
+     */
+    href: string;
     /**
      * Element used as the icon for the link.
      */
     logo: string | SVG;
     /**
-     * URL of the page the link goes to.
+     * Value for the HTML properties title and aria-label.
      */
-    href: string;
+    title: string;
 };
 declare type BottomLink = {
-    /**
-     * Text for the link.
-     */
-    text: string;
     /**
      * URL of the page the link goes to.
      */
     href: string;
+    /**
+     * Text for the link.
+     */
+    text: string;
 };
 declare type FooterPropsType = {
     /**

package/grid/Grid.d.ts

@@ -2,6 +2,6 @@
 import GridPropsType, { GridItemProps } from "./types";
 declare const DxcGrid: {
     (props: GridPropsType): JSX.Element;
-    GridItem: import("styled-components").StyledComponent<"div", any, GridItemProps, never>;
+    Item: import("styled-components").StyledComponent<"div", any, GridItemProps, never>;
 };
 export default DxcGrid;

package/grid/Grid.js

@@ -86,6 +86,6 @@ var GridItem = _styledComponents["default"].div(_templateObject2 || (_templateOb
   return placeSelf && (typeof placeSelf === "string" ? "place-self: ".concat(placeSelf) : "align-self: ".concat((_placeSelf$alignSelf2 = placeSelf.alignSelf) !== null && _placeSelf$alignSelf2 !== void 0 ? _placeSelf$alignSelf2 : "", "; justify-self: ").concat((_placeSelf$justifySel2 = placeSelf.justifySelf) !== null && _placeSelf$justifySel2 !== void 0 ? _placeSelf$justifySel2 : "", ";"));
 });
 
-DxcGrid.GridItem = GridItem;
+DxcGrid.Item = GridItem;
 var _default = DxcGrid;
 exports["default"] = _default;