@zohodesk/components 1.6.25 → 1.6.26

package/lib/v1/helpers/colorHelpers/colorHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextClass = exports.getBorderClass = exports.getBgClass = exports["default"] = void 0;
+exports["default"] = void 0;
 
 var _backgroundColorModule = _interopRequireDefault(require("./background/backgroundColor.module.css"));
 
@@ -11,182 +11,159 @@ var _borderColorModule = _interopRequireDefault(require("./border/borderColor.mo
 
 var _textColorModule = _interopRequireDefault(require("./text/textColor.module.css"));
 
-var _constants = require("@zohodesk/dotkit/es/utils/constants");
-
-var _constants2 = require("./constants");
+var _constants = require("./constants");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var withState = function withState(state, key) {
-  return state ? "".concat(state, ":").concat(key) : key;
-};
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-var toBgIntensity = function toBgIntensity(tone, hasState, isLighter) {
-  var intensity = _constants2.TONE_INTENSITY[tone];
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-  if (!intensity) {
-    return tone;
-  }
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-  if (hasState) {
-    return "".concat(tone, "-").concat(isLighter ? intensity.lightHover : intensity.hover);
-  }
-
-  return "".concat(tone, "-").concat(isLighter ? intensity.light : intensity.base);
+var withState = function withState(state, key) {
+  return state ? "".concat(state, ":").concat(key) : key;
 };
 
-var toTextIntensity = function toTextIntensity(tone, hasState) {
-  var intensity = _constants2.TONE_INTENSITY[tone];
-
-  if (!intensity) {
-    return tone;
-  }
-
-  if (hasState) {
-    var _intensity$textHover;
-
-    return "".concat(tone, "-").concat((_intensity$textHover = intensity.textHover) !== null && _intensity$textHover !== void 0 ? _intensity$textHover : intensity.hover);
-  }
-
-  return "".concat(tone, "-").concat(intensity.base);
+var resolveConfig = function resolveConfig(value, paletteConfig) {
+  if (!value) return null;
+  if (value === true) return paletteConfig ? _objectSpread(_objectSpread({}, paletteConfig), {}, {
+    isInherit: true
+  }) : null;
+  return _constants.PALETTE_CONFIG[value] || {
+    tone: value,
+    textTone: value,
+    filledTextTone: value
+  };
 };
 
-var toBorderIntensity = function toBorderIntensity(tone, hasState, isLighter) {
-  var intensity = _constants2.TONE_INTENSITY[tone];
-
-  if (!intensity) {
-    return tone;
-  }
-
-  if (hasState) {
-    return "".concat(tone, "-").concat(intensity.hover);
-  }
-
-  return "".concat(tone, "-").concat(isLighter ? intensity.borderLight : intensity.base);
+var isContinuingTone = function isContinuingTone(config, restConfig) {
+  return !!(config && restConfig && config.tone === restConfig.tone && !!config.isLighter === !!restConfig.isLighter);
 };
 
-var getBgClass = function getBgClass(_ref) {
-  var state = _ref.state,
-      tone = _ref.tone,
-      isLighter = _ref.isLighter;
-  return _backgroundColorModule["default"][withState(state, "bg-".concat(toBgIntensity(tone, !!state, isLighter)))];
+var getBgClass = function getBgClass(state, config, darker) {
+  var tone = config.tone,
+      isLighter = config.isLighter;
+  var intensity = _constants.TONE_INTENSITY[tone];
+  if (!intensity) return _backgroundColorModule["default"][withState(state, "bg-".concat(tone))];
+  var shade = darker ? isLighter ? intensity.lightHover : intensity.hover : isLighter ? intensity.light : intensity.base;
+  return _backgroundColorModule["default"][withState(state, "bg-".concat(tone, "-").concat(shade))];
 };
 
-exports.getBgClass = getBgClass;
-
-var getTextClass = function getTextClass(_ref2) {
-  var state = _ref2.state,
-      textTone = _ref2.textTone;
-  return _textColorModule["default"][withState(state, "text-".concat(toTextIntensity(textTone, !!state)))];
+var getBorderClass = function getBorderClass(state, config, darker) {
+  var tone = config.tone,
+      isLighter = config.isLighter;
+  var intensity = _constants.TONE_INTENSITY[tone];
+  if (!intensity) return _borderColorModule["default"][withState(state, "border-".concat(tone))];
+  var shade = darker ? intensity.hover : isLighter ? intensity.borderLight : intensity.base;
+  return _borderColorModule["default"][withState(state, "border-".concat(tone, "-").concat(shade))];
 };
 
-exports.getTextClass = getTextClass;
+var getTextClass = function getTextClass(state, textTone, darker) {
+  var _intensity$textHover;
 
-var getBorderClass = function getBorderClass(_ref3) {
-  var state = _ref3.state,
-      tone = _ref3.tone,
-      isLighter = _ref3.isLighter;
-  return _borderColorModule["default"][withState(state, "border-".concat(toBorderIntensity(tone, !!state, isLighter)))];
+  var intensity = _constants.TONE_INTENSITY[textTone];
+  if (!intensity) return _textColorModule["default"][withState(state, "text-".concat(textTone))];
+  var shade = darker ? (_intensity$textHover = intensity.textHover) !== null && _intensity$textHover !== void 0 ? _intensity$textHover : intensity.hover : intensity.base;
+  return _textColorModule["default"][withState(state, "text-".concat(textTone, "-").concat(shade))];
 };
 
-exports.getBorderClass = getBorderClass;
+var resolveTextTone = function resolveTextTone(textConfig, bgConfig) {
+  if (!textConfig) return null;
+  if (textConfig.isInherit && bgConfig) return bgConfig.isLighter ? textConfig.textTone : textConfig.filledTextTone;
+  return textConfig.textTone || null;
+};
 
-var buildPaletteClasses = function buildPaletteClasses(config, _ref4) {
-  var bgAppearance = _ref4.bgAppearance,
-      borderAppearance = _ref4.borderAppearance,
-      paletteShade = _ref4.paletteShade,
-      isSelected = _ref4.isSelected;
-  var tone = config.tone,
-      textTone = config.textTone,
-      filledTextTone = config.filledTextTone;
-  var isLighter = paletteShade === 'lighter';
-  var hasBgState = bgAppearance !== 'none';
-  var isFilledBg = bgAppearance === 'default';
-  var hasBorderState = borderAppearance !== 'none';
-  var hasTransparentBorder = borderAppearance === 'onHover' || borderAppearance === 'none';
-  var baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone;
-  var stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone;
+var BG_BORDER_INVALID = new Set(['black', 'white']);
+var TEXT_INVALID = new Set(['transparent']);
+
+var buildStateClasses = function buildStateClasses(_ref) {
+  var appearance = _ref.appearance,
+      state = _ref.state,
+      paletteConfig = _ref.paletteConfig,
+      restAppearance = _ref.restAppearance,
+      restPaletteConfig = _ref.restPaletteConfig,
+      textFallbackBgConfig = _ref.textFallbackBgConfig;
+  if (!appearance) return {
+    bg: '',
+    text: '',
+    border: ''
+  };
+  var rawBgConfig = resolveConfig(appearance.bg, paletteConfig);
+  var rawBorderConfig = resolveConfig(appearance.border, paletteConfig);
+  var rawTextConfig = resolveConfig(appearance.text, paletteConfig);
+  var bgConfig = rawBgConfig && !BG_BORDER_INVALID.has(rawBgConfig.tone) ? rawBgConfig : null;
+  var borderConfig = rawBorderConfig && !BG_BORDER_INVALID.has(rawBorderConfig.tone) ? rawBorderConfig : null;
+  var textConfig = rawTextConfig && !TEXT_INVALID.has(rawTextConfig.tone) ? rawTextConfig : null;
+  var rawRestBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
+  var restBgConfig = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : null;
+  var rawRestBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
+  var restBorderConfig = rawRestBorderConfig && !BG_BORDER_INVALID.has(rawRestBorderConfig.tone) ? rawRestBorderConfig : null;
+  var rawRestTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : null;
+  var restTextConfig = rawRestTextConfig && !TEXT_INVALID.has(rawRestTextConfig.tone) ? rawRestTextConfig : null;
+  var bg = bgConfig ? getBgClass(state, bgConfig, isContinuingTone(bgConfig, restBgConfig)) || '' : '';
+  var border = borderConfig ? getBorderClass(state, borderConfig, isContinuingTone(borderConfig, restBorderConfig)) || '' : state ? '' : _borderColorModule["default"]['border-transparent'] || '';
+  var effectiveBgForText = bgConfig || textFallbackBgConfig || restBgConfig || null;
+  var textTone = resolveTextTone(textConfig, effectiveBgForText);
+  var restTextTone = resolveTextTone(restTextConfig, restBgConfig);
+  var text = textTone ? getTextClass(state, textTone, textTone === restTextTone) || '' : '';
   return {
-    bg: isSelected ? hasBgState ? getBgClass({
-      state: 'selected',
-      tone: tone,
-      isLighter: isLighter
-    }) : '' : isFilledBg ? getBgClass({
-      tone: tone,
-      isLighter: isLighter
-    }) : '',
-    hoverBg: hasBgState ? getBgClass({
-      state: 'hover',
-      tone: tone,
-      isLighter: isLighter
-    }) : '',
-    focusBg: hasBgState ? getBgClass({
-      state: 'focus',
-      tone: tone,
-      isLighter: isLighter
-    }) : '',
-    activeBg: hasBgState ? getBgClass({
-      state: 'active',
-      tone: tone,
-      isLighter: isLighter
-    }) : '',
-    text: isSelected ? getTextClass({
-      state: 'selected',
-      textTone: hasBgState ? stateTextTone : baseTextTone
-    }) : getTextClass({
-      textTone: baseTextTone
-    }),
-    hoverText: getTextClass({
-      state: 'hover',
-      textTone: stateTextTone
-    }),
-    focusText: getTextClass({
-      state: 'focus',
-      textTone: stateTextTone
-    }),
-    activeText: getTextClass({
-      state: 'active',
-      textTone: stateTextTone
-    }),
-    border: isSelected ? !hasBorderState ? getBorderClass({
-      tone: 'transparent'
-    }) : getBorderClass({
-      state: 'selected',
-      tone: tone
-    }) : hasTransparentBorder ? getBorderClass({
-      tone: 'transparent'
-    }) : getBorderClass({
-      tone: tone,
-      isLighter: isLighter
-    }),
-    hoverBorder: hasBorderState ? getBorderClass({
-      state: 'hover',
-      tone: tone
-    }) : '',
-    focusBorder: hasBorderState ? getBorderClass({
-      state: 'focus',
-      tone: tone
-    }) : '',
-    activeBorder: hasBorderState ? getBorderClass({
-      state: 'active',
-      tone: tone
-    }) : ''
+    bg: bg,
+    text: text,
+    border: border
   };
 };
 
-var getPaletteClasses = function getPaletteClasses(_ref5) {
-  var palette = _ref5.palette,
-      bgAppearance = _ref5.bgAppearance,
-      borderAppearance = _ref5.borderAppearance,
-      paletteShade = _ref5.paletteShade,
-      isSelected = _ref5.isSelected;
-  var config = _constants2.PALETTE_CONFIG[palette];
-  return config ? buildPaletteClasses(config, {
-    bgAppearance: bgAppearance,
-    borderAppearance: borderAppearance,
-    paletteShade: paletteShade,
-    isSelected: isSelected
-  }) : _constants.DUMMY_OBJECT;
+var getPaletteClasses = function getPaletteClasses(_ref2) {
+  var palette = _ref2.palette,
+      appearance = _ref2.appearance,
+      hoverAppearance = _ref2.hoverAppearance,
+      selectedAppearance = _ref2.selectedAppearance;
+  var paletteConfig = _constants.PALETTE_CONFIG[palette];
+  var base = buildStateClasses({
+    appearance: appearance,
+    state: undefined,
+    paletteConfig: paletteConfig
+  });
+  var rawBaseBgConfig = resolveConfig(appearance === null || appearance === void 0 ? void 0 : appearance.bg, paletteConfig);
+  var restBgForText = rawBaseBgConfig && !BG_BORDER_INVALID.has(rawBaseBgConfig.tone) ? rawBaseBgConfig : null;
+  var selected = buildStateClasses({
+    appearance: selectedAppearance,
+    state: 'selected',
+    paletteConfig: paletteConfig,
+    textFallbackBgConfig: restBgForText
+  });
+
+  var buildInteractive = function buildInteractive(state) {
+    return buildStateClasses({
+      appearance: hoverAppearance,
+      state: state,
+      paletteConfig: paletteConfig,
+      restAppearance: appearance,
+      restPaletteConfig: paletteConfig
+    });
+  };
+
+  var hover = buildInteractive('hover');
+  var focus = buildInteractive('focus');
+  var active = buildInteractive('active');
+  return {
+    bg: base.bg,
+    selectedBg: selected.bg,
+    hoverBg: hover.bg,
+    focusBg: focus.bg,
+    activeBg: active.bg,
+    text: base.text,
+    selectedText: selected.text,
+    hoverText: hover.text,
+    focusText: focus.text,
+    activeText: active.text,
+    border: base.border,
+    selectedBorder: selected.border,
+    hoverBorder: hover.border,
+    focusBorder: focus.border,
+    activeBorder: active.border
+  };
 };
 
 var _default = getPaletteClasses;

package/lib/v1/helpers/colorHelpers/constants/index.js

@@ -16,8 +16,8 @@ var TONE_INTENSITY = {
     base: 65,
     hover: 55,
     light: 10,
-    lightHover: 15,
-    borderLight: 15,
+    lightHover: 20,
+    borderLight: 20,
     textHover: 100
   },
   blue: {
@@ -58,30 +58,71 @@ var TONE_INTENSITY = {
 };
 exports.TONE_INTENSITY = TONE_INTENSITY;
 var PALETTE_CONFIG = {
-  "default": {
+  brand: {
     tone: 'brand',
     textTone: 'brand',
     filledTextTone: 'brand-filled'
   },
-  primary: {
+  brandLighter: {
+    tone: 'brand',
+    textTone: 'brand',
+    filledTextTone: 'brand',
+    isLighter: true
+  },
+  info: {
     tone: 'blue',
     textTone: 'blue',
     filledTextTone: 'white'
   },
+  infoLighter: {
+    tone: 'blue',
+    textTone: 'blue',
+    filledTextTone: 'blue',
+    isLighter: true
+  },
   secondary: {
     tone: 'grey',
     textTone: 'grey',
     filledTextTone: 'white'
   },
+  secondaryLighter: {
+    tone: 'grey',
+    textTone: 'grey',
+    filledTextTone: 'grey',
+    isLighter: true
+  },
   danger: {
     tone: 'red',
     textTone: 'red',
     filledTextTone: 'white'
   },
+  dangerLighter: {
+    tone: 'red',
+    textTone: 'red',
+    filledTextTone: 'red',
+    isLighter: true
+  },
   success: {
     tone: 'green',
     textTone: 'green',
     filledTextTone: 'white'
+  },
+  successLighter: {
+    tone: 'green',
+    textTone: 'green',
+    filledTextTone: 'green',
+    isLighter: true
+  },
+  warning: {
+    tone: 'orange',
+    textTone: 'orange',
+    filledTextTone: 'white'
+  },
+  warningLighter: {
+    tone: 'orange',
+    textTone: 'orange',
+    filledTextTone: 'orange',
+    isLighter: true
   }
 };
 exports.PALETTE_CONFIG = PALETTE_CONFIG;

package/lib/v1/helpers/colorHelpers/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,35 +21,15 @@ Object.defineProperty(exports, "default", {
     return _colorHelper["default"];
   }
 });
-Object.defineProperty(exports, "getBgClass", {
-  enumerable: true,
-  get: function get() {
-    return _colorHelper.getBgClass;
-  }
-});
-Object.defineProperty(exports, "getBorderClass", {
-  enumerable: true,
-  get: function get() {
-    return _colorHelper.getBorderClass;
-  }
-});
 Object.defineProperty(exports, "getPaletteClasses", {
   enumerable: true,
   get: function get() {
     return _colorHelper["default"];
   }
 });
-Object.defineProperty(exports, "getTextClass", {
-  enumerable: true,
-  get: function get() {
-    return _colorHelper.getTextClass;
-  }
-});
 
-var _colorHelper = _interopRequireWildcard(require("./colorHelper"));
+var _colorHelper = _interopRequireDefault(require("./colorHelper"));
 
 var _constants = require("./constants");
 
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }