@zohodesk/components 1.0.0-temp-199.18 → 1.0.0-temp-246

package/es/Radio/props/propTypes.js

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
+import { propTypes as TypographyPropTypes } from "../../Typography/props/propTypes";
 export const propTypes = {
   active: PropTypes.bool,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
+  secondaryText: PropTypes.string,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,
   id: PropTypes.string,
@@ -23,7 +25,8 @@ export const propTypes = {
   }),
   customProps: PropTypes.exact({
     ContainerProps: PropTypes.object,
-    LabelProps: PropTypes.object
+    LabelProps: PropTypes.object,
+    secondaryTextProps: PropTypes.exact(TypographyPropTypes)
   }),
   a11y: PropTypes.shape({
     ariaChecked: PropTypes.bool,

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      customProps,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,8 +357,7 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps,
-      customClass
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -376,11 +375,8 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps = {}
+      ListItemProps
     } = customProps;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -477,10 +473,7 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row",
-        customClass: {
-          customDropBox: dropBoxClass
-        }
+        alignBox: "row"
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/props/defaultProps.js

@@ -102,8 +102,7 @@ export const SelectWithAvatar_defaultProps = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -132,6 +131,5 @@ export const SelectWithIcon_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customProps: {},
-  customClass: {}
+  customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -186,8 +186,7 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   allowValueFallback: PropTypes.bool
 };
@@ -250,10 +249,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -318,10 +314,6 @@ export const SelectWithIcon_propTypes = {
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     SuggestionsProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
-  }),
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
+    TextBoxIconProps: PropTypes.object
   })
 };

package/es/Typography/Typography.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
+import { highlightText } from "./utils/textHighlighter";
 import defaultStyle from "./css/Typography.module.css";
 
 const Typography = props => {
@@ -14,8 +15,12 @@ const Typography = props => {
     customId,
     $tagAttributes_text,
     $a11yAttributes_text,
-    customStyle
+    customStyle,
+    $ui_highlightConfig
   } = props;
+  const {
+    data: highlightData = []
+  } = $ui_highlightConfig;
   const style = mergeStyle(defaultStyle, customStyle);
   const {
     typographyClass
@@ -30,7 +35,9 @@ const Typography = props => {
     'data-test-id': testId,
     ...$tagAttributes_text,
     ...$a11yAttributes_text
-  }, children);
+  }, highlightData && highlightData.length > 0 && typeof children === 'string' ? highlightText({ ...$ui_highlightConfig,
+    text: children
+  }) : children);
 };
 
 Typography.propTypes = propTypes;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import Typography from "../Typography";
+import Tag from "../../Tag/Tag";
 describe('Typography', () => {
   const ui_size = ['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit'];
   const ui_lineClamp = ['1', '2', '3', '4', '5'];
@@ -222,4 +223,430 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+});
+describe('Typography with highlight', () => {
+  test('should render highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: ['sun'],
+        styleConfiguration: {
+          $ui_weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlight by Index', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate Styles per Word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render globally skip highlights at given indexes, with shouldExcludeIndices', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate excluded index option per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global tagName applied to all highlights', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun'
+        }, {
+          text: 'moon'
+        }],
+        tagName: 'i'
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate tagName for each highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          tagName: 'i'
+        }, {
+          text: 'moon',
+          tagName: 'u'
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global case-sensitive option', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate case-sensitive option per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global whole-word match only', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate whole-word option per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom style for all highlights', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom style per word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          styleConfiguration: {
+            customStyle: {
+              backgroundColor: 'lightgreen'
+            }
+          }
+        }, {
+          text: 'moon',
+          styleConfiguration: {
+            customStyle: {
+              backgroundColor: 'orange'
+            }
+          }
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom class for all highlights', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_className: 'global_custom_class'
+        }
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom class for each highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render customised render the highlight element for all highlighted words', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun'
+        }],
+        renderHighlight: /*#__PURE__*/React.createElement(Tag, {
+          text: "Sun"
+        })
+      }
+    }, "The sun was bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate customised render the highlight element for each highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          renderHighlight: /*#__PURE__*/React.createElement(Tag, {
+            text: "Sun"
+          })
+        }, {
+          text: 'moon',
+          renderHighlight: /*#__PURE__*/React.createElement(Tag, {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for RegEx Characters check', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for combination of configuration check', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $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"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the global renderHighlight over the style configurations from the global', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: ['sunlight'],
+        styleConfiguration: {
+          $ui_decoration: 'underline'
+        },
+        renderHighlight: text => /*#__PURE__*/React.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"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the style configurations from the data object over the global renderHighlight', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sunlight',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          }
+        }],
+        renderHighlight: text => /*#__PURE__*/React.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"));
+    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', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sunlight',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          },
+          renderHighlight: text => /*#__PURE__*/React.createElement("b", null, " ", text, " ")
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        },
+        renderHighlight: text => /*#__PURE__*/React.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"));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });