@zohodesk/components 1.6.7 → 1.6.8

package/README.md

@@ -2,6 +2,14 @@
 
 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.6.8
+
+- **Typography**
+  - `breakSpaces` value supported for the **$ui_whiteSpace** prop.
+  - Prefixless prop fallbacks are supported
+  - `tagName` config in **highlightText** has been renamed to `as`. (fallback supported)
+
+
 # 1.6.7
 
 - PX to variable conversion was not applied due to the CBT migration. The issue has now been fixed. 

package/es/Typography/Typography.js

@@ -9,18 +9,20 @@ import defaultStyle from "./css/Typography.module.css";
 const Typography = props => {
   const {
     children,
+    as,
     $ui_tagName,
+    dataTitle,
     $i18n_dataTitle,
     testId,
     customId,
+    tagAttributes,
     $tagAttributes_text,
+    a11yAttributes,
     $a11yAttributes_text,
     customStyle,
+    highlightConfig,
     $ui_highlightConfig
   } = props;
-  const {
-    data: highlightData = []
-  } = $ui_highlightConfig;
   const style = mergeStyle(defaultStyle, customStyle);
   const {
     typographyClass
@@ -28,14 +30,22 @@ const Typography = props => {
     props,
     style
   });
-  return /*#__PURE__*/React.createElement($ui_tagName, {
+  const finalTagName = as !== undefined ? as : $ui_tagName;
+  const finalA11yAttributes = a11yAttributes !== undefined ? a11yAttributes : $a11yAttributes_text;
+  const finalTagAttributes = tagAttributes !== undefined ? tagAttributes : $tagAttributes_text;
+  const finalDataTitle = dataTitle !== undefined ? dataTitle : $i18n_dataTitle;
+  const finalHighlightConfig = highlightConfig !== undefined ? highlightConfig : $ui_highlightConfig;
+  const {
+    data: highlightData = []
+  } = finalHighlightConfig;
+  return /*#__PURE__*/React.createElement(finalTagName, {
     className: typographyClass,
-    'data-title': $i18n_dataTitle,
+    'data-title': finalDataTitle,
     'data-id': customId,
     'data-test-id': testId,
-    ...$tagAttributes_text,
-    ...$a11yAttributes_text
-  }, highlightData && highlightData.length > 0 && typeof children === 'string' ? highlightText({ ...$ui_highlightConfig,
+    ...finalTagAttributes,
+    ...finalA11yAttributes
+  }, highlightData && highlightData.length > 0 && typeof children === 'string' ? highlightText({ ...finalHighlightConfig,
     text: children
   }) : children);
 };

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

@@ -15,7 +15,7 @@ describe('Typography', () => {
   const ui_decoration = ['default', 'underline', 'strike', 'overline'];
   const ui_wordBreak = ['breakAll', 'keepAll', 'breakWord'];
   const ui_wordWrap = ['normal', 'break'];
-  const ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap'];
+  const ui_whiteSpace = ['normal', 'noWrap', 'pre', 'preLine', 'preWrap', 'breakSpaces'];
   test('rendering the defult props', () => {
     const {
       asFragment
@@ -36,6 +36,14 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering h2 tag name with using as', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      as: "h2"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering i18n_dataTitle', () => {
     const {
       asFragment
@@ -44,6 +52,14 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering dataTitle', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      dataTitle: "typoDataTitle"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering testId', () => {
     const {
       asFragment
@@ -70,6 +86,16 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering tagAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      tagAttributes: {
+        id: "TypoCustomId"
+      }
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering a11yAttributes_text', () => {
     const {
       asFragment
@@ -82,6 +108,18 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering a11yAttributes', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      a11yAttributes: {
+        'aria-haspopup': 'true',
+        'aria-expanded': true,
+        'aria-controls': 'uniqueId'
+      }
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering flag_reset', () => {
     const {
       asFragment
@@ -90,6 +128,14 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering shouldReset', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      shouldReset: true
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering flag_dotted', () => {
     const {
       asFragment
@@ -98,6 +144,14 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering isDotted', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isDotted: true
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_size)('Should render ui_size - %s', ui_size => {
     const {
       asFragment
@@ -107,6 +161,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_size)('Should render size - %s', size => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      size: size
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_lineClamp)('Should render ui_lineClamp - %s', ui_lineClamp => {
     const {
       asFragment
@@ -116,6 +179,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_lineClamp)('Should render lineClamp - %s', lineClamp => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      lineClamp: lineClamp
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_lineHeight)('Should render ui_lineHeight - %s', ui_lineHeight => {
     const {
       asFragment
@@ -125,6 +197,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_lineHeight)('Should render lineHeight - %s', lineHeight => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      lineHeight: lineHeight
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_display)('Should render ui_display - %s', ui_display => {
     const {
       asFragment
@@ -134,6 +215,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_display)('Should render display - %s', display => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      display: display
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_weight)('Should render ui_weight - %s', ui_weight => {
     const {
       asFragment
@@ -143,6 +233,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_weight)('Should render weight - %s', weight => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      weight: weight
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_typeFace)('Should render ui_typeFace - %s', ui_typeFace => {
     const {
       asFragment
@@ -152,6 +251,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_typeFace)('Should render typeFace - %s', typeFace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      typeFace: typeFace
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_textAlign)('Should render ui_textAlign - %s', ui_textAlign => {
     const {
       asFragment
@@ -161,6 +269,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_textAlign)('Should render textAlign - %s', textAlign => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      textAlign: textAlign
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_letterSpacing)('Should render ui_letterSpacing - %s', ui_letterSpacing => {
     const {
       asFragment
@@ -170,6 +287,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_letterSpacing)('Should render letterSpacing - %s', letterSpacing => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      letterSpacing: letterSpacing
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_transform)('Should render ui_transform - %s', ui_transform => {
     const {
       asFragment
@@ -179,6 +305,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_transform)('Should render transform - %s', transform => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      transform: transform
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_decoration)('Should render ui_decoration - %s', ui_decoration => {
     const {
       asFragment
@@ -188,6 +323,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_decoration)('Should render decoration - %s', decoration => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      decoration: decoration
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test('rendering ui_className', () => {
     const {
       asFragment
@@ -196,6 +340,14 @@ describe('Typography', () => {
     }, "Heading 2 Test"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering customClass', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      customClass: "custom-class"
+    }, "Heading 2 Test"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_wordBreak)('Should render ui_wordBreak - %s', ui_wordBreak => {
     const {
       asFragment
@@ -205,6 +357,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_wordBreak)('Should render wordBreak - %s', wordBreak => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      wordBreak: wordBreak
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_wordWrap)('Should render ui_wordWrap - %s', ui_wordWrap => {
     const {
       asFragment
@@ -214,6 +375,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_wordWrap)('Should render wordWrap - %s', wordWrap => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      wordWrap: wordWrap
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
   test.each(ui_whiteSpace)('Should render ui_whiteSpace - %s', ui_whiteSpace => {
     const {
       asFragment
@@ -223,6 +393,15 @@ describe('Typography', () => {
     }, "Heading"));
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(ui_whiteSpace)('Should render whiteSpace - %s', whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      isScrollAttribute: true,
+      whiteSpace: whiteSpace
+    }, "Heading"));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
 describe('Typography with highlight', () => {
   test('should render highlighted word', () => {
@@ -238,6 +417,19 @@ describe('Typography with highlight', () => {
     }, "The sun was bright, the sun was warm, the sun was high in the sky."));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('should render highlighted word with highlightConfig', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Typography, {
+      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
@@ -321,7 +513,7 @@ describe('Typography with highlight', () => {
     }, "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', () => {
+  test('should render with global tag name applied to all highlights', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Typography, {
@@ -331,22 +523,22 @@ describe('Typography with highlight', () => {
         }, {
           text: 'moon'
         }],
-        tagName: 'i'
+        as: 'i'
       }
     }, "The sun and moon were bright."));
     expect(asFragment()).toMatchSnapshot();
   });
-  test('should render with separate tagName for each highlighted word', () => {
+  test('should render with separate tag name for each highlighted word', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Typography, {
       $ui_highlightConfig: {
         data: [{
           text: 'sun',
-          tagName: 'i'
+          as: 'i'
         }, {
           text: 'moon',
-          tagName: 'u'
+          as: 'u'
         }]
       }
     }, "The sun and moon were bright."));