@plone/volto 19.0.0-alpha.3 → 19.0.0-alpha.30

package/src/components/manage/Widgets/Size.tsx

@@ -0,0 +1,78 @@
+import { defineMessages, useIntl } from 'react-intl';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './ButtonsWidget';
+import type { IntlShape } from 'react-intl';
+import type { StyleDefinition } from '@plone/types';
+
+const messages = defineMessages({
+  s: {
+    id: 'Small',
+    defaultMessage: 'Small',
+  },
+  m: {
+    id: 'Medium',
+    defaultMessage: 'Medium',
+  },
+  l: {
+    id: 'Large',
+    defaultMessage: 'Large',
+  },
+});
+
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
+  s: ['S', intl.formatMessage(messages.s)],
+  m: ['M', intl.formatMessage(messages.m)],
+  l: ['L', intl.formatMessage(messages.l)],
+});
+
+const DEFAULT_ACTIONS: StyleDefinition[] = [
+  {
+    name: 's',
+    label: 'Small',
+    style: undefined,
+  },
+  {
+    name: 'm',
+    label: 'Medium',
+    style: undefined,
+  },
+  {
+    name: 'l',
+    label: 'Large',
+    style: undefined,
+  },
+];
+
+const SizeWidget = (props: ButtonsWidgetProps) => {
+  const intl = useIntl();
+
+  const { actions = DEFAULT_ACTIONS, actionsInfoMap, filterActions } = props;
+  const filteredActions =
+    filterActions && filterActions.length > 0
+      ? actions.filter((action) => {
+          const actionName = typeof action === 'string' ? action : action.name;
+          return filterActions.includes(actionName);
+        })
+      : actions;
+
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
+  return (
+    <ButtonsWidget
+      {...props}
+      actions={filteredActions}
+      actionsInfoMap={actionsInfo}
+    />
+  );
+};
+
+export default SizeWidget;

package/src/components/manage/Widgets/TimeWidget.test.jsx

@@ -6,12 +6,7 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/TokenWidget.test.jsx

@@ -7,12 +7,7 @@ import TokenWidget from './TokenWidget';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/UrlWidget.jsx

@@ -2,7 +2,6 @@
  * UrlWidget component.
  * @module components/manage/Widgets/UrlWidget
  */
-
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
@@ -14,10 +13,10 @@ import {
   flattenToAppURL,
   URLUtils,
 } from '@plone/volto/helpers/Url/Url';
+import { defineMessages, useIntl } from 'react-intl';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
-
 /** Widget to edit urls
  *
  * This is the default widget used for the `remoteUrl` field. You can also use
@@ -30,6 +29,24 @@ import navTreeSVG from '@plone/volto/icons/nav.svg';
  * }
  * ```
  */
+const messages = defineMessages({
+  urlMissing: {
+    id: 'URL is missing',
+    defaultMessage: 'URL is missing',
+  },
+  urlInvalid: {
+    id: 'URL is invalid',
+    defaultMessage: 'URL is invalid',
+  },
+  clearUrl: {
+    id: 'Clear URL',
+    defaultMessage: 'Clear URL',
+  },
+  openUrlBrowser: {
+    id: 'Open URL browser',
+    defaultMessage: 'Open URL browser',
+  },
+});
 export const UrlWidget = (props) => {
   const {
     id,
@@ -40,9 +57,10 @@ export const UrlWidget = (props) => {
     maxLength,
     placeholder,
     isDisabled,
+    required,
   } = props;
   const inputId = `field-${id}`;
-
+  const intl = useIntl();
   const [value, setValue] = useState(flattenToAppURL(props.value));
   const [isInvalid, setIsInvalid] = useState(false);
   /**
@@ -54,24 +72,20 @@ export const UrlWidget = (props) => {
   const clear = () => {
     setValue('');
     onChange(id, undefined);
+    setIsInvalid(false);
   };
-
   const onChangeValue = (_value) => {
     let newValue = _value;
     if (newValue?.length > 0) {
       if (isInvalid && URLUtils.isUrl(URLUtils.normalizeUrl(newValue))) {
         setIsInvalid(false);
       }
-
       if (isInternalURL(newValue)) {
         newValue = flattenToAppURL(newValue);
       }
     }
-
     setValue(newValue);
-
     newValue = isInternalURL(newValue) ? addAppURL(newValue) : newValue;
-
     if (!isInternalURL(newValue) && newValue.length > 0) {
       const checkedURL = URLUtils.checkAndNormalizeUrl(newValue);
       newValue = checkedURL.url;
@@ -79,10 +93,15 @@ export const UrlWidget = (props) => {
         setIsInvalid(true);
       }
     }
-
     onChange(id, newValue === '' ? undefined : newValue);
   };
-
+  // A11y: if the field is required and the user leaves it empty, we mark it as missing
+  const handleBlur = ({ target }) => {
+    if (required && (!target.value || target.value === '')) {
+      setIsInvalid(true);
+    }
+    onBlur(id, target.value === '' ? undefined : target.value);
+  };
   return (
     <FormFieldWrapper {...props} className="url wide">
       <div className="wrapper">
@@ -90,24 +109,38 @@ export const UrlWidget = (props) => {
           id={inputId}
           name={id}
           type="url"
+          required={required}
+          aria-required={required}
+          aria-invalid={isInvalid}
+          aria-errormessage={isInvalid ? `${inputId}-error` : undefined}
+          onBlur={handleBlur}
           value={value || ''}
           disabled={isDisabled}
           placeholder={placeholder}
           onChange={({ target }) => onChangeValue(target.value)}
-          onBlur={({ target }) =>
-            onBlur(id, target.value === '' ? undefined : target.value)
-          }
           onClick={() => onClick()}
           minLength={minLength || null}
           maxLength={maxLength || null}
           error={isInvalid}
         />
+        {isInvalid && (
+          <span
+            id={`${inputId}-error`}
+            role="alert"
+            className="visually-hidden"
+          >
+            {value?.length > 0
+              ? intl.formatMessage(messages.urlInvalid)
+              : intl.formatMessage(messages.urlMissing)}
+          </span>
+        )}
         {value?.length > 0 ? (
           <Button.Group>
             <Button
+              type="button"
               basic
               className="cancel"
-              aria-label="clearUrlBrowser"
+              aria-label={intl.formatMessage(messages.clearUrl)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -120,9 +153,10 @@ export const UrlWidget = (props) => {
         ) : (
           <Button.Group>
             <Button
+              type="button"
               basic
               icon
-              aria-label="openUrlBrowser"
+              aria-label={intl.formatMessage(messages.openUrlBrowser)}
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -143,7 +177,6 @@ export const UrlWidget = (props) => {
     </FormFieldWrapper>
   );
 };
-
 /**
  * Property types
  * @property {Object} propTypes Property types.
@@ -164,7 +197,6 @@ UrlWidget.propTypes = {
   openObjectBrowser: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
 };
-
 /**
  * Default properties.
  * @property {Object} defaultProps Default properties.
@@ -181,5 +213,4 @@ UrlWidget.defaultProps = {
   minLength: null,
   maxLength: null,
 };
-
 export default withObjectBrowser(UrlWidget);

package/src/components/manage/Widgets/VocabularyTermsWidget.test.jsx

@@ -4,17 +4,8 @@ import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import VocabularyTermsWidget from './VocabularyTermsWidget';
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/manage/Widgets/__mocks__/index.tsx

@@ -1,59 +1,41 @@
-/* TODO: When the Volto Team removes Jest configuration support from Volto core, update this file with the Vitest version of the mock.
-Then, in the tests, we need to replace:
-
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-
-with the following:
-
-vi.mock('@plone/volto/components/manage/Widgets');
-
-Finally, remove this comment.
-*/
-
-export const AlignWidget = jest.fn(() => <div id="AlignWidget" />);
-export const ButtonsWidget = jest.fn(() => <div id="ButtonsWidget" />);
-export const ArrayWidget = jest.fn(() => <div id="ArrayWidget" />);
-export const CheckboxWidget = jest.fn(() => <div id="CheckboxWidget" />);
-export const FileWidget = jest.fn(() => <div id="FileWidget" />);
-export const IdWidget = jest.fn(() => <div id="IdWidget" />);
-export const PasswordWidget = jest.fn(() => <div id="PasswordWidget" />);
-export const QueryWidget = jest.fn(() => <div id="QueryWidget" />);
-export const QuerySortOnWidget = jest.fn(() => <div id="QuerySortOnWidget" />);
-export const QuerystringWidget = jest.fn(() => <div id="QuerystringWidget" />);
-export const SchemaWidget = jest.fn(() => <div id="SchemaWidget" />);
-export const SelectWidget = jest.fn(() => <div id="SelectWidget" />);
-export const TextareaWidget = jest.fn(() => <div id="TextareaWidget" />);
-export const TextWidget = jest.fn(() => <div id="TextWidget" />);
-export const TokenWidget = jest.fn(() => <div id="TokenWidget" />);
-export const WysiwygWidget = jest.fn(() => <div id="WysiwygWidget" />);
-export const UrlWidget = jest.fn(() => <div id="UrlWidget" />);
-export const InternalUrlWidget = jest.fn(() => <div id="InternalUrlWidget" />);
-export const EmailWidget = jest.fn(() => <div id="EmailWidget" />);
-export const NumberWidget = jest.fn(() => <div id="NumberWidget" />);
-export const ImageSizeWidget = jest.fn(() => <div id="ImageSizeWidget" />);
-export const RegistryImageWidget = jest.fn(() => (
+export const AlignWidget = vi.fn(() => <div id="AlignWidget" />);
+export const ButtonsWidget = vi.fn(() => <div id="ButtonsWidget" />);
+export const ArrayWidget = vi.fn(() => <div id="ArrayWidget" />);
+export const CheckboxWidget = vi.fn(() => <div id="CheckboxWidget" />);
+export const FileWidget = vi.fn(() => <div id="FileWidget" />);
+export const IdWidget = vi.fn(() => <div id="IdWidget" />);
+export const PasswordWidget = vi.fn(() => <div id="PasswordWidget" />);
+export const QueryWidget = vi.fn(() => <div id="QueryWidget" />);
+export const QuerySortOnWidget = vi.fn(() => <div id="QuerySortOnWidget" />);
+export const QuerystringWidget = vi.fn(() => <div id="QuerystringWidget" />);
+export const SchemaWidget = vi.fn(() => <div id="SchemaWidget" />);
+export const SelectWidget = vi.fn(() => <div id="SelectWidget" />);
+export const TextareaWidget = vi.fn(() => <div id="TextareaWidget" />);
+export const TextWidget = vi.fn(() => <div id="TextWidget" />);
+export const TokenWidget = vi.fn(() => <div id="TokenWidget" />);
+export const WysiwygWidget = vi.fn(() => <div id="WysiwygWidget" />);
+export const UrlWidget = vi.fn(() => <div id="UrlWidget" />);
+export const InternalUrlWidget = vi.fn(() => <div id="InternalUrlWidget" />);
+export const EmailWidget = vi.fn(() => <div id="EmailWidget" />);
+export const NumberWidget = vi.fn(() => <div id="NumberWidget" />);
+export const ImageSizeWidget = vi.fn(() => <div id="ImageSizeWidget" />);
+export const RegistryImageWidget = vi.fn(() => (
   <div id="RegistryImageWidget" />
 ));
-export const ReferenceWidget = jest.fn(() => <div id="ReferenceWidget" />);
-export const ObjectBrowserWidget = jest.fn(() => (
+export const ReferenceWidget = vi.fn(() => <div id="ReferenceWidget" />);
+export const ObjectBrowserWidget = vi.fn(() => (
   <div id="ObjectBrowserWidget" />
 ));
-export const ObjectWidget = jest.fn(() => <div id="ObjectWidget" />);
-export const ObjectListWidget = jest.fn(() => <div id="ObjectListWidget" />);
-export const VocabularyTermsWidget = jest.fn(() => (
+export const ObjectWidget = vi.fn(() => <div id="ObjectWidget" />);
+export const ObjectListWidget = vi.fn(() => <div id="ObjectListWidget" />);
+export const VocabularyTermsWidget = vi.fn(() => (
   <div id="VocabularyTermsWidget" />
 ));
-export const SelectMetadataWidget = jest.fn(() => (
+export const SelectMetadataWidget = vi.fn(() => (
   <div id="SelectMetadataWidget" />
 ));
-export const SelectAutoComplete = jest.fn(() => (
-  <div id="SelectAutoComplete" />
-));
-export const ColorPickerWidget = jest.fn(() => <div id="ColorPickerWidget" />);
-export const DatetimeWidget = jest.fn(() => <div id="DatetimeWidget" />);
-export const RecurrenceWidget = jest.fn(() => <div id="RecurrenceWidget" />);
-export const FormFieldWrapper = jest.fn(() => <div id="FormFieldWrapper" />);
+export const SelectAutoComplete = vi.fn(() => <div id="SelectAutoComplete" />);
+export const ColorPickerWidget = vi.fn(() => <div id="ColorPickerWidget" />);
+export const DatetimeWidget = vi.fn(() => <div id="DatetimeWidget" />);
+export const RecurrenceWidget = vi.fn(() => <div id="RecurrenceWidget" />);
+export const FormFieldWrapper = vi.fn(() => <div id="FormFieldWrapper" />);

package/src/components/manage/Widgets/index.tsx

@@ -265,3 +265,24 @@ export const FormFieldWrapper = loadable(
       /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/FormFieldWrapper'
     ),
 );
+
+export const Size = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/Size'
+    ),
+);
+
+export const BlockAlignment = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockAlignment'
+    ),
+);
+
+export const BlockWidth = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/BlockWidth'
+    ),
+);

package/src/components/manage/Workflow/Workflow.test.jsx

@@ -7,17 +7,8 @@ import Workflow from './Workflow';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Widgets', async () => {
-  return await import(
-    '@plone/volto/components/manage/Widgets/__mocks__/index.vitest.tsx'
-  );
-});
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-
+vi.mock('@plone/volto/components/manage/Widgets');
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.jsx

@@ -6,6 +6,7 @@ const AlternateHrefLangs = (props) => {
   return (
     <Helmet>
       {content['@components']?.translations?.items &&
+        content.language?.token &&
         [
           ...content['@components']?.translations?.items,
           { '@id': content['@id'], language: content.language.token },

package/src/components/theme/AlternateHrefLangs/AlternateHrefLangs.test.jsx

@@ -35,6 +35,36 @@ describe('AlternateHrefLangs', () => {
     expect(helmetLinks.length).toBe(0);
   });
 
+  it('multilingual site, content without language field, renders nothing', () => {
+    config.settings.publicURL = 'https://plone.org';
+    config.settings.supportedLanguages = ['en', 'es'];
+
+    const content = {
+      '@id': 'http://localhost:8080/Plone/en/newsroom/news',
+      '@components': {
+        translations: {
+          items: [{ '@id': 'http://localhost:8080/Plone/es', language: 'es' }],
+        },
+      },
+    };
+
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    renderer.create(
+      <Provider store={store}>
+        <AlternateHrefLangs content={content} />
+      </Provider>,
+    );
+
+    const helmetLinks = Helmet.peek().linkTags;
+    expect(helmetLinks.length).toBe(0);
+  });
+
   it('multilingual site, with some translations', () => {
     config.settings.publicURL = 'https://plone.org';
     config.settings.supportedLanguages = ['en', 'es', 'eu'];

package/src/components/theme/App/App.jsx

@@ -45,6 +45,7 @@ import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRe
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
 import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 /**
  * @export
@@ -159,6 +160,7 @@ export class App extends Component {
             'public-ui': !isCmsUI,
           })}
         />
+        <SlotRenderer name="aboveApp" content={this.props.content} />
         <SkipLinks />
         <Header pathname={path} />
         <Breadcrumbs pathname={path} />
@@ -174,7 +176,9 @@ export class App extends Component {
             <main ref={this.mainRef}>
               <OutdatedBrowser />
               {this.props.connectionRefused ? (
-                <ConnectionRefusedView />
+                <ConnectionRefusedView
+                  staticContext={this.props.staticContext}
+                />
               ) : this.state.hasError ? (
                 <Error
                   message={this.state.error.message}

package/src/components/theme/Avatar/Avatar.jsx

@@ -5,6 +5,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getInitials } from '@plone/volto/helpers/Utils/Utils';
+import Image from '@plone/volto/components/theme/Image/Image';
 
 const defaultSize = 30;
 const defaultColor = 'Teal';
@@ -15,7 +16,7 @@ const Avatar = ({ src, title, text, size, color, className }) => {
   return (
     <div className={className} title={title}>
       {src ? (
-        <img src={src} alt={title}></img>
+        <Image src={src} alt={title} />
       ) : (
         <svg width={size} height={size}>
           <circle cx={radius} cy={radius} r={radius} fill={color} />

package/src/components/theme/Comments/CommentEditModal.test.jsx

@@ -7,11 +7,7 @@ import CommentEditModal from './CommentEditModal';
 
 const mockStore = configureStore();
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 describe('CommentEditModal', () => {
   it('renders a comment edit modal component', () => {

package/src/components/theme/Comments/Comments.test.jsx

@@ -19,17 +19,8 @@ vi.mock('moment', () => ({
   })),
 }));
 
-vi.mock('@plone/volto/helpers/Loadable/Loadable', async () => {
-  return await import(
-    '@plone/volto/helpers/Loadable/__mocks__/Loadable.vitest.jsx'
-  );
-});
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
-
+vi.mock('@plone/volto/helpers/Loadable/Loadable');
+vi.mock('@plone/volto/components/manage/Form');
 beforeAll(async () => {
   const { __setLoadables } = await import(
     '@plone/volto/helpers/Loadable/Loadable'

package/src/components/theme/ConnectionRefused/ConnectionRefused.jsx

@@ -1,5 +1,5 @@
 /**
- * Home container.
+ * Connection refused error page.
  * @module components/theme/ConnectionRefused/ConnectionRefused
  */
 
@@ -7,6 +7,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Container } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
+import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
 
 const ConnectionRefused = () => (
   <Container
@@ -71,4 +72,4 @@ const ConnectionRefused = () => (
   </Container>
 );
 
-export default ConnectionRefused;
+export default withServerErrorCode(503)(ConnectionRefused);

package/src/components/theme/ContactForm/ContactForm.test.jsx

@@ -9,11 +9,7 @@ vi.mock('../../manage/Toolbar/Toolbar', () => ({
   default: vi.fn(() => <div id="Portal" />),
 }));
 
-vi.mock('@plone/volto/components/manage/Form', async () => {
-  return await import(
-    '@plone/volto/components/manage/Form/__mocks__/index.vitest.tsx'
-  );
-});
+vi.mock('@plone/volto/components/manage/Form');
 
 const mockStore = configureStore();
 describe('Contact form', () => {