@zohodesk/components/es/Typography/css/cssJSLogic.js

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

import { compileClassNames } from '@zohodesk/utils';
import { letterspacingMapping, lineheightMapping } from "../utils";
export default function cssJSLogic({
  props,
  style
}) {
  let {
    $flag_reset,
    shouldReset,
    $flag_dotted,
    isDotted,
    $ui_size,
    size,
    $ui_lineClamp,
    lineClamp,
    $ui_lineHeight,
    lineHeight,
    $ui_display,
    display,
    $ui_weight,
    weight,
    $ui_typeFace,
    typeFace,
    $ui_textAlign,
    textAlign,
    $ui_letterSpacing,
    letterSpacing,
    $ui_transform,
    transform,
    $ui_decoration,
    decoration,
    $ui_className,
    customClass,
    $ui_wordBreak,
    wordBreak,
    $ui_wordWrap,
    wordWrap,
    $ui_whiteSpace,
    whiteSpace
  } = props;
  const finalReset = shouldReset !== undefined ? shouldReset : $flag_reset;
  const finalDotted = isDotted !== undefined ? isDotted : $flag_dotted;
  const finalSize = size !== undefined ? size : $ui_size;
  const finalLineClamp = lineClamp !== undefined ? lineClamp : $ui_lineClamp;
  const finalDisplay = display !== undefined ? display : $ui_display;
  const finalWeight = weight !== undefined ? weight : $ui_weight;
  const finalTypeFace = typeFace !== undefined ? typeFace : $ui_typeFace;
  const finalTextAlign = textAlign !== undefined ? textAlign : $ui_textAlign;
  const finalTransform = transform !== undefined ? transform : $ui_transform;
  const finalDecoration = decoration !== undefined ? decoration : $ui_decoration;
  const finalClassName = customClass !== undefined ? customClass : $ui_className;
  const finalWordBreak = wordBreak !== undefined ? wordBreak : $ui_wordBreak;
  const finalWordWrap = wordWrap !== undefined ? wordWrap : $ui_wordWrap;
  const finalWhiteSpace = whiteSpace !== undefined ? whiteSpace : $ui_whiteSpace;
  let finalLineHeight = lineHeight !== undefined ? lineHeight : $ui_lineHeight;
  let finalLetterSpacing = letterSpacing !== undefined ? letterSpacing : $ui_letterSpacing;

  if (finalLetterSpacing) {
    finalLetterSpacing = letterspacingMapping[finalLetterSpacing];
  }

  if (finalLineHeight) {
    finalLineHeight = lineheightMapping[finalLineHeight];
  }

  let typographyClass = compileClassNames({
    [style.reset]: finalReset,
    [style.dotted]: finalDotted,
    [style[`size${finalSize}`]]: !!finalSize,
    [style[`lineclamp_${finalLineClamp}`]]: !!finalLineClamp,
    [style[`lineheight_${finalLineHeight}`]]: !!finalLineHeight,
    [style[`display_${finalDisplay}`]]: !!finalDisplay,
    [style[`font_${finalWeight}`]]: !!finalWeight,
    [style[`fontStyles_${finalTypeFace}`]]: !!finalTypeFace,
    [style[`textalign_${finalTextAlign}`]]: !!finalTextAlign,
    [style[`letterspacing_${finalLetterSpacing}`]]: !!finalLetterSpacing,
    [style[`transform_${finalTransform}`]]: !!finalTransform,
    [style[`decoration_${finalDecoration}`]]: !!finalDecoration,
    [style[`wordBreak_${finalWordBreak}`]]: !!finalWordBreak,
    [style[`wordWrap_${finalWordWrap}`]]: !!finalWordWrap,
    [style[`whiteSpace_${finalWhiteSpace}`]]: !!finalWhiteSpace,
    [finalClassName]: !!finalClassName
  });
  return {
    typographyClass
  };
}