@bigbinary/neeto-form-frontend 4.2.3 → 4.2.4

package/app/javascript/src/translations/en.json

@@ -140,6 +140,7 @@
             "hideQuestionHelpDescription": "When enabled, this question will not be visible in the created form. It can be used to track \"reference ids\" and UTM parameters.",
             "responseVisibleOnlyToHostHelpDescription": "When enabled, the response to this question will only be visible to the host",
             "readOnlyHelpDescription": "When enabled, the client will only be able to see the answer of this question, but will not be able to change the answer of this question. Since you are marking this question as \"read-only\" you should pre-fill the question with an answer.",
+            "fitImagesHelpDescription": "When enabled, images zoom to fill the entire space (some edges may get cut off). When disabled, the complete image is shown (may have empty space around it).",
             "verifyHuman": "Verify that you are a human",
             "pictureChoiceSettings": "Picture choice settings",
             "addPicturesToOptions": "Add pictures to options",

package/dist/BuildForm.js

@@ -1918,23 +1918,31 @@ var Options = function Options(_ref) {
         className: "mb-2 block"
       }, optionLabelProps), {}, {
         children: t("neetoForm.questions.common.questionFields.field.options")
-      })), /*#__PURE__*/jsx(OptionFields, {
-        isPictureChoice: isPictureChoice,
-        name: name,
-        shouldDestroy: true,
-        bulkActionProps: {
-          enabled: true,
-          bulkAddHelpDocUrl: bulkAddHelpDocUrl
+      })), /*#__PURE__*/jsx("div", {
+        className: classnames(["neeto-form-engine-fields-wrapper", {
+          "neeto-form-engine-fields-wrapper--fit-image": values.shouldFitImages
+        }]),
+        style: {
+          "--neeto-form-engine-picture-choice-image-height": "".concat(values.imageHeight, "px")
         },
-        destroyFlagName: "_destroy",
-        disabled: isManageOptionDisabled,
-        draggable: !isManageOptionDisabled,
-        isAddOptionEnabled: !isAddOptionDisabled,
-        isDeleteOptionEnabled: !isRemoveOptionDisabled,
-        isNewItemsPrefilled: isDefaultLanguage(selectedLanguage),
-        minOptions: MINIMUM_OPTIONS,
-        shouldResetEmptyOptionOnBlur: false,
-        onChange: setOptionsAttributes
+        children: /*#__PURE__*/jsx(OptionFields, {
+          isPictureChoice: isPictureChoice,
+          name: name,
+          shouldDestroy: true,
+          bulkActionProps: {
+            enabled: true,
+            bulkAddHelpDocUrl: bulkAddHelpDocUrl
+          },
+          destroyFlagName: "_destroy",
+          disabled: isManageOptionDisabled,
+          draggable: !isManageOptionDisabled,
+          isAddOptionEnabled: !isAddOptionDisabled,
+          isDeleteOptionEnabled: !isRemoveOptionDisabled,
+          isNewItemsPrefilled: isDefaultLanguage(selectedLanguage),
+          minOptions: MINIMUM_OPTIONS,
+          shouldResetEmptyOptionOnBlur: false,
+          onChange: setOptionsAttributes
+        })
       })]
     }), !isDropdown && isPictureChoiceEnabled && /*#__PURE__*/jsxs(Block, {
       title: t("neetoForm.questions.common.questionFields.field.pictureChoiceSettings"),
@@ -1944,7 +1952,16 @@ var Options = function Options(_ref) {
       }), isPictureChoice && /*#__PURE__*/jsxs(Fragment, {
         children: [/*#__PURE__*/jsx(Switch, {
           name: "shouldFitImages",
-          label: t("neetoForm.questions.common.questionFields.field.fitImages")
+          label: t("neetoForm.questions.common.questionFields.field.fitImages"),
+          labelProps: {
+            helpIconProps: {
+              "data-testid": "fit-images-help-popover-button",
+              popoverProps: {
+                position: "top",
+                description: t("neetoForm.questions.common.questionFields.field.fitImagesHelpDescription")
+              }
+            }
+          }
         }), /*#__PURE__*/jsxs("div", {
           className: "mt-4",
           children: [/*#__PURE__*/jsx(Typography, {