@wix/design-system 1.0.0

package/dist/cjs/FloatingNotification/index.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FloatingNotification","React","PureComponent"],"sources":["../../../src/FloatingNotification/index.d.ts"],"sourcesContent":["import * as React from 'react';\nimport { IconElement } from '../common';\nimport { ButtonWithAsProp } from '../Button';\n\nexport interface FloatingNotificationProps {\n  dataHook?: string;\n  className?: string;\n  type?: FloatingNotificationType;\n  showCloseButton?: boolean;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  textButtonProps?: FloatingNotificationButtonProps;\n  buttonProps?: FloatingNotificationButtonProps;\n  prefixIcon?: IconElement;\n  text?: React.ReactNode;\n  width?: string;\n  fullWidth?: boolean;\n}\n\nexport default class FloatingNotification extends React.PureComponent<FloatingNotificationProps> {}\n\nexport type FloatingNotificationType =\n  | 'standard'\n  | 'success'\n  | 'destructive'\n  | 'warning'\n  | 'premium'\n  | 'preview'\n  | 'dark';\n\nexport type FloatingNotificationButtonProps = ButtonWithAsProp<{\n  label?: React.ReactNode;\n}>;\n"],"mappings":";;;;AAAA;AAA+B;AAAA;AAkBhB,MAAMA,oBAAoB,SAASC,KAAK,CAACC,aAAa,CAA4B;AAAE"}

package/dist/cjs/FloatingNotification/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _FloatingNotification = _interopRequireDefault(require("./FloatingNotification.js"));
+exports.default = _FloatingNotification.default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/FloatingNotification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/FloatingNotification/index.js"],"sourcesContent":["export { default } from './FloatingNotification.js';\n"],"mappings":";;;;;AAAA;AAAoD"}

package/dist/cjs/FormField/FormField.driver.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=FormField.driver.d.js.map

package/dist/cjs/FormField/FormField.driver.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../src/FormField/FormField.driver.d.ts"],"sourcesContent":["import { BaseDriver } from 'wix-ui-test-utils/driver-factory';\nimport { LabelSize } from './index';\nimport { StatusIndications } from '../common';\n\nexport interface FormFieldDriver extends BaseDriver {\n  element: () => HTMLElement;\n  getChildren: () => HTMLElement | null;\n  getLabel: () => HTMLElement | null;\n  getLabelSize: () => LabelSize;\n  isRequired: () => boolean;\n  getLengthLeft: () => number | null;\n  isLengthExceeded: () => boolean;\n  hasTooltip: () => boolean;\n  getInfoContent: () => string;\n  getSuffix: () => HTMLElement | null;\n  hoverInfoIcon: () => Promise<void>;\n  getStatusMessage: () => string;\n  hasStatus: (status: StatusIndications) => boolean;\n}\n"],"mappings":""}

package/dist/cjs/FormField/FormField.driver.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon.driver"));
+var _constants = require("./constants");
+var _Text = _interopRequireDefault(require("../Text/Text.driver"));
+var formFieldDriver = _ref => {
+  var {
+    element: _element,
+    eventTrigger
+  } = _ref;
+  var byHook = hook => _element.querySelector("[data-hook*=\"".concat(hook, "\"]"));
+  var charactersCounter = () => byHook(_constants.dataHooks.counter);
+  var labelElement = () => byHook(_constants.dataHooks.label);
+  var labelTextDriver = () => (0, _Text.default)({
+    element: labelElement()
+  });
+  return {
+    exists: () => !!_element,
+    element: () => _element,
+    /** get children */
+    getChildren: () => byHook(_constants.dataHooks.children),
+    /** get label */
+    getLabel: () => labelElement(),
+    /** returns label size */
+    getLabelSize: () => labelTextDriver().getSize(),
+    /** returns true whether form field is required */
+    isRequired: () => !!byHook(_constants.dataHooks.asterisk),
+    /** returns the length left */
+    getLengthLeft: () => {
+      var counter = charactersCounter();
+      return counter ? parseInt(counter.innerHTML, 10) : null;
+    },
+    /** returns whether the form field length is exceeded */
+    isLengthExceeded: () => {
+      var counter = charactersCounter();
+      if (counter) {
+        var length = parseInt(counter.innerHTML, 10);
+        return length < 0;
+      }
+      return false;
+    },
+    /** returns true whether form field has tooltip */
+    hasTooltip: () => !!_element.querySelector("[data-hook=\"".concat(_constants.dataHooks.infoIcon, "\"]")),
+    /** returns tooltip text of the info content */
+    getInfoContent: () => (0, _InfoIcon.default)({
+      element: _element.querySelector("[data-hook=\"".concat(_constants.dataHooks.infoIcon, "\"]")),
+      eventTrigger
+    }).getContent(),
+    /** get form field suffix */
+    getSuffix: () => byHook(_constants.dataHooks.suffix),
+    /** hovers over the formfield infoicon */
+    hoverInfoIcon: () => (0, _InfoIcon.default)({
+      element: _element.querySelector("[data-hook=\"".concat(_constants.dataHooks.infoIcon, "\"]")),
+      eventTrigger
+    }).hover(),
+    /** returns status message text */
+    getStatusMessage: () => (0, _Text.default)({
+      element: byHook(_constants.dataHooks.statusMessage)
+    }).getText(),
+    /** return true if it has a given status */
+    hasStatus: status => _element.getAttribute('data-status') === status
+  };
+};
+var _default = formFieldDriver;
+exports.default = _default;
+//# sourceMappingURL=FormField.driver.js.map

package/dist/cjs/FormField/FormField.driver.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["formFieldDriver","element","eventTrigger","byHook","hook","querySelector","charactersCounter","dataHooks","counter","labelElement","label","labelTextDriver","textDriverFactory","exists","getChildren","children","getLabel","getLabelSize","getSize","isRequired","asterisk","getLengthLeft","parseInt","innerHTML","isLengthExceeded","length","hasTooltip","infoIcon","getInfoContent","infoIconDriverFactory","getContent","getSuffix","suffix","hoverInfoIcon","hover","getStatusMessage","statusMessage","getText","hasStatus","status","getAttribute"],"sources":["../../../src/FormField/FormField.driver.js"],"sourcesContent":["import infoIconDriverFactory from '../InfoIcon/InfoIcon.driver';\nimport { dataHooks } from './constants';\nimport textDriverFactory from '../Text/Text.driver';\n\nconst formFieldDriver = ({ element, eventTrigger }) => {\n  const byHook = hook => element.querySelector(`[data-hook*=\"${hook}\"]`);\n  const charactersCounter = () => byHook(dataHooks.counter);\n\n  const labelElement = () => byHook(dataHooks.label);\n  const labelTextDriver = () => textDriverFactory({ element: labelElement() });\n\n  return {\n    exists: () => !!element,\n    element: () => element,\n    /** get children */\n    getChildren: () => byHook(dataHooks.children),\n    /** get label */\n    getLabel: () => labelElement(),\n    /** returns label size */\n    getLabelSize: () => labelTextDriver().getSize(),\n    /** returns true whether form field is required */\n    isRequired: () => !!byHook(dataHooks.asterisk),\n    /** returns the length left */\n    getLengthLeft: () => {\n      const counter = charactersCounter();\n      return counter ? parseInt(counter.innerHTML, 10) : null;\n    },\n    /** returns whether the form field length is exceeded */\n    isLengthExceeded: () => {\n      const counter = charactersCounter();\n      if (counter) {\n        const length = parseInt(counter.innerHTML, 10);\n        return length < 0;\n      }\n      return false;\n    },\n    /** returns true whether form field has tooltip */\n    hasTooltip: () =>\n      !!element.querySelector(`[data-hook=\"${dataHooks.infoIcon}\"]`),\n\n    /** returns tooltip text of the info content */\n    getInfoContent: () =>\n      infoIconDriverFactory({\n        element: element.querySelector(`[data-hook=\"${dataHooks.infoIcon}\"]`),\n        eventTrigger,\n      }).getContent(),\n\n    /** get form field suffix */\n    getSuffix: () => byHook(dataHooks.suffix),\n\n    /** hovers over the formfield infoicon */\n    hoverInfoIcon: () =>\n      infoIconDriverFactory({\n        element: element.querySelector(`[data-hook=\"${dataHooks.infoIcon}\"]`),\n        eventTrigger,\n      }).hover(),\n\n    /** returns status message text */\n    getStatusMessage: () =>\n      textDriverFactory({\n        element: byHook(dataHooks.statusMessage),\n      }).getText(),\n\n    /** return true if it has a given status */\n    hasStatus: status => element.getAttribute('data-status') === status,\n  };\n};\n\nexport default formFieldDriver;\n"],"mappings":";;;;;AAAA;AACA;AACA;AAEA,IAAMA,eAAe,GAAG,QAA+B;EAAA,IAA9B;IAAEC,OAAO,EAAPA,QAAO;IAAEC;EAAa,CAAC;EAChD,IAAMC,MAAM,GAAGC,IAAI,IAAIH,QAAO,CAACI,aAAa,yBAAiBD,IAAI,SAAK;EACtE,IAAME,iBAAiB,GAAG,MAAMH,MAAM,CAACI,oBAAS,CAACC,OAAO,CAAC;EAEzD,IAAMC,YAAY,GAAG,MAAMN,MAAM,CAACI,oBAAS,CAACG,KAAK,CAAC;EAClD,IAAMC,eAAe,GAAG,MAAM,IAAAC,aAAiB,EAAC;IAAEX,OAAO,EAAEQ,YAAY;EAAG,CAAC,CAAC;EAE5E,OAAO;IACLI,MAAM,EAAE,MAAM,CAAC,CAACZ,QAAO;IACvBA,OAAO,EAAE,MAAMA,QAAO;IACtB;IACAa,WAAW,EAAE,MAAMX,MAAM,CAACI,oBAAS,CAACQ,QAAQ,CAAC;IAC7C;IACAC,QAAQ,EAAE,MAAMP,YAAY,EAAE;IAC9B;IACAQ,YAAY,EAAE,MAAMN,eAAe,EAAE,CAACO,OAAO,EAAE;IAC/C;IACAC,UAAU,EAAE,MAAM,CAAC,CAAChB,MAAM,CAACI,oBAAS,CAACa,QAAQ,CAAC;IAC9C;IACAC,aAAa,EAAE,MAAM;MACnB,IAAMb,OAAO,GAAGF,iBAAiB,EAAE;MACnC,OAAOE,OAAO,GAAGc,QAAQ,CAACd,OAAO,CAACe,SAAS,EAAE,EAAE,CAAC,GAAG,IAAI;IACzD,CAAC;IACD;IACAC,gBAAgB,EAAE,MAAM;MACtB,IAAMhB,OAAO,GAAGF,iBAAiB,EAAE;MACnC,IAAIE,OAAO,EAAE;QACX,IAAMiB,MAAM,GAAGH,QAAQ,CAACd,OAAO,CAACe,SAAS,EAAE,EAAE,CAAC;QAC9C,OAAOE,MAAM,GAAG,CAAC;MACnB;MACA,OAAO,KAAK;IACd,CAAC;IACD;IACAC,UAAU,EAAE,MACV,CAAC,CAACzB,QAAO,CAACI,aAAa,wBAAgBE,oBAAS,CAACoB,QAAQ,SAAK;IAEhE;IACAC,cAAc,EAAE,MACd,IAAAC,iBAAqB,EAAC;MACpB5B,OAAO,EAAEA,QAAO,CAACI,aAAa,wBAAgBE,oBAAS,CAACoB,QAAQ,SAAK;MACrEzB;IACF,CAAC,CAAC,CAAC4B,UAAU,EAAE;IAEjB;IACAC,SAAS,EAAE,MAAM5B,MAAM,CAACI,oBAAS,CAACyB,MAAM,CAAC;IAEzC;IACAC,aAAa,EAAE,MACb,IAAAJ,iBAAqB,EAAC;MACpB5B,OAAO,EAAEA,QAAO,CAACI,aAAa,wBAAgBE,oBAAS,CAACoB,QAAQ,SAAK;MACrEzB;IACF,CAAC,CAAC,CAACgC,KAAK,EAAE;IAEZ;IACAC,gBAAgB,EAAE,MAChB,IAAAvB,aAAiB,EAAC;MAChBX,OAAO,EAAEE,MAAM,CAACI,oBAAS,CAAC6B,aAAa;IACzC,CAAC,CAAC,CAACC,OAAO,EAAE;IAEd;IACAC,SAAS,EAAEC,MAAM,IAAItC,QAAO,CAACuC,YAAY,CAAC,aAAa,CAAC,KAAKD;EAC/D,CAAC;AACH,CAAC;AAAC,eAEavC,eAAe;AAAA"}

package/dist/cjs/FormField/FormField.js

@@ -0,0 +1,391 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _InfoIcon = _interopRequireDefault(require("../InfoIcon"));
+var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
+var _Text = _interopRequireWildcard(require("../Text"));
+var _constants = require("./constants");
+var _FormFieldSt = require("./FormField.st.css.js");
+var _TooltipCommon = require("../common/PropTypes/TooltipCommon");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _StatusContext = require("./StatusContext");
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/FormField/FormField.js";
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
+var PLACEMENT = {
+  top: 'top',
+  right: 'right',
+  left: 'left'
+};
+var ALIGN = {
+  middle: 'middle',
+  top: 'top'
+};
+var LABEL_STYLE = {
+  display: 'block' // allows the label to middle vertically
+};
+
+var STATUS = {
+  error: 'error',
+  warning: 'warning',
+  loading: 'loading'
+};
+var asterisk = /*#__PURE__*/_react.default.createElement("div", {
+  "data-hook": _constants.dataHooks.asterisk,
+  className: _FormFieldSt.classes.asterisk,
+  children: "*",
+  __self: void 0,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 37,
+    columnNumber: 3
+  }
+});
+var charactersLeft = lengthLeft => {
+  var colorProps = lengthLeft >= 0 ? {
+    light: true,
+    secondary: true
+  } : {
+    skin: _Text.SKINS.error
+  };
+  return /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
+    size: _Text.SIZES.small,
+    weight: _Text.WEIGHTS.normal
+  }, colorProps, {
+    dataHook: _constants.dataHooks.counter,
+    children: lengthLeft,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 48,
+      columnNumber: 5
+    }
+  }));
+};
+class FormField extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      lengthLeft: undefined
+    };
+    this.childrenRenderPropInterface = {
+      setCharactersLeft: lengthLeft => this.setState({
+        lengthLeft
+      })
+    };
+    this._hasCharCounter = () => this.props.charCount !== undefined || typeof this.state.lengthLeft === 'number';
+    this._renderCharCounter = () => {
+      if (!this._hasCharCounter()) {
+        return;
+      }
+      var {
+        charCount
+      } = this.props;
+      return charactersLeft(charCount !== undefined ? charCount : this.state.lengthLeft);
+    };
+    this._renderInfoIcon = () => {
+      var {
+        infoContent,
+        infoTooltipProps
+      } = this.props;
+      return infoContent && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
+        dataHook: _constants.dataHooks.infoIcon,
+        className: _FormFieldSt.classes.infoIcon,
+        content: infoContent,
+        tooltipProps: infoTooltipProps,
+        size: "small",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 184,
+          columnNumber: 9
+        }
+      });
+    };
+    this._renderLabelWithIndicators = _ref => {
+      var {
+        labelSize
+      } = _ref;
+      var {
+        required,
+        suffix
+      } = this.props;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "data-hook": _constants.dataHooks.labelIndicators,
+        className: (0, _FormFieldSt.st)(_FormFieldSt.classes.labelIndicators, {
+          inlineWithSuffix: Boolean(suffix || this._hasCharCounter())
+        }),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 199,
+          columnNumber: 7
+        }
+      }, this._renderLabel({
+        trimLongText: false,
+        labelSize
+      }), required && asterisk, this._renderInfoIcon());
+    };
+    this._renderSuffix = () => {
+      var {
+        suffix
+      } = this.props;
+      return (suffix || this._hasCharCounter()) && /*#__PURE__*/_react.default.createElement("div", {
+        "data-hook": _constants.dataHooks.suffix,
+        className: _FormFieldSt.classes.suffix,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 217,
+          columnNumber: 9
+        }
+      }, suffix ? suffix : this._renderCharCounter());
+    };
+    this._hasInlineElements = (label, labelPlacement) => {
+      var hasInlineLabel = label && (labelPlacement === PLACEMENT.left || labelPlacement === PLACEMENT.right);
+      var hasInlineIndicator = !label && (this.props.required || !!this.props.infoContent);
+      return hasInlineLabel || hasInlineIndicator;
+    };
+    this._renderLabel = _ref2 => {
+      var {
+        trimLongText,
+        labelSize
+      } = _ref2;
+      var {
+        label,
+        id
+      } = this.props;
+      var weight = labelSize === 'tiny' ? 'normal' : undefined;
+      return /*#__PURE__*/_react.default.createElement(_Text.default, {
+        size: labelSize,
+        weight: weight,
+        htmlFor: id,
+        id: this.labelId,
+        tagName: "label",
+        dataHook: _constants.dataHooks.label,
+        ellipsis: trimLongText,
+        style: LABEL_STYLE,
+        secondary: true,
+        className: _FormFieldSt.classes.label,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 238,
+          columnNumber: 7
+        }
+      }, label);
+    };
+    this._renderStatusIcon = () => {
+      var iconByStatus = {
+        [STATUS.error]: _wixUiIconsCommon.StatusAlertFilledSmall,
+        [STATUS.warning]: _wixUiIconsCommon.StatusWarningFilledSmall
+      };
+      var Icon = iconByStatus[this.props.status];
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: _FormFieldSt.classes.statusIcon,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 263,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/_react.default.createElement(Icon, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 264,
+          columnNumber: 9
+        }
+      }));
+    };
+    this._renderStatusMessage = () => {
+      var {
+        statusMessage,
+        status,
+        labelSize
+      } = this.props;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _FormFieldSt.st)(_FormFieldSt.classes.statusMessage, {
+          status,
+          labelSize
+        }),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 273,
+          columnNumber: 7
+        }
+      }, (status === STATUS.error || status === STATUS.warning) && this._renderStatusIcon(), /*#__PURE__*/_react.default.createElement(_Text.default, {
+        id: this.statusId,
+        dataHook: _constants.dataHooks.statusMessage,
+        skin: status === STATUS.error ? 'error' : 'standard',
+        secondary: status !== STATUS.error,
+        size: labelSize,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 281,
+          columnNumber: 9
+        }
+      }, statusMessage));
+    };
+    this.labelId = props.labelId || (0, _uniqueId.default)('formfield-');
+    this.statusId = props.labelId ? "".concat(props.labelId, "-status") : (0, _uniqueId.default)('formfield-status-');
+  }
+  _renderChildren() {
+    var {
+      children
+    } = this.props;
+    if (typeof children === 'function') {
+      return children(this.childrenRenderPropInterface);
+    }
+    return children;
+  }
+  render() {
+    var {
+      label,
+      labelPlacement,
+      labelAlignment,
+      labelSize,
+      required,
+      dataHook,
+      children,
+      classNames,
+      stretchContent,
+      statusMessage,
+      status
+    } = this.props;
+    var rootStyles = label ? {
+      labelPlacement,
+      labelAlignment,
+      stretchContent,
+      required,
+      minLabelHeight: !children
+    } : {
+      stretchContent,
+      required,
+      minLabelHeight: !children
+    };
+    var hasInlineElements = this._hasInlineElements(label, labelPlacement);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": dataHook,
+      "data-status": status,
+      className: (0, _FormFieldSt.st)(_FormFieldSt.classes.root, _objectSpread(_objectSpread(_objectSpread({}, rootStyles), label ? {
+        labelSize
+      } : {}), {}, {
+        hasInlineElements
+      }), classNames),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 326,
+        columnNumber: 7
+      }
+    }, label && labelPlacement === PLACEMENT.top && /*#__PURE__*/_react.default.createElement("div", {
+      className: _FormFieldSt.classes.labelRow,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 336,
+        columnNumber: 11
+      }
+    }, this._renderLabel({
+      trimLongText: true,
+      labelSize
+    }), required && asterisk, this._renderInfoIcon(), this._renderSuffix()), children && /*#__PURE__*/_react.default.createElement("div", {
+      "data-hook": _constants.dataHooks.children,
+      className: (0, _FormFieldSt.st)(_FormFieldSt.classes.children, {
+        childrenWithInlineLabel: hasInlineElements
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 345,
+        columnNumber: 11
+      }
+    }, (!label || labelPlacement !== PLACEMENT.top) && this._renderSuffix(), /*#__PURE__*/_react.default.createElement(_StatusContext.StatusContext.Provider, {
+      value: {
+        status,
+        ariaDescribedBy: "".concat(this.statusId, ", ").concat(this.labelId)
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 354,
+        columnNumber: 13
+      }
+    }, this._renderChildren())), hasInlineElements && this._renderLabelWithIndicators({
+      labelSize
+    }), statusMessage && this._renderStatusMessage());
+  }
+}
+FormField.displayName = 'FormField';
+FormField.propTypes = {
+  /** when function, it receives object with:
+   * * `setCharactersLeft` - function accepts a number and will display it on top right of `FormField` component
+   *
+   * Note that alternatively you can also use `charCount` prop to display character count
+   * instead of using the render function method.
+   */
+
+  /** Accept any kind of component as a child element. A child should be a form element like an Input, InputArea, Dropdown or RichTextArea. */
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  /** Applies a data-hook HTML attribute that can be used in tests. */
+  dataHook: _propTypes.default.string,
+  /** Adds a string used to match text labels with FormField children items. E.g.
+   *
+   * ```js
+   * <FormField id="myFormField" label="Hello">
+   *   <Input id="myFormField"/>
+   * </FormField>
+   * ```
+   */
+  id: _propTypes.default.string,
+  /** Displays a passed info message in a tooltip. Default value is a text string, but it can also be overridden with any other component. */
+  infoContent: _propTypes.default.node,
+  /** Allows control over the tooltip style and behaviour by passed tooltip properties.
+   * @linkTypeTo components-overlays--tooltip
+   * @setTypeName TooltipCommonProps
+   */
+  infoTooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
+  /** Sets a field label. It’s default value is a text string, but it can be overridden with any other component. */
+  label: _propTypes.default.node,
+  /** Controls the label alignment */
+  labelAlignment: _propTypes.default.oneOf([ALIGN.middle, ALIGN.top]),
+  /** Controls the label placement */
+  labelPlacement: _propTypes.default.oneOf([PLACEMENT.top, PLACEMENT.right, PLACEMENT.left]),
+  /** Controls the size of label */
+  labelSize: _propTypes.default.oneOf(['tiny', 'small']),
+  /** Marks a field as mandatory with an asterisk (*) at the end of a label. */
+  required: _propTypes.default.bool,
+  /** Defines whether or not the content (children container) grows when there's space available. Otherwise, it only uses the necessary space. */
+  stretchContent: _propTypes.default.bool,
+  /** Adds a custom element at the end of the label row (it overrides the charCount in case it's provided). */
+  suffix: _propTypes.default.node,
+  /** Sets the maximum length for the field value. Character count is displayed in the top right corner of a component. */
+  charCount: _propTypes.default.number,
+  /** Sets the id of the label */
+  labelId: _propTypes.default.string,
+  /** Sets the status message. It is displayed bellow the child component*/
+  statusMessage: _propTypes.default.node,
+  /** Sets the type of status message, to give it appropriate colors and icons */
+  status: _propTypes.default.oneOf([STATUS.error, STATUS.warning, STATUS.loading])
+};
+FormField.defaultProps = {
+  required: false,
+  stretchContent: true,
+  labelSize: 'small',
+  labelPlacement: PLACEMENT.top,
+  labelAlignment: ALIGN.middle
+};
+var _default = FormField;
+exports.default = _default;
+//# sourceMappingURL=FormField.js.map

package/dist/cjs/FormField/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PLACEMENT","top","right","left","ALIGN","middle","LABEL_STYLE","display","STATUS","error","warning","loading","asterisk","dataHooks","classes","charactersLeft","lengthLeft","colorProps","light","secondary","skin","SKINS","SIZES","small","WEIGHTS","normal","counter","FormField","React","Component","constructor","props","state","undefined","childrenRenderPropInterface","setCharactersLeft","setState","_hasCharCounter","charCount","_renderCharCounter","_renderInfoIcon","infoContent","infoTooltipProps","infoIcon","_renderLabelWithIndicators","labelSize","required","suffix","labelIndicators","st","inlineWithSuffix","Boolean","_renderLabel","trimLongText","_renderSuffix","_hasInlineElements","label","labelPlacement","hasInlineLabel","hasInlineIndicator","id","weight","labelId","_renderStatusIcon","iconByStatus","StatusAlertFilledSmall","StatusWarningFilledSmall","Icon","status","statusIcon","_renderStatusMessage","statusMessage","statusId","uniqueId","_renderChildren","children","render","labelAlignment","dataHook","classNames","stretchContent","rootStyles","minLabelHeight","hasInlineElements","root","labelRow","childrenWithInlineLabel","ariaDescribedBy","displayName","propTypes","PropTypes","oneOfType","node","func","string","shape","TooltipCommonProps","oneOf","bool","number","defaultProps"],"sources":["../../../src/FormField/FormField.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport InfoIcon from '../InfoIcon';\nimport uniqueId from 'lodash/uniqueId';\nimport Text, { SIZES, SKINS, WEIGHTS } from '../Text';\nimport { dataHooks } from './constants';\nimport { st, classes } from './FormField.st.css';\nimport { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';\nimport {\n  StatusAlertFilledSmall,\n  StatusWarningFilledSmall,\n} from '@wix/wix-ui-icons-common';\nimport { StatusContext } from './StatusContext';\n\nconst PLACEMENT = {\n  top: 'top',\n  right: 'right',\n  left: 'left',\n};\n\nconst ALIGN = {\n  middle: 'middle',\n  top: 'top',\n};\n\nconst LABEL_STYLE = {\n  display: 'block', // allows the label to middle vertically\n};\n\nconst STATUS = {\n  error: 'error',\n  warning: 'warning',\n  loading: 'loading',\n};\n\nconst asterisk = (\n  <div\n    data-hook={dataHooks.asterisk}\n    className={classes.asterisk}\n    children=\"*\"\n  />\n);\n\nconst charactersLeft = lengthLeft => {\n  const colorProps =\n    lengthLeft >= 0 ? { light: true, secondary: true } : { skin: SKINS.error };\n  return (\n    <Text\n      size={SIZES.small}\n      weight={WEIGHTS.normal}\n      {...colorProps}\n      dataHook={dataHooks.counter}\n      children={lengthLeft}\n    />\n  );\n};\n\nclass FormField extends React.Component {\n  static displayName = 'FormField';\n\n  constructor(props) {\n    super(props);\n    this.labelId = props.labelId || uniqueId('formfield-');\n    this.statusId = props.labelId\n      ? `${props.labelId}-status`\n      : uniqueId('formfield-status-');\n  }\n\n  static propTypes = {\n    /** when function, it receives object with:\n     * * `setCharactersLeft` - function accepts a number and will display it on top right of `FormField` component\n     *\n     * Note that alternatively you can also use `charCount` prop to display character count\n     * instead of using the render function method.\n     */\n\n    /** Accept any kind of component as a child element. A child should be a form element like an Input, InputArea, Dropdown or RichTextArea. */\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /** Applies a data-hook HTML attribute that can be used in tests. */\n    dataHook: PropTypes.string,\n\n    /** Adds a string used to match text labels with FormField children items. E.g.\n     *\n     * ```js\n     * <FormField id=\"myFormField\" label=\"Hello\">\n     *   <Input id=\"myFormField\"/>\n     * </FormField>\n     * ```\n     */\n    id: PropTypes.string,\n\n    /** Displays a passed info message in a tooltip. Default value is a text string, but it can also be overridden with any other component. */\n    infoContent: PropTypes.node,\n\n    /** Allows control over the tooltip style and behaviour by passed tooltip properties.\n     * @linkTypeTo components-overlays--tooltip\n     * @setTypeName TooltipCommonProps\n     */\n    infoTooltipProps: PropTypes.shape(TooltipCommonProps),\n\n    /** Sets a field label. It’s default value is a text string, but it can be overridden with any other component. */\n    label: PropTypes.node,\n\n    /** Controls the label alignment */\n    labelAlignment: PropTypes.oneOf([ALIGN.middle, ALIGN.top]),\n\n    /** Controls the label placement */\n    labelPlacement: PropTypes.oneOf([\n      PLACEMENT.top,\n      PLACEMENT.right,\n      PLACEMENT.left,\n    ]),\n\n    /** Controls the size of label */\n    labelSize: PropTypes.oneOf(['tiny', 'small']),\n\n    /** Marks a field as mandatory with an asterisk (*) at the end of a label. */\n    required: PropTypes.bool,\n\n    /** Defines whether or not the content (children container) grows when there's space available. Otherwise, it only uses the necessary space. */\n    stretchContent: PropTypes.bool,\n\n    /** Adds a custom element at the end of the label row (it overrides the charCount in case it's provided). */\n    suffix: PropTypes.node,\n\n    /** Sets the maximum length for the field value. Character count is displayed in the top right corner of a component. */\n    charCount: PropTypes.number,\n\n    /** Sets the id of the label */\n    labelId: PropTypes.string,\n\n    /** Sets the status message. It is displayed bellow the child component*/\n    statusMessage: PropTypes.node,\n\n    /** Sets the type of status message, to give it appropriate colors and icons */\n    status: PropTypes.oneOf([STATUS.error, STATUS.warning, STATUS.loading]),\n  };\n\n  static defaultProps = {\n    required: false,\n    stretchContent: true,\n    labelSize: 'small',\n    labelPlacement: PLACEMENT.top,\n    labelAlignment: ALIGN.middle,\n  };\n\n  state = {\n    lengthLeft: undefined,\n  };\n\n  childrenRenderPropInterface = {\n    setCharactersLeft: lengthLeft => this.setState({ lengthLeft }),\n  };\n\n  _renderChildren() {\n    const { children } = this.props;\n    if (typeof children === 'function') {\n      return children(this.childrenRenderPropInterface);\n    }\n\n    return children;\n  }\n\n  _hasCharCounter = () =>\n    this.props.charCount !== undefined ||\n    typeof this.state.lengthLeft === 'number';\n\n  _renderCharCounter = () => {\n    if (!this._hasCharCounter()) {\n      return;\n    }\n    const { charCount } = this.props;\n    return charactersLeft(\n      charCount !== undefined ? charCount : this.state.lengthLeft,\n    );\n  };\n\n  _renderInfoIcon = () => {\n    const { infoContent, infoTooltipProps } = this.props;\n\n    return (\n      infoContent && (\n        <InfoIcon\n          dataHook={dataHooks.infoIcon}\n          className={classes.infoIcon}\n          content={infoContent}\n          tooltipProps={infoTooltipProps}\n          size=\"small\"\n        />\n      )\n    );\n  };\n\n  _renderLabelWithIndicators = ({ labelSize }) => {\n    const { required, suffix } = this.props;\n\n    return (\n      <div\n        data-hook={dataHooks.labelIndicators}\n        className={st(classes.labelIndicators, {\n          inlineWithSuffix: Boolean(suffix || this._hasCharCounter()),\n        })}\n      >\n        {this._renderLabel({ trimLongText: false, labelSize })}\n        {required && asterisk}\n        {this._renderInfoIcon()}\n      </div>\n    );\n  };\n\n  _renderSuffix = () => {\n    const { suffix } = this.props;\n\n    return (\n      (suffix || this._hasCharCounter()) && (\n        <div data-hook={dataHooks.suffix} className={classes.suffix}>\n          {suffix ? suffix : this._renderCharCounter()}\n        </div>\n      )\n    );\n  };\n\n  _hasInlineElements = (label, labelPlacement) => {\n    const hasInlineLabel =\n      label &&\n      (labelPlacement === PLACEMENT.left || labelPlacement === PLACEMENT.right);\n    const hasInlineIndicator =\n      !label && (this.props.required || !!this.props.infoContent);\n    return hasInlineLabel || hasInlineIndicator;\n  };\n\n  _renderLabel = ({ trimLongText, labelSize }) => {\n    const { label, id } = this.props;\n    const weight = labelSize === 'tiny' ? 'normal' : undefined;\n\n    return (\n      <Text\n        size={labelSize}\n        weight={weight}\n        htmlFor={id}\n        id={this.labelId}\n        tagName=\"label\"\n        dataHook={dataHooks.label}\n        ellipsis={trimLongText}\n        style={LABEL_STYLE}\n        secondary\n        className={classes.label}\n      >\n        {label}\n      </Text>\n    );\n  };\n\n  _renderStatusIcon = () => {\n    const iconByStatus = {\n      [STATUS.error]: StatusAlertFilledSmall,\n      [STATUS.warning]: StatusWarningFilledSmall,\n    };\n    const Icon = iconByStatus[this.props.status];\n\n    return (\n      <div className={classes.statusIcon}>\n        <Icon />\n      </div>\n    );\n  };\n\n  _renderStatusMessage = () => {\n    const { statusMessage, status, labelSize } = this.props;\n\n    return (\n      <div\n        className={st(classes.statusMessage, {\n          status,\n          labelSize,\n        })}\n      >\n        {(status === STATUS.error || status === STATUS.warning) &&\n          this._renderStatusIcon()}\n        <Text\n          id={this.statusId}\n          dataHook={dataHooks.statusMessage}\n          skin={status === STATUS.error ? 'error' : 'standard'}\n          secondary={status !== STATUS.error}\n          size={labelSize}\n        >\n          {statusMessage}\n        </Text>\n      </div>\n    );\n  };\n\n  render() {\n    const {\n      label,\n      labelPlacement,\n      labelAlignment,\n      labelSize,\n      required,\n      dataHook,\n      children,\n      classNames,\n      stretchContent,\n      statusMessage,\n      status,\n    } = this.props;\n\n    const rootStyles = label\n      ? {\n          labelPlacement,\n          labelAlignment,\n          stretchContent,\n          required,\n          minLabelHeight: !children,\n        }\n      : {\n          stretchContent,\n          required,\n          minLabelHeight: !children,\n        };\n\n    const hasInlineElements = this._hasInlineElements(label, labelPlacement);\n\n    return (\n      <div\n        data-hook={dataHook}\n        data-status={status}\n        className={st(\n          classes.root,\n          { ...rootStyles, ...(label ? { labelSize } : {}), hasInlineElements },\n          classNames,\n        )}\n      >\n        {label && labelPlacement === PLACEMENT.top && (\n          <div className={classes.labelRow}>\n            {this._renderLabel({ trimLongText: true, labelSize })}\n            {required && asterisk}\n            {this._renderInfoIcon()}\n            {this._renderSuffix()}\n          </div>\n        )}\n\n        {children && (\n          <div\n            data-hook={dataHooks.children}\n            className={st(classes.children, {\n              childrenWithInlineLabel: hasInlineElements,\n            })}\n          >\n            {(!label || labelPlacement !== PLACEMENT.top) &&\n              this._renderSuffix()}\n\n            <StatusContext.Provider\n              value={{\n                status,\n                ariaDescribedBy: `${this.statusId}, ${this.labelId}`,\n              }}\n            >\n              {this._renderChildren()}\n            </StatusContext.Provider>\n          </div>\n        )}\n\n        {hasInlineElements && this._renderLabelWithIndicators({ labelSize })}\n\n        {statusMessage && this._renderStatusMessage()}\n      </div>\n    );\n  }\n}\n\nexport default FormField;\n"],"mappings":"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"}

package/dist/cjs/FormField/FormField.meta.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.testkitTests = exports.ssrTests = exports.requiredProps = exports.a11yTests = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/FormField/FormField.meta.tsx";
+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) { (0, _defineProperty2.default)(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; }
+// This object should contain a mock value for each required prop of this component
+var requiredProps = {};
+
+// This array should contain an object only for tests you wish to run on all compliance tests
+exports.requiredProps = requiredProps;
+var sharedTests = [{
+  title: 'render',
+  props: _objectSpread({}, requiredProps)
+}];
+var testkitTests = [{
+  title: 'render',
+  props: _objectSpread(_objectSpread({}, requiredProps), {}, {
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 22,
+        columnNumber: 17
+      }
+    })
+  })
+}];
+exports.testkitTests = testkitTests;
+var ssrTests = [...sharedTests];
+exports.ssrTests = ssrTests;
+var a11yTests = [...sharedTests];
+exports.a11yTests = a11yTests;
+//# sourceMappingURL=FormField.meta.js.map

package/dist/cjs/FormField/FormField.meta.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["requiredProps","sharedTests","title","props","testkitTests","children","ssrTests","a11yTests"],"sources":["../../../src/FormField/FormField.meta.tsx"],"sourcesContent":["import { FormFieldProps } from '.';\nimport React from \"react\";\n\n// This object should contain a mock value for each required prop of this component\nexport const requiredProps: FormFieldProps = {};\n\n// This array should contain an object only for tests you wish to run on all compliance tests\nconst sharedTests = [\n  {\n    title: 'render',\n    props: {\n      ...requiredProps,\n    } as FormFieldProps,\n  },\n];\n\nexport const testkitTests = [\n  {\n    title: 'render',\n    props: {\n      ...requiredProps,\n      children: <div />,\n    } as FormFieldProps,\n  },\n];\n\nexport const ssrTests = [...sharedTests];\n\nexport const a11yTests = [...sharedTests];\n"],"mappings":";;;;;;AACA;AAA0B;AAAA;AAAA;AAE1B;AACO,IAAMA,aAA6B,GAAG,CAAC,CAAC;;AAE/C;AAAA;AACA,IAAMC,WAAW,GAAG,CAClB;EACEC,KAAK,EAAE,QAAQ;EACfC,KAAK,oBACAH,aAAa;AAEpB,CAAC,CACF;AAEM,IAAMI,YAAY,GAAG,CAC1B;EACEF,KAAK,EAAE,QAAQ;EACfC,KAAK,kCACAH,aAAa;IAChBK,QAAQ,eAAE;MAAA;MAAA;QAAA;QAAA;QAAA;MAAA;IAAA;EAAO;AAErB,CAAC,CACF;AAAC;AAEK,IAAMC,QAAQ,GAAG,CAAC,GAAGL,WAAW,CAAC;AAAC;AAElC,IAAMM,SAAS,GAAG,CAAC,GAAGN,WAAW,CAAC;AAAC"}