@dxc-technology/halstack-react 0.0.0-1c4cbc0 → 0.0.0-1d5e7bf

package/box/Box.js

@@ -71,9 +71,8 @@ var calculateWidth = function calculateWidth(margin, size, padding) {
   return sizes[size];
 };
 
-var StyledDxcBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  letter-spacing: ", ";\n  overflow: hidden;\n  width: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (_ref2) {
-  var display = _ref2.display;
-  return display;
+var StyledDxcBox = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  letter-spacing: ", ";\n  overflow: hidden;\n  width: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"])), function (props) {
+  return props.display;
 }, function (props) {
   return props.theme.borderRadius;
 }, function (props) {
@@ -90,36 +89,27 @@ var StyledDxcBox = _styledComponents["default"].div(_templateObject || (_templat
   return props.theme.backgroundColor;
 }, function (props) {
   return props.shadowDepth === 1 ? "".concat(props.theme.oneShadowDepthShadowOffsetX, " ").concat(props.theme.oneShadowDepthShadowOffsetY, " ").concat(props.theme.oneShadowDepthShadowBlur, "  ").concat(props.theme.oneShadowDepthShadowSpread, " ").concat(props.theme.oneShadowDepthShadowColor) : props.shadowDepth === 2 ? "".concat(props.theme.twoShadowDepthShadowOffsetX, " ").concat(props.theme.twoShadowDepthShadowOffsetY, " ").concat(props.theme.twoShadowDepthShadowBlur, "  ").concat(props.theme.twoShadowDepthShadowSpread, " ").concat(props.theme.twoShadowDepthShadowColor) : "".concat(props.theme.noneShadowDepthShadowOffsetX, " ").concat(props.theme.noneShadowDepthShadowOffsetY, " ").concat(props.theme.noneShadowDepthShadowBlur, "  ").concat(props.theme.noneShadowDepthShadowSpread, " ").concat(props.theme.noneShadowDepthShadowColor);
-}, function (_ref3) {
-  var margin = _ref3.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
-}, function (_ref6) {
-  var margin = _ref6.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
-}, function (_ref8) {
-  var padding = _ref8.padding;
+}, 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] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
+}, function (props) {
+  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 (_ref2) {
+  var padding = _ref2.padding;
   return padding && (0, _typeof2["default"])(padding) !== "object" ? _variables.spaces[padding] : "0px";
-}, function (_ref9) {
-  var padding = _ref9.padding;
-  return padding && padding.top ? _variables.spaces[padding.top] : "";
-}, function (_ref10) {
-  var padding = _ref10.padding;
-  return padding && padding.right ? _variables.spaces[padding.right] : "";
-}, function (_ref11) {
-  var padding = _ref11.padding;
-  return padding && padding.bottom ? _variables.spaces[padding.bottom] : "";
-}, function (_ref12) {
-  var padding = _ref12.padding;
-  return padding && padding.left ? _variables.spaces[padding.left] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.top ? _variables.spaces[props.padding.top] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.right ? _variables.spaces[props.padding.right] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.bottom ? _variables.spaces[props.padding.bottom] : "";
+}, function (props) {
+  return props.padding && (0, _typeof2["default"])(props.padding) === "object" && props.padding.left ? _variables.spaces[props.padding.left] : "";
 });
 
 var _default = DxcBox;

package/card/Card.js

@@ -25,7 +25,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Box = _interopRequireDefault(require("../box/Box"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 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); }
 
@@ -64,17 +64,6 @@ var DxcCard = function DxcCard(_ref) {
     src: imageSrc
   }));
 
-  var tagContent = /*#__PURE__*/_react["default"].createElement(_Box["default"], {
-    shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
-  }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.card
-  }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
-    hasAction: onClick || linkHref,
-    imagePosition: imagePosition
-  }, imageSrc && imagePosition === "before" && imageComponent, /*#__PURE__*/_react["default"].createElement(CardContent, {
-    contentPadding: contentPadding
-  }, children), imageSrc && imagePosition === "after" && imageComponent)));
-
   return /*#__PURE__*/_react["default"].createElement(StyledDxcCard, {
     margin: margin,
     onMouseEnter: function onMouseEnter() {
@@ -84,15 +73,23 @@ var DxcCard = function DxcCard(_ref) {
       return changeIsHovered(false);
     },
     onClick: onClick,
-    hasAction: onClick,
-    tabIndex: typeof onClick === "function" && !linkHref ? tabIndex : -1
-  }, linkHref && /*#__PURE__*/_react["default"].createElement(StyledLink, {
-    tabIndex: tabIndex,
+    hasAction: onClick || linkHref,
+    tabIndex: onClick || linkHref ? tabIndex : -1,
+    as: linkHref && "a",
     href: linkHref
-  }, tagContent) || tagContent);
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    shadowDepth: !outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
+  }, /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
+    theme: colorsTheme.card
+  }, /*#__PURE__*/_react["default"].createElement(CardContainer, {
+    hasAction: onClick || linkHref,
+    imagePosition: imagePosition
+  }, imageSrc && imagePosition === "before" && imageComponent, /*#__PURE__*/_react["default"].createElement(CardContent, {
+    contentPadding: contentPadding
+  }, children), imageSrc && imagePosition === "after" && imageComponent))));
 };
 
-var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  :focus {\n    outline: #0095ff auto 1px;\n  }\n"])), function (_ref2) {
+var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  text-decoration: none;\n\n  ", "\n"])), function (_ref2) {
   var hasAction = _ref2.hasAction;
   return hasAction && "pointer" || "unset";
 }, function (_ref3) {
@@ -113,49 +110,50 @@ var StyledDxcCard = _styledComponents["default"].div(_templateObject || (_templa
 }, function (_ref8) {
   var margin = _ref8.margin;
   return margin && margin.left ? _variables.spaces[margin.left] : "";
+}, function (_ref9) {
+  var hasAction = _ref9.hasAction;
+  return hasAction && ":focus {\n    outline: #0095ff auto 1px;\n  }";
 });
 
 var CardContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  height: ", ";\n  width: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (props) {
   return props.theme.height;
 }, function (props) {
   return props.theme.width;
-}, function (_ref9) {
-  var hasAction = _ref9.hasAction;
+}, function (_ref10) {
+  var hasAction = _ref10.hasAction;
   return hasAction ? "" : "unset";
 });
 
-var StyledLink = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  text-decoration: none;\n\n  :focus {\n    outline-color: #0095ff;\n  }\n"])));
-
-var TagImage = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  object-fit: ", ";\n"])), function (_ref10) {
-  var imagePadding = _ref10.imagePadding;
-  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
-}, function (_ref11) {
+var TagImage = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  object-fit: ", ";\n"])), function (_ref11) {
   var imagePadding = _ref11.imagePadding;
   return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
 }, function (_ref12) {
-  var cover = _ref12.cover;
+  var imagePadding = _ref12.imagePadding;
+  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
+}, function (_ref13) {
+  var cover = _ref13.cover;
   return cover ? "cover" : "contain";
 });
 
-var ImageContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 35%;\n  height: 100%;\n  flex-shrink: 0;\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n"])), function (_ref13) {
-  var imageBgColor = _ref13.imageBgColor;
+var ImageContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 35%;\n  height: 100%;\n  flex-shrink: 0;\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n"])), function (_ref14) {
+  var imageBgColor = _ref14.imageBgColor;
   return imageBgColor;
 });
 
-var CardContent = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"])), function (_ref14) {
-  var contentPadding = _ref14.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
-}, function (_ref15) {
+var CardContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"])), function (_ref15) {
   var contentPadding = _ref15.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.top ? _variables.spaces[contentPadding.top] : "";
+  return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
 }, function (_ref16) {
   var contentPadding = _ref16.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.right ? _variables.spaces[contentPadding.right] : "";
+  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.top ? _variables.spaces[contentPadding.top] : "";
 }, function (_ref17) {
   var contentPadding = _ref17.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.bottom ? _variables.spaces[contentPadding.bottom] : "";
+  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.right ? _variables.spaces[contentPadding.right] : "";
 }, function (_ref18) {
   var contentPadding = _ref18.contentPadding;
+  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.bottom ? _variables.spaces[contentPadding.bottom] : "";
+}, function (_ref19) {
+  var contentPadding = _ref19.contentPadding;
   return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.left ? _variables.spaces[contentPadding.left] : "";
 });
 

package/common/variables.js

@@ -27,6 +27,7 @@ var globalTokens = {
   hal_purple_s_38: "#5f249f",
   hal_purple_d_30: "#4b1c7d",
   hal_purple_d_20: "#321353",
+  hal_purple_d_70: "#9A6BB2",
   color_purple_600: "#7D2FD0",
   color_purple_300: "#cbacec",
   hal_blue_l_95: "#e6f4ff",
@@ -781,21 +782,21 @@ var componentTokens = {
     overlayColor: globalTokens.black,
     overlayOpacity: "0.8"
   },
-  radio: {
-    circleLabelSpacing: "10px",
-    circleSize: "24px",
-    color: globalTokens.black,
-    colorOnDark: globalTokens.white,
-    disabledColor: globalTokens.lighterBlack,
-    disabledColorOnDark: "#575757",
-    disabledFontColor: globalTokens.lighterBlack,
-    disabledFontColorOnDark: "#575757",
-    focusColor: globalTokens.hal_blue_l_50,
-    focusColorOnDark: "#1682FF",
-    fontColor: globalTokens.inherit,
-    fontColorOnDark: globalTokens.white,
+  quickNav: {
+    fontColor: globalTokens.hal_grey_s_40,
+    hoverFontColor: globalTokens.hal_purple_d_70,
+    selectedFontColor: globalTokens.hal_purple_s_38,
+    dividerBorderColor: globalTokens.hal_grey_l_75,
+    focusBorderColor: globalTokens.hal_blue_l_50,
+    focusBorderStyle: globalTokens.border_solid,
+    focusBorderThickness: globalTokens.border_width_2,
+    focusBorderRadius: globalTokens.border_width_2,
+    paddingTop: globalTokens.spacing_03,
+    paddingBottom: globalTokens.spacing_03,
+    paddingLeft: globalTokens.spacing_05,
+    paddingRight: globalTokens.spacing_05,
     fontFamily: globalTokens.type_sans,
-    fontSize: globalTokens.type_scale_root,
+    fontSize: globalTokens.type_scale_02,
     fontStyle: globalTokens.type_normal,
     fontWeight: globalTokens.type_regular
   },
@@ -1149,6 +1150,7 @@ var componentTokens = {
     disabledFontColor: "#999999",
     disabledIconColor: "#999999",
     disabledFontStyle: globalTokens.type_normal,
+    disabledBadgeBackgroundColor: "#0000004D",
     hoverBackgroundColor: "#f2eafa",
     pressedBackgroundColor: "#e5d5f6",
     pressedFontWeight: globalTokens.type_semibold,
@@ -1460,6 +1462,9 @@ var defaultTranslatedComponentLabels = {
     daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
     monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
+  },
+  applicationLayout: {
+    visibilityToggleTitle: "Toggle visibility sidenav"
   }
 };
 exports.defaultTranslatedComponentLabels = defaultTranslatedComponentLabels;

package/dropdown/Dropdown.stories.tsx

@@ -17,7 +17,7 @@ const iconSVG = (
 );
 
 const iconSVGLarge = (
-  <svg enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+  <svg enableBackground="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
     <g>
       <path d="M0,0h24v24H0V0z" fill="none" />
       <path d="M0,0h24v24H0V0z" fill="none" />

package/footer/Icons.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var dxcLogo = /*#__PURE__*/_react["default"].createElement("svg", {
   id: "g10",
   xmlns: "http://www.w3.org/2000/svg",
-  width: "280.781",
+  width: "100%",
   height: "32",
   viewBox: "0 0 280.781 32"
 }, /*#__PURE__*/_react["default"].createElement("title", null, "DXC Logo"), /*#__PURE__*/_react["default"].createElement("g", {

package/inline/Inline.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import InlineProps from "./types";
+declare const DxcInline: ({ wrap, alignX, alignY, as, divider, gutter, reverse, children, }: InlineProps) => JSX.Element;
+export default DxcInline;

package/inline/Inline.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var DxcInline = function DxcInline(_ref) {
+  var _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+      _ref$alignX = _ref.alignX,
+      alignX = _ref$alignX === void 0 ? "start" : _ref$alignX,
+      _ref$alignY = _ref.alignY,
+      alignY = _ref$alignY === void 0 ? "stretch" : _ref$alignY,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "div" : _ref$as,
+      _ref$divider = _ref.divider,
+      divider = _ref$divider === void 0 ? false : _ref$divider,
+      _ref$gutter = _ref.gutter,
+      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
+      _ref$reverse = _ref.reverse,
+      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(Inline, {
+    wrap: wrap,
+    as: as,
+    alignX: alignX,
+    alignY: alignY,
+    gutter: gutter,
+    reverse: reverse,
+    divider: divider
+  }, _react["default"].Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
+  }));
+};
+
+var Inline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  padding: 0px;\n  margin: 0px;\n  width: 100%;\n"])), function (_ref2) {
+  var wrap = _ref2.wrap,
+      alignX = _ref2.alignX,
+      alignY = _ref2.alignY,
+      gutter = _ref2.gutter,
+      reverse = _ref2.reverse,
+      divider = _ref2.divider;
+  return "\n    flex-wrap: ".concat(wrap ? "wrap" : "nowrap", ";\n    flex-direction: ").concat(reverse ? "row-reverse" : "row", ";\n    align-items: stretch;\n    justify-content: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(divider ? "calc(".concat(gutter, "/2 - 1px)") : gutter, ";\n\n    & > * {\n      align-self: ").concat(alignY === "start" || alignY === "end" ? "flex-".concat(alignY) : alignY, ";\n    }\n  ");
+});
+
+var Divider = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 1px;\n  background-color: #999999;\n  align-self: stretch;\n"])));
+
+var _default = DxcInline;
+exports["default"] = _default;