@zohodesk/components 1.2.51 → 1.2.52

package/README.md

@@ -32,6 +32,10 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.52
+
+- **Typography** - component added in v0
+
 # 1.2.51
 
 - **Popup** - Fixed issue: Error on unmount when target ref is not available.

package/es/Typography/Typography.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
+import { mergeStyle } from '@zohodesk/utils';
+import defaultStyle from "./css/Typography.module.css";
+
+const Typography = props => {
+  const {
+    children,
+    $ui_tagName,
+    $i18n_dataTitle,
+    testId,
+    customId,
+    $tagAttributes_text,
+    $a11yAttributes_text,
+    customStyle
+  } = props;
+  const style = mergeStyle(defaultStyle, customStyle);
+  const {
+    typographyClass
+  } = cssJSLogic({
+    props,
+    style
+  });
+  return /*#__PURE__*/React.createElement($ui_tagName, {
+    className: typographyClass,
+    'data-title': $i18n_dataTitle,
+    'data-id': customId,
+    'data-test-id': testId,
+    ...$tagAttributes_text,
+    ...$a11yAttributes_text
+  }, children);
+};
+
+Typography.propTypes = propTypes;
+Typography.defaultProps = defaultProps;
+export default Typography;

package/es/Typography/css/Typography.module.css

@@ -0,0 +1,489 @@
+.reset {
+  font-weight: initial;
+  margin: initial ;
+  padding: initial ;
+}
+
+.dotted {
+  composes: dotted from '../../common/common.module.css';
+}
+
+.display_block {
+  display: block;
+}
+
+.display_inlineBlock {
+  display: inline-block;
+}
+
+.display_inline {
+  display: inline;
+}
+
+.display_initial {
+  display: initial;
+}
+
+.font_regular {
+  font-family: var(--zd_regular);
+}
+
+.font_light {
+  font-family: var(--zd_light);
+}
+
+.font_semibold {
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.font_bold {
+  font-family: var(--zd_bold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.fontStyles_normal {
+  font-style: normal;
+}
+
+.fontStyles_italic {
+  font-style: italic;
+}
+
+.decoration_default {
+  text-decoration: none;
+}
+
+.decoration_underline {
+  text-decoration: underline;
+}
+
+.decoration_strike {
+  text-decoration: line-through;
+}
+
+.decoration_overline {
+  text-decoration: overline;
+}
+
+[dir=ltr] .textalign_left {
+  text-align: left;
+}
+
+[dir=rtl] .textalign_left {
+  text-align: right;
+}
+
+[dir=ltr] .textalign_right {
+  text-align: right;
+}
+
+[dir=rtl] .textalign_right {
+  text-align: left;
+}
+
+.textalign_center {
+  text-align: center;
+}
+
+.textalign_justify {
+  text-align: justify;
+}
+
+.transform_default {
+  text-transform: none;
+}
+
+.transform_upper {
+  text-transform: uppercase;
+}
+
+.transform_lower {
+  text-transform: lowercase;
+}
+
+.transform_capital {
+  text-transform: capitalize;
+}
+
+.dotted_clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.lineclamp_1 {
+  -webkit-line-clamp: 1;
+  composes: dotted_clamp;
+}
+
+.lineclamp_2 {
+  -webkit-line-clamp: 2;
+  composes: dotted_clamp;
+}
+
+.lineclamp_3 {
+  -webkit-line-clamp: 3;
+  composes: dotted_clamp;
+}
+
+.lineclamp_4 {
+  -webkit-line-clamp: 4;
+  composes: dotted_clamp;
+}
+
+.lineclamp_5 {
+  -webkit-line-clamp: 5;
+  composes: dotted_clamp;
+}
+
+.wordBreak_breakAll {
+  word-break: break-all
+}
+
+.wordBreak_keepAll {
+  word-break: keep-all
+}
+
+.wordBreak_breakWord {
+  word-break: break-word
+}
+
+.wordWrap_normal {
+  word-wrap: normal;
+}
+
+.wordWrap_break {
+  word-wrap: break-word
+}
+
+.whiteSpace_normal {
+  white-space: normal
+}
+
+.whiteSpace_noWrap {
+  white-space: nowrap
+}
+
+.whiteSpace_pre {
+  white-space: pre
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap
+}
+
+
+
+/*...............Font Size Start.........*/
+
+.size7 {
+  font-size: var(--zd_font_size7) ;
+}
+
+.size8 {
+  font-size: var(--zd_font_size8) ;
+}
+
+.size9 {
+  font-size: var(--zd_font_size9) ;
+}
+
+.size10 {
+  font-size: var(--zd_font_size10) ;
+}
+
+.size11 {
+  font-size: var(--zd_font_size11) ;
+}
+
+.size12 {
+  font-size: var(--zd_font_size12) ;
+}
+
+.size13 {
+  font-size: var(--zd_font_size13) ;
+}
+
+.size14 {
+  font-size: var(--zd_font_size14) ;
+}
+
+.size15 {
+  font-size: var(--zd_font_size15) ;
+}
+
+.size16 {
+  font-size: var(--zd_font_size16) ;
+}
+
+.size17 {
+  font-size: var(--zd_font_size17) ;
+}
+
+.size18 {
+  font-size: var(--zd_font_size18) ;
+}
+
+.size19 {
+  font-size: var(--zd_font_size19) ;
+}
+
+.size20 {
+  font-size: var(--zd_font_size20) ;
+}
+
+.size21 {
+  font-size: var(--zd_font_size21) ;
+}
+
+.size22 {
+  font-size: var(--zd_font_size22) ;
+}
+
+.size24 {
+  font-size: var(--zd_font_size24) ;
+}
+
+.size25 {
+  font-size: var(--zd_font_size25) ;
+}
+
+.size26 {
+  font-size: var(--zd_font_size26) ;
+}
+
+.size28 {
+  font-size: var(--zd_font_size28) ;
+}
+
+.size29 {
+  font-size: var(--zd_font_size29) ;
+}
+
+.size30 {
+  font-size: var(--zd_font_size30) ;
+}
+
+.size32 {
+  font-size: var(--zd_font_size32) ;
+}
+
+.size34 {
+  font-size: var(--zd_font_size34) ;
+}
+
+.size35 {
+  font-size: var(--zd_font_size35) ;
+}
+
+.size36 {
+  font-size: var(--zd_font_size36) ;
+}
+
+.size40 {
+  font-size: var(--zd_font_size40) ;
+}
+
+.size50 {
+  font-size: var(--zd_font_size50) ;
+}
+
+.sizeinherit {
+  font-size: inherit ;
+}
+
+/*...............Font Size End.........*/
+
+/*............... Lineheight Start.........*/
+
+.lineheight_inherit {
+  line-height: inherit;
+}
+
+.lineheight_initial {
+  line-height: initial;
+}
+
+.lineheight_normal {
+  line-height: normal;
+}
+
+.lineheight_0 {
+  line-height: 0;
+}
+
+.lineheight_0_1 {
+  line-height: 0.1;
+}
+
+.lineheight_0_2 {
+  line-height: 0.2;
+}
+
+.lineheight_0_3 {
+  line-height: 0.3;
+}
+
+.lineheight_0_4 {
+  line-height: 0.4;
+}
+
+.lineheight_0_5 {
+  line-height: 0.5;
+}
+
+.lineheight_0_6 {
+  line-height: 0.6;
+}
+
+.lineheight_0_7 {
+  line-height: 0.7;
+}
+
+.lineheight_0_8 {
+  line-height: 0.8;
+}
+
+.lineheight_0_9 {
+  line-height: 0.9;
+}
+
+.lineheight_1 {
+  line-height: 1;
+}
+
+.lineheight_1_1 {
+  line-height: 1.1;
+}
+
+.lineheight_1_2 {
+  line-height: 1.2;
+}
+
+.lineheight_1_3 {
+  line-height: 1.3;
+}
+
+.lineheight_1_4 {
+  line-height: 1.4;
+}
+
+.lineheight_1_5 {
+  line-height: 1.5;
+}
+
+.lineheight_1_6 {
+  line-height: 1.6;
+}
+
+.lineheight_1_7 {
+  line-height: 1.7;
+}
+
+.lineheight_1_8 {
+  line-height: 1.8;
+}
+
+.lineheight_1_9 {
+  line-height: 1.9;
+}
+
+.lineheight_2 {
+  line-height: 2;
+}
+
+
+/*............... Lineheight End.........*/
+
+/*............... Letterspacing Start.........*/
+
+.letterspacing_inherit {
+  letter-spacing: inherit;
+}
+
+.letterspacing_0_1 {
+  letter-spacing: 0.1px;
+}
+
+.letterspacing_0_2 {
+  letter-spacing: 0.2px;
+}
+
+.letterspacing_0_3 {
+  letter-spacing: 0.3px;
+}
+
+.letterspacing_0_4 {
+  letter-spacing: 0.4px;
+}
+
+.letterspacing_0_5 {
+  letter-spacing: 0.5px;
+}
+
+.letterspacing_0_6 {
+  letter-spacing: 0.6px;
+}
+
+.letterspacing_0_7 {
+  letter-spacing: 0.7px;
+}
+
+.letterspacing_0_8 {
+  letter-spacing: 0.8px;
+}
+
+.letterspacing_0_9 {
+  letter-spacing: 0.9px;
+}
+
+.letterspacing_1 {
+  letter-spacing: 1px;
+}
+
+.letterspacing_1_1 {
+  letter-spacing: 1.1px;
+}
+
+.letterspacing_1_2 {
+  letter-spacing: 1.2px;
+}
+
+.letterspacing_1_3 {
+  letter-spacing: 1.3px;
+}
+
+.letterspacing_1_4 {
+  letter-spacing: 1.4px;
+}
+
+.letterspacing_1_5 {
+  letter-spacing: 1.5px;
+}
+
+.letterspacing_1_6 {
+  letter-spacing: 1.6px;
+}
+
+.letterspacing_1_7 {
+  letter-spacing: 1.7px;
+}
+
+.letterspacing_1_8 {
+  letter-spacing: 1.8px;
+}
+
+.letterspacing_1_9 {
+  letter-spacing: 1.9px;
+}
+
+.letterspacing_2 {
+  letter-spacing: 2px;
+}
+
+/*............... Letterspacing End.........*/

package/es/Typography/css/cssJSLogic.js

@@ -0,0 +1,56 @@
+import { compileClassNames } from '@zohodesk/utils';
+import { letterspacingMapping, lineheightMapping } from "../utils";
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    $flag_reset,
+    $flag_dotted,
+    $ui_size,
+    $ui_lineClamp,
+    $ui_lineHeight,
+    $ui_display,
+    $ui_weight,
+    $ui_typeFace,
+    $ui_textAlign,
+    $ui_letterSpacing,
+    $ui_transform,
+    $ui_decoration,
+    $ui_className,
+    $ui_wordBreak,
+    $ui_wordWrap,
+    $ui_whiteSpace
+  } = props;
+
+  if ($ui_letterSpacing) {
+    $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
+  }
+
+  if ($ui_lineHeight) {
+    $ui_lineHeight = lineheightMapping[$ui_lineHeight];
+  }
+
+  let typographyClass = compileClassNames({
+    [style.reset]: $flag_reset,
+    [style.dotted]: $flag_dotted,
+    [style[`size${$ui_size}`]]: !!$ui_size,
+    [style[`lineclamp_${$ui_lineClamp}`]]: !!$ui_lineClamp,
+    [style[`lineheight_${$ui_lineHeight}`]]: !!$ui_lineHeight,
+    [style[`display_${$ui_display}`]]: !!$ui_display,
+    [style[`font_${$ui_weight}`]]: !!$ui_weight,
+    [style[`fontStyles_${$ui_typeFace}`]]: !!$ui_typeFace,
+    [style[`textalign_${$ui_textAlign}`]]: !!$ui_textAlign,
+    [style[`letterspacing_${$ui_letterSpacing}`]]: !!$ui_letterSpacing,
+    [style[`transform_${$ui_transform}`]]: !!$ui_transform,
+    [style[`decoration_${$ui_decoration}`]]: !!$ui_decoration,
+    [$ui_className]: !!$ui_className,
+    [style[`wordBreak_${$ui_wordBreak}`]]: !!$ui_wordBreak,
+    [style[`wordWrap_${$ui_wordWrap}`]]: !!$ui_wordWrap,
+    [style[`whiteSpace_${$ui_whiteSpace}`]]: !!$ui_whiteSpace
+  });
+  return {
+    typographyClass
+  };
+}

package/es/Typography/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  $ui_className: '',
+  $ui_tagName: 'div',
+  $flag_reset: false,
+  $flag_dotted: false,
+  $tagAttributes_text: {},
+  $a11yAttributes_text: {}
+};

package/es/Typography/props/propTypes.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  $ui_className: PropTypes.string,
+  $ui_tagName: PropTypes.string,
+  $flag_reset: PropTypes.bool,
+  $flag_dotted: PropTypes.bool,
+  $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  $ui_weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  $ui_textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
+  $ui_transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  $ui_lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
+  $ui_typeFace: PropTypes.oneOf(['normal', 'italic']),
+  $ui_decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
+  $ui_size: PropTypes.oneOf(['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']),
+  $ui_lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
+  $ui_wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
+  $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
+  $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
+  $i18n_dataTitle: PropTypes.string,
+  testId: PropTypes.string,
+  customId: PropTypes.string,
+  customStyle: PropTypes.object,
+  $a11yAttributes_text: PropTypes.object,
+  $tagAttributes_text: PropTypes.object
+};

package/es/Typography/utils/index.js

@@ -0,0 +1,50 @@
+/* eslint-disable */
+export const letterspacingMapping = {
+  'inherit': 'inherit',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};
+export const lineheightMapping = {
+  'inherit': 'inherit',
+  'initial': 'initial',
+  'normal': 'normal',
+  '0': '0',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};

package/es/index.js

@@ -39,4 +39,4 @@ import * as _utils from "./utils";
 export { _utils as utils };
 export * from "./VelocityAnimation";
 export * from "./semantic";
-export { default as Typography } from "./v1/Typography/Typography";
+export { default as Typography } from "./Typography/Typography";

package/es/v1/Typography/Typography.js

@@ -3,7 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from "./css/Typography.module.css";
+import defaultStyle from "./css/v1_Typography.module.css";
 
 const Typography = props => {
   const {