@zohodesk/components/es/Label/Label.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

/* eslint css-modules/no-unused-class: [2, { markAsUsed: [
  'small', 'medium', 'large', 'title', 'subtitle', 'default', 'primary', 'secondary', 'danger', 'mandatory'
]}] */
import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import style from "./Label.module.css";
import colors from "./LabelColors.module.css";
export default class Label extends React.Component {
  render() {
    let {
      text,
      type,
      palette,
      size,
      clipped,
      htmlFor,
      title,
      onClick,
      dataId,
      dataSelectorId,
      variant,
      customClass,
      id,
      a11y = {}
    } = this.props;
    const {
      tabIndex
    } = a11y;
    return /*#__PURE__*/React.createElement("label", {
      className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
      htmlFor: htmlFor,
      "data-title": title,
      "data-id": dataId,
      "data-test-id": dataId,
      "data-selector-id": dataSelectorId,
      onClick: onClick,
      id: id,
      tabIndex: tabIndex
    }, text);
  }

}
Label.defaultProps = defaultProps;
Label.propTypes = propTypes; // if (__DOCS__) {
//   Label.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }