@dxc-technology/halstack-react 0.0.0-0d64afc → 0.0.0-0d951d2

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;
@@ -194,6 +194,7 @@ 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);
     },
@@ -251,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 DxcTextInput(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;