@zohodesk/components 1.0.0-temp-199.21 → 1.0.0-temp-249

package/lib/v1/Label/Label.js

@@ -3,49 +3,115 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Label;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
 
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
 
-var _LabelModule = _interopRequireDefault(require("../../Label/Label.module.css"));
+var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _LabelColorsModule = _interopRequireDefault(require("../../Label/LabelColors.module.css"));
+var _utils = require("@zohodesk/utils");
+
+var _ComponentRegistry = require("@zohodesk/dotkit/es/react/ComponentRegistry");
+
+var _constants = require("./constants");
+
+var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
+
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
+var _Label_v1Module = _interopRequireDefault(require("./css/Label_v1.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function Label(props) {
-  var text = props.text,
-      type = props.type,
-      palette = props.palette,
-      size = props.size,
-      clipped = props.clipped,
-      htmlFor = props.htmlFor,
-      title = props.title,
+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); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Label = function Label(props) {
+  var htmlFor = props.htmlFor,
       onClick = props.onClick,
-      dataId = props.dataId,
-      dataSelectorId = props.dataSelectorId,
-      variant = props.variant,
-      customClass = props.customClass,
-      id = props.id,
-      _props$a11y = props.a11y,
-      a11y = _props$a11y === void 0 ? {} : _props$a11y;
-  var tabIndex = a11y.tabIndex;
-  return /*#__PURE__*/_react["default"].createElement("label", {
-    className: "".concat(_LabelModule["default"].label, " ").concat(_LabelModule["default"][type], " ").concat(_LabelModule["default"][size], " ").concat(_LabelColorsModule["default"][palette], " ").concat(_LabelModule["default"]["font_".concat(variant)], "\n          ").concat(clipped ? _LabelModule["default"].dotted : '', " ").concat(onClick ? _LabelModule["default"].pointer : _LabelModule["default"].cursor, " ").concat(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.defaultProps;
-Label.propTypes = _propTypes.propTypes;
+      text = props.text,
+      customId = props.customId,
+      testId = props.testId,
+      tagAttributes = props.tagAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customProps = props.customProps,
+      isRequired = props.isRequired,
+      requiredType = props.requiredType,
+      isClipped = props.isClipped,
+      size = props.size,
+      textWeight = props.textWeight,
+      layout = props.layout,
+      renderRightPlaceholderNode = props.renderRightPlaceholderNode,
+      renderLeftPlaceholderNode = props.renderLeftPlaceholderNode,
+      i18nKeys = props.i18nKeys;
+  var tagAttributes_container = tagAttributes.container,
+      tagAttributes_label = tagAttributes.label;
+  var a11yAttributes_container = a11yAttributes.container,
+      a11yAttributes_label = a11yAttributes.label;
+  var customProps_container = customProps.container,
+      customProps_label = customProps.label;
+  var _i18nKeys$requiredTex = i18nKeys.requiredText,
+      i18n_requiredText = _i18nKeys$requiredTex === void 0 ? 'Required' : _i18nKeys$requiredTex;
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])(_objectSpread(_objectSpread({}, props), {}, {
+    style: _Label_v1Module["default"]
+  })),
+      labelClass = _cssJSLogic.labelClass,
+      requiredClass = _cssJSLogic.requiredClass,
+      containerClass = _cssJSLogic.containerClass;
+
+  var a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  var renderRequired = function renderRequired() {
+    return /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_tagName: "span",
+      $ui_className: requiredClass,
+      $a11yAttributes_text: a11yAttributes_requiredText,
+      $ui_size: _constants.FONT_SIZE[size],
+      $ui_weight: textWeight
+    }, requiredType === 'text' ? "(".concat(i18n_requiredText, ")") : '*');
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], _extends({}, customProps_container, {
+    $tagAttributes_container: _objectSpread(_objectSpread({}, tagAttributes_container), {}, {
+      'data-selector-id': customId
+    }),
+    $ui_displayMode: _constants.DISPLAY_MODE[layout],
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass
+  }), (0, _utils.renderNode)(renderLeftPlaceholderNode), /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, customProps_label, {
+    $tagAttributes_text: _objectSpread(_objectSpread({}, tagAttributes_label), {}, {
+      htmlFor: htmlFor,
+      onClick: onClick
+    }),
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: _constants.FONT_SIZE[size],
+    $ui_weight: textWeight,
+    $flag_dotted: isClipped
+  }), text, isRequired && isClipped ? renderRequired() : null), isRequired ? isClipped && renderRequired() : null, (0, _utils.renderNode)(renderRightPlaceholderNode));
+};
+
+var _default = (0, _ComponentRegistry.withComponentRegistrar)(Label, {
+  name: 'ZDC_V1_Label'
+});
+
+exports["default"] = _default;
+Label.defaultProps = _defaultProps["default"];
+Label.propTypes = _propTypes["default"];

package/lib/v1/Label/__tests__/Label.spec.js

@@ -0,0 +1,211 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Label = _interopRequireDefault(require("../Label"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// Hoisted enum values (PropTypes.oneOf enforcement)
+var REQUIRED_TYPE_VALUES = ['asterisk', 'text'];
+var SIZE_VALUES = ['small', 'medium'];
+var PALETTE_VALUES = ['default', 'secondary'];
+var TEXT_WEIGHT_VALUES = ['regular', 'semibold'];
+var LAYOUT_VALUES = ['inline', 'block'];
+afterEach(_react2.cleanup);
+describe('Label - Snapshot', function () {
+  test('Render with default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text"
+    })),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(REQUIRED_TYPE_VALUES)('Render with requiredType=%s', function (value) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      requiredType: value
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(SIZE_VALUES)('Render with size=%s', function (value) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      size: value
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(PALETTE_VALUES)('Render with palette=%s', function (value) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      palette: value
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(TEXT_WEIGHT_VALUES)('Render with textWeight=%s', function (value) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      textWeight: value
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(LAYOUT_VALUES)('Render with layout=%s', function (value) {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      layout: value
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with shouldHighlightRequired=true', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      shouldHighlightRequired: true
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isClipped=true', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isClipped: true
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isRequired=true', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDisabled=true', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isDisabled: true
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isReadOnly=true', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isReadOnly: true
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with htmlFor', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      htmlFor: "input-id"
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with i18nKeys', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      isRequired: true,
+      requiredType: "text",
+      i18nKeys: {
+        requiredText: 'Custom Required'
+      }
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      customClass: {
+        container: 'custom-container',
+        label: 'custom-label'
+      }
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customProps', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      customProps: {
+        container: {
+          $flag_shrink: true
+        },
+        label: {
+          $ui_lineClamp: '2'
+        }
+      }
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      customId: "label-customId",
+      testId: "label-testId"
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with tag attributes', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      tagAttributes: {
+        container: {
+          'data-custom-attr': 'true'
+        },
+        label: {
+          'data-custom-attr': 'true'
+        }
+      }
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with a11y attributes', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+      text: "Label text",
+      a11yAttributes: {
+        container: {
+          role: 'group'
+        },
+        label: {
+          'aria-label': 'Custom label'
+        }
+      }
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});