@zohodesk/components 1.4.21 → 1.4.23

package/lib/TextBoxIcon/props/propTypes.js

@@ -57,8 +57,7 @@ var propTypes = _objectSpread(_objectSpread({}, _propTypes2.propTypes), {}, {
   customClass: _propTypes["default"].shape({
     customTBoxWrap: _propTypes["default"].string,
     customTextBox: _propTypes["default"].string,
-    customTBoxIcon: _propTypes["default"].string,
-    customTBoxLine: _propTypes["default"].string
+    customTBoxIcon: _propTypes["default"].string
   }),
   iconOnHover: _propTypes["default"].bool,
   isFocus: _propTypes["default"].bool,

package/lib/Typography/Typography.js

@@ -15,6 +15,8 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
 
+var _textHighlighter = require("./utils/textHighlighter");
+
 var _TypographyModule = _interopRequireDefault(require("./css/Typography.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,7 +35,10 @@ var Typography = function Typography(props) {
       customId = props.customId,
       $tagAttributes_text = props.$tagAttributes_text,
       $a11yAttributes_text = props.$a11yAttributes_text,
-      customStyle = props.customStyle;
+      customStyle = props.customStyle,
+      $ui_highlightConfig = props.$ui_highlightConfig;
+  var _$ui_highlightConfig$ = $ui_highlightConfig.data,
+      highlightData = _$ui_highlightConfig$ === void 0 ? [] : _$ui_highlightConfig$;
   var style = (0, _utils.mergeStyle)(_TypographyModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
@@ -47,7 +52,9 @@ var Typography = function Typography(props) {
     'data-title': $i18n_dataTitle,
     'data-id': customId,
     'data-test-id': testId
-  }, $tagAttributes_text), $a11yAttributes_text), children);
+  }, $tagAttributes_text), $a11yAttributes_text), highlightData && highlightData.length > 0 && typeof children === 'string' ? (0, _textHighlighter.highlightText)(_objectSpread(_objectSpread({}, $ui_highlightConfig), {}, {
+    text: children
+  })) : children);
 };
 
 Typography.propTypes = _propTypes.propTypes;

package/lib/Typography/__tests__/Typography.spec.js

@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
+var _Tag = _interopRequireDefault(require("../../Tag/Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('Typography', function () {
@@ -227,6 +229,440 @@ describe('Typography', function () {
     }, "Heading")),
         asFragment = _render24.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+describe('Typography with highlight', function () {
+  test('should render highlighted word', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: ['sun'],
+        styleConfiguration: {
+          $ui_weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlight by Index', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          index: [1, 2]
+        }, {
+          text: 'under',
+          index: 1
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate Styles per Word', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          styleConfiguration: {
+            $ui_weight: 'bold'
+          }
+        }, {
+          text: 'under',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          }
+        }]
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render globally skip highlights at given indexes, with shouldExcludeIndices', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          index: 1
+        }, {
+          text: 'moon',
+          index: [2, 3]
+        }],
+        shouldExcludeIndices: true,
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate excluded index option per word', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          index: 1,
+          shouldExcludeIndices: true
+        }, {
+          text: 'moon',
+          index: [2, 3],
+          shouldExcludeIndices: false
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the moon was bright, the sun and moon again.")),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global tagName applied to all highlights', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun'
+        }, {
+          text: 'moon'
+        }],
+        tagName: 'i'
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate tagName for each highlighted word', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          tagName: 'i'
+        }, {
+          text: 'moon',
+          tagName: 'u'
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global case-sensitive option', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        },
+        isCaseSensitive: true
+      }
+    }, "The Sun was bright, the moon was bright, the sun was warm.")),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate case-sensitive option per word', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          isCaseSensitive: true
+        }, {
+          text: 'Moon',
+          isCaseSensitive: false
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The Sun was bright, the Moon was bright, the sun was warm.")),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global whole-word match only', function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        },
+        isWholeWord: true
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render34.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate whole-word option per word', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          isWholeWord: true
+        }, {
+          text: 'moon',
+          isWholeWord: false
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom style for all highlights', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render36.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom style per word', function () {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          styleConfiguration: {
+            customStyle: {
+              backgroundColor: 'lightgreen'
+            }
+          }
+        }, {
+          text: 'moon',
+          styleConfiguration: {
+            customStyle: {
+              backgroundColor: 'orange'
+            }
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom class for all highlights', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_className: 'global_custom_class'
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render38.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom class for each highlighted word', function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          styleConfiguration: {
+            $ui_className: 'separate_custom_class_sun'
+          }
+        }, {
+          text: 'moon',
+          styleConfiguration: {
+            $ui_className: 'separate_custom_class_moon'
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render customised render the highlight element for all highlighted words', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun'
+        }],
+        renderHighlight: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          text: "Sun"
+        })
+      }
+    }, "The sun was bright.")),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate customised render the highlight element for each highlighted word', function () {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          renderHighlight: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Sun"
+          })
+        }, {
+          text: 'moon',
+          renderHighlight: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render41.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for RegEx Characters check', function () {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: '$un'
+        }, {
+          text: 'm**n'
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright. and the m**n get sunlight from the $un, The Sun provides light to its nearby stars")),
+        asFragment = _render42.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for combination of configuration check', function () {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          index: 1,
+          shouldExcludeIndices: true,
+          isWholeWord: true,
+          isCaseSensitive: true
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright. and the moon get sunlight from the Sun, The Sun provides light to its nearby stars")),
+        asFragment = _render43.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the global renderHighlight over the style configurations from the global', function () {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: ['sunlight'],
+        styleConfiguration: {
+          $ui_decoration: 'underline'
+        },
+        renderHighlight: function renderHighlight(text) {
+          return /*#__PURE__*/_react["default"].createElement("a", {
+            href: "https://www.zoho.com",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, " ", text, " ");
+        }
+      }
+    }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
+        asFragment = _render44.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the style configurations from the data object over the global renderHighlight', function () {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sunlight',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          }
+        }],
+        renderHighlight: function renderHighlight(text) {
+          return /*#__PURE__*/_react["default"].createElement("a", {
+            href: "https://www.zoho.com",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, " ", text, " ");
+        }
+      }
+    }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
+        asFragment = _render45.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the renderHighlight from the data object over the global renderHighlight, global style configuration and style configuration from the data object', function () {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sunlight',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          },
+          renderHighlight: function renderHighlight(text) {
+            return /*#__PURE__*/_react["default"].createElement("b", null, " ", text, " ");
+          }
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        },
+        renderHighlight: function renderHighlight(text) {
+          return /*#__PURE__*/_react["default"].createElement("a", {
+            href: "https://www.zoho.com",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, " ", text, " ");
+        }
+      }
+    }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
+        asFragment = _render46.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });