@ohos-ports/sprucelabs-react-heartwood-components 9.1.0-beta.0

package/lib/components/Forms/components/FormBuilder/components/FormInner/FormInner.js

@@ -0,0 +1,201 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf4 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("../../../../index");
+
+var _List = require("../../../../../List");
+
+var _Button = _interopRequireDefault(require("../../../../../Button/Button"));
+
+var BooleanField =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2["default"])(BooleanField, _React$PureComponent);
+
+  function BooleanField() {
+    var _getPrototypeOf2;
+
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, BooleanField);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf4["default"])(BooleanField)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (e) {
+      var _this$props = _this.props,
+          onBlur = _this$props.onBlur,
+          name = _this$props.name;
+      var setFieldValue = _this.props.formikProps.setFieldValue;
+      setFieldValue(name, e.target.checked);
+      onBlur(e);
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(BooleanField, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          label = _this$props2.label,
+          helper = _this$props2.helper,
+          value = _this$props2.value,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props2, ["label", "helper", "value"]);
+      var toggleId = this.props.name || '';
+      var toggleProps = (0, _objectSpread2["default"])({}, rest, {
+        onChange: this.handleChange
+      });
+
+      if (value) {
+        toggleProps.defaultChecked = true;
+      }
+
+      return _react["default"].createElement(_List.List, {
+        items: [{
+          title: label,
+          subtitle: helper,
+          toggleId: toggleId,
+          toggleProps: toggleProps
+        }]
+      });
+    }
+  }]);
+  return BooleanField;
+}(_react["default"].PureComponent);
+
+var FormInner =
+/*#__PURE__*/
+function (_React$PureComponent2) {
+  (0, _inherits2["default"])(FormInner, _React$PureComponent2);
+
+  function FormInner() {
+    var _getPrototypeOf3;
+
+    var _this2;
+
+    (0, _classCallCheck2["default"])(this, FormInner);
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    _this2 = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf3 = (0, _getPrototypeOf4["default"])(FormInner)).call.apply(_getPrototypeOf3, [this].concat(args)));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "handleChange", function (name, type, eOrValue, eOrNull) {
+      var value = eOrNull ? eOrValue : eOrValue.target.value;
+      var shouldValidate = true;
+
+      switch (type) {
+        case 'boolean':
+          value = value === 'on';
+          shouldValidate = false; // it can only be valid values
+
+          break;
+      }
+
+      var setFieldValue = _this2.props.formikProps.setFieldValue;
+      setFieldValue(name, value, shouldValidate);
+      var onChange = _this2.props.onChange;
+      onChange && onChange(value, eOrNull || eOrValue);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "renderChild", function (child) {
+      var Elements = {
+        text: _index.TextInput,
+        "boolean": BooleanField,
+        select: _index.Select,
+        duration: _index.DurationInput
+      };
+      var formikProps = _this2.props.formikProps;
+      var Handler = child && child.type && Elements[child.type] || _index.TextInput;
+      var props = (0, _objectSpread2["default"])({}, child.props, {
+        name: child.name,
+        formikProps: formikProps
+      });
+      return !Handler.prototype.render ? Handler(props) : _react["default"].createElement(Handler, props);
+    });
+    return _this2;
+  }
+
+  (0, _createClass2["default"])(FormInner, [{
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props3 = this.props,
+          formLayout = _this$props3.formLayout,
+          formikProps = _this$props3.formikProps,
+          fields = _this$props3.fields,
+          primaryCTA = _this$props3.primaryCTA,
+          secondaryCTA = _this$props3.secondaryCTA;
+      var handleBlur = formikProps.handleBlur,
+          values = formikProps.values,
+          errors = formikProps.errors,
+          touched = formikProps.touched,
+          isValid = formikProps.isValid,
+          isSubmitting = formikProps.isSubmitting;
+      return _react["default"].createElement(_index.FormLayout, formLayout, fields && fields.length > 0 && fields.map(function (field) {
+        var type = field.type,
+            props = field.props;
+        return _react["default"].createElement(_index.FormLayoutItem, {
+          key: field.name
+        }, _this3.renderChild({
+          type: type,
+          name: field.name,
+          props: (0, _objectSpread2["default"])({}, props, {
+            onChange: function onChange(eOrValue, eOrNull) {
+              _this3.handleChange(field.name, field.type, eOrValue, eOrNull);
+            },
+            onBlur: handleBlur,
+            value: values ? values[field.name] : '',
+            error: touched[field.name] && errors[field.name]
+          })
+        }));
+      }), primaryCTA && _react["default"].createElement(_index.FormLayoutGroup, null, secondaryCTA && _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+        disabled: isSubmitting
+      }, secondaryCTA))), _react["default"].createElement(_index.FormLayoutItem, null, _react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+        kind: "primary",
+        type: "submit",
+        disabled: !isValid || isSubmitting,
+        isLoading: isSubmitting
+      }, primaryCTA)))));
+    }
+  }]);
+  return FormInner;
+}(_react["default"].PureComponent);
+
+(0, _defineProperty2["default"])(FormInner, "defaultProps", {
+  primaryCTA: null,
+  secondaryCTA: null
+});
+var _default = FormInner;
+exports["default"] = _default;
+//# sourceMappingURL=FormInner.js.map

package/lib/components/Forms/components/FormBuilder/components/FormInner/FormInner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Forms/components/FormBuilder/components/FormInner/FormInner.js"],"names":["BooleanField","e","props","onBlur","name","setFieldValue","formikProps","target","checked","label","helper","value","rest","toggleId","toggleProps","onChange","handleChange","defaultChecked","title","subtitle","React","PureComponent","FormInner","type","eOrValue","eOrNull","shouldValidate","child","Elements","text","TextInput","select","Select","duration","DurationInput","Handler","prototype","render","formLayout","fields","primaryCTA","secondaryCTA","handleBlur","values","errors","touched","isValid","isSubmitting","length","map","field","renderChild","error"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react'\n\nimport {\n\tTextInput,\n\tFormLayout,\n\tFormLayoutGroup,\n\tFormLayoutItem,\n\tSelect,\n\tDurationInput\n} from '../../../../index'\n\nimport { List } from '../../../../../List'\n\nimport Button from '../../../../../Button/Button'\n\nimport type { FormikProps } from 'formik'\nimport type { FormLayoutProps } from '../../../FormLayout/FormLayout'\nimport type { Props as ButtonProps } from '../../../../../Button/Button'\nimport type { Props as ToggleProps } from '../../../../components/Toggle/Toggle'\n\nexport type FormInnerFieldProps = {\n\t/** Unique name/id for the field */\n\tname: string,\n\n\t/** The type of element to render */\n\ttype: string,\n\n\t/** Props to pass through to the field */\n\tprops?: Object\n}\n\nexport type FormInnerProps = {\n\t/** Fields in this form */\n\tfields: Array<FormInnerFieldProps>,\n\n\t/** Layout properties for the form layout */\n\tformLayout: FormLayoutProps,\n\n\t/** Props to pass through from Formik */\n\tformikProps: FormikProps,\n\n\t/** Optional when using a primary cta in the form */\n\tprimaryCTA?: ?ButtonProps,\n\n\t/** Optional when including a secondary cta in the form */\n\tsecondaryCTA?: ?ButtonProps,\n\n\t/** handle some on change */\n\tonChange?: Function\n}\n\ntype BooleanProps = ToggleProps & {\n\tname: string,\n\tlabel?: string,\n\tvalue?: boolean,\n\thelper?: string,\n\tdefaultValue?: boolean,\n\tonBlur: Function,\n\tformikProps: FormikProps\n}\n\nclass BooleanField extends React.PureComponent<BooleanProps> {\n\thandleChange = e => {\n\t\tconst { onBlur, name } = this.props\n\t\tconst {\n\t\t\tformikProps: { setFieldValue }\n\t\t} = this.props\n\t\tsetFieldValue(name, e.target.checked)\n\t\tonBlur(e)\n\t}\n\trender() {\n\t\tconst { label, helper, value, ...rest } = this.props\n\t\tconst toggleId = this.props.name || ''\n\t\tconst toggleProps = { ...rest, onChange: this.handleChange }\n\t\tif (value) {\n\t\t\ttoggleProps.defaultChecked = true\n\t\t}\n\n\t\treturn (\n\t\t\t<List\n\t\t\t\titems={[\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: label,\n\t\t\t\t\t\tsubtitle: helper,\n\t\t\t\t\t\ttoggleId,\n\t\t\t\t\t\ttoggleProps\n\t\t\t\t\t}\n\t\t\t\t]}\n\t\t\t/>\n\t\t)\n\t}\n}\n\nclass FormInner extends React.PureComponent<FormInnerProps> {\n\tstatic defaultProps = {\n\t\tprimaryCTA: null,\n\t\tsecondaryCTA: null\n\t}\n\n\thandleChange = (\n\t\tname: string,\n\t\ttype: string,\n\t\teOrValue: KeyboardEvent | any,\n\t\teOrNull: KeyboardEvent | null\n\t) => {\n\t\tlet value: any = eOrNull ? eOrValue : eOrValue.target.value\n\t\tlet shouldValidate = true\n\t\tswitch (type) {\n\t\t\tcase 'boolean':\n\t\t\t\tvalue = value === 'on'\n\t\t\t\tshouldValidate = false // it can only be valid values\n\t\t\t\tbreak\n\t\t}\n\t\tconst {\n\t\t\tformikProps: { setFieldValue }\n\t\t} = this.props\n\n\t\tsetFieldValue(name, value, shouldValidate)\n\t\tconst { onChange } = this.props\n\t\tonChange && onChange(value, eOrNull || eOrValue)\n\t}\n\n\trenderChild = (child: FormInnerFieldProps) => {\n\t\tconst Elements = {\n\t\t\ttext: TextInput,\n\t\t\tboolean: BooleanField,\n\t\t\tselect: Select,\n\t\t\tduration: DurationInput\n\t\t}\n\t\tconst { formikProps } = this.props\n\t\tconst Handler = (child && child.type && Elements[child.type]) || TextInput\n\t\tconst props = { ...child.props, name: child.name, formikProps }\n\t\treturn !Handler.prototype.render ? Handler(props) : <Handler {...props} />\n\t}\n\n\trender() {\n\t\tconst {\n\t\t\tformLayout,\n\t\t\tformikProps,\n\t\t\tfields,\n\t\t\tprimaryCTA,\n\t\t\tsecondaryCTA\n\t\t} = this.props\n\n\t\tconst {\n\t\t\thandleBlur,\n\t\t\tvalues,\n\t\t\terrors,\n\t\t\ttouched,\n\t\t\tisValid,\n\t\t\tisSubmitting\n\t\t} = formikProps\n\n\t\treturn (\n\t\t\t<FormLayout {...formLayout}>\n\t\t\t\t{fields &&\n\t\t\t\t\tfields.length > 0 &&\n\t\t\t\t\tfields.map(field => {\n\t\t\t\t\t\tconst { type, props } = field\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<FormLayoutItem key={field.name}>\n\t\t\t\t\t\t\t\t{this.renderChild({\n\t\t\t\t\t\t\t\t\ttype,\n\t\t\t\t\t\t\t\t\tname: field.name,\n\t\t\t\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\t\t\t\t...props,\n\t\t\t\t\t\t\t\t\t\tonChange: (eOrValue, eOrNull) => {\n\t\t\t\t\t\t\t\t\t\t\tthis.handleChange(\n\t\t\t\t\t\t\t\t\t\t\t\tfield.name,\n\t\t\t\t\t\t\t\t\t\t\t\tfield.type,\n\t\t\t\t\t\t\t\t\t\t\t\teOrValue,\n\t\t\t\t\t\t\t\t\t\t\t\teOrNull\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\tonBlur: handleBlur,\n\t\t\t\t\t\t\t\t\t\tvalue: values ? values[field.name] : '',\n\t\t\t\t\t\t\t\t\t\terror: touched[field.name] && errors[field.name]\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t{primaryCTA && (\n\t\t\t\t\t<FormLayoutGroup>\n\t\t\t\t\t\t{secondaryCTA && (\n\t\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t\t<Button disabled={isSubmitting} {...secondaryCTA} />\n\t\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<FormLayoutItem>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tkind=\"primary\"\n\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\tdisabled={!isValid || isSubmitting}\n\t\t\t\t\t\t\t\tisLoading={isSubmitting}\n\t\t\t\t\t\t\t\t{...primaryCTA}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</FormLayoutItem>\n\t\t\t\t\t</FormLayoutGroup>\n\t\t\t\t)}\n\t\t\t</FormLayout>\n\t\t)\n\t}\n}\n\nexport default FormInner\n"],"file":"FormInner.js"}

package/lib/components/Forms/components/FormLayout/FormLayout.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var FormLayout = function FormLayout(props) {
+  var children = props.children,
+      className = props.className,
+      spacing = props.spacing,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["children", "className", "spacing"]);
+  return _react["default"].createElement("div", (0, _extends2["default"])({
+    className: (0, _classnames["default"])('form-layout', className, {
+      'form-layout--spacing-tight': spacing === 'tight'
+    })
+  }, rest), children);
+};
+
+FormLayout.defaultProps = {
+  spacing: 'base'
+};
+var _default = FormLayout;
+exports["default"] = _default;
+//# sourceMappingURL=FormLayout.js.map

package/lib/components/Forms/components/FormLayout/FormLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/FormLayout/FormLayout.js"],"names":["FormLayout","props","children","className","spacing","rest","defaultProps"],"mappings":";;;;;;;;;;;;;AACA;;AACA;;AAaA,IAAMA,UAAU,GAAG,SAAbA,UAAa,CAACC,KAAD,EAA4B;AAAA,MACtCC,QADsC,GACID,KADJ,CACtCC,QADsC;AAAA,MAC5BC,SAD4B,GACIF,KADJ,CAC5BE,SAD4B;AAAA,MACjBC,OADiB,GACIH,KADJ,CACjBG,OADiB;AAAA,MACLC,IADK,6CACIJ,KADJ;AAG9C,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,aAAH,EAAkBE,SAAlB,EAA6B;AACvC,oCAA8BC,OAAO,KAAK;AADH,KAA7B;AADZ,KAIKC,IAJL,GAMEH,QANF,CADD;AAUA,CAbD;;AAeAF,UAAU,CAACM,YAAX,GAA0B;AACzBF,EAAAA,OAAO,EAAE;AADgB,CAA1B;eAIeJ,U","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\n\nexport type FormLayoutProps = {\n\t/** Contents of the Form Layout. Should be FormLayoutItem or FormLayoutGroup components */\n\tchildren?: Node,\n\n\t/** Class name for the layout */\n\tclassName?: string,\n\n\t/** Vertical spacing of the FormLayoutItem components */\n\tspacing?: 'base' | 'tight'\n}\n\nconst FormLayout = (props: FormLayoutProps) => {\n\tconst { children, className, spacing, ...rest } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('form-layout', className, {\n\t\t\t\t'form-layout--spacing-tight': spacing === 'tight'\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nFormLayout.defaultProps = {\n\tspacing: 'base'\n}\n\nexport default FormLayout\n"],"file":"FormLayout.js"}

package/lib/components/Forms/components/FormLayout/components/FormLayoutGroup/FormLayoutGroup.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var FormLayoutGroup = function FormLayoutGroup(props) {
+  var children = props.children,
+      className = props.className,
+      isCondensed = props.isCondensed;
+  return _react["default"].createElement("div", {
+    className: (0, _classnames["default"])('form-layout__group', className, {
+      'form-layout__group--condensed': isCondensed
+    })
+  }, children);
+};
+
+FormLayoutGroup.defaultProps = {
+  isCondensed: false
+};
+var _default = FormLayoutGroup;
+exports["default"] = _default;
+//# sourceMappingURL=FormLayoutGroup.js.map

package/lib/components/Forms/components/FormLayout/components/FormLayoutGroup/FormLayoutGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Forms/components/FormLayout/components/FormLayoutGroup/FormLayoutGroup.js"],"names":["FormLayoutGroup","props","children","className","isCondensed","defaultProps"],"mappings":";;;;;;;;;AACA;;AACA;;AAaA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAiC;AAAA,MAChDC,QADgD,GACXD,KADW,CAChDC,QADgD;AAAA,MACtCC,SADsC,GACXF,KADW,CACtCE,SADsC;AAAA,MAC3BC,WAD2B,GACXH,KADW,CAC3BG,WAD2B;AAGxD,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,oBAAH,EAAyBD,SAAzB,EAAoC;AAC9C,uCAAiCC;AADa,KAApC;AADZ,KAKEF,QALF,CADD;AASA,CAZD;;AAcAF,eAAe,CAACK,YAAhB,GAA+B;AAC9BD,EAAAA,WAAW,EAAE;AADiB,CAA/B;eAIeJ,e","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\n\nexport type FormLayoutGroupProps = {\n\t/** Contents of the FormLayoutGroup. Should be FormLayoutItem components */\n\tchildren: Node,\n\n\t/** Class name for the group */\n\tclassName?: string,\n\n\t/** Whether the group item widths can be condensed to fit more items in a row */\n\tisCondensed?: boolean\n}\n\nconst FormLayoutGroup = (props: FormLayoutGroupProps) => {\n\tconst { children, className, isCondensed } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('form-layout__group', className, {\n\t\t\t\t'form-layout__group--condensed': isCondensed\n\t\t\t})}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nFormLayoutGroup.defaultProps = {\n\tisCondensed: false\n}\n\nexport default FormLayoutGroup\n"],"file":"FormLayoutGroup.js"}

package/lib/components/Forms/components/FormLayout/components/FormLayoutItem/FormLayoutItem.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var FormLayoutItem = function FormLayoutItem(props) {
+  var children = props.children,
+      className = props.className,
+      spacerTop = props.spacerTop,
+      rest = (0, _objectWithoutProperties2["default"])(props, ["children", "className", "spacerTop"]);
+  return _react["default"].createElement("div", (0, _extends2["default"])({
+    className: (0, _classnames["default"])('form-layout__item', className, {
+      'form-layout__item--spacer-top': spacerTop
+    })
+  }, rest), children);
+};
+
+var _default = FormLayoutItem;
+exports["default"] = _default;
+//# sourceMappingURL=FormLayoutItem.js.map

package/lib/components/Forms/components/FormLayout/components/FormLayoutItem/FormLayoutItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/Forms/components/FormLayout/components/FormLayoutItem/FormLayoutItem.js"],"names":["FormLayoutItem","props","children","className","spacerTop","rest"],"mappings":";;;;;;;;;;;;;AACA;;AACA;;AAaA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgC;AAAA,MAC9CC,QAD8C,GACFD,KADE,CAC9CC,QAD8C;AAAA,MACpCC,SADoC,GACFF,KADE,CACpCE,SADoC;AAAA,MACzBC,SADyB,GACFH,KADE,CACzBG,SADyB;AAAA,MACXC,IADW,6CACFJ,KADE;AAGtD,SACC;AACC,IAAA,SAAS,EAAE,4BAAG,mBAAH,EAAwBE,SAAxB,EAAmC;AAC7C,uCAAiCC;AADY,KAAnC;AADZ,KAIKC,IAJL,GAMEH,QANF,CADD;AAUA,CAbD;;eAeeF,c","sourcesContent":["// @flow\nimport React from 'react'\nimport cx from 'classnames'\n\nexport type FormLayoutItemProps = {\n\t/** Contents of the Form Layout Item */\n\tchildren: Node,\n\n\t/** Class name for the item */\n\tclassName?: string,\n\n\t/** Set to true to add spacer to top if this item doesn't have a label but will be inline with other items that do. */\n\tspacerTop?: boolean\n}\n\nconst FormLayoutItem = (props: FormLayoutItemProps) => {\n\tconst { children, className, spacerTop, ...rest } = props\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cx('form-layout__item', className, {\n\t\t\t\t'form-layout__item--spacer-top': spacerTop\n\t\t\t})}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t)\n}\n\nexport default FormLayoutItem\n"],"file":"FormLayoutItem.js"}

package/lib/components/Forms/components/FormLayout/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _FormLayout["default"];
+  }
+});
+Object.defineProperty(exports, "FormLayoutGroup", {
+  enumerable: true,
+  get: function get() {
+    return _FormLayoutGroup2["default"];
+  }
+});
+Object.defineProperty(exports, "FormLayoutItem", {
+  enumerable: true,
+  get: function get() {
+    return _FormLayoutItem2["default"];
+  }
+});
+
+var _FormLayout = _interopRequireDefault(require("./FormLayout"));
+
+var _FormLayoutGroup2 = _interopRequireDefault(require("./components/FormLayoutGroup/FormLayoutGroup"));
+
+var _FormLayoutItem2 = _interopRequireDefault(require("./components/FormLayoutItem/FormLayoutItem"));
+//# sourceMappingURL=index.js.map

package/lib/components/Forms/components/FormLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"index.js"}

package/lib/components/Forms/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { PhoneInputProps, InputComponentProps } from 'react-phone-number-input';
+export { formatPhoneNumber, formatPhoneNumberIntl } from 'react-phone-number-input';
+export declare const isValidPhoneNumber: (phoneNumber: string) => boolean;
+interface IPhoneInputProps {
+    /** Label text */
+    label: string;
+    /** Set true to make the input less tall */
+    isSmall?: boolean;
+    /** Helper text */
+    helper?: string;
+    /** Any error message to be rendered */
+    error?: string;
+    /** Default value for the input */
+    defaultValue?: string;
+    /** Should input autoFocus? */
+    autoFocus?: boolean;
+    /** Optional input value */
+    value?: string;
+}
+interface IPhoneInputState {
+    phone: string;
+    error: string;
+}
+export default class PhoneInput extends Component<Partial<PhoneInputProps & InputComponentProps> & IPhoneInputProps, IPhoneInputState> {
+    constructor(props: any);
+    handleChange: (phoneNumber: string) => void;
+    render(): React.ReactElement;
+}
+//# sourceMappingURL=PhoneInput.d.ts.map

package/lib/components/Forms/components/PhoneInput/PhoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/Forms/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACxC,OAAwB,EACvB,eAAe,EACf,mBAAmB,EACnB,MAAM,0BAA0B,CAAA;AAKjC,OAAO,EACN,iBAAiB,EACjB,qBAAqB,EACrB,MAAM,0BAA0B,CAAA;AAIjC,eAAO,MAAM,kBAAkB,kCAE9B,CAAA;AAED,UAAU,gBAAgB;IACzB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAA;IAEb,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;CACd;AAED,UAAU,gBAAgB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACb;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,SAAS,CAChD,OAAO,CAAC,eAAe,GAAG,mBAAmB,CAAC,GAAG,gBAAgB,EACjE,gBAAgB,CAChB;gBACmB,KAAK,KAAA;IASjB,YAAY,gCAIlB;IAEM,MAAM,IAAI,KAAK,CAAC,YAAY;CA8BnC"}

package/lib/components/Forms/components/PhoneInput/PhoneInput.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "formatPhoneNumber", {
+  enumerable: true,
+  get: function get() {
+    return _reactPhoneNumberInput.formatPhoneNumber;
+  }
+});
+Object.defineProperty(exports, "formatPhoneNumberIntl", {
+  enumerable: true,
+  get: function get() {
+    return _reactPhoneNumberInput.formatPhoneNumberIntl;
+  }
+});
+exports["default"] = exports.isValidPhoneNumber = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactPhoneNumberInput = _interopRequireWildcard(require("react-phone-number-input"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _FormPartials = require("../../FormPartials");
+
+// for validating and formatting
+// This is a barebones copy of react-phone-number-input's method API:
+// https://github.com/catamphetamine/react-phone-number-input#validation
+var isValidPhoneNumber = function isValidPhoneNumber(phoneNumber) {
+  return !!phoneNumber.replace(/[^a-z0-9+]/gi, '').match(/^\+1[\d]{10}$/);
+};
+
+exports.isValidPhoneNumber = isValidPhoneNumber;
+
+var PhoneInput =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(PhoneInput, _Component);
+
+  function PhoneInput(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, PhoneInput);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(PhoneInput).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleChange", function (phoneNumber) {
+      _this.setState({
+        phone: phoneNumber
+      });
+    });
+    _this.state = {
+      phone: props.defaultValue || '',
+      error: ''
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(PhoneInput, [{
+    key: "render",
+    value: function render() {
+      var phone = this.state.phone;
+      var _this$props = this.props,
+          label = _this$props.label,
+          error = _this$props.error,
+          isSmall = _this$props.isSmall,
+          helper = _this$props.helper,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["label", "error", "isSmall", "helper"]);
+      delete rest.defaultValue;
+      return _react["default"].createElement("div", {
+        className: (0, _classnames["default"])('text-input', {
+          'text-input--has-error': error,
+          'text-input-small': isSmall
+        })
+      }, _react["default"].createElement(_FormPartials.InputPre, {
+        label: label
+      }), _react["default"].createElement(_reactPhoneNumberInput["default"], (0, _extends2["default"])({
+        inputClassName: "text-input__input",
+        value: phone,
+        countries: ['US'],
+        country: "US",
+        labels: {
+          US: 'United States'
+        },
+        onChange: this.handleChange,
+        international: false
+      }, rest)), (helper || error) && _react["default"].createElement(_FormPartials.InputHelper, {
+        helper: helper,
+        error: error
+      }));
+    }
+  }]);
+  return PhoneInput;
+}(_react.Component);
+
+exports["default"] = PhoneInput;
+//# sourceMappingURL=PhoneInput.js.map

package/lib/components/Forms/components/PhoneInput/PhoneInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Forms/components/PhoneInput/PhoneInput.tsx"],"names":["isValidPhoneNumber","phoneNumber","replace","match","PhoneInput","props","setState","phone","state","defaultValue","error","label","isSmall","helper","rest","US","handleChange","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AACA;;AAEA;AAMA;AACA;AACO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,WAAD,EAAkC;AACnE,SAAO,CAAC,CAACA,WAAW,CAACC,OAAZ,CAAoB,cAApB,EAAoC,EAApC,EAAwCC,KAAxC,CAA8C,eAA9C,CAAT;AACA,CAFM;;;;IAgCcC,U;;;;;AAIpB,sBAAmBC,KAAnB,EAA0B;AAAA;;AAAA;AACzB,sHAAMA,KAAN;AADyB,qGASJ,UAACJ,WAAD,EAAyB;AAC9C,YAAKK,QAAL,CAAc;AACbC,QAAAA,KAAK,EAAEN;AADM,OAAd;AAGA,KAbyB;AAGzB,UAAKO,KAAL,GAAa;AACZD,MAAAA,KAAK,EAAEF,KAAK,CAACI,YAAN,IAAsB,EADjB;AAEZC,MAAAA,KAAK,EAAE;AAFK,KAAb;AAHyB;AAOzB;;;;6BAQmC;AAAA,UAC3BH,KAD2B,GACjB,KAAKC,KADY,CAC3BD,KAD2B;AAAA,wBAEgB,KAAKF,KAFrB;AAAA,UAE3BM,KAF2B,eAE3BA,KAF2B;AAAA,UAEpBD,KAFoB,eAEpBA,KAFoB;AAAA,UAEbE,OAFa,eAEbA,OAFa;AAAA,UAEJC,MAFI,eAEJA,MAFI;AAAA,UAEOC,IAFP;AAInC,aAAOA,IAAI,CAACL,YAAZ;AAEA,aACC;AACC,QAAA,SAAS,EAAE,4BAAG,YAAH,EAAiB;AAC3B,mCAAyBC,KADE;AAE3B,8BAAoBE;AAFO,SAAjB;AADZ,SAMC,gCAAC,sBAAD;AAAU,QAAA,KAAK,EAAED;AAAjB,QAND,EAQC,gCAAC,iCAAD;AACC,QAAA,cAAc,EAAC,mBADhB;AAEC,QAAA,KAAK,EAAEJ,KAFR;AAGC,QAAA,SAAS,EAAE,CAAC,IAAD,CAHZ;AAIC,QAAA,OAAO,EAAC,IAJT;AAKC,QAAA,MAAM,EAAE;AAAEQ,UAAAA,EAAE,EAAE;AAAN,SALT;AAMC,QAAA,QAAQ,EAAE,KAAKC,YANhB;AAOC,QAAA,aAAa,EAAE;AAPhB,SAQKF,IARL,EARD,EAmBE,CAACD,MAAM,IAAIH,KAAX,KAAqB,gCAAC,yBAAD;AAAa,QAAA,MAAM,EAAEG,MAArB;AAA6B,QAAA,KAAK,EAAEH;AAApC,QAnBvB,CADD;AAuBA;;;EAhDsCO,gB","sourcesContent":["import React, { Component } from 'react'\nimport ReactPhoneInput, {\n\tPhoneInputProps,\n\tInputComponentProps\n} from 'react-phone-number-input'\nimport cx from 'classnames'\nimport { InputPre, InputHelper } from '../../FormPartials'\n\n// for validating and formatting\nexport {\n\tformatPhoneNumber,\n\tformatPhoneNumberIntl\n} from 'react-phone-number-input'\n\n// This is a barebones copy of react-phone-number-input's method API:\n// https://github.com/catamphetamine/react-phone-number-input#validation\nexport const isValidPhoneNumber = (phoneNumber: string): boolean => {\n\treturn !!phoneNumber.replace(/[^a-z0-9+]/gi, '').match(/^\\+1[\\d]{10}$/)\n}\n\ninterface IPhoneInputProps {\n\t/** Label text */\n\tlabel: string\n\n\t/** Set true to make the input less tall */\n\tisSmall?: boolean\n\n\t/** Helper text */\n\thelper?: string\n\n\t/** Any error message to be rendered */\n\terror?: string\n\n\t/** Default value for the input */\n\tdefaultValue?: string\n\n\t/** Should input autoFocus? */\n\tautoFocus?: boolean\n\n\t/** Optional input value */\n\tvalue?: string\n}\n\ninterface IPhoneInputState {\n\tphone: string\n\terror: string\n}\n\nexport default class PhoneInput extends Component<\n\tPartial<PhoneInputProps & InputComponentProps> & IPhoneInputProps,\n\tIPhoneInputState\n> {\n\tpublic constructor(props) {\n\t\tsuper(props)\n\n\t\tthis.state = {\n\t\t\tphone: props.defaultValue || '',\n\t\t\terror: ''\n\t\t}\n\t}\n\n\tpublic handleChange = (phoneNumber: string) => {\n\t\tthis.setState({\n\t\t\tphone: phoneNumber\n\t\t})\n\t}\n\n\tpublic render(): React.ReactElement {\n\t\tconst { phone } = this.state\n\t\tconst { label, error, isSmall, helper, ...rest } = this.props\n\n\t\tdelete rest.defaultValue\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx('text-input', {\n\t\t\t\t\t'text-input--has-error': error,\n\t\t\t\t\t'text-input-small': isSmall\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t<InputPre label={label} />\n\n\t\t\t\t<ReactPhoneInput\n\t\t\t\t\tinputClassName=\"text-input__input\"\n\t\t\t\t\tvalue={phone}\n\t\t\t\t\tcountries={['US']}\n\t\t\t\t\tcountry=\"US\"\n\t\t\t\t\tlabels={{ US: 'United States' }}\n\t\t\t\t\tonChange={this.handleChange}\n\t\t\t\t\tinternational={false}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t{(helper || error) && <InputHelper helper={helper} error={error} />}\n\t\t\t</div>\n\t\t)\n\t}\n}\n"],"file":"PhoneInput.js"}

package/lib/components/Forms/components/Radio/Radio.d.ts

@@ -0,0 +1,15 @@
+import { IHWAction, IHWRadio } from '@sprucelabs/spruce-types';
+import React from 'react';
+export interface IRadioProps extends Omit<IHWRadio, 'id'> {
+    /** optional id for the radio */
+    id?: string;
+    /** Parent class */
+    className?: string;
+    /** Change handler */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** optional, provide a handler for Actions */
+    onAction?: (action: IHWAction) => any;
+}
+declare const Radio: (props: IRadioProps) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export default Radio;
+//# sourceMappingURL=Radio.d.ts.map

package/lib/components/Forms/components/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../../src/components/Forms/components/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAE9D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC;IACxD,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAE3D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,GAAG,CAAA;CACrC;AAED,QAAA,MAAM,KAAK,wOA6CV,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/components/Forms/components/Radio/Radio.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var RadioIconYes = function RadioIconYes(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+};
+
+RadioIconYes.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var RadioIconNo = function RadioIconNo(props) {
+  return _react["default"].createElement("svg", props, _react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+};
+
+RadioIconNo.defaultProps = {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+
+var Radio = function Radio(props) {
+  var action = props.action,
+      className = props.className,
+      id = props.id,
+      isChecked = props.isChecked,
+      isDisabled = props.isDisabled,
+      label = props.label,
+      name = props.name,
+      onAction = props.onAction,
+      _onChange = props.onChange,
+      postText = props.postText;
+  var parentClass = (0, _classnames["default"])('checkbox-item', className);
+  return _react["default"].createElement("div", {
+    className: parentClass
+  }, _react["default"].createElement("div", {
+    className: "checkbox-item__inner"
+  }, _react["default"].createElement("input", {
+    checked: isChecked || false,
+    className: "checkbox-item__input",
+    disabled: isDisabled || false,
+    id: id,
+    name: name || undefined,
+    onChange: function onChange() {
+      if (_onChange) {
+        _onChange.apply(void 0, arguments);
+      }
+
+      if (onAction && action) {
+        onAction(action);
+      }
+    },
+    type: "radio"
+  }), _react["default"].createElement("label", {
+    className: "checkbox-item__label",
+    htmlFor: id
+  }, label), _react["default"].createElement("div", {
+    className: "checkbox-item__icons"
+  }, _react["default"].createElement(RadioIconYes, {
+    className: "checkbox-item__icon checkbox-item__icon-yes"
+  }), _react["default"].createElement(RadioIconNo, {
+    className: "checkbox-item__icon checkbox-item__icon-no"
+  }))), postText && _react["default"].createElement("p", {
+    className: "checkbox-item__post-text"
+  }, postText));
+};
+
+var _default = Radio;
+exports["default"] = _default;
+//# sourceMappingURL=Radio.js.map