@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-235

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

@@ -0,0 +1,451 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography component should be render with text children 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Text testing
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should be render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Typography component 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 component should render globally skip highlights at given indexes, with isExcludedIndex 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 component 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 component 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 component 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 component 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 component 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 component 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 component should render with global custom style for all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class=""
+      style="background-color: lightgreen;"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class=""
+      style="background-color: lightgreen;"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with global tagName applied to all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <i
+      class=""
+    >
+      sun
+    </i>
+     and 
+    <i
+      class=""
+    >
+      moon
+    </i>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component 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 component 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 component 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 component should render with separate custom style per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class=""
+      style="background-color: lightgreen;"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class=""
+      style="background-color: orange;"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component 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 component should render with separate tagName for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <i
+      class=""
+    >
+      sun
+    </i>
+     and 
+    <u
+      class=""
+    >
+      moon
+    </u>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component 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/es/Typography/highlight.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import { compileClassNames } from '@zohodesk/utils';
+import style from "./css/Typography.module.css";
+export function highlight(data) {
+  const {
+    text,
+    highlightData,
+    customStyle: globalCustomStyle = {},
+    highlightsStyle: globalHighlightsStyle = {},
+    isExcludedIndex: hasGlobalExcludedIndex = false,
+    isCaseSensitive: hasGlobalCaseSensitive = false,
+    isWholeWord: hasGlobalWholeWord = false,
+    tagName: globalTagName = 'span',
+    render: globalRender
+  } = data;
+  let patternParts = [];
+  let highlightTextList = [];
+  const highlightListArray = highlightData.map(item => {
+    const {
+      highlightText,
+      index,
+      isExcludedIndex,
+      isCaseSensitive,
+      highlightsStyle,
+      customStyle,
+      isWholeWord,
+      tagName,
+      render
+    } = item || {};
+    let selectedHighlightText = '';
+    let selectedIndex = [];
+    let selectedExcludedIndex = hasGlobalExcludedIndex;
+    let selectedCaseSensitive = hasGlobalCaseSensitive;
+    let selectedHighlightsStyle = globalHighlightsStyle;
+    let selectedCustomStyle = globalCustomStyle;
+    let selectedWholeWord = hasGlobalWholeWord;
+    let selectedTagName = globalTagName;
+    let selectedRender = globalRender;
+
+    if (typeof item === 'string') {
+      selectedHighlightText = item;
+    } else if (item && typeof highlightText === 'string') {
+      selectedHighlightText = highlightText;
+      selectedIndex = index !== undefined ? index : [];
+      selectedExcludedIndex = isExcludedIndex !== undefined ? isExcludedIndex : hasGlobalExcludedIndex;
+      selectedCaseSensitive = isCaseSensitive !== undefined ? isCaseSensitive : hasGlobalCaseSensitive;
+      selectedCustomStyle = customStyle !== undefined ? customStyle : globalCustomStyle;
+      selectedHighlightsStyle = highlightsStyle !== undefined ? highlightsStyle : globalHighlightsStyle;
+      selectedWholeWord = isWholeWord !== undefined ? isWholeWord : hasGlobalWholeWord;
+      selectedTagName = tagName !== undefined ? tagName : globalTagName;
+      selectedRender = render !== undefined ? render : globalRender;
+    }
+
+    const {
+      highlightsClass
+    } = getClassFromStyle(selectedHighlightsStyle);
+
+    if (selectedHighlightText.trim() !== '') {
+      const escaped = selectedHighlightText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      patternParts.push(selectedWholeWord ? `\\b${escaped}\\b` : escaped);
+      highlightTextList.push(isCaseSensitive ? selectedHighlightText : selectedHighlightText.toLowerCase());
+    }
+
+    return {
+      highlightText: selectedHighlightText,
+      index: selectedIndex,
+      isExcludedIndex: selectedExcludedIndex,
+      isCaseSensitive: selectedCaseSensitive,
+      highlightsClass,
+      customStyle: selectedCustomStyle,
+      tagName: selectedTagName,
+      render: selectedRender
+    };
+  });
+  const pattern = patternParts.join('|');
+
+  if (!pattern) {
+    return text;
+  }
+
+  const splittedChild = text.split(new RegExp(`(${pattern})`, 'gi'));
+  const indexCount = {};
+  return splittedChild.map((part, i) => {
+    let Tag = 'span';
+    const match = highlightListArray.find(_ref => {
+      let {
+        highlightText,
+        isCaseSensitive
+      } = _ref;
+      const inputText = isCaseSensitive ? part : part.toLowerCase();
+      const target = isCaseSensitive ? highlightText : highlightText.toLowerCase();
+      return inputText === target;
+    });
+
+    if (!match) {
+      return part;
+    }
+
+    const key = match.highlightText;
+    indexCount[key] = (indexCount[key] || 0) + 1;
+    const {
+      tagName,
+      index,
+      isExcludedIndex,
+      render,
+      highlightsClass,
+      customStyle
+    } = match;
+    Tag = tagName;
+    const currentIndex = indexCount[key];
+    const isArrayIndex = Array.isArray(index);
+    const isMatch = isArrayIndex ? (index.length === 0 || index.includes(currentIndex)) !== isExcludedIndex : (index === 0 || index === currentIndex) !== isExcludedIndex;
+
+    if (!isMatch) {
+      return part;
+    }
+
+    return render || /*#__PURE__*/React.createElement(Tag, {
+      key: i,
+      style: customStyle,
+      className: highlightsClass
+    }, part);
+  });
+}
+
+function getClassFromStyle(styleObj) {
+  const {
+    weight,
+    typeFace,
+    transform,
+    decoration,
+    customClass
+  } = styleObj;
+  const highlightsClass = compileClassNames({
+    [style[`font_${weight}`]]: !!weight,
+    [style[`fontStyles_${typeFace}`]]: !!typeFace,
+    [style[`transform_${transform}`]]: !!transform,
+    [style[`decoration_${decoration}`]]: !!decoration,
+    [customClass]: !!customClass
+  });
+  return {
+    highlightsClass
+  };
+}

package/es/Typography/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   $flag_reset: false,
   $flag_dotted: false,
   $tagAttributes_text: {},
-  $a11yAttributes_text: {}
+  $a11yAttributes_text: {},
+  highlights: {}
 };

package/es/Typography/props/propTypes.js

@@ -1,4 +1,20 @@
 import PropTypes from 'prop-types';
+const highlightsStyleShape = PropTypes.shape({
+  weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
+  typeFace: PropTypes.oneOf(['normal', 'italic']),
+  customClass: PropTypes.object
+});
+const commonHighlightProps = {
+  customStyle: PropTypes.object,
+  isExcludedIndex: PropTypes.bool,
+  isCaseSensitive: PropTypes.bool,
+  isWholeWord: PropTypes.bool,
+  tagName: PropTypes.string,
+  render: PropTypes.element,
+  highlightsStyle: PropTypes.objectOf(highlightsStyleShape)
+};
 export const propTypes = {
   children: PropTypes.node,
   $ui_className: PropTypes.string,
@@ -23,5 +39,14 @@ export const propTypes = {
   customId: PropTypes.string,
   customStyle: PropTypes.object,
   $a11yAttributes_text: PropTypes.object,
-  $tagAttributes_text: PropTypes.object
+  $tagAttributes_text: PropTypes.object,
+  highlights: PropTypes.objectOf(PropTypes.shape({
+    text: PropTypes.string,
+    highlightData: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+      highlightText: PropTypes.string,
+      index: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      ...commonHighlightProps
+    })])),
+    ...commonHighlightProps
+  }))
 };

package/es/utils/dropDownUtils.js

@@ -43,8 +43,6 @@ const getDisabledOptions = props => props.disabledOptions || dummyArray;
 
 const getListItemProps = props => props.listItemProps || '';
 
-const getlistItemCustomProps = props => props.listItemCustomProps || dummyObj;
-
 const defaultSearchFields = ['value'];
 
 const getSearchFields = props => {
@@ -135,7 +133,7 @@ export const extractOptionId = id => {
   }
 };
 export const extractOptionIdFromJson = (id, localData) => localData[id] || {};
-export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getlistItemCustomProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, listItemCustomProps, allowValueFallback, searchFields, secondaryField) => {
+export const makeFormatOptions = () => createSelector([getOptions, getValueField, getTextField, getImageField, getPrefixText, getIconName, getIconSize, getOptionType, getDisabledOptions, getListItemProps, getAllowValueFallback, getSearchFields, getSecondaryField], (options, valueField, textField, imageField, prefixText, iconName, iconSize, optionType, disabledOptions, listItemProps, allowValueFallback, searchFields, secondaryField) => {
   const revampOptions = [];
   const remvampOptionIds = [];
   const normalizedAllOptions = {};
@@ -151,8 +149,7 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
         optionType: impOptionType,
         iconName: impIconName,
         iconSize: impIconSize,
-        listItemProps: listStyle,
-        listItemCustomProps: listStyleCustomProps
+        listItemProps: listStyle
       } = option;
       let id = typeof option === 'object' ? option[impValueField || valueField] : option;
       const value = typeof option === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
@@ -198,10 +195,6 @@ export const makeFormatOptions = () => createSelector([getOptions, getValueField
           optionDetails.listItemProps = listStyle || listItemProps;
         }
 
-        if (listStyleCustomProps || listItemCustomProps) {
-          optionDetails.listItemCustomProps = listStyleCustomProps || listItemCustomProps;
-        }
-
         normalizedFormatOptions[id] = optionDetails;
         normalizedAllOptions[id] = { ...option,
           groupId: prefixText
@@ -328,8 +321,7 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
       id: groupId,
       name,
       valueField,
-      textField,
-      secondaryField
+      textField
     } = group;
 
     if (!getIsEmptyValue(groupId) && groupIds.indexOf(groupId) === -1) {
@@ -344,7 +336,6 @@ export const makeGetGroupSelectOptions = () => createSelector([getGroupedOptions
         options,
         valueField,
         textField,
-        secondaryField,
         prefixText: groupId,
         allowValueFallback
       });