@commercetools-uikit/label
Version:
The Label component represents the primitive label for a form field component.
80 lines (71 loc) • 11.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var react$1 = require('react');
var reactIntl = require('react-intl');
var utils = require('@commercetools-uikit/utils');
var Text = require('@commercetools-uikit/text');
var react = require('@emotion/react');
var designSystem = require('@commercetools-uikit/design-system');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
var Text__default = /*#__PURE__*/_interopDefault(Text);
const RequiredIndicator = () => jsxRuntime.jsx("em", {
css: /*#__PURE__*/react.css("color:", designSystem.designTokens.colorWarning40, ";font-style:normal;margin-left:2px;" + (process.env.NODE_ENV === "production" ? "" : ";label:RequiredIndicator;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlcXVpcmVkLWluZGljYXRvci50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS1kiLCJmaWxlIjoicmVxdWlyZWQtaW5kaWNhdG9yLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuXG5jb25zdCBSZXF1aXJlZEluZGljYXRvciA9ICgpID0+IChcbiAgPGVtXG4gICAgY3NzPXtjc3NgXG4gICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JXYXJuaW5nNDB9O1xuICAgICAgZm9udC1zdHlsZTogbm9ybWFsO1xuICAgICAgbWFyZ2luLWxlZnQ6IDJweDtcbiAgICBgfVxuICA+XG4gICAgeycqJ31cbiAgPC9lbT5cbik7XG5SZXF1aXJlZEluZGljYXRvci5kaXNwbGF5TmFtZSA9ICdSZXF1aXJlZEluZGljYXRvcic7XG5cbmV4cG9ydCBkZWZhdWx0IFJlcXVpcmVkSW5kaWNhdG9yO1xuIl19 */"),
children: '*'
});
RequiredIndicator.displayName = 'RequiredIndicator';
var RequiredIndicator$1 = RequiredIndicator;
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var _ref = process.env.NODE_ENV === "production" ? {
name: "1e5gw54",
styles: ">div{display:flex;}"
} : {
name: "1q3368g-Label",
styles: ">div{display:flex;};label:Label;/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRmMiLCJmaWxlIjoibGFiZWwudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBQcm9wcyBhcyBJbnRsTWVzc2FnZSB9IGZyb20gJ3JlYWN0LWludGwvc3JjL2NvbXBvbmVudHMvbWVzc2FnZSc7XG5cbmltcG9ydCB7IENoaWxkcmVuLCB0eXBlIFJlYWN0Tm9kZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IEZvcm1hdHRlZE1lc3NhZ2UgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IHdhcm5pbmcgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC91dGlscyc7XG5pbXBvcnQgVGV4dCBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC90ZXh0JztcbmltcG9ydCBSZXF1aXJlZEluZGljYXRvciBmcm9tICcuL3JlcXVpcmVkLWluZGljYXRvcic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCB0eXBlIFRMYWJlbFByb3BzID0ge1xuICAvKipcbiAgICogVGhlIGBpZGAgSFRNTCBhdHRyaWJ1dGUsIHVzZWQgdG8gcmVmZXJlbmNlIG5vbi1mb3JtIGVsZW1lbnRzIHdpdGggdGhlIHJlbGF0ZWQgYXR0cmlidXRlIGBhcmlhLWxhYmVsbGVkYnlgLlxuICAgKiA8YnIvPlxuICAgKiBVc2UgdGhpcyB0byBzZXQgdGhlIHJlbGF0aW9uc2hpcHMgYmV0d2VlbiB0aGUgbGFiZWwgYW5kIGEgbm9uLWZvcm0gZWxlbWVudC5cbiAgICogPGJyIC8+XG4gICAqIEZvciBleGFtcGxlOlxuICAgKiBgYGBgXG4gICAqICAgPGxhYmVsIGlkPVwiZm9vXCI+XG4gICAqICAgPGRpdiBhcmlhLWxhYmVsbGVkYnk9XCJmb29cIj5cbiAgICogYGBgYFxuICAgKi9cbiAgaWQ/OiBzdHJpbmc7XG4gIC8qKlxuICAgKiBUaGUgYGZvcmAgSFRNTCBhdHRyaWJ1dGUsIHVzZWQgdG8gcmVmZXJlbmNlIGZvcm0gZWxlbWVudHMgd2l0aCB0aGUgcmVsYXRlZCBhdHRyaWJ1dGUgYGlkYCBvciBgYXJpYS1sYWJlbGxlZGJ5YC5cbiAgICogPGJyIC8+XG4gICAqIFVzZSB0aGlzIHRvIHNldCB0aGUgcmVsYXRpb25zaGlwcyBiZXR3ZWVuIHRoZSBsYWJlbCBhbmQgYSBmb3JtIGVsZW1lbnQuXG4gICAqIDxiciAvPlxuICAgKiBGb3IgZXhhbXBsZTpcbiAgICogYGBgYFxuICAgKiAgIDxsYWJlbCBmb3I9XCJmb29cIj5cbiAgICogICA8aW5wdXQgaWQ9XCJmb29cIj5cbiAgICpcbiAgICogICA8bGFiZWwgaWQ9XCJmb29cIj5cbiAgICogICA8aW5wdXQgYXJpYS1sYWJlbGxlZGJ5PVwiZm9vXCI+XG4gICAqIGBgYGBcbiAgICovXG4gIGh0bWxGb3I/OiBzdHJpbmc7XG4gIC8vIEluZGljYXRlcyB0aGUgd2VpZ2h0IChvciBib2xkbmVzcykgb2YgdGhlIGZvbnQuXG4gIGZvbnRXZWlnaHQ/OiAnbWVkaXVtJyB8ICdib2xkJztcbiAgLyoqXG4gICAqIEBkZXByZWNhdGVkOiBVc2UgdGhlIG5ldyBgZm9udFdlaWdodGAgcHJvcC5cbiAgICovXG4gIGlzQm9sZD86IGJvb2xlYW47XG4gIC8vIEluZGljYXRlcyBpZiB0aGUgbGFiZWxlZCBmaWVsZCBpcyByZXF1aXJlZCBpbiBhIGZvcm1cbiAgaXNSZXF1aXJlZEluZGljYXRvclZpc2libGU/OiBib29sZWFuO1xuICAvLyBJbmRpY2F0ZXMgdGhlIHRvbmUgdG8gYmUgYXBwbGllZCB0byB0aGUgbGFiZWxcbiAgdG9uZT86ICdwcmltYXJ5JyB8ICdpbnZlcnRlZCc7XG4gIC8qKlxuICAgKiBBbiBgSW50bE1lc3NhZ2VgIG9iamVjdCByZW5kZXJlZCBgY2hpbGRyZW5gIHRvIGBMYWJlbGAuXG4gICAqIDxiciAvPlxuICAgKiBXaGVuIGEgdmFsdWUgaXMgcHJvdmlkZWQsIGBpbnRsTWVzc2FnZWAgd2lsbCBiZSByZW5kZXJlZCBpbnN0ZWFkIG9mIGBjaGlsZHJlbmBcbiAgICogPGJyIC8+XG4gICAqIFRoaXMgaXMgcmVxdWlyZWQgd2hlbiBgY2hpbGRyZW5gIGlzIGB1bmRlZmluZWRgIGFuZCB2aWNlIHZlcnNhXG4gICAqL1xuICBpbnRsTWVzc2FnZT86IEludGxNZXNzYWdlO1xuICAvKipcbiAgICogUmVuZGVyZWQgYXMgYGNoaWxkcmVuYCB0byBgTGFiZWxgLlxuICAgKiA8YnIgLz5cbiAgICogVGhpcyBpcyByZXF1aXJlZCB3aGVuIGBpbnRsTWVzc2FnZWAgaXMgYHVuZGVmaW5lZGAgYW5kIHZpY2UgdmVyc2FcbiAgICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufTtcblxuY29uc3QgTGFiZWwgPSAocHJvcHM6IFRMYWJlbFByb3BzKSA9PiB7XG4gIHdhcm5pbmcoXG4gICAgIShCb29sZWFuKHByb3BzLmlkKSAmJiBCb29sZWFuKHByb3BzLmh0bWxGb3IpKSxcbiAgICBgdWkta2l0L0xhYmVsOiBwcm92aWRlIG9ubHkgdGhlIFwiaWRcIiBvciB0aGUgXCJodG1sRm9yXCIgcHJvcGVydGllcywgbm90IGJvdGguYFxuICApO1xuICBjb25zdCBoYXNDb250ZW50ID1cbiAgICBwcm9wcy5pbnRsTWVzc2FnZSB8fCBCb29sZWFuKENoaWxkcmVuLmNvdW50KHByb3BzLmNoaWxkcmVuKSk7XG4gIHdhcm5pbmcoXG4gICAgaGFzQ29udGVudCxcbiAgICBbXG4gICAgICAndWkta2l0L0xhYmVsOicsXG4gICAgICAnXCJpbnRsTWVzc2FnZVwiIGlzIHJlcXVpcmVkIHdoZW4gXCJjaGlsZHJlblwiIGlzIGB1bmRlZmluZWRgIGFuZCB2aWNlIHZlcnNhLicsXG4gICAgICAnUHJvdmlkZSBcImludGxNZXNzYWdlXCIgb3IgXCJjaGlsZHJlblwiJyxcbiAgICBdLmpvaW4oJyAnKVxuICApO1xuXG4gIHJldHVybiAoXG4gICAgPGxhYmVsXG4gICAgICBjc3M9e2Nzc2BcbiAgICAgICAgPiBkaXYge1xuICAgICAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICAgIH1cbiAgICAgIGB9XG4gICAgICBpZD17cHJvcHMuaWR9XG4gICAgICBodG1sRm9yPXtwcm9wcy5odG1sRm9yfVxuICAgID5cbiAgICAgIDxUZXh0LkRldGFpbFxuICAgICAgICB0b25lPXtwcm9wcy50b25lfVxuICAgICAgICAvLyBUT0RPOiByZW1vdmUgcGFzc2luZyBgaXNCb2xkYCBwcm9wIGhlcmUgb25jZSBkZXByZWNhdGVkXG4gICAgICAgIGlzQm9sZD17cHJvcHMuaXNCb2xkfVxuICAgICAgICAvLyBpbnN1cmUgdGhhdCBmb250V2VpZ2h0IGRlZmF1bHRzIHRvICdtZWRpdW0nIGV2ZW4gaWYgdXNlciBwYXNzZXMgJ3JlZ3VsYXInXG4gICAgICAgIGZvbnRXZWlnaHQ9e3Byb3BzLmZvbnRXZWlnaHQgPT09ICdib2xkJyA/ICdib2xkJyA6ICdtZWRpdW0nfVxuICAgICAgPlxuICAgICAgICB7cHJvcHMuaW50bE1lc3NhZ2UgPyAoXG4gICAgICAgICAgPEZvcm1hdHRlZE1lc3NhZ2Ugey4uLnByb3BzLmludGxNZXNzYWdlfSAvPlxuICAgICAgICApIDogKFxuICAgICAgICAgIHByb3BzLmNoaWxkcmVuXG4gICAgICAgICl9XG4gICAgICAgIHtwcm9wcy5pc1JlcXVpcmVkSW5kaWNhdG9yVmlzaWJsZSAmJiA8UmVxdWlyZWRJbmRpY2F0b3IgLz59XG4gICAgICA8L1RleHQuRGV0YWlsPlxuICAgIDwvbGFiZWw+XG4gICk7XG59O1xuXG5MYWJlbC5kaXNwbGF5TmFtZSA9ICdMYWJlbCc7XG5cbmV4cG9ydCBkZWZhdWx0IExhYmVsO1xuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
const Label = props => {
process.env.NODE_ENV !== "production" ? utils.warning(!(Boolean(props.id) && Boolean(props.htmlFor)), `ui-kit/Label: provide only the "id" or the "htmlFor" properties, not both.`) : void 0;
const hasContent = props.intlMessage || Boolean(react$1.Children.count(props.children));
process.env.NODE_ENV !== "production" ? utils.warning(hasContent, ['ui-kit/Label:', '"intlMessage" is required when "children" is `undefined` and vice versa.', 'Provide "intlMessage" or "children"'].join(' ')) : void 0;
return jsxRuntime.jsx("label", {
css: _ref,
id: props.id,
htmlFor: props.htmlFor,
children: jsxRuntime.jsxs(Text__default["default"].Detail, {
tone: props.tone
// TODO: remove passing `isBold` prop here once deprecated
,
isBold: props.isBold
// insure that fontWeight defaults to 'medium' even if user passes 'regular'
,
fontWeight: props.fontWeight === 'bold' ? 'bold' : 'medium',
children: [props.intlMessage ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread({}, props.intlMessage)) : props.children, props.isRequiredIndicatorVisible && jsxRuntime.jsx(RequiredIndicator$1, {})]
})
});
};
Label.displayName = 'Label';
var Label$1 = Label;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.3";
exports["default"] = Label$1;
exports.version = version;