@zohodesk/components 1.0.0-temp-257.1 → 1.0.0-temp-259.2

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,156 @@ 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 restBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
+  var restBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
+  var restTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : 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 rawRestBgConfig = resolveConfig(appearance === null || appearance === void 0 ? void 0 : appearance.bg, paletteConfig);
+  var restBgForText = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : 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/shared/{Loader/Loader.js → Spinner/Spinner.js}

@@ -13,33 +13,33 @@ var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
 var _cssUtility = require("@dot-system/css-utility");
 
-var _Loader_v1Module = _interopRequireDefault(require("./Loader_v1.module.css"));
+var _Spinner_v1Module = _interopRequireDefault(require("./Spinner_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Loader = function Loader(props) {
+var Spinner = function Spinner(props) {
   var customClass = props.customClass;
   var _customClass$wrapper = customClass.wrapper,
       wrapper = _customClass$wrapper === void 0 ? '' : _customClass$wrapper;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    className: (0, _cssUtility.cn)("".concat(_Loader_v1Module["default"].spinner, " ").concat(wrapper)),
+    className: (0, _cssUtility.cn)("".concat(_Spinner_v1Module["default"].spinner, " ").concat(wrapper)),
     viewBox: "0 0 24 24",
     role: "img",
     "aria-hidden": "true"
   }, /*#__PURE__*/_react["default"].createElement("circle", {
-    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerTrack),
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerTrack),
     cx: "12",
     cy: "12",
     r: "10"
   }), /*#__PURE__*/_react["default"].createElement("circle", {
-    className: (0, _cssUtility.cn)(_Loader_v1Module["default"].spinnerHead),
+    className: (0, _cssUtility.cn)(_Spinner_v1Module["default"].spinnerHead),
     cx: "12",
     cy: "12",
     r: "10"
   }));
 };
 
-Loader.propTypes = _propTypes["default"];
-Loader.defaultProps = _defaultProps["default"];
-var _default = Loader;
+Spinner.propTypes = _propTypes["default"];
+Spinner.defaultProps = _defaultProps["default"];
+var _default = Spinner;
 exports["default"] = _default;

package/lib/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js}

@@ -4,19 +4,19 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Loader = _interopRequireDefault(require("../Loader"));
+var _Spinner = _interopRequireDefault(require("../Spinner"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('Loader', function () {
+describe('Spinner', function () {
   test('renders default snapshot', function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)),
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('renders with customClass', function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Loader["default"], {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
       customClass: {
         wrapper: 'my-custom-class'
       }

package/{es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → lib/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap}

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Loader renders default snapshot 1`] = `
+exports[`Spinner renders default snapshot 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"
@@ -24,7 +24,7 @@ exports[`Loader renders default snapshot 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Loader renders with customClass 1`] = `
+exports[`Spinner renders with customClass 1`] = `
 <DocumentFragment>
   <svg
     aria-hidden="true"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-257.1",
-  "main": "es/index.js",
+  "version": "1.0.0-temp-259.2",
+  "main": "lib/index.js",
   "module": "es/index.js",
   "private": false,
   "publishConfig": {
@@ -30,7 +30,7 @@
     "build:local": "npm run build",
     "build:watch": "npm run build:es:watch --module:mode=dev -- -w",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node ../prePublish.js && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node ../prePublish.js && npm run download_only && npm run css:review && npm run review:props ",
     "postpublish": "node ../postPublish.js",
     "test": "ZDTestingFramework unit-test",
     "test:changed": "ZDTestingFramework unit-test --onlyChanged",
@@ -74,16 +74,16 @@
     "@testing-library/user-event": "^13.0.10",
     "@dot-system/css-audit-tool": "1.0.1",
     "@zohodesk-private/color-variable-preprocessor": "1.3.4",
-    "@zohodesk-private/css-variable-migrator": "1.0.11",
-    "@zohodesk-private/node-plugins": "1.1.15",
-    "@zohodesk-private/react-prop-validator": "1.2.3",
+    "@zohodesk-private/css-variable-migrator": "1.0.12",
+    "@zohodesk-private/node-plugins": "1.1.16",
+    "@zohodesk-private/react-prop-validator": "1.2.4",
     "@zohodesk/a11y": "2.3.9",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.10",
     "@zohodesk/hooks": "2.0.8",
-    "@zohodesk/icons": "1.3.14",
-    "@zohodesk/layout": "3.2.1",
-    "@zohodesk/svg": "1.3.11",
+    "@zohodesk/icons": "1.3.15",
+    "@zohodesk/layout": "3.2.2",
+    "@zohodesk/svg": "1.3.13",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/variables": "1.3.2",
     "@zohodesk/virtualizer": "1.0.13",
@@ -93,7 +93,7 @@
     "@zohodesk/client_build_tool": "0.0.23",
     "color": "4.2.3",
     "@zohodesk/jsx_attribute_wrapper": "1.0.0",
-    "@dot-system/css-utility": "0.1.2",
+    "@dot-system/css-utility": "0.1.4",
     "@zohodesk-private/client_deployment_tool": "0.0.7",
     "@babel/preset-react": "7.29.7",
     "@zohodesk/testinglibrary": "4.1.10"
@@ -105,18 +105,18 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.3.14",
+    "@zohodesk/icons": "1.3.15",
     "@zohodesk/variables": "1.3.2",
-    "@zohodesk/svg": "1.3.11",
+    "@zohodesk/svg": "1.3.13",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.8",
     "@zohodesk/utils": "1.3.16",
     "@zohodesk/a11y": "2.3.9",
-    "@zohodesk/layout": "3.2.1",
+    "@zohodesk/layout": "3.2.2",
     "@zohodesk/dotkit": "1.0.10",
     "color": "4.2.3",
-    "@dot-system/css-utility": "0.1.2"
+    "@dot-system/css-utility": "0.1.4"
   }
-}
+}