@zohodesk/components 1.4.21 → 1.4.23

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

@@ -1224,3 +1224,509 @@ exports[`Typography rendering ui_tagName as h2 1`] = `
   </h2>
 </DocumentFragment>
 `;
+
+exports[`Typography with highlight should render customised render the highlight element for all highlighted words 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <div
+      aria-labelledby="1"
+      class="container effect    medium lgRadius default   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Sun"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Sun
+      </div>
+    </div>
+     was bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render for RegEx Characters check 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The sun and moon were bright. and the 
+    <span
+      style="background-color: lightgreen;"
+    >
+      m**n
+    </span>
+     get sunlight from the 
+    <span
+      style="background-color: lightgreen;"
+    >
+      $un
+    </span>
+    , The Sun provides light to its nearby stars
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render for combination of configuration check 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The sun and moon were bright. and the moon get sunlight from the Sun, The 
+    <span
+      style="background-color: lightgreen;"
+    >
+      Sun
+    </span>
+     provides light to its nearby stars
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render for priority based check - it priorities the global renderHighlight over the style configurations from the global 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 
+    <a
+      href="https://www.zoho.com"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+       sunlight 
+    </a>
+     moonlight
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight 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 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 
+    <b>
+       sunlight 
+    </b>
+     moonlight
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render for priority based check - it priorities the style configurations from the data object over the global renderHighlight 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 
+    <span
+      class="decoration_underline"
+    >
+      sunlight
+    </span>
+     moonlight
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render globally skip highlights at given indexes, with shouldExcludeIndices 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The sun was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     was warm, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     was high in the sky.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render highlight by Index 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     was bright, I walked 
+    <span
+      class="font_bold decoration_underline"
+    >
+      under
+    </span>
+     the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+    , I talked under the sun.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was warm, the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was high in the sky.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render separate Styles per Word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was bright, I walked 
+    <span
+      class="decoration_underline"
+    >
+      under
+    </span>
+     the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+    , I talked 
+    <span
+      class="decoration_underline"
+    >
+      under
+    </span>
+     the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+    .
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render separate customised render the highlight element for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <div
+      aria-labelledby="2"
+      class="container effect    medium lgRadius default   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Sun"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Sun
+      </div>
+    </div>
+     and 
+    <div
+      aria-labelledby="3"
+      class="container effect    medium lgRadius default   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Moon"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Moon
+      </div>
+    </div>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with global case-sensitive option 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      moon
+    </span>
+     was bright, the sun was warm.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with global custom class for all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="global_custom_class"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class="global_custom_class"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with global custom style for all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      style="background-color: lightgreen;"
+    >
+      sun
+    </span>
+     and 
+    <span
+      style="background-color: lightgreen;"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with global tagName applied to all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <i>
+      sun
+    </i>
+     and 
+    <i>
+      moon
+    </i>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with global whole-word match only 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Sunflower is a flower. The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the moonlight was bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with separate case-sensitive option per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Moon
+    </span>
+     was bright, the sun was warm.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with separate custom class for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="separate_custom_class_sun"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class="separate_custom_class_moon"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with separate custom style per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      style="background-color: lightgreen;"
+    >
+      sun
+    </span>
+     and 
+    <span
+      style="background-color: orange;"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with separate excluded index option per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The sun was bright, the moon was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class="font_bold decoration_underline"
+    >
+      moon
+    </span>
+     again.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with separate tagName for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <i>
+      sun
+    </i>
+     and 
+    <u>
+      moon
+    </u>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography with highlight should render with separate whole-word option per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Sunflower is a flower. The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      moon
+    </span>
+    light was bright.
+  </div>
+</DocumentFragment>
+`;

package/lib/Typography/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   $flag_reset: false,
   $flag_dotted: false,
   $tagAttributes_text: {},
-  $a11yAttributes_text: {}
+  $a11yAttributes_text: {},
+  $ui_highlightConfig: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Typography/props/propTypes.js

@@ -9,10 +9,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var propTypes = {
-  children: _propTypes["default"].node,
-  $ui_className: _propTypes["default"].string,
-  $ui_tagName: _propTypes["default"].string,
+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; }
+
+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; }
+
+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; }
+
+var typoStyleProps = {
   $flag_reset: _propTypes["default"].bool,
   $flag_dotted: _propTypes["default"].bool,
   $ui_display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
@@ -28,11 +31,33 @@ var propTypes = {
   $ui_wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
   $ui_wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
   $ui_whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
+  $ui_className: _propTypes["default"].string
+};
+var highlightProps = {
+  customStyle: _propTypes["default"].object,
+  shouldExcludeIndices: _propTypes["default"].bool,
+  isCaseSensitive: _propTypes["default"].bool,
+  isWholeWord: _propTypes["default"].bool,
+  tagName: _propTypes["default"].string,
+  renderHighlight: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
+  styleConfiguration: _propTypes["default"].shape(typoStyleProps)
+};
+
+var propTypes = _objectSpread(_objectSpread({}, typoStyleProps), {}, {
+  children: _propTypes["default"].node,
+  $ui_tagName: _propTypes["default"].string,
   $i18n_dataTitle: _propTypes["default"].string,
   testId: _propTypes["default"].string,
   customId: _propTypes["default"].string,
   customStyle: _propTypes["default"].object,
   $a11yAttributes_text: _propTypes["default"].object,
-  $tagAttributes_text: _propTypes["default"].object
-};
+  $tagAttributes_text: _propTypes["default"].object,
+  $ui_highlightConfig: _propTypes["default"].shape(_objectSpread({
+    data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape(_objectSpread({
+      text: _propTypes["default"].string,
+      index: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number])
+    }, highlightProps))]))
+  }, highlightProps))
+});
+
 exports.propTypes = propTypes;