glide-design-system/src/lib/components/text/Text.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import PropTypes from "prop-types";

export const Text = ({
  type,
  children,
  style,
  className,
  onClick,
  id,
  name,
}) => {
  const combinedstyle = {
    fontSize:
      type === "h1"
        ? "24px"
        : type === "h2"
        ? "18px"
        : type === "h3"
        ? "16px"
        : "14px",
    fontFamily:
      type === "h1" || type === "h2"
        ? "Roboto Bold,Roboto, sans-serif"
        : "Roboto, sans-serif",
    fontWeight: type === "h1" || type === "h2" ? 700 : 400,
    ...style,
  };
  let textStyle = "";
  if (type === "h1") {
    textStyle = "text-4xl font-bold";
  } else if (type === "h2") {
    textStyle = "text-2xl font-bold";
  } else if (type === "h3") {
    textStyle = "text-xl font-bold";
  } else if (type === "p") {
    textStyle = "text-base";
  }
  const finalClassName = `${textStyle} ${
    textStyle ? textStyle : className ? className : ""
  }`;
  return (
    <div
      data-testid={id}
      id={id}
      name={name}
      style={combinedstyle}
      onClick={(e) => onClick && onClick(e)}
      className={finalClassName}>
      {children}
    </div>
  );
};

Text.propTypes = {
  type: PropTypes.string,
};