@zohodesk/components/es/Typography/Typography.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 React from 'react';
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 => {
  const {
    children,
    as,
    $ui_tagName,
    dataTitle,
    $i18n_dataTitle,
    testId,
    customId,
    tagAttributes,
    $tagAttributes_text,
    a11yAttributes,
    $a11yAttributes_text,
    customStyle,
    highlightConfig,
    $ui_highlightConfig
  } = props;
  const style = mergeStyle(defaultStyle, customStyle);
  const {
    typographyClass
  } = cssJSLogic({
    props,
    style
  });
  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': finalDataTitle,
    'data-id': customId,
    'data-test-id': testId,
    ...finalTagAttributes,
    ...finalA11yAttributes
  }, highlightData && highlightData.length > 0 && typeof children === 'string' ? highlightText({ ...finalHighlightConfig,
    text: children
  }) : children);
};

Typography.propTypes = propTypes;
Typography.defaultProps = defaultProps;
export default Typography;