@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

package/lib/v1/Button/Button.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ButtonPresentational = void 0;
 
 var _cssUtility = require("@dot-system/css-utility");
 
@@ -17,24 +17,24 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
 var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
-var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
-
 var _renderNode = _interopRequireWildcard(require("@zohodesk/utils/es/renderNode"));
 
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
 var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
+var _Spinner = _interopRequireDefault(require("../shared/Spinner/Spinner"));
 
 var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
 var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
 
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -53,17 +53,18 @@ var getTypographySize = function getTypographySize(size) {
   return _constants2.TYPOGRAPHY_SIZE_MAP[size] || '13';
 };
 
-var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
-  var palette = props.palette,
-      bgAppearance = props.bgAppearance,
-      borderAppearance = props.borderAppearance,
+var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPresentational(props, ref) {
+  var isLoading = props.isLoading,
+      isSuccess = props.isSuccess,
+      isDisabled = props.isDisabled,
+      isDisabledState = props.isDisabledState,
+      overlayActive = props.overlayActive,
       variant = props.variant,
-      status = props.status,
+      iconPlacement = props.iconPlacement,
       loaderPlacement = props.loaderPlacement,
       size = props.size,
       iconName = props.iconName,
       iconSize = props.iconSize,
-      iconPlacement = props.iconPlacement,
       renderIcon = props.renderIcon,
       renderBefore = props.renderBefore,
       renderAfter = props.renderAfter,
@@ -71,105 +72,94 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       renderSuccess = props.renderSuccess,
       children = props.children,
       type = props.type,
-      onClick = props.onClick,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
       isSelected = props.isSelected,
-      shape = props.shape,
-      paletteShade = props.paletteShade,
-      disabledAppearance = props.disabledAppearance,
       title = props.title,
       customProps = props.customProps,
       customAttributes = props.customAttributes,
       a11yAttributes = props.a11yAttributes,
       customId = props.customId,
-      testId = props.testId;
-  var isLoading = status === _constants2.STATUS.LOADING;
-  var isSuccess = status === _constants2.STATUS.SUCCESS;
-  var isDisabledState = isDisabled || isLoading;
-  var isInteractionDisabled = isDisabledState || isReadOnly;
-  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
-  var _customProps$text = customProps.text,
-      contentProps = _customProps$text === void 0 ? _constants.DUMMY_OBJECT : _customProps$text,
-      _customProps$icon = customProps.icon,
-      iconProps = _customProps$icon === void 0 ? _constants.DUMMY_OBJECT : _customProps$icon;
-  var iconTagAttributes = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, iconProps.tagAttributes || _constants.DUMMY_OBJECT), {}, {
-      'data-test-id': testId ? "".concat(testId, "_icon") : undefined
-    });
-  }, [iconProps.tagAttributes, testId]);
-  var classes = (0, _react.useMemo)(function () {
-    return (0, _cssJSLogic["default"])({
-      props: props
-    });
-  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
-  var loaderOverlayClass = classes.loaderOverlayClass,
-      successOverlayClass = classes.successOverlayClass,
-      contentWrapperClass = classes.contentWrapperClass,
-      textClassName = classes.textClassName,
-      buttonClassName = classes.buttonClassName,
-      iconClassName = classes.iconClassName;
-  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
-
-  var _handleClick = function _handleClick(event) {
-    if (isInteractionDisabled) {
-      return;
-    }
+      testId = props.testId,
+      dataSelectorId = props.dataSelectorId,
+      handleClick = props.handleClick,
+      classNames = props.classNames;
+  var loaderOverlayClass = classNames.loaderOverlayClass,
+      successOverlayClass = classNames.successOverlayClass,
+      contentWrapperClass = classNames.contentWrapperClass,
+      textClassName = classNames.textClassName,
+      buttonClassName = classNames.buttonClassName,
+      iconClassName = classNames.iconClassName,
+      loaderClassName = classNames.loaderClassName,
+      successClassName = classNames.successClassName;
+
+  var _ref = customProps || _constants.DUMMY_OBJECT,
+      _ref$text = _ref.text,
+      contentProps = _ref$text === void 0 ? _constants.DUMMY_OBJECT : _ref$text,
+      _ref$icon = _ref.icon,
+      iconProps = _ref$icon === void 0 ? _constants.DUMMY_OBJECT : _ref$icon;
+
+  var _ref2 = customAttributes || _constants.DUMMY_OBJECT,
+      _ref2$button = _ref2.button,
+      buttonAttributes = _ref2$button === void 0 ? _constants.DUMMY_OBJECT : _ref2$button,
+      _ref2$contentWrapper = _ref2.contentWrapper,
+      contentWrapperAttributes = _ref2$contentWrapper === void 0 ? _constants.DUMMY_OBJECT : _ref2$contentWrapper,
+      _ref2$loader = _ref2.loader,
+      loaderAttributes = _ref2$loader === void 0 ? _constants.DUMMY_OBJECT : _ref2$loader,
+      _ref2$success = _ref2.success,
+      successAttributes = _ref2$success === void 0 ? _constants.DUMMY_OBJECT : _ref2$success,
+      _ref2$icon = _ref2.icon,
+      iconAttributes = _ref2$icon === void 0 ? _constants.DUMMY_OBJECT : _ref2$icon,
+      _ref2$text = _ref2.text,
+      textAttributes = _ref2$text === void 0 ? _constants.DUMMY_OBJECT : _ref2$text;
+
+  var iconTagAttributes = _objectSpread(_objectSpread({}, iconAttributes), {}, {
+    'data-test-id': testId ? "".concat(testId, "_icon") : undefined
+  });
 
-    onClick(event);
-  };
+  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
 
   var _renderLoader = function _renderLoader() {
-    if (!isLoading) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderLoader)) {
-      return (0, _renderNode["default"])(renderLoader, {
-        status: status
-      });
-    }
-
-    var loaderClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    if (!isLoading) return null;
+    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+    var hasCustomLoader = (0, _renderNode.isRenderable)(renderLoader);
+    if (hasCustomLoader && !isOverlay) return (0, _renderNode["default"])(renderLoader, {
+      status: _constants2.STATUS.LOADING
+    });
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: loaderClassName,
+      $ui_className: isOverlay ? loaderOverlayClass : '',
       testId: testId ? "".concat(testId, "_loader") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+    }, hasCustomLoader ? undefined : loaderAttributes), hasCustomLoader ? (0, _renderNode["default"])(renderLoader, {
+      status: _constants2.STATUS.LOADING
+    }) : /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
+      customClass: loaderClassName
+    }));
   };
 
   var _renderSuccess = function _renderSuccess() {
-    if (!isSuccess) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderSuccess)) {
-      return (0, _renderNode["default"])(renderSuccess, {
-        status: status
-      });
-    }
-
-    var successClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    if (!isSuccess) return null;
+    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+    var hasCustomSuccess = (0, _renderNode.isRenderable)(renderSuccess);
+    if (hasCustomSuccess && !isOverlay) return (0, _renderNode["default"])(renderSuccess, {
+      status: _constants2.STATUS.SUCCESS
+    });
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: successClassName,
+      $ui_className: isOverlay ? successOverlayClass : '',
       testId: testId ? "".concat(testId, "_success") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null));
+    }, hasCustomSuccess ? undefined : successAttributes), hasCustomSuccess ? (0, _renderNode["default"])(renderSuccess, {
+      status: _constants2.STATUS.SUCCESS
+    }) : /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
+      customClass: successClassName
+    }));
   };
 
   var _renderIconNode = function _renderIconNode() {
-    if (!showIcon) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderIcon)) {
-      return (0, _renderNode["default"])(renderIcon);
-    }
-
+    if (!showIcon) return null;
+    if ((0, _renderNode.isRenderable)(renderIcon)) return (0, _renderNode["default"])(renderIcon);
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
@@ -179,59 +169,128 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
     }));
   };
 
-  var _renderBeforeNode = function _renderBeforeNode() {
-    if (!(0, _renderNode.isRenderable)(renderBefore)) {
-      return null;
-    }
-
-    return (0, _renderNode["default"])(renderBefore, props);
-  };
-
-  var _renderAfterNode = function _renderAfterNode() {
-    if (!(0, _renderNode.isRenderable)(renderAfter)) {
-      return null;
-    }
-
-    return (0, _renderNode["default"])(renderAfter, props);
-  };
-
   var _renderContent = function _renderContent() {
-    var shouldShowText = variant !== _constants2.VARIANT.ICON && children !== undefined && children !== null;
+    var shouldShowText = variant !== _constants2.VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
     var showLoaderStart = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
     var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showSuccessAfter = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
-    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({
       $ui_displayMode: "flex",
       $ui_direction: "row",
       $flag_shrink: true,
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
       $ui_className: contentWrapperClass
-    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, contentProps, {
+    }, contentWrapperAttributes), showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, (0, _renderNode.isRenderable)(renderBefore) ? (0, _renderNode["default"])(renderBefore, props) : null, iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
+      $ui_size: getTypographySize(size)
+    }, contentProps, {
+      tagAttributes: textAttributes,
       $ui_className: textClassName,
-      $ui_size: getTypographySize(size),
       $flag_dotted: variant !== _constants2.VARIANT.ICON
-    }), children) : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+    }), children) : children : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, (0, _renderNode.isRenderable)(renderAfter) ? (0, _renderNode["default"])(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  var containerAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
-    'data-id': customId,
-    'data-test-id': testId,
+  var containerAttributes = _objectSpread(_objectSpread({}, buttonAttributes), {}, {
+    'data-id': isDisabled ? "".concat(customId, "_disabled") : customId,
+    'data-test-id': isDisabled ? "".concat(testId, "_disabled") : testId,
+    'data-selector-id': dataSelectorId,
     'data-title': title
   });
 
-  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, {
+    "aria-busy": isLoading,
+    disabled: isDisabledState,
+    "aria-pressed": isSelected
+  }, a11yAttributes, {
     ref: ref,
     type: type,
     className: (0, _cssUtility.cn)(buttonClassName),
-    "aria-busy": isLoading,
-    "aria-disabled": isDisabledState,
-    "aria-readonly": isReadOnly,
-    "aria-pressed": isSelected,
-    onClick: _handleClick
+    onClick: handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
+exports.ButtonPresentational = ButtonPresentational;
+ButtonPresentational.displayName = 'ButtonPresentational';
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
+  var palette = props.palette,
+      appearance = props.appearance,
+      hoverAppearance = props.hoverAppearance,
+      selectedAppearance = props.selectedAppearance,
+      variant = props.variant,
+      status = props.status,
+      loaderPlacement = props.loaderPlacement,
+      size = props.size,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconPlacement = props.iconPlacement,
+      renderIcon = props.renderIcon,
+      renderBefore = props.renderBefore,
+      renderAfter = props.renderAfter,
+      renderLoader = props.renderLoader,
+      renderSuccess = props.renderSuccess,
+      children = props.children,
+      type = props.type,
+      onClick = props.onClick,
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected,
+      shape = props.shape,
+      disabledAppearance = props.disabledAppearance,
+      title = props.title,
+      customProps = props.customProps,
+      customAttributes = props.customAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customId = props.customId,
+      testId = props.testId,
+      dataSelectorId = props.dataSelectorId;
+  var isLoading = status === _constants2.STATUS.LOADING;
+  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isDisabledState = isDisabled || isLoading;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+  var classNames = (0, _react.useMemo)(function () {
+    return (0, _cssJSLogic["default"])({
+      props: props
+    });
+  }, [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+
+  var handleClick = function handleClick(event) {
+    if (isDisabledState) return;
+    onClick(event);
+  };
+
+  var essentials = {
+    isLoading: isLoading,
+    isSuccess: isSuccess,
+    isDisabled: isDisabled,
+    isDisabledState: isDisabledState,
+    overlayActive: overlayActive,
+    variant: variant,
+    iconPlacement: iconPlacement,
+    loaderPlacement: loaderPlacement,
+    size: size,
+    iconName: iconName,
+    iconSize: iconSize,
+    renderIcon: renderIcon,
+    renderBefore: renderBefore,
+    renderAfter: renderAfter,
+    renderLoader: renderLoader,
+    renderSuccess: renderSuccess,
+    children: children,
+    type: type,
+    isSelected: isSelected,
+    title: title,
+    customProps: customProps,
+    customAttributes: customAttributes,
+    a11yAttributes: a11yAttributes,
+    customId: customId,
+    testId: testId,
+    dataSelectorId: dataSelectorId,
+    handleClick: handleClick
+  };
+  return /*#__PURE__*/_react["default"].createElement(ButtonPresentational, _extends({}, essentials, {
+    classNames: classNames,
+    ref: ref
+  }));
+});
 Button.propTypes = _propTypes["default"];
 Button.defaultProps = _defaultProps["default"];
 Button.displayName = 'Button';

package/lib/v1/Button/README.md

@@ -62,8 +62,9 @@ import Button from '@zohodesk/components/es/v1/Button/Button';
 | `customId` | `string` | — | `data-id` attribute for automation |
 | `testId` | `string` | — | `data-test-id` attribute for testing |
 | `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
-| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
-| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
+| `appearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored at rest |
+| `hoverAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored on hover/focus/active |
+| `selectedAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored when `isSelected` |
 | `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
 | `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
 | `status` | `oneOf: default, loading, success` | `default` | Status state |