@plone/volto 18.10.1 → 18.11.0

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

@@ -7,7 +7,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import filter from 'lodash/filter';
 import map from 'lodash/map';
+import sortBy from 'lodash/sortBy';
 import { defineMessages, injectIntl } from 'react-intl';
 import {
   getVocabFromHint,
@@ -95,6 +97,7 @@ class SelectWidget extends Component {
     title: PropTypes.string.isRequired,
     description: PropTypes.string,
     required: PropTypes.bool,
+    filterChoices: PropTypes.arrayOf(PropTypes.string),
     error: PropTypes.arrayOf(PropTypes.string),
     getVocabulary: PropTypes.func.isRequired,
     getVocabularyTokenTitle: PropTypes.func.isRequired,
@@ -124,6 +127,7 @@ class SelectWidget extends Component {
     customOptionStyling: PropTypes.any,
     isMulti: PropTypes.bool,
     placeholder: PropTypes.string,
+    sort: PropTypes.bool,
   };
 
   /**
@@ -134,6 +138,7 @@ class SelectWidget extends Component {
   static defaultProps = {
     description: null,
     required: false,
+    filterChoices: null,
     items: {
       vocabulary: null,
     },
@@ -150,6 +155,7 @@ class SelectWidget extends Component {
     onDelete: null,
     noValueOption: true,
     customOptionStyling: null,
+    sort: false,
   };
 
   /**
@@ -189,8 +195,15 @@ class SelectWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { id, choices, value, intl, onChange } = this.props;
-    const normalizedValue = normalizeValue(choices, value, intl);
+    const {
+      id,
+      choices,
+      value,
+      intl,
+      onChange,
+      filterChoices,
+      additionalChoices,
+    } = this.props;
     // Make sure that both disabled and isDisabled (from the DX layout feat work)
     const disabled = this.props.disabled || this.props.isDisabled;
     const Select = this.props.reactSelect.default;
@@ -217,6 +230,29 @@ class SelectWidget extends Component {
             : []),
         ];
 
+    if (additionalChoices) {
+      options = [
+        ...(options || []),
+        ...map(additionalChoices, (choice) => ({
+          value: choice.value,
+          label: intl.formatMessage({
+            id: choice.value,
+            defaultMessage: choice.label,
+          }),
+        })),
+      ];
+    }
+
+    if (filterChoices) {
+      options = filter(options, (item) => filterChoices.includes(item.value));
+    }
+
+    if (this.props.sort) {
+      options = sortBy(options, ['label']);
+    }
+
+    const normalizedValue = normalizeValue(options, value, intl);
+
     const isMulti = this.props.isMulti
       ? this.props.isMulti
       : id === 'roles' || id === 'groups' || this.props.type === 'array';

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

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+
+const StaticTextWidget = (props) => {
+  const { id, value } = props;
+
+  return (
+    <FormFieldWrapper {...props} className="text" columns={1}>
+      <div id={id} className="wrapper">
+        <p
+          dangerouslySetInnerHTML={{
+            __html: value?.data || '',
+          }}
+        />
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default StaticTextWidget;
+
+StaticTextWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+};
+
+StaticTextWidget.defaultProps = {
+  value: null,
+  minLength: null,
+  maxLength: null,
+};

package/src/components/manage/Widgets/StaticTextWidget.stories.jsx

@@ -0,0 +1,20 @@
+import StaticTextWidget from './StaticTextWidget';
+import WidgetStory from './story';
+
+export const StaticText = WidgetStory.bind({
+  props: { id: 'text', title: 'Text' },
+  widget: StaticTextWidget,
+});
+
+export default {
+  title: 'Edit Widgets/Static Text',
+  component: StaticTextWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+
+import StaticTextWidget from './StaticTextWidget';
+
+const mockStore = configureStore();
+
+test('renders a text widget component', () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <StaticTextWidget id="my-field" />
+    </Provider>,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import loadable from '@loadable/component';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+import 'rc-time-picker/assets/index.css';
+
+const TimePicker = loadable(() => import('rc-time-picker'));
+
+const messages = defineMessages({
+  time: {
+    id: 'Time',
+    defaultMessage: 'Time',
+  },
+});
+
+const TimeWidgetComponent = (props) => {
+  const { id, resettable, moment, value, onChange, isDisabled } = props;
+
+  const intl = useIntl();
+  const lang = intl.locale;
+
+  const onTimeChange = (time) => {
+    if (time) {
+      onChange(id, time.format('HH:mm'));
+    }
+  };
+
+  const onResetTime = () => {
+    onChange(id, null);
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div className="date-time-widget-wrapper">
+        <div className="ui input time-input">
+          <TimePicker
+            disabled={isDisabled}
+            defaultValue={moment.default()}
+            value={value ? moment.default(value, 'HH:mm') : null}
+            onChange={onTimeChange}
+            allowEmpty={false}
+            showSecond={false}
+            use12Hours={lang === 'en'}
+            id={id}
+            format={moment.default
+              .localeData(toBackendLang(lang))
+              .longDateFormat('LT')}
+            placeholder={intl.formatMessage(messages.time)}
+            focusOnOpen
+            placement="bottomRight"
+          />
+        </div>
+        {resettable && (
+          <button
+            type="button"
+            disabled={isDisabled || !value}
+            onClick={onResetTime}
+            className="item ui noborder button"
+          >
+            <Icon name={clearSVG} size="24px" className="close" />
+          </button>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+TimeWidgetComponent.propTypes = {
+  id: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  required: PropTypes.bool,
+  error: PropTypes.arrayOf(PropTypes.string),
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  resettable: PropTypes.bool,
+};
+
+TimeWidgetComponent.defaultProps = {
+  description: null,
+  required: false,
+  error: [],
+  dateOnly: false,
+  noPastDates: false,
+  value: null,
+  resettable: true,
+};
+
+export default injectLazyLibs(['reactDates', 'moment'])(TimeWidgetComponent);

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TimeWidgetComponent } from './TimeWidget';
+import TimeWidget from './TimeWidget';
+import WidgetStory from './story';
+
+export const Time = WidgetStory.bind({
+  props: { id: 'time', title: 'Time', block: 'block' },
+  widget: TimeWidget,
+});
+
+export default {
+  title: 'Edit Widgets/Time',
+  component: TimeWidgetComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import TimeWidget from './TimeWidget';
+import { waitFor, render, screen } from '@testing-library/react';
+
+const mockStore = configureStore();
+
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
+test('renders a time widget component', async () => {
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+  const { container } = render(
+    <Provider store={store}>
+      <TimeWidget
+        id="my-field"
+        title="My field"
+        fieldSet="default"
+        onChange={() => {}}
+        value={'12:00'}
+      />
+    </Provider>,
+  );
+  await waitFor(() => screen.getByText(/My field/));
+  expect(container).toMatchSnapshot();
+});

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

@@ -28,6 +28,13 @@ export const CheckboxWidget = loadable(
     ),
 );
 
+export const CheckboxGroupWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/CheckboxGroupWidget'
+    ),
+);
+
 export const FileWidget = loadable(
   () =>
     import(
@@ -35,6 +42,13 @@ export const FileWidget = loadable(
     ),
 );
 
+export const HiddenWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/HiddenWidget'
+    ),
+);
+
 export const IdWidget = loadable(
   () =>
     import(
@@ -70,6 +84,13 @@ export const QuerystringWidget = loadable(
     ),
 );
 
+export const RadioGroupWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/RadioGroupWidget'
+    ),
+);
+
 export const SchemaWidget = loadable(
   () =>
     import(
@@ -84,6 +105,13 @@ export const SelectWidget = loadable(
     ),
 );
 
+export const StaticTextWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/StaticTextWidget'
+    ),
+);
+
 export const TextareaWidget = loadable(
   () =>
     import(
@@ -217,6 +245,13 @@ export const DatetimeWidget = loadable(
     ),
 );
 
+export const TimeWidget = loadable(
+  () =>
+    import(
+      /* webpackChunkName: "Widgets" */ '@plone/volto/components/manage/Widgets/TimeWidget'
+    ),
+);
+
 export const RecurrenceWidget = loadable(
   () =>
     import(

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

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Container, Message, Icon } from 'semantic-ui-react';
+import { Container, Message } from 'semantic-ui-react';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import { toast } from 'react-toastify';
@@ -15,6 +16,8 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
 import { useClient } from '@plone/volto/hooks/client/useClient';
 
+import backSVG from '@plone/volto/icons/back.svg';
+
 const messages = defineMessages({
   send: {
     id: 'Send',
@@ -161,9 +164,9 @@ const ContactFormComponent = () => {
               inner={
                 <Link to={`${getBaseUrl(pathname)}`} className="item">
                   <Icon
-                    name="arrow left"
-                    size="big"
-                    color="blue"
+                    name={backSVG}
+                    className="contents circled"
+                    size="30px"
                     title={intl.formatMessage(messages.back)}
                   />
                 </Link>

package/src/components/theme/Widgets/HiddenWidget.jsx

@@ -0,0 +1,2 @@
+const HiddenWidget = ({ value, children, className }) => '';
+export default HiddenWidget;

package/src/components/theme/Widgets/HiddenWidget.stories.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import HiddenWidget from './HiddenWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const HiddenWidgetComponent = ({ children, className, value }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <HiddenWidget value={value} children={children} className={className} />
+      </div>
+    </Wrapper>
+  );
+};
+
+export const Text = HiddenWidgetComponent.bind({});
+Text.args = {
+  value: 'Hidden widget render',
+  className: '',
+};
+
+export default {
+  title: 'View Widgets/Hidden',
+  component: HiddenWidget,
+  argTypes: {},
+};

package/src/components/theme/Widgets/HiddenWidget.test.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import HiddenWidget from './HiddenWidget';
+
+describe('HiddenWidget', () => {
+  it('renders an empty hidden view widget component', () => {
+    const component = renderer.create(<HiddenWidget />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/components/theme/Widgets/StaticTextWidget.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import cx from 'classnames';
+
+const StaticTextWidget = ({ value, className }) =>
+  value ? (
+    <p
+      className={cx(className, 'statictext', 'widget')}
+      dangerouslySetInnerHTML={{
+        __html: value.data,
+      }}
+    />
+  ) : (
+    ''
+  );
+
+export default StaticTextWidget;

package/src/components/theme/Widgets/StaticTextWidget.stories.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import StaticTextWidget from './StaticTextWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const StaticTextWidgetComponent = ({ children, className, value }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <StaticTextWidget
+          value={value}
+          children={children}
+          className={className}
+        />
+      </div>
+    </Wrapper>
+  );
+};
+
+export const StaticText = StaticTextWidgetComponent.bind({});
+StaticTextWidget.args = {
+  value: { data: '<p><strong>Hello</strong> <em>world</em></p>' },
+  className: '',
+};
+
+export default {
+  title: 'View Widgets/Static Text',
+  component: StaticTextWidget,
+  argTypes: {},
+};

package/src/components/theme/Widgets/StaticTextWidget.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import StaticTextWidget from './StaticTextWidget';
+
+describe('StaticTextWidget', () => {
+  it('renders an empty static text view widget component', () => {
+    const component = renderer.create(<StaticTextWidget />);
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a static text view widget component', () => {
+    const component = renderer.create(
+      <StaticTextWidget
+        className="metadata"
+        value={{ data: '<b>Foo bar</b>' }}
+      />,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a static text view widget component with children', () => {
+    const component = renderer.create(
+      <StaticTextWidget className="metadata" value={{ data: '<b>Foo bar</b>' }}>
+        {(child) => <strong>{child}</strong>}
+      </StaticTextWidget>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/config/Blocks.jsx

@@ -72,6 +72,7 @@ import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/Le
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
 import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/schema';
+import VideoBlockSchema from '@plone/volto/components/manage/Blocks/Video/schema';
 
 import ToCVariations from '@plone/volto/components/manage/Blocks/ToC/variations';
 
@@ -346,6 +347,7 @@ const blocksConfig = {
     view: ViewVideoBlock,
     edit: EditVideoBlock,
     schema: BlockSettingsSchema,
+    blockSchema: VideoBlockSchema,
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,

package/src/config/Widgets.jsx

@@ -5,6 +5,7 @@ import {
   CheckboxWidget,
   FileWidget,
   IdWidget,
+  HiddenWidget,
   PasswordWidget,
   QueryWidget,
   QuerySortOnWidget,
@@ -27,9 +28,13 @@ import {
   VocabularyTermsWidget,
   SelectMetadataWidget,
   SelectAutoComplete,
+  StaticTextWidget,
   ColorPickerWidget,
   DatetimeWidget,
+  TimeWidget,
   RecurrenceWidget,
+  RadioGroupWidget,
+  CheckboxGroupWidget,
 } from '@plone/volto/components/manage/Widgets';
 
 import ArrayViewWidget from '@plone/volto/components/theme/Widgets/ArrayWidget';
@@ -51,6 +56,8 @@ import TitleViewWidget from '@plone/volto/components/theme/Widgets/TitleWidget';
 import TokenViewWidget from '@plone/volto/components/theme/Widgets/TokenWidget';
 import UrlViewWidget from '@plone/volto/components/theme/Widgets/UrlWidget';
 import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
+import HiddenViewWidget from '@plone/volto/components/manage/Widgets/HiddenWidget';
+import StaticTextViewWidget from '@plone/volto/components/manage/Widgets/StaticTextWidget';
 
 // Widgets mapping
 export const widgetMapping = {
@@ -67,6 +74,7 @@ export const widgetMapping = {
     textarea: TextareaWidget,
     datetime: DatetimeWidget,
     date: DatetimeWidget,
+    time: TimeWidget,
     password: PasswordWidget,
     file: FileWidget,
     image: ImageWidget,
@@ -90,6 +98,10 @@ export const widgetMapping = {
     color_picker: ColorPickerWidget,
     select: SelectWidget,
     schema: SchemaWidget,
+    static_text: StaticTextWidget,
+    hidden: HiddenWidget,
+    radio_group: RadioGroupWidget,
+    checkbox_group: CheckboxGroupWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,
@@ -139,6 +151,8 @@ export const widgetMapping = {
       title: TitleViewWidget,
       url: UrlViewWidget,
       internal_url: InternalUrlWidget,
+      static_text: StaticTextViewWidget,
+      hidden: HiddenViewWidget,
       object: () => '', // TODO: Not implemented yet: Object View widget
     },
     vocabulary: {},

package/src/constants/Languages.cjs

@@ -15,6 +15,7 @@ module.exports = {
   it: 'Italiano',
   nl: 'Nederlands',
   ro: 'Română',
+  ru: 'Русский',
   ja: '日本語',
   pt: 'Português',
   pt_BR: 'Português (Brasil)',

package/src/helpers/FormValidation/FormValidation.jsx

@@ -233,6 +233,10 @@ const validateFieldsPerFieldset = (
         ...blockTypeFieldErrors,
       ];
     }
+
+    if (errors[fieldId]) {
+      errors[fieldId].title = field.title;
+    }
   });
 
   return errors;