@dxc-technology/halstack-react 0.0.0-e1c85bf → 0.0.0-e3e5511

package/{dist/new-date/NewDate.js → date-input/DateInput.js}

@@ -37,7 +37,7 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
-var _NewInputText = _interopRequireDefault(require("../new-input-text/NewInputText"));
+var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
 function _templateObject() {
   var data = (0, _taggedTemplateLiteral2["default"])([""]);
@@ -49,7 +49,7 @@ function _templateObject() {
   return data;
 }
 
-var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
+var DxcDateInput = _react["default"].forwardRef(function (_ref, ref) {
   var _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
       _ref$name = _ref.name,
@@ -175,12 +175,12 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
     overrides: {
       MuiTypography: {
         root: {
-          fontFamily: "".concat(colorsTheme.newDate.pickerFontFamily, " !important")
+          fontFamily: "".concat(colorsTheme.dateInput.pickerFontFamily, " !important")
         }
       },
       MuiPickersYearSelection: {
         container: {
-          color: colorsTheme.newDate.pickerYearFontColor,
+          color: colorsTheme.dateInput.pickerYearFontColor,
           "&::-webkit-scrollbar": {
             width: "3px"
           },
@@ -196,8 +196,8 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       },
       MuiPickersToolbar: {
         toolbar: {
-          backgroundColor: colorsTheme.newDate.pickerBackgroundColor,
-          color: colorsTheme.newDate.pickerDayFontColor
+          backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
+          color: colorsTheme.dateInput.pickerDayFontColor
         }
       },
       MuiIconButton: {
@@ -215,7 +215,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       MuiButtonBase: {
         root: {
           "&:focus": {
-            outline: colorsTheme.newDate.pickerFocusColor + " solid 2px"
+            outline: colorsTheme.dateInput.pickerFocusColor + " solid 2px"
           }
         }
       },
@@ -225,38 +225,38 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
           maxWidth: "unset",
           minHeight: "unset",
           padding: "0px 10px",
-          height: colorsTheme.newDate.pickerHeight,
-          width: colorsTheme.newDate.pickerWidth,
-          backgroundColor: colorsTheme.newDate.pickerBackgroundColor,
-          fontFamily: colorsTheme.newDate.pickerFontFamily
+          height: colorsTheme.dateInput.pickerHeight,
+          width: colorsTheme.dateInput.pickerWidth,
+          backgroundColor: colorsTheme.dateInput.pickerBackgroundColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily
         }
       },
       MuiPickersToolbarText: {
         toolbarTxt: {
-          color: colorsTheme.newDate.pickerActualDateFontColor,
-          fontFamily: colorsTheme.newDate.pickerFontFamily,
+          color: colorsTheme.dateInput.pickerActualDateFontColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily,
           fontSize: "2rem"
         },
         toolbarBtnSelected: {
-          color: colorsTheme.newDate.pickerActualDateFontColor
+          color: colorsTheme.dateInput.pickerActualDateFontColor
         }
       },
       MuiPickersCalendarHeader: {
         transitionContainer: {
-          color: colorsTheme.newDate.pickerMonthFontColor
+          color: colorsTheme.dateInput.pickerMonthFontColor
         },
         dayLabel: {
-          color: colorsTheme.newDate.pickerWeekFontColor,
-          fontFamily: colorsTheme.newDate.pickerFontFamily
+          color: colorsTheme.dateInput.pickerWeekFontColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily
         },
         switchHeader: {
           backgroundColor: "#ffffff",
-          color: colorsTheme.newDate.pickerDayFontColor
+          color: colorsTheme.dateInput.pickerDayFontColor
         },
         iconButton: {
-          backgroundColor: colorsTheme.newDate.pickerMonthArrowsBackgroundColor,
+          backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor,
           "&:hover": {
-            backgroundColor: colorsTheme.newDate.pickerMonthArrowsBackgroundColor
+            backgroundColor: colorsTheme.dateInput.pickerMonthArrowsBackgroundColor
           }
         }
       },
@@ -267,37 +267,37 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
       },
       MuiPickersDay: {
         current: {
-          color: colorsTheme.newDate.pickerDayFontColor
+          color: colorsTheme.dateInput.pickerDayFontColor
         },
         day: {
-          fontFamily: colorsTheme.newDate.pickerFontFamily,
-          color: colorsTheme.newDate.pickerDayFontColor,
+          fontFamily: colorsTheme.dateInput.pickerFontFamily,
+          color: colorsTheme.dateInput.pickerDayFontColor,
           "&:hover": {
-            backgroundColor: colorsTheme.newDate.pickerHoverDateBackgroundColor,
-            color: colorsTheme.newDate.pickerHoverDateFontColor
+            backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor,
+            color: colorsTheme.dateInput.pickerHoverDateFontColor
           }
         },
         daySelected: {
-          backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
-          color: colorsTheme.newDate.pickerSelectedDateColor,
+          backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
+          color: colorsTheme.dateInput.pickerSelectedDateColor,
           "&:hover": {
-            backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
-            color: colorsTheme.newDate.pickerSelectedDateColor,
+            backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
+            color: colorsTheme.dateInput.pickerSelectedDateColor,
             opacity: "1"
           }
         }
       },
       MuiPickersYear: {
         yearSelected: {
-          color: colorsTheme.newDate.pickerSelectedDateColor,
-          backgroundColor: colorsTheme.newDate.pickerSelectedDateBackgroundColor,
+          color: colorsTheme.dateInput.pickerSelectedDateColor,
+          backgroundColor: colorsTheme.dateInput.pickerSelectedDateBackgroundColor,
           margin: "0px 100px",
           borderRadius: "20px"
         },
         root: {
           "&:focus": {
-            color: colorsTheme.newDate.pickerHoverDateFontColor,
-            backgroundColor: colorsTheme.newDate.pickerHoverDateBackgroundColor
+            color: colorsTheme.dateInput.pickerHoverDateFontColor,
+            backgroundColor: colorsTheme.dateInput.pickerHoverDateBackgroundColor
           }
         }
       },
@@ -314,7 +314,7 @@ var DxcNewDate = _react["default"].forwardRef(function (_ref, ref) {
     theme: dateTheme
   }, _react["default"].createElement(_pickers.MuiPickersUtilsProvider, {
     utils: _dateFns["default"]
-  }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_NewInputText["default"], {
+  }, _react["default"].createElement(StyledDPicker, null, _react["default"].createElement(_TextInput["default"], {
     label: label,
     name: name,
     value: value !== null && value !== void 0 ? value : innerValue,
@@ -373,7 +373,7 @@ var sizes = {
 
 var StyledDPicker = _styledComponents["default"].div(_templateObject());
 
-DxcNewDate.propTypes = {
+DxcDateInput.propTypes = {
   label: _propTypes["default"].string,
   name: _propTypes["default"].string,
   value: _propTypes["default"].string,
@@ -396,5 +396,5 @@ DxcNewDate.propTypes = {
   }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
   tabIndex: _propTypes["default"].number
 };
-var _default = DxcNewDate;
+var _default = DxcDateInput;
 exports["default"] = _default;

package/{dist/new-date → date-input}/index.d.ts

@@ -33,7 +33,7 @@ type Props = {
    */
   placeholder?: boolean;
   /**
-   * If true, the date will have an action to clear the entered value.
+   * If true, the date input will have an action to clear the entered value.
    */
   clearable?: boolean;
   /**
@@ -64,7 +64,7 @@ type Props = {
   onBlur?: (val: { value: string; error: string; date: Date }) => void;
   /**
    * If it is defined, the component will change its appearance, showing
-   * the error below the date component. If it is not defined, the error
+   * the error below the date input component. If it is not defined, the error
    * messages will be managed internally, but never displayed on its own.
    */
   error?: string;
@@ -92,4 +92,4 @@ type Props = {
   ref?: React.RefObject<HTMLDivElement>;
 };
 
-export default function DxcNewDate(props: Props): JSX.Element;
+export default function DxcDateInput(props: Props): JSX.Element;

package/dialog/index.d.ts

@@ -0,0 +1,18 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  isCloseVisible?: boolean;
+  onCloseClick?: void;
+  overlay?: boolean;
+  onBackgroundClick?: void;
+  padding?: Padding,
+  tabIndex?: number;
+};
+
+export default function DxcDialog(props: Props): JSX.Element;

package/dropdown/index.d.ts

@@ -0,0 +1,26 @@
+type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  options?: any;
+  optionsIconPosition?: "before" | "after";
+  icon?: any;
+  iconSrc?: string;
+  iconPosition?: "before" | "after";
+  label?: string;
+  disabled?: boolean;
+  caretHidden?: boolean;
+  onSelectOption?: void;
+  expandOnHover?: boolean;
+  margin?: Space | Margin;
+  size?: Size;
+  tabIndex?: number;
+};
+
+export default function DxcDropdown(props: Props): JSX.Element;

package/{dist/file-input → file-input}/FileInput.js

@@ -58,7 +58,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -88,7 +88,7 @@ function _templateObject7() {
 }
 
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  input[type=\"file\"] {\n    visibility: hidden;\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  margin-top: 0.25rem;\n\n  input[type=\"file\"] {\n    visibility: hidden;\n    position: absolute;\n    width: 0px;\n    height: 0px;\n  }\n"]);
 
   _templateObject6 = function _templateObject6() {
     return data;
@@ -219,8 +219,11 @@ var DxcFileInput = function DxcFileInput(_ref) {
       files = _useState4[0],
       setFiles = _useState4[1];
 
+  var _useState5 = (0, _react.useState)("file-input-".concat((0, _uuid.v4)())),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 1),
+      fileInputId = _useState6[0];
+
   var colorsTheme = (0, _useTheme["default"])();
-  var fileInputId = "file-input-".concat((0, _uuid.v4)());
   (0, _react.useEffect)(function () {
     if (value) {
       setFiles(value);

package/{dist/file-input → file-input}/FileItem.js

@@ -30,7 +30,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 4px;\n  margin-left: 4px;\n  background-color: transparent;\n  padding: 3px;\n  cursor: pointer;\n  svg {\n    line-height: 18px;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 4px;\n  margin-left: 4px;\n  background-color: transparent;\n  padding: 3px;\n  cursor: pointer;\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -156,6 +156,19 @@ var FileItem = function FileItem(_ref) {
       onDelete = _ref.onDelete;
   var colorsTheme = (0, _useTheme["default"])();
   var isImage = type.includes("image");
+
+  var getIconAriaLabel = function getIconAriaLabel() {
+    if (type.includes("video")) {
+      return "video";
+    }
+
+    if (type.includes("audio")) {
+      return "audio";
+    }
+
+    return "file";
+  };
+
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.fileInput
   }, _react["default"].createElement(Container, {
@@ -165,9 +178,11 @@ var FileItem = function FileItem(_ref) {
     showPreview: showPreview,
     numFiles: numFiles
   }, showPreview && (isImage ? _react["default"].createElement(ImagePreview, {
-    src: preview
+    src: preview,
+    alt: name
   }) : _react["default"].createElement(IconPreviewContainer, {
-    error: error
+    error: error,
+    "aria-label": getIconAriaLabel()
   }, _react["default"].createElement(IconPreview, {
     error: error
   }, preview))), _react["default"].createElement(FileItemContent, null, _react["default"].createElement(FileItemContainer, null, _react["default"].createElement(FileName, {
@@ -179,10 +194,11 @@ var FileItem = function FileItem(_ref) {
   }, name), error && _react["default"].createElement(ErrorIcon, {
     "aria-label": "Error"
   }, errorIcon), _react["default"].createElement(DeleteIcon, {
+    error: error,
     onClick: function onClick() {
       return onDelete(name);
     },
-    "aria-label": "Remove"
+    "aria-label": "Remove ".concat(name)
   }, deleteIcon)), error && (multiple || numFiles > 1) && _react["default"].createElement(ErrorMessage, null, error))));
 };
 
@@ -236,6 +252,12 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject8());
 
 var DeleteIcon = _styledComponents["default"].button(_templateObject9(), function (props) {
   return props.theme.fontFamily;
+}, function (props) {
+  return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
+}, function (props) {
+  return props.error ? props.theme.errorHoverDeleteFileItemBackgroundColor : props.theme.hoverDeleteFileItemBackgroundColor;
+}, function (props) {
+  return props.error ? props.theme.errorActiveDeleteFileItemBackgroundColor : props.theme.activeDeleteFileItemBackgroundColor;
 });
 
 var ErrorMessage = _styledComponents["default"].span(_templateObject10(), function (props) {

package/{dist/file-input → file-input}/index.d.ts

@@ -78,4 +78,4 @@ type Props = {
   tabIndex?: number;
 };
 
-export default function DxcNewInputText(props: Props): JSX.Element;
+export default function DxcFileInput(props: Props): JSX.Element;

package/{dist/footer → footer}/Footer.js

@@ -29,9 +29,21 @@ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _BackgroundColorContext = require("../BackgroundColorContext.js");
 
-function _templateObject12() {
+var _Icons = _interopRequireDefault(require("./Icons"));
+
+function _templateObject13() {
   var data = (0, _taggedTemplateLiteral2["default"])(["\n  text-decoration: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"]);
 
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"]);
+
   _templateObject12 = function _templateObject12() {
     return data;
   };
@@ -40,7 +52,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px 10px;\n  color: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -50,7 +62,7 @@ function _templateObject11() {
 }
 
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    color: ", ";\n  }\n\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"]);
 
   _templateObject10 = function _templateObject10() {
     return data;
@@ -60,7 +72,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    height: ", ";\n    width: ", ";\n    fill: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -70,7 +82,7 @@ function _templateObject9() {
 }
 
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  & {\n    display: inline-flex;\n    margin-left: ", ";\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: ", ";\n  width: ", ";\n"]);
 
   _templateObject8 = function _templateObject8() {
     return data;
@@ -156,8 +168,6 @@ var DxcFooter = function DxcFooter(_ref) {
       bottomLinks = _ref$bottomLinks === void 0 ? [] : _ref$bottomLinks,
       _ref$copyright = _ref.copyright,
       copyright = _ref$copyright === void 0 ? "" : _ref$copyright,
-      _ref$logoSrc = _ref.logoSrc,
-      logoSrc = _ref$logoSrc === void 0 ? "default" : _ref$logoSrc,
       children = _ref.children,
       padding = _ref.padding,
       margin = _ref.margin,
@@ -181,6 +191,20 @@ var DxcFooter = function DxcFooter(_ref) {
       setIsResponsivePhone = _useState6[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var footerLogo = (0, _react.useMemo)(function () {
+    if (!colorsTheme.footer.logo) {
+      return _Icons["default"];
+    }
+
+    if (typeof colorsTheme.footer.logo === "string") {
+      return _react["default"].createElement(LogoImg, {
+        alt: "Logo",
+        src: colorsTheme.footer.logo
+      });
+    }
+
+    return colorsTheme.footer.logo;
+  }, [colorsTheme.footer.logo]);
 
   var handleResize = function handleResize(refWidth) {
     if (ref.current) {
@@ -236,10 +260,7 @@ var DxcFooter = function DxcFooter(_ref) {
     margin: margin,
     refSize: refSize,
     ref: ref
-  }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoIcon, {
-    logoSrc: logoSrc,
-    src: logoSrc === "default" ? colorsTheme.footer.logo : logoSrc
-  }), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
+  }, _react["default"].createElement(FooterHeader, null, _react["default"].createElement(LogoContainer, null, footerLogo), _react["default"].createElement("div", null, socialLink)), isResponsivePhone && _react["default"].createElement("div", null, _react["default"].createElement(FooterFooter, {
     className: "footerFooter",
     refSize: refSize
   }, _react["default"].createElement(BottomLinks, {
@@ -321,17 +342,23 @@ var Copyright = _styledComponents["default"].div(_templateObject6(), function (p
   return props.theme.bottomLinksDividerSpacing;
 });
 
-var LogoIcon = _styledComponents["default"].img(_templateObject7(), function (props) {
+var LogoContainer = _styledComponents["default"].div(_templateObject7(), function (props) {
+  return props.theme.logoHeight;
+}, function (props) {
+  return props.theme.logoWidth;
+});
+
+var LogoImg = _styledComponents["default"].img(_templateObject8(), function (props) {
   return props.theme.logoHeight;
 }, function (props) {
   return props.theme.logoWidth;
 });
 
-var SocialAnchor = _styledComponents["default"].a(_templateObject8(), function (props) {
+var SocialAnchor = _styledComponents["default"].a(_templateObject9(), function (props) {
   return props.index === 0 ? "0px" : props.theme.socialLinksGutter;
 });
 
-var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (props) {
+var SocialIcon = _styledComponents["default"].img(_templateObject10(), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -339,7 +366,7 @@ var SocialIcon = _styledComponents["default"].img(_templateObject9(), function (
   return props.theme.socialLinksColor;
 });
 
-var SocialIconContainer = _styledComponents["default"].div(_templateObject10(), function (props) {
+var SocialIconContainer = _styledComponents["default"].div(_templateObject11(), function (props) {
   return props.theme.socialLinksSize;
 }, function (props) {
   return props.theme.socialLinksSize;
@@ -347,11 +374,11 @@ var SocialIconContainer = _styledComponents["default"].div(_templateObject10(),
   return props.theme.socialLinksColor;
 });
 
-var Point = _styledComponents["default"].span(_templateObject11(), function (props) {
+var Point = _styledComponents["default"].span(_templateObject12(), function (props) {
   return props.theme.bottomLinksFontColor;
 });
 
-var BottomLink = _styledComponents["default"].a(_templateObject12(), function (props) {
+var BottomLink = _styledComponents["default"].a(_templateObject13(), function (props) {
   return props.theme.bottomLinksTextDecoration;
 }, function (props) {
   return props.theme.bottomLinksFontColor;
@@ -366,7 +393,6 @@ var BottomLink = _styledComponents["default"].a(_templateObject12(), function (p
 });
 
 DxcFooter.propTypes = {
-  logoSrc: _propTypes["default"].string,
   socialLinks: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     logo: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
     logoSrc: _propTypes["default"].string.isRequired,

package/footer/Icons.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _default = _react["default"].createElement("svg", {
+  id: "g10",
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "280.781",
+  height: "32",
+  viewBox: "0 0 280.781 32"
+}, _react["default"].createElement("title", null, "DXC Logo"), _react["default"].createElement("g", {
+  id: "g12"
+}, _react["default"].createElement("path", {
+  id: "path14",
+  d: "M171.5-54.124v12.539h-3.6V-54.124h-4.973v-3.191h13.54v3.191H171.5",
+  transform: "translate(-68.528 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path16",
+  d: "M189.96-41.585V-57.315h12.326v3.079h-8.753v3.191h7.7v3.078h-7.7v3.3h8.87v3.078H189.96",
+  transform: "translate(-77.56 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path18",
+  d: "M223.558-41.438a8.1,8.1,0,0,1-8.382-8.1v-.045a8.161,8.161,0,0,1,8.522-8.146,8.6,8.6,0,0,1,6.444,2.431l-2.289,2.543a6.133,6.133,0,0,0-4.178-1.778,4.743,4.743,0,0,0-4.738,4.905v.045a4.752,4.752,0,0,0,4.738,4.95,6,6,0,0,0,4.295-1.845l2.288,2.228a8.491,8.491,0,0,1-6.7,2.813",
+  transform: "translate(-86.019 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path20",
+  d: "M254.988-41.585V-47.9h-6.63v6.315h-3.6V-57.315h3.6v6.225h6.63v-6.225h3.594v15.731h-3.594",
+  transform: "translate(-95.903 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path22",
+  d: "M285.991-41.585l-7.914-10v10h-3.549V-57.315h3.316l7.657,9.685v-9.685h3.549v15.731h-3.058",
+  transform: "translate(-105.869 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path24",
+  d: "M317.2-49.583a4.869,4.869,0,0,0-4.949-4.95,4.793,4.793,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.793,4.793,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.661-3.623-8.661-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.66,3.623,8.66,8.1v.045c0,4.477-3.664,8.145-8.708,8.145",
+  transform: "translate(-115.631 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path26",
+  d: "M336.786-41.585V-57.315h3.6v12.584h8.148v3.146H336.786",
+  transform: "translate(-126.654 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path28",
+  d: "M372.78-49.583a4.87,4.87,0,0,0-4.949-4.95,4.794,4.794,0,0,0-4.9,4.905v.045a4.869,4.869,0,0,0,4.949,4.95,4.794,4.794,0,0,0,4.9-4.905Zm-4.949,8.145c-5.043,0-8.662-3.623-8.662-8.1v-.045c0-4.478,3.666-8.146,8.708-8.146s8.661,3.623,8.661,8.1v.045c0,4.477-3.666,8.145-8.708,8.145",
+  transform: "translate(-135.016 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path30",
+  d: "M399.735-41.438c-5.09,0-8.592-3.443-8.592-8.1v-.045a8.243,8.243,0,0,1,8.568-8.146,9.18,9.18,0,0,1,6.42,2.16l-2.265,2.634a6.141,6.141,0,0,0-4.272-1.6,4.807,4.807,0,0,0-4.692,4.905v.045a4.8,4.8,0,0,0,4.949,4.995,5.89,5.89,0,0,0,3.384-.945v-2.25h-3.618v-2.992h7.1v6.841a10.837,10.837,0,0,1-6.98,2.5",
+  transform: "translate(-145.284 65.583)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path32",
+  d: "M428.664-47.855v6.27h-3.6v-6.2l-6.28-9.528h4.2L426.89-51l3.968-6.315h4.085l-6.28,9.46",
+  transform: "translate(-154.162 65.45)",
+  fill: "#fff"
+}), _react["default"].createElement("path", {
+  id: "path34",
+  d: "M84.218-55.737a10.063,10.063,0,0,1,2.589-4.4,9.792,9.792,0,0,1,6.985-2.77h11.328V-69.3H93.792a17.041,17.041,0,0,0-11.8,4.759,16.344,16.344,0,0,0-3.547,5.115,13.247,13.247,0,0,0-1.122,3.688Zm0,4.877a10.065,10.065,0,0,0,2.589,4.4,9.793,9.793,0,0,0,6.985,2.77h11.328V-37.3H93.792a17.042,17.042,0,0,1-11.8-4.759,16.339,16.339,0,0,1-3.547-5.114,13.251,13.251,0,0,1-1.122-3.688ZM63.1-47.98,54.45-37.3H45.873l12.957-16-12.957-16H54.45L63.1-58.619l8.65-10.68h8.578l-12.957,16,12.957,16H71.749ZM48.875-55.737a13.212,13.212,0,0,0-1.122-3.688,16.359,16.359,0,0,0-3.546-5.115,17.043,17.043,0,0,0-11.8-4.759H21.08v6.393H32.408a9.79,9.79,0,0,1,6.985,2.77,10.072,10.072,0,0,1,2.59,4.4Zm0,4.877a13.215,13.215,0,0,1-1.122,3.688,16.353,16.353,0,0,1-3.546,5.114,17.044,17.044,0,0,1-11.8,4.759H21.08v-6.393H32.408a9.791,9.791,0,0,0,6.985-2.77,10.074,10.074,0,0,0,2.59-4.4h6.892",
+  transform: "translate(-21.08 69.298)",
+  fill: "#fff"
+})));
+
+exports["default"] = _default;

package/footer/index.d.ts

@@ -0,0 +1,25 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  socialLinks?: any;
+  bottomLinks?: any;
+  copyright?: string;
+  padding?: Space | Padding;
+  margin?: Space | Margin;
+  tabIndex?: number;
+  
+};
+
+export default function DxcFooter(props: Props): JSX.Element;