@zohodesk/components 1.4.22 → 1.4.23

package/README.md

@@ -2,6 +2,11 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.23
+
+- **Typography**
+  - Added support for text highlighting via `$ui_highlightConfig` prop.
+
 # 1.4.22
 
 - **New Components**

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();
+  });
 });