@shopify/polaris/build/esm/components/Text/Text.js

Shopify’s admin product component library

import React from 'react';
import { classNames } from '../../utilities/css.js';
import styles from './Text.scss.js';

const VariantFontWeightMapping = {
  headingXs: 'semibold',
  headingSm: 'semibold',
  headingMd: 'semibold',
  headingLg: 'semibold',
  headingXl: 'semibold',
  heading2xl: 'semibold',
  heading3xl: 'semibold',
  heading4xl: 'bold',
  bodySm: 'regular',
  bodyMd: 'regular',
  bodyLg: 'regular'
};
const Text = ({
  alignment,
  as,
  children,
  color,
  fontWeight,
  truncate = false,
  variant,
  visuallyHidden = false
}) => {
  const Component = as || (visuallyHidden ? 'span' : 'p');
  const className = classNames(styles.root, styles[variant], fontWeight ? styles[fontWeight] : styles[VariantFontWeightMapping[variant]], (alignment || truncate) && styles.block, alignment && styles[alignment], color && styles[color], truncate && styles.truncate, visuallyHidden && styles.visuallyHidden);
  return /*#__PURE__*/React.createElement(Component, {
    className: className
  }, children);
};

export { Text };