@bigbinary/neeto-themes-frontend 4.0.19 → 4.0.21

package/dist/cjs/NeetoThemesBuilder.js

@@ -41,6 +41,7 @@ var LeftAlign = require('@bigbinary/neeto-icons/LeftAlign');
 var ColorPicker = require('@bigbinary/neetoui/ColorPicker');
 var Select = require('@bigbinary/neetoui/Select');
 var antd = require('antd');
+var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var Input = require('@bigbinary/neetoui/Input');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
@@ -557,6 +558,19 @@ var LogoPosition = function LogoPosition() {
 
 function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+// Capitalizes the first letter of the displayed label while keeping the
+// underlying value untouched (position values like "top left" are used
+// verbatim as CSS background-position, so they must stay lowercase).
+var toCapitalizedOption = function toCapitalizedOption(value) {
+  var _toLabelAndValue = neetoCist.toLabelAndValue(value),
+    label = _toLabelAndValue.label,
+    optionValue = _toLabelAndValue.value;
+  return {
+    label: label ? neetoCist.capitalize(label) : label,
+    value: optionValue
+  };
+};
 var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
   if (neetoCist.isPresent(theme)) return theme;
   return {
@@ -871,20 +885,17 @@ var SelectBlock = function SelectBlock(_ref) {
     options = _ref.options,
     onChange = _ref.onChange;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center justify-between",
+    className: "neeto-ui-border-gray-200 flex flex-col gap-2 border-t pt-3",
     "data-testid": "theme-style-".concat(utils$1.joinHyphenCase(label)),
     children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
       "data-testid": "logo-field-labels",
       style: "body2",
       children: label
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsxRuntime.jsx(Select, {
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        value: value
-      })
+    }), /*#__PURE__*/jsxRuntime.jsx(Select, {
+      onChange: onChange,
+      options: options,
+      placeholder: placeholder,
+      value: value
     })]
   });
 };
@@ -917,18 +928,35 @@ var SliderBlock = function SliderBlock(_ref) {
   });
 };
 
-var _excluded = ["label", "name"];
+var _excluded = ["label", "name", "asCheckbox"];
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SwitchBlock = function SwitchBlock(_ref) {
   var label = _ref.label,
     name = _ref.name,
-    switchProps = _objectWithoutProperties(_ref, _excluded);
+    _ref$asCheckbox = _ref.asCheckbox,
+    asCheckbox = _ref$asCheckbox === void 0 ? false : _ref$asCheckbox,
+    inputProps = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t,
     i18n = _useTranslation.i18n;
   var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
   var doesHelpTextExist = i18n.exists(translationKey);
+  if (asCheckbox) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex items-center gap-2",
+      "data-testid": "theme-style-content-background",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+        label: label,
+        name: name
+      }, inputProps)), {}, {
+        "data-testid": "enable-background-color-toggle"
+      })), doesHelpTextExist && /*#__PURE__*/jsxRuntime.jsx(HelpPopover, {
+        className: "shrink-0",
+        description: t(translationKey)
+      })]
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between",
     "data-testid": "theme-style-content-background",
@@ -948,7 +976,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
       name: name
-    }, switchProps)), {}, {
+    }, inputProps)), {}, {
       "data-testid": "enable-background-color-toggle"
     }))]
   });
@@ -1078,15 +1106,16 @@ var Properties = function Properties(_ref) {
               key: key
             }, values.properties);
             var error = errors === null || errors === void 0 || (_errors$properties = errors.properties) === null || _errors$properties === void 0 || (_errors$properties = _errors$properties[index]) === null || _errors$properties === void 0 ? void 0 : _errors$properties.value;
-            return /*#__PURE__*/jsxRuntime.jsx(TextBlock, {
+            return /*#__PURE__*/react.createElement(TextBlock, {
               error: error,
+              key: key,
               label: buildLabel(key, kind),
               name: "properties[".concat(index, "].value"),
               value: value || "",
               onChange: function onChange(e) {
                 return setFieldValue("properties[".concat(index, "].value"), e.target.value);
               }
-            }, key);
+            });
           }
         case "font_family":
           return /*#__PURE__*/jsxRuntime.jsx(FontPickerBlock, {
@@ -1138,12 +1167,12 @@ var Properties = function Properties(_ref) {
             }, values.properties);
             var options = (_findBy4 = neetoCist.findBy({
               key: key
-            }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(neetoCist.toLabelAndValue);
+            }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toCapitalizedOption);
             return /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
               label: buildLabel(key, kind),
               options: options || useExpandedSection.POSITION_OPTIONS,
               placeholder: "left",
-              value: neetoCist.toLabelAndValue(value),
+              value: toCapitalizedOption(value),
               onChange: function onChange(option) {
                 return setFieldValue("properties[".concat(_index, "].value"), option.value);
               }
@@ -1151,10 +1180,15 @@ var Properties = function Properties(_ref) {
           }
         case "boolean":
           {
+            var _findBy5;
             var _index2 = neetoCist.findIndexBy({
               key: key
             }, values.properties);
+            var renderAsCheckbox = ((_findBy5 = neetoCist.findBy({
+              key: key
+            }, themePropertiesSchema)) === null || _findBy5 === void 0 ? void 0 : _findBy5.renderAsCheckbox) || false;
             return /*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
+              asCheckbox: renderAsCheckbox,
               checked: value !== "false",
               label: buildLabel(key, kind),
               name: neetoCist.snakeToCamelCase(key),
@@ -1281,9 +1315,9 @@ var ImageBlock = function ImageBlock(_ref) {
         onUploadComplete: handleImageChange
       }), isPositionChangerVisible && /*#__PURE__*/jsxRuntime.jsx(SelectBlock, {
         label: buildLabel("".concat(name, "Position"), "image"),
-        options: options || useExpandedSection.POSITION_OPTIONS,
+        options: (options === null || options === void 0 ? void 0 : options.map(toCapitalizedOption)) || useExpandedSection.POSITION_OPTIONS,
         placeholder: t("neetoThemes.common.left"),
-        value: neetoCist.toLabelAndValue(((_findBy = neetoCist.findBy({
+        value: toCapitalizedOption(((_findBy = neetoCist.findBy({
           key: "".concat(name, "_position")
         }, values.properties)) === null || _findBy === void 0 ? void 0 : _findBy.value) || (positionKeyInSchema === null || positionKeyInSchema === void 0 ? void 0 : positionKeyInSchema.defaultValue)),
         onChange: function onChange(option) {