@bigbinary/neeto-themes-frontend 4.0.19 → 4.0.21

package/dist/NeetoThemesBuilder.js

@@ -1,6 +1,6 @@
 import { shallow } from 'zustand/shallow';
 import { Suspense, lazy, useEffect, createElement, useState, useRef, memo, useCallback } from 'react';
-import { isPresent, hyphenate, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, humanize, capitalize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { isPresent, hyphenate, findBy, findIndexBy, isNot, filterBy, snakeToCamelCase, isNotPresent, toLabelAndValue, capitalize, humanize, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { useMutationWithInvalidation, useQueryParams, useBreakpoints, PageTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { useTranslation, Trans } from 'react-i18next';
@@ -39,6 +39,7 @@ import LeftAlign from '@bigbinary/neeto-icons/LeftAlign';
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
 import Select from '@bigbinary/neetoui/Select';
 import { Slider } from 'antd';
+import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Input from '@bigbinary/neetoui/Input';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -555,6 +556,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 = toLabelAndValue(value),
+    label = _toLabelAndValue.label,
+    optionValue = _toLabelAndValue.value;
+  return {
+    label: label ? capitalize(label) : label,
+    value: optionValue
+  };
+};
 var buildInitialValues = function buildInitialValues(theme, themePropertiesSchema) {
   if (isPresent(theme)) return theme;
   return {
@@ -869,20 +883,17 @@ var SelectBlock = function SelectBlock(_ref) {
     options = _ref.options,
     onChange = _ref.onChange;
   return /*#__PURE__*/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(joinHyphenCase(label)),
     children: [/*#__PURE__*/jsx(Typography, {
       "data-testid": "logo-field-labels",
       style: "body2",
       children: label
-    }), /*#__PURE__*/jsx("div", {
-      className: "w-40",
-      children: /*#__PURE__*/jsx(Select, {
-        onChange: onChange,
-        options: options,
-        placeholder: placeholder,
-        value: value
-      })
+    }), /*#__PURE__*/jsx(Select, {
+      onChange: onChange,
+      options: options,
+      placeholder: placeholder,
+      value: value
     })]
   });
 };
@@ -915,18 +926,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 = useTranslation(),
     t = _useTranslation.t,
     i18n = _useTranslation.i18n;
   var translationKey = "neetoThemes.properties.boolean.".concat(name, "HelpText");
   var doesHelpTextExist = i18n.exists(translationKey);
+  if (asCheckbox) {
+    return /*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-2",
+      "data-testid": "theme-style-content-background",
+      children: [/*#__PURE__*/jsx(Checkbox, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
+        label: label,
+        name: name
+      }, inputProps)), {}, {
+        "data-testid": "enable-background-color-toggle"
+      })), doesHelpTextExist && /*#__PURE__*/jsx(HelpPopover, {
+        className: "shrink-0",
+        description: t(translationKey)
+      })]
+    });
+  }
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between",
     "data-testid": "theme-style-content-background",
@@ -946,7 +974,7 @@ var SwitchBlock = function SwitchBlock(_ref) {
       })]
     }), /*#__PURE__*/jsx(Switch, _objectSpread$1(_objectSpread$1({}, _objectSpread$1({
       name: name
-    }, switchProps)), {}, {
+    }, inputProps)), {}, {
       "data-testid": "enable-background-color-toggle"
     }))]
   });
@@ -1076,15 +1104,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__*/jsx(TextBlock, {
+            return /*#__PURE__*/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__*/jsx(FontPickerBlock, {
@@ -1136,12 +1165,12 @@ var Properties = function Properties(_ref) {
             }, values.properties);
             var options = (_findBy4 = findBy({
               key: key
-            }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toLabelAndValue);
+            }, themePropertiesSchema)) === null || _findBy4 === void 0 || (_findBy4 = _findBy4.options) === null || _findBy4 === void 0 ? void 0 : _findBy4.map(toCapitalizedOption);
             return /*#__PURE__*/jsx(SelectBlock, {
               label: buildLabel(key, kind),
               options: options || POSITION_OPTIONS,
               placeholder: "left",
-              value: toLabelAndValue(value),
+              value: toCapitalizedOption(value),
               onChange: function onChange(option) {
                 return setFieldValue("properties[".concat(_index, "].value"), option.value);
               }
@@ -1149,10 +1178,15 @@ var Properties = function Properties(_ref) {
           }
         case "boolean":
           {
+            var _findBy5;
             var _index2 = findIndexBy({
               key: key
             }, values.properties);
+            var renderAsCheckbox = ((_findBy5 = findBy({
+              key: key
+            }, themePropertiesSchema)) === null || _findBy5 === void 0 ? void 0 : _findBy5.renderAsCheckbox) || false;
             return /*#__PURE__*/jsx(SwitchBlock, {
+              asCheckbox: renderAsCheckbox,
               checked: value !== "false",
               label: buildLabel(key, kind),
               name: snakeToCamelCase(key),
@@ -1279,9 +1313,9 @@ var ImageBlock = function ImageBlock(_ref) {
         onUploadComplete: handleImageChange
       }), isPositionChangerVisible && /*#__PURE__*/jsx(SelectBlock, {
         label: buildLabel("".concat(name, "Position"), "image"),
-        options: options || POSITION_OPTIONS,
+        options: (options === null || options === void 0 ? void 0 : options.map(toCapitalizedOption)) || POSITION_OPTIONS,
         placeholder: t("neetoThemes.common.left"),
-        value: toLabelAndValue(((_findBy = findBy({
+        value: toCapitalizedOption(((_findBy = 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) {