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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react'; // props

import defaultProps from "./props/defaultProps";
import propTypes from "./props/propTypes"; // methods

import cssJSLogic from "./css/cssJSLogic";
import { renderNode } from '@zohodesk/utils'; // hoc

import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // constants

import { DISPLAY_MODE, FONT_SIZE } from "./constants"; // components

import Flex from '@zohodesk/layout/es/Flex/Flex';
import Typography from "../../Typography/Typography"; // css

import style from "./css/Label_v1.module.css";

const Label = props => {
  const {
    htmlFor,
    onClick,
    text,
    customId,
    testId,
    tagAttributes,
    a11yAttributes,
    customProps,
    isRequired,
    requiredType,
    isClipped,
    size,
    fontWeight,
    layout,
    renderRightPlaceholderNode,
    renderLeftPlaceholderNode,
    i18nKeys
  } = props;
  const {
    container: tagAttributes_container,
    label: tagAttributes_label
  } = tagAttributes;
  const {
    container: a11yAttributes_container,
    label: a11yAttributes_label
  } = a11yAttributes;
  const {
    container: customProps_container,
    label: customProps_label
  } = customProps;
  const {
    requiredText: i18n_requiredText = 'Required'
  } = i18nKeys;
  const {
    labelClass,
    requiredClass,
    containerClass
  } = cssJSLogic({
    props,
    style
  });
  const a11yAttributes_requiredText = {
    'aria-hidden': 'true'
  };

  const renderRequired = () => /*#__PURE__*/React.createElement(Typography, {
    $ui_tagName: "span",
    $ui_className: requiredClass,
    $a11yAttributes_text: a11yAttributes_requiredText,
    $ui_size: FONT_SIZE[size],
    $ui_weight: fontWeight,
    $i18n_dataTitle: ""
  }, requiredType === 'text' ? `(${i18n_requiredText})` : '*');

  return /*#__PURE__*/React.createElement(Flex, _extends({}, customProps_container, {
    $tagAttributes_container: { ...tagAttributes_container,
      'data-selector-id': customId
    },
    $ui_displayMode: DISPLAY_MODE[layout],
    $ui_alignItems: "center",
    $a11yAttributes_container: a11yAttributes_container,
    testId: testId,
    customId: customId,
    $ui_className: containerClass
  }), renderNode(renderLeftPlaceholderNode), /*#__PURE__*/React.createElement(Typography, _extends({}, customProps_label, {
    $tagAttributes_text: { ...tagAttributes_label,
      htmlFor,
      onClick
    },
    $ui_tagName: "label",
    $ui_className: labelClass,
    $i18n_dataTitle: text,
    $a11yAttributes_text: a11yAttributes_label,
    $ui_size: FONT_SIZE[size],
    $ui_weight: fontWeight,
    $flag_dotted: isClipped
  }), text, isRequired && !isClipped ? renderRequired() : null), isRequired && isClipped ? renderRequired() : null, renderNode(renderRightPlaceholderNode));
};

export default withComponentRegistrar(Label, {
  name: 'ZDC_V1_Label'
});
Label.defaultProps = defaultProps;
Label.propTypes = propTypes;