@plone/volto 18.10.1 → 18.11.0

package/src/helpers/FormValidation/FormValidation.test.js

@@ -57,6 +57,9 @@ describe('FormValidation', () => {
     });
 
     it('required - validates missing', () => {
+      const validationErrorMessages = [messages.required.defaultMessage];
+      validationErrorMessages.title = 'Username';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema,
@@ -64,7 +67,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        username: [messages.required.defaultMessage],
+        username: validationErrorMessages,
       });
     });
 
@@ -82,6 +85,10 @@ describe('FormValidation', () => {
         },
         required: ['age'],
       };
+
+      const validationErrorMessages = [messages.required.defaultMessage];
+      validationErrorMessages.title = 'age';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -89,7 +96,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        age: [messages.required.defaultMessage],
+        age: validationErrorMessages,
       });
       expect(
         FormValidation.validateFieldsPerFieldset({
@@ -101,6 +108,9 @@ describe('FormValidation', () => {
     });
 
     it('email - validates incorrect', () => {
+      const validationErrorMessages = [messages.isValidEmail.defaultMessage];
+      validationErrorMessages.title = 'Email';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema,
@@ -108,7 +118,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        email: [messages.isValidEmail.defaultMessage],
+        email: validationErrorMessages,
       });
     });
 
@@ -124,14 +134,18 @@ describe('FormValidation', () => {
     });
 
     it('url - validates incorrect url', () => {
-      formData.url = 'foo';
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'url';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema,
-          formData,
+          formData: { url: 'foo', username: 'test username' },
           formatMessage,
         }),
-      ).toEqual({ url: [messages.isValidURL.defaultMessage] });
+      ).toEqual({
+        url: validationErrorMessages,
+      });
     });
 
     it('url - validates', () => {
@@ -180,6 +194,9 @@ describe('FormValidation', () => {
         required: [],
       };
 
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -190,7 +207,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -213,6 +230,13 @@ describe('FormValidation', () => {
         dependencies: { fieldType: 'customfieldtype' },
         method: () => 'Fails',
       });
+
+      const validationErrorMessages = [
+        'Fails',
+        messages.isValidURL.defaultMessage,
+      ];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -223,7 +247,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: ['Fails', messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -243,6 +267,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -253,7 +281,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -269,6 +297,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.minLength.defaultMessage];
+      validationErrorMessages.title = 'password';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -279,7 +311,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.minLength.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -295,6 +327,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.maxLength.defaultMessage];
+      validationErrorMessages.title = 'password';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -305,7 +341,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.maxLength.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -321,6 +357,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.pattern.defaultMessage];
+      validationErrorMessages.title = 'password';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -331,7 +371,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.pattern.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -371,6 +411,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.isNumber.defaultMessage];
+      validationErrorMessages.title = 'Number field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -382,7 +426,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isNumber.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -449,6 +493,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.minimum.defaultMessage];
+      validationErrorMessages.title = 'Number field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -459,7 +507,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.minimum.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -476,6 +524,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.maximum.defaultMessage];
+      validationErrorMessages.title = 'Number field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -486,7 +538,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.maximum.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -502,6 +554,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.isInteger.defaultMessage];
+      validationErrorMessages.title = 'Integer field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -512,7 +568,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isInteger.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -529,6 +585,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.minimum.defaultMessage];
+      validationErrorMessages.title = 'Integer field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -539,7 +599,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.minimum.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -556,6 +616,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.maximum.defaultMessage];
+      validationErrorMessages.title = 'Integer field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -566,7 +630,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.maximum.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -584,6 +648,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.minLength.defaultMessage];
+      validationErrorMessages.title = 'password';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -591,7 +659,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        password: [messages.minLength.defaultMessage],
+        password: validationErrorMessages,
       });
     });
 
@@ -615,6 +683,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.minLength.defaultMessage];
+      validationErrorMessages.title = 'description';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -625,7 +697,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        description: [messages.minLength.defaultMessage],
+        description: validationErrorMessages,
       });
     });
 
@@ -643,6 +715,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.maxLength.defaultMessage];
+      validationErrorMessages.title = 'password';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -650,7 +726,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        password: [messages.maxLength.defaultMessage],
+        password: validationErrorMessages,
       });
     });
 
@@ -674,6 +750,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.maxLength.defaultMessage];
+      validationErrorMessages.title = 'description';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -684,7 +764,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        description: [messages.maxLength.defaultMessage],
+        description: validationErrorMessages,
       });
     });
 
@@ -701,6 +781,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.maxItems.defaultMessage];
+      validationErrorMessages.title = 'Array field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -711,7 +795,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.maxItems.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -728,6 +812,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.minItems.defaultMessage];
+      validationErrorMessages.title = 'Array field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -738,7 +826,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.minItems.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -755,6 +843,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.uniqueItems.defaultMessage];
+      validationErrorMessages.title = 'Array field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -765,7 +857,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.uniqueItems.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -822,6 +914,10 @@ describe('FormValidation', () => {
         dependencies: { format: 'url' },
         method: urlValidator,
       });
+
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -832,7 +928,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -888,6 +984,10 @@ describe('FormValidation', () => {
         dependencies: { format: 'url' },
         method: urlValidator,
       });
+
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -898,7 +998,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -958,6 +1058,10 @@ describe('FormValidation', () => {
         },
         method: urlValidator,
       });
+
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -968,7 +1072,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
 
@@ -985,6 +1089,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.startEventRange.defaultMessage];
+      validationErrorMessages.title = 'Start date';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: contentTypeSchema,
@@ -995,7 +1103,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        start: [messages.startEventRange.defaultMessage],
+        start: validationErrorMessages,
       });
     });
 
@@ -1012,6 +1120,10 @@ describe('FormValidation', () => {
         },
         required: [],
       };
+
+      const validationErrorMessages = [messages.endEventRange.defaultMessage];
+      validationErrorMessages.title = 'End date';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: contentTypeSchema,
@@ -1022,7 +1134,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        end: [messages.endEventRange.defaultMessage],
+        end: validationErrorMessages,
       });
     });
 
@@ -1042,6 +1154,10 @@ describe('FormValidation', () => {
         dependencies: { blockType: 'slider', fieldName: 'customField' },
         method: urlValidator,
       });
+
+      const validationErrorMessages = [messages.isValidURL.defaultMessage];
+      validationErrorMessages.title = 'Default field';
+
       expect(
         FormValidation.validateFieldsPerFieldset({
           schema: newSchema,
@@ -1053,7 +1169,7 @@ describe('FormValidation', () => {
           formatMessage,
         }),
       ).toEqual({
-        customField: [messages.isValidURL.defaultMessage],
+        customField: validationErrorMessages,
       });
     });
   });

package/src/helpers/FormValidation/validators.ts

@@ -74,7 +74,10 @@ export const urlValidator = ({ value, formatMessage }: Validator) => {
   return !isValid ? formatMessage(messages.isValidURL) : null;
 };
 
-export const emailValidator = ({ value, formatMessage }: Validator): string => {
+export const emailValidator = ({
+  value,
+  formatMessage,
+}: Validator): string | null => {
   // Email Regex taken from from WHATWG living standard:
   // https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
   const emailRegex =

package/src/helpers/Utils/Utils.jsx

@@ -301,13 +301,25 @@ export function normalizeString(str) {
 /**
  * Slugify a string: remove whitespaces, special chars and replace with _
  * @param {string} string String to be slugified
+ * @param {Array} slugs Array with slugs already taken
  * @returns {string} Slugified string
  */
-export const slugify = (string) => {
-  return string
+export const slugify = (string, slugs = []) => {
+  let slug = string
     .toLowerCase()
     .replace(/[\s-]+/g, '_')
     .replace(/[^\w]+/g, '');
+  let i = 1;
+
+  if (slugs.includes(slug)) {
+    while (slugs.includes(`${slug}_${i}`)) {
+      i++;
+    }
+
+    slug = `${slug}_${i}`;
+  }
+
+  return slug;
 };
 
 /**

package/theme/themes/pastanaga/collections/form.overrides

@@ -54,6 +54,10 @@
   }
 }
 
+.ui.form .ui.checkbox {
+  margin: @8px 0;
+}
+
 .ui.form .fields.error .field textarea,
 .ui.form .fields.error .field select,
 .ui.form .fields.error .field input:not([type]),

package/theme/themes/pastanaga/elements/input.overrides

@@ -26,6 +26,7 @@ of an error is present, it overrides a default from SemanticUI grid definitions.
 
   &.required .wrapper {
     > label[for]::after,
+    .ui.checkbox::after,
     .ui.label::after {
       display: inline-block;
       width: 10px;
@@ -37,6 +38,12 @@ of an error is present, it overrides a default from SemanticUI grid definitions.
     }
   }
 
+  &.required .wrapper .ui.checkbox::after {
+    position: absolute;
+    top: 2px;
+    right: -14px;
+  }
+
   &.text {
     .toolbar {
       display: block;

package/theme/themes/pastanaga/extras/sidebar.less

@@ -404,6 +404,8 @@
 
 .sidebar-container-enter-done {
   .sidebar-container;
+
+  z-index: 1150;
 }
 
 .sidebar-container-exit {

package/types/components/index.d.ts

@@ -121,4 +121,4 @@ export { default as App } from "@plone/volto/components/theme/App/App";
 export { Controlpanels, Controlpanel, RulesControlpanel, AddRuleControlpanel, EditRuleControlpanel, ConfigureRuleControlpanel, UsersControlpanel, RenderUsers, UserGroupMembershipControlPanel, GroupsControlpanel, RenderGroups, RelationsControlpanel, AliasesControlpanel, UndoControlpanel, AddonsControlpanel, ContentType, ContentTypeLayout, ContentTypeSchema, ContentTypes, VersionOverview, UpgradeControlPanel, ModerateComments, DatabaseInformation } from "@plone/volto/components/manage/Controlpanels";
 export { Field, InlineForm, ModalForm, UndoToolbar, BlocksToolbar, BlockDataForm, BlocksForm, Form } from "@plone/volto/components/manage/Form";
 export { Contents, ContentsBreadcrumbs, ContentsIndexHeader, ContentsItem, ContentsUploadModal, ContentsPropertiesModal, ContentsRenameModal, ContentsWorkflowModal, ContentsTagsModal } from "@plone/volto/components/manage/Contents";
-export { AlignWidget, ButtonsWidget, ArrayWidget, CheckboxWidget, FileWidget, IdWidget, PasswordWidget, QueryWidget, QuerySortOnWidget, QuerystringWidget, SchemaWidget, SelectWidget, TextareaWidget, TextWidget, TokenWidget, WysiwygWidget, UrlWidget, InternalUrlWidget, EmailWidget, NumberWidget, ImageSizeWidget, RegistryImageWidget, ReferenceWidget, ObjectBrowserWidget, ObjectWidget, ObjectListWidget, VocabularyTermsWidget, SelectMetadataWidget, SelectAutoComplete, ColorPickerWidget, DatetimeWidget, RecurrenceWidget, FormFieldWrapper } from "@plone/volto/components/manage/Widgets";
+export { AlignWidget, ButtonsWidget, ArrayWidget, CheckboxWidget, FileWidget, HiddenWidget, IdWidget, PasswordWidget, QueryWidget, QuerySortOnWidget, QuerystringWidget, SchemaWidget, SelectWidget, StaticTextWidget, TextareaWidget, TextWidget, TokenWidget, WysiwygWidget, UrlWidget, InternalUrlWidget, EmailWidget, NumberWidget, ImageSizeWidget, RegistryImageWidget, ReferenceWidget, ObjectBrowserWidget, ObjectWidget, ObjectListWidget, VocabularyTermsWidget, SelectMetadataWidget, SelectAutoComplete, ColorPickerWidget, DatetimeWidget, RecurrenceWidget, FormFieldWrapper } from "@plone/volto/components/manage/Widgets";

package/types/components/manage/Widgets/CheckboxGroupWidget.d.ts

@@ -0,0 +1,6 @@
+export const CheckboxGroupWidgetComponent: React.FC<import("react-intl").WithIntlProps<any>> & {
+    WrappedComponent: React.ComponentType<any>;
+};
+declare const _default: any;
+export default _default;
+import React from 'react';

package/types/components/manage/Widgets/CheckboxGroupWidget.stories.d.ts

@@ -0,0 +1,15 @@
+export const Default: any;
+declare namespace _default {
+    export let title: string;
+    export { CheckboxGroupWidgetComponent as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export namespace argTypes {
+        namespace value {
+            namespace control {
+                let disable: boolean;
+            }
+        }
+    }
+}
+export default _default;
+import { CheckboxGroupWidgetComponent } from './CheckboxGroupWidget';

package/types/components/manage/Widgets/CheckboxGroupWidget.test.d.ts

@@ -0,0 +1 @@
+export {};