@zohodesk/components
Version:
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
69 lines (67 loc) • 2.57 kB
JavaScript
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); }
/* 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 Flex from '@zohodesk/layout/es/Flex/Flex';
import { renderNode, isRenderable } from '@zohodesk/utils';
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,
customProps,
customClass,
id,
renderRightPlaceholderNode,
a11y = {}
} = this.props;
const {
containerProps,
rightPlaceholderNodeProps
} = customProps;
const {
tabIndex
} = a11y;
const labelElement = /*#__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);
return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderable(renderRightPlaceholderNode) ? /*#__PURE__*/React.createElement(Flex, _extends({
$ui_displayMode: "flex",
$ui_direction: "row",
$ui_alignItems: "center"
}, containerProps), labelElement, /*#__PURE__*/React.createElement(Flex, _extends({
$ui_displayMode: "flex",
$ui_alignItems: "center"
}, rightPlaceholderNodeProps), renderNode(renderRightPlaceholderNode))) : /*#__PURE__*/React.createElement(React.Fragment, null, labelElement));
}
}
Label.defaultProps = defaultProps;
Label.propTypes = propTypes; // if (__DOCS__) {
// Label.docs = {
// componentGroup: 'Form Elements',
// folderName: 'Style Guide'
// };
// }