@zohodesk/icons 1.3.15 → 1.4.0

package/es/Icon/css/cssJSLogic.js

@@ -0,0 +1 @@
+export { fontIcon_cva } from "./fontIcon.cva";

package/es/Icon/css/fontIcon.cva.js

@@ -0,0 +1,48 @@
+import { cva } from '@dot-system/css-utility';
+import { allCustomIcons } from "../CustomIcons";
+import style from "../Icon.module.css";
+const DUMMY_OBJECT = Object.freeze({});
+export const fontIconVariants = cva([style.basic, 'd-inline-block', 'd-align-middle'], {
+  variants: {
+    isRtl: {
+      true: style.rtl
+    },
+    isBold: {
+      true: 'd-font-bold'
+    },
+    clickable: {
+      true: 'd-cursor-pointer'
+    }
+  }
+});
+/**
+ * FontIcon root classname based on props.
+ * Order: zd_font_icons → customColor → ff → pathName → basic/utils/rtl/bold/cursor → iconClass
+ * @param {{ props: object }} args
+ * @returns {{ fontIconClass: string, customColorKey: string|null }}
+ */
+
+export function fontIcon_cva({
+  props
+}) {
+  const {
+    isBold,
+    onClick,
+    isRtl,
+    iconName,
+    pathName,
+    iconContent = DUMMY_OBJECT,
+    iconClass
+  } = props;
+  const customColorKey = allCustomIcons[iconName] || null;
+  const customColorClass = customColorKey ? style[customColorKey] : '';
+  return {
+    fontIconClass: `zd_font_icons ${customColorClass} ${iconContent.ff} ${pathName} ${fontIconVariants({
+      isRtl,
+      isBold,
+      clickable: !!onClick,
+      className: iconClass
+    })}`,
+    customColorKey
+  };
+}

package/lib/Context/__tests__/__snapshots__/IconContext.spec.js.snap

@@ -4,7 +4,7 @@ exports[`IconProvider / IconContext -  default context - renders font icon (no p
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic icon-close2"
+    class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -43,7 +43,7 @@ exports[`IconProvider / IconContext -  type "fontIcon" - renders font icon 1`] =
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic icon-close2"
+    class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"

package/lib/Icon/FontIcon.js

@@ -5,17 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _CustomIcons = require("./CustomIcons");
-
-var _cssUtility = require("@dot-system/css-utility");
-
-var _IconModule = _interopRequireDefault(require("./Icon.module.css"));
+var _cssJSLogic = require("./css/cssJSLogic");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -76,21 +74,34 @@ var FontIcon = /*#__PURE__*/function (_React$Component) {
           ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
       var fontStyle = size ? {
         '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
-      } : {};
-      var isCustom = _CustomIcons.allCustomIcons[iconName] || null;
-      isCustom = isCustom ? _IconModule["default"][isCustom] : ''; // let isTwoTone = TwoToneIcons[iconName] || null;
+      } : {}; // let isTwoTone = TwoToneIcons[iconName] || null;
       // isTwoTone = isTwoTone ? style[isTwoTone] : '';
 
-      var fontClass = "".concat(_IconModule["default"].basic, " ").concat(pathName, " ").concat(isBold ? _IconModule["default"].fbold : '', " ").concat(onClick ? _IconModule["default"].cursor : '', " ").concat(iconClass ? iconClass : '');
+      var isRtl = false;
       var childArray;
 
       if (_typeof(name) === 'object') {
         childArray = [];
-        var isRtl = name[2] ? name[2] : false;
-        fontClass = isRtl ? "".concat(_IconModule["default"].rtl, " ").concat(fontClass) : fontClass;
+        isRtl = name[2] ? name[2] : false;
+      }
+
+      var _fontIcon_cva = (0, _cssJSLogic.fontIcon_cva)({
+        props: {
+          isBold: isBold,
+          onClick: onClick,
+          isRtl: isRtl,
+          iconName: iconName,
+          pathName: pathName,
+          iconContent: iconContent,
+          iconClass: iconClass
+        }
+      }),
+          fontIconClass = _fontIcon_cva.fontIconClass,
+          customColorKey = _fontIcon_cva.customColorKey;
 
+      if (_typeof(name) === 'object') {
         for (var i = 1; i < name[1] + 1; i++) {
-          var pathClass = "".concat(iconContent["path".concat(i)], " ").concat(iconClass || isCustom ? "path".concat(i) : '');
+          var pathClass = "".concat(iconContent["path".concat(i)], " ").concat(iconClass || customColorKey ? "path".concat(i) : '');
           childArray.push( /*#__PURE__*/_react["default"].createElement("span", {
             className: (0, _cssUtility.cn)(pathClass),
             key: i
@@ -99,7 +110,7 @@ var FontIcon = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/_react["default"].createElement("i", _extends({
-        className: (0, _cssUtility.cn)('zd_font_icons'.concat(" ", isCustom, " ").concat(fontClass)),
+        className: (0, _cssUtility.cn)(fontIconClass),
         "data-title": title,
         onClick: onClick,
         "data-id": dataId,

package/lib/Icon/Icon.module.css

@@ -9,8 +9,6 @@
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  display: inline-block;
-  vertical-align: middle;
   font-size: var(--zd-iconfont-size, inherit);
 }
 .basic,.basic > span{
@@ -24,14 +22,6 @@
   font-size: var(--zd-iconfont-size, inherit);
 }
 
-.fbold {
-  font-weight: bold;
-}
-
-.cursor {
-  cursor: pointer;
-}
-
 .red :global .path2::before,
 .red2 :global .path3::before {
   color: #de3535 !important;

package/lib/Icon/SvgIcon.js

@@ -39,7 +39,7 @@ function SvgIcon(_ref) {
   var fontStyle = size ? {
     '--zd-iconfont-size': 'var(--zd_font_size' + size + ')'
   } : _constants.DUMMY_OBJECT;
-  var className = "".concat(_IconModule["default"].svgIcon, " ").concat(onClick ? _IconModule["default"].cursor : '', " ").concat(iconClass ? iconClass : '');
+  var className = "".concat(_IconModule["default"].svgIcon, " ").concat(onClick ? 'd-cursor-pointer' : '', " ").concat(iconClass ? iconClass : '');
   return /*#__PURE__*/_react["default"].createElement("svg", _extends({
     className: (0, _cssUtility.cn)(className),
     onClick: onClick,

package/lib/Icon/__tests__/__snapshots__/FontIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`FontIcon -  checking "isBold" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -16,7 +16,7 @@ exports[`FontIcon -  checking "isBold" is true 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic fbold"
+    class="zd_font_icons basic d-inline-block d-align-middle d-font-bold"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -28,7 +28,7 @@ exports[`FontIcon -  rendering "IconName" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -40,7 +40,7 @@ exports[`FontIcon -  rendering "Name" with "iconContent" and without path 1`] =
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -62,7 +62,7 @@ exports[`FontIcon -  rendering "ariaHidden" is false 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="false"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -74,7 +74,7 @@ exports[`FontIcon -  rendering "custumIcon" with path 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons red basic"
+    class="zd_font_icons red basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -93,7 +93,7 @@ exports[`FontIcon -  rendering "iconClass" with path  1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic iconStyleCss"
+    class="zd_font_icons basic d-inline-block d-align-middle iconStyleCss"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -115,7 +115,7 @@ exports[`FontIcon -  rendering custom attributes with tagAttributes prop 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-custom-attr="true"
     data-id="fontIcon"
     data-selector-id="fontIcon"
@@ -128,7 +128,7 @@ exports[`FontIcon -  rendering custom icon name 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons red basic"
+    class="zd_font_icons red basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -140,7 +140,7 @@ exports[`FontIcon -  rendering the "default" props 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -152,7 +152,7 @@ exports[`FontIcon -  rendering the "fontSize" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -165,7 +165,7 @@ exports[`FontIcon -  rendering the "iconClass" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic iconStyleCss"
+    class="zd_font_icons basic d-inline-block d-align-middle iconStyleCss"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -177,7 +177,7 @@ exports[`FontIcon -  rendering the "pathname" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic zd67f91bb627"
+    class="zd_font_icons zd67f91bb627 basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -189,7 +189,7 @@ exports[`FontIcon -  rendering the "title" 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -202,7 +202,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - bottom 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -215,7 +215,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - left 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -228,7 +228,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - right 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"
@@ -241,7 +241,7 @@ exports[`FontIcon -  rendering the "titlePostion" to - top 1`] = `
 <DocumentFragment>
   <i
     aria-hidden="true"
-    class="zd_font_icons basic"
+    class="zd_font_icons basic d-inline-block d-align-middle"
     data-id="fontIcon"
     data-selector-id="fontIcon"
     data-test-id="fontIcon"