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

package/es/Select/SelectWithAvatar.js

@@ -41,7 +41,6 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
-      secondaryField,
       allowValueFallback
     } = props;
     return this.formatOptions({
@@ -49,7 +48,6 @@ class SelectWithAvatarComponent extends SelectComponent {
       valueField,
       textField,
       imageField,
-      secondaryField,
       optionType: 'avatar',
       allowValueFallback
     });
@@ -167,7 +165,6 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      customProps,
       getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
@@ -190,11 +187,6 @@ class SelectWithAvatarComponent extends SelectComponent {
     } = this.normalizedFormatOptions[selectedId] || {};
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
-    let {
-      TextBoxProps,
-      DropdownSearchTextBoxProps,
-      SuggestionsProps
-    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -254,8 +246,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       isClickable: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false,
-      ...TextBoxProps
+      autoComplete: false
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -304,8 +295,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           ariaControls: setAriaId,
           ariaDescribedby: ariaErrorId
         },
-        autoComplete: false,
-        ...DropdownSearchTextBoxProps
+        autoComplete: false
       }))) : null, /*#__PURE__*/React.createElement(CardContent, {
         shrink: true,
         customClass: !tabletMode && dropBoxSize ? style[dropBoxSize] : '',
@@ -333,8 +323,7 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        },
-        ...SuggestionsProps
+        }
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/Select/SelectWithIcon.js

@@ -328,7 +328,6 @@ class SelectWithIcon extends Component {
       targetOffset,
       isRestrictScroll,
       valueKey,
-      secondaryValueKey,
       idKey,
       needListBorder,
       needTick,
@@ -368,8 +367,7 @@ class SelectWithIcon extends Component {
     let {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
-      TextBoxIconProps = {},
-      ListItemProps
+      TextBoxIconProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
@@ -512,7 +510,6 @@ class SelectWithIcon extends Component {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, {
           key: options[idKey],
           value: options[valueKey],
-          secondaryValue: options[secondaryValueKey],
           size: "medium",
           onClick: this.handleChange,
           id: options[idKey],
@@ -533,8 +530,7 @@ class SelectWithIcon extends Component {
             role: 'option',
             ariaSelected: selectedId === options[idKey],
             ariaLabel: options[valueKey]
-          },
-          ...ListItemProps
+          }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/Select/props/defaultProps.js

@@ -98,7 +98,6 @@ export const SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
-  customProps: {},
   needEffect: true,
   isLoading: false
 };

package/es/Select/props/propTypes.js

@@ -64,8 +64,6 @@ export const Select_propTypes = {
   searchBoxSize: PropTypes.string,
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
-  searchFields: PropTypes.arrayOf(PropTypes.string),
-  secondaryField: PropTypes.string,
   selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -123,7 +121,6 @@ export const GroupSelect_propTypes = {
   searchBoxPlaceHolder: PropTypes.string,
   needSearch: PropTypes.bool,
   searchEmptyMessage: PropTypes.string,
-  secondaryField: PropTypes.string,
   getRef: PropTypes.func,
   isDisabled: PropTypes.bool,
   isReadOnly: PropTypes.bool,
@@ -285,7 +282,6 @@ export const SelectWithIcon_propTypes = {
   removeClose: PropTypes.func,
   searchBoxPlaceHolder: PropTypes.string,
   searchEmptyMessage: PropTypes.string,
-  secondaryValueKey: PropTypes.string,
   selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selectedValue: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium']),
@@ -310,7 +306,6 @@ export const SelectWithIcon_propTypes = {
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object,
     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 { highlight } from "./highlight";
 import defaultStyle from "./css/Typography.module.css";
 
 const Typography = props => {
@@ -14,8 +15,12 @@ const Typography = props => {
     customId,
     $tagAttributes_text,
     $a11yAttributes_text,
-    customStyle
+    customStyle,
+    highlights
   } = props;
+  const {
+    highlightData = []
+  } = highlights;
   const style = mergeStyle(defaultStyle, customStyle);
   const {
     typographyClass
@@ -30,7 +35,9 @@ const Typography = props => {
     'data-test-id': testId,
     ...$tagAttributes_text,
     ...$a11yAttributes_text
-  }, children);
+  }, highlightData.length > 0 && typeof children === 'string' ? highlight({ ...highlights,
+    text: children
+  }) : children);
 };
 
 Typography.propTypes = propTypes;

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

@@ -0,0 +1,334 @@
+import React from 'react';
+import Typography from "../Typography";
+import { render } from "@testing-library/react";
+import Tag from "../../Tag/Tag";
+describe('Typography component', () => {
+  const weights = ['regular', 'light', 'semibold', 'bold'];
+  const decorations = ['default', 'underline', 'strike', 'overline'];
+  test('should be render with the basic set of default props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should be render with text children', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, null, "Text testing"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlighted word', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: ['sun'],
+        highlightsStyle: {
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: [1, 2]
+        }, {
+          highlightText: 'under',
+          index: 1
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          highlightsStyle: {
+            weight: 'bold'
+          }
+        }, {
+          highlightText: 'under',
+          highlightsStyle: {
+            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 isExcludedIndex', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: 1
+        }, {
+          highlightText: 'moon',
+          index: [2, 3]
+        }],
+        isExcludedIndex: true,
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: 1,
+          isExcludedIndex: true
+        }, {
+          highlightText: 'moon',
+          index: [2, 3],
+          isExcludedIndex: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }, {
+          highlightText: '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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          tagName: 'i'
+        }, {
+          highlightText: '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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          isCaseSensitive: true
+        }, {
+          highlightText: 'Moon',
+          isCaseSensitive: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          isWholeWord: true
+        }, {
+          highlightText: 'moon',
+          isWholeWord: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }, {
+          highlightText: 'moon',
+          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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          customClass: '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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_sun'
+          }
+        }, {
+          highlightText: 'moon',
+          highlightsStyle: {
+            customClass: '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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }],
+        render: /*#__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, {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          render: /*#__PURE__*/React.createElement(Tag, {
+            text: "Sun"
+          })
+        }, {
+          highlightText: 'moon',
+          render: /*#__PURE__*/React.createElement(Tag, {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright."));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});