@zohodesk/components 1.0.0-temp-259.3 → 1.0.0-temp-259.5

package/lib/v1/Button/constants/index.js

@@ -56,8 +56,8 @@ var LOADER_PLACEMENT = {
 };
 exports.LOADER_PLACEMENT = LOADER_PLACEMENT;
 var ICON_PLACEMENT = {
-  LEFT: 'left',
-  RIGHT: 'right'
+  START: 'start',
+  END: 'end'
 };
 exports.ICON_PLACEMENT = ICON_PLACEMENT;
 var SHAPE = {
@@ -105,7 +105,7 @@ var DEFAULT_STATUS = STATUS.DEFAULT;
 exports.DEFAULT_STATUS = DEFAULT_STATUS;
 var DEFAULT_LOADER_PLACEMENT = LOADER_PLACEMENT.OVERLAY;
 exports.DEFAULT_LOADER_PLACEMENT = DEFAULT_LOADER_PLACEMENT;
-var DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
+var DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.START;
 exports.DEFAULT_ICON_PLACEMENT = DEFAULT_ICON_PLACEMENT;
 var DEFAULT_ICON_SIZE = 16;
 exports.DEFAULT_ICON_SIZE = DEFAULT_ICON_SIZE;

package/lib/v1/Button/constants/presets.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SUCCESS_TINTED_OUTLINE = exports.SUCCESS_TEXT_ONLY = exports.SUCCESS_GHOST = exports.SECONDARY_GHOST_BRAND_TINTED_ONSELECT = exports.BRAND_TINTED_OUTLINE = exports.BRAND_TEXT_TINTED_HOVER = exports.BRAND_TEXT_TINTED_DANGER_HOVER = exports.BRAND_TEXT_ONLY = exports.BRAND_GHOST = exports.BRAND_BG_ONSELECT = exports.BLACK_TEXT_BRAND_ONHOVER = void 0;
+exports.SUCCESS_TINTED_OUTLINE = exports.SUCCESS_TEXT_ONLY = exports.SUCCESS_GHOST = exports.SECONDARY_GHOST_CANCEL = exports.SECONDARY_GHOST_BRAND_TINTED_ONSELECT = exports.BRAND_TINTED_OUTLINE = exports.BRAND_TEXT_TINTED_HOVER = exports.BRAND_TEXT_TINTED_DANGER_HOVER = exports.BRAND_TEXT_ONLY = exports.BRAND_GHOST = exports.BRAND_BG_ONSELECT = exports.BLACK_TEXT_BRAND_ONHOVER = void 0;
 
 /** Button appearance presets */
 var BRAND_GHOST = {
@@ -109,6 +109,18 @@ var SECONDARY_GHOST_BRAND_TINTED_ONSELECT = {
   }
 };
 exports.SECONDARY_GHOST_BRAND_TINTED_ONSELECT = SECONDARY_GHOST_BRAND_TINTED_ONSELECT;
+var SECONDARY_GHOST_CANCEL = {
+  palette: 'secondary',
+  appearance: {
+    bg: false,
+    border: true
+  },
+  hoverAppearance: {
+    bg: false,
+    border: true
+  }
+};
+exports.SECONDARY_GHOST_CANCEL = SECONDARY_GHOST_CANCEL;
 var BLACK_TEXT_BRAND_ONHOVER = {
   palette: 'brand',
   appearance: {

package/lib/v1/Button/css/cssJSLogic.js

@@ -7,9 +7,7 @@ exports["default"] = cssJSLogic;
 
 var _compileClassNames6 = _interopRequireDefault(require("@zohodesk/utils/es/compileClassNames"));
 
-var _constants = require("@zohodesk/dotkit/es/utils/constants");
-
-var _constants2 = require("../constants");
+var _constants = require("../constants");
 
 var _semanticButtonModule = _interopRequireDefault(require("../../../semantic/Button/semanticButton.module.css"));
 
@@ -46,8 +44,7 @@ function cssJSLogic(_ref) {
       shape = props.shape,
       loaderPlacement = props.loaderPlacement,
       disabledAppearance = props.disabledAppearance,
-      _props$customClass = props.customClass,
-      customClass = _props$customClass === void 0 ? _constants.DUMMY_OBJECT : _props$customClass;
+      customClass = props.customClass;
   var _customClass$wrapper = customClass.wrapper,
       wrapperClass = _customClass$wrapper === void 0 ? '' : _customClass$wrapper,
       _customClass$text = customClass.text,
@@ -58,16 +55,16 @@ function cssJSLogic(_ref) {
       loaderClassCustom = _customClass$loader === void 0 ? '' : _customClass$loader,
       _customClass$success = customClass.success,
       successClassCustom = _customClass$success === void 0 ? '' : _customClass$success;
-  var isLoading = status === _constants2.STATUS.LOADING;
-  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isLoading = status === _constants.STATUS.LOADING;
+  var isSuccess = status === _constants.STATUS.SUCCESS;
   var isInteractive = !isDisabled && !isLoading;
-  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants.LOADER_PLACEMENT.OVERLAY;
 
-  var mergedAppearance = _objectSpread(_objectSpread({}, _constants2.DEFAULT_APPEARANCE), appearance || {});
+  var mergedAppearance = _objectSpread(_objectSpread({}, _constants.DEFAULT_APPEARANCE), appearance);
 
-  var mergedHoverAppearance = _objectSpread(_objectSpread({}, _constants2.DEFAULT_HOVER_APPEARANCE), hoverAppearance || {});
+  var mergedHoverAppearance = _objectSpread(_objectSpread({}, _constants.DEFAULT_HOVER_APPEARANCE), hoverAppearance);
 
-  var mergedSelectedAppearance = _objectSpread(_objectSpread({}, _constants2.DEFAULT_SELECTED_APPEARANCE), selectedAppearance || {});
+  var mergedSelectedAppearance = _objectSpread(_objectSpread({}, _constants.DEFAULT_SELECTED_APPEARANCE), selectedAppearance);
 
   var _getPaletteClasses = (0, _colorHelper["default"])({
     palette: palette,
@@ -94,8 +91,8 @@ function cssJSLogic(_ref) {
   var sizeClass = size ? _Button_v1Module["default"]["size".concat(capitalize(size))] : '';
   var shapeClass = shape ? _Button_v1Module["default"]["shape".concat(capitalize(shape))] : '';
   var variantClass = variant ? _Button_v1Module["default"]["variant".concat(capitalize(variant))] : '';
-  var shouldStrike = disabledAppearance === _constants2.DISABLED_APPEARANCE.STRIKE && isDisabled;
-  var buttonClassName = (0, _compileClassNames6["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg && !(isSelected && !!selectedBg)), _defineProperty(_compileClassNames, selectedBg, !!selectedBg && isSelected), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, text, !!text && !(isSelected && !!selectedText)), _defineProperty(_compileClassNames, selectedText, !!selectedText && isSelected), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive && !isSelected), _defineProperty(_compileClassNames, border, !!border && !(isSelected && !!selectedBorder)), _defineProperty(_compileClassNames, selectedBorder, !!selectedBorder && isSelected), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, variantClass, !!variantClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isDisabled && disabledAppearance === _constants2.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
+  var shouldStrike = disabledAppearance === _constants.DISABLED_APPEARANCE.STRIKE && isDisabled;
+  var buttonClassName = (0, _compileClassNames6["default"])((_compileClassNames = {}, _defineProperty(_compileClassNames, _semanticButtonModule["default"].buttonReset, true), _defineProperty(_compileClassNames, _Button_v1Module["default"].button, true), _defineProperty(_compileClassNames, bg, !!bg && !(isSelected && !!selectedBg)), _defineProperty(_compileClassNames, selectedBg, !!selectedBg && isSelected), _defineProperty(_compileClassNames, hoverBg, !!hoverBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusBg, !!focusBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeBg, !!activeBg && isInteractive && !isSelected), _defineProperty(_compileClassNames, text, !!text && !(isSelected && !!selectedText)), _defineProperty(_compileClassNames, selectedText, !!selectedText && isSelected), _defineProperty(_compileClassNames, hoverText, !!hoverText && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusText, !!focusText && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeText, !!activeText && isInteractive && !isSelected), _defineProperty(_compileClassNames, border, !!border && !(isSelected && !!selectedBorder)), _defineProperty(_compileClassNames, selectedBorder, !!selectedBorder && isSelected), _defineProperty(_compileClassNames, hoverBorder, !!hoverBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, focusBorder, !!focusBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, activeBorder, !!activeBorder && isInteractive && !isSelected), _defineProperty(_compileClassNames, sizeClass, !!sizeClass), _defineProperty(_compileClassNames, shapeClass, !!shapeClass), _defineProperty(_compileClassNames, variantClass, !!variantClass), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledOpac, isDisabled && disabledAppearance === _constants.DISABLED_APPEARANCE.DULL), _defineProperty(_compileClassNames, _Button_v1Module["default"].disabledPointer, isDisabled), _defineProperty(_compileClassNames, _Button_v1Module["default"].loading, isLoading), _defineProperty(_compileClassNames, _Button_v1Module["default"].strike, shouldStrike), _defineProperty(_compileClassNames, wrapperClass, !!wrapperClass), _compileClassNames));
   var textClassName = (0, _compileClassNames6["default"])(_defineProperty({}, textClassCustom, !!textClassCustom));
   var iconClassName = (0, _compileClassNames6["default"])(_defineProperty({}, iconClassCustom, !!iconClassCustom));
   return {

package/lib/v1/Button/props/defaultProps.js

@@ -11,6 +11,9 @@ var _constants2 = require("../constants");
 
 var defaultProps = {
   palette: '',
+  appearance: _constants.DUMMY_OBJECT,
+  hoverAppearance: _constants.DUMMY_OBJECT,
+  selectedAppearance: _constants.DUMMY_OBJECT,
   variant: _constants2.DEFAULT_VARIANT,
   size: _constants2.DEFAULT_SIZE,
   status: _constants2.DEFAULT_STATUS,