@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.21

package/src/components/theme/Header/Header.jsx

@@ -1,12 +1,6 @@
-/**
- * Header component.
- * @module components/theme/Header/Header
- */
-
-import React, { Component } from 'react';
 import { Container, Segment } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector, shallowEqual } from 'react-redux';
 
 import {
   Anontools,
@@ -16,65 +10,45 @@ import {
   SearchWidget,
 } from '@plone/volto/components';
 
-/**
- * Header component class.
- * @class Header
- * @extends Component
- */
-class Header extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    token: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-  };
-
-  /**
-   * Default properties.
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    token: null,
-  };
+const Header = ({ pathname }) => {
+  const token = useSelector((state) => state.userSession.token, shallowEqual);
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment basic className="header-wrapper" role="banner">
-        <Container>
-          <div className="header">
-            <div className="logo-nav-wrapper">
-              <div className="logo">
-                <Logo />
-              </div>
-              <Navigation pathname={this.props.pathname} />
+  return (
+    <Segment basic className="header-wrapper" role="banner">
+      <Container>
+        <div className="header">
+          <div className="logo-nav-wrapper">
+            <div className="logo">
+              <Logo />
             </div>
-            <div className="tools-search-wrapper">
-              <LanguageSelector />
-              {!this.props.token && (
-                <div className="tools">
-                  <Anontools />
-                </div>
-              )}
-              <div className="search">
-                <SearchWidget />
+            <Navigation pathname={pathname} />
+          </div>
+          <div className="tools-search-wrapper">
+            <LanguageSelector />
+            {!token && (
+              <div className="tools">
+                <Anontools />
               </div>
+            )}
+            <div className="search">
+              <SearchWidget />
             </div>
           </div>
-        </Container>
-      </Segment>
-    );
-  }
-}
+        </div>
+      </Container>
+    </Segment>
+  );
+};
+
+export default Header;
+
+Header.propTypes = {
+  token: PropTypes.string,
+  pathname: PropTypes.string.isRequired,
+  content: PropTypes.objectOf(PropTypes.any),
+};
 
-export default connect((state) => ({
-  token: state.userSession.token,
-}))(Header);
+Header.defaultProps = {
+  token: null,
+  content: null,
+};

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

@@ -39,4 +39,22 @@ describe('Header', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a header component - auth', () => {
+    const store = mockStore({
+      userSession: { token: '1234567890' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <Header pathname="/blog" />
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

package/src/components/theme/Icon/Icon.jsx

@@ -44,8 +44,8 @@ const Icon = ({
   ariaHidden,
 }) => (
   <svg
-    xmlns={name.attributes && name.attributes.xmlns}
-    viewBox={name.attributes && name.attributes.viewBox}
+    xmlns={name?.attributes?.xmlns}
+    viewBox={name?.attributes?.viewBox}
     style={{
       height: size,
       width: 'auto',

package/src/components/theme/Image/Image.jsx

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+/**
+ * Image component
+ * @param {object} item - Context item that has the image field (can also be a catalog brain or summary)
+ * @param {string} imageField - Key of the image field inside the item, or inside the image_scales object of the item if it is a catalog brain or summary
+ * @param {string} src - URL of the image to be used if the item field is not available
+ * @param {string} alt - Alternative text for the image
+ * @param {boolean} loading - (default: eager) set to `lazy` to lazy load the image
+ * @param {boolean} responsive - (default: false) set to `true` to add the `responsive` class to the image
+ * @param {string} className - Additional classes to add to the image
+ */
+export default function Image({
+  item,
+  imageField,
+  src,
+  alt = '',
+  loading = 'eager',
+  responsive = false,
+  className = '',
+  ...imageProps
+}) {
+  if (!item && !src) return null;
+
+  // TypeScript hints for editor autocomplete :)
+  /** @type {React.ImgHTMLAttributes<HTMLImageElement>} */
+  const attrs = {};
+
+  if (!item && src) {
+    attrs.src = src;
+    attrs.className = cx(className, { responsive });
+  } else {
+    const isFromRealObject = !item.image_scales;
+    const imageFieldWithDefault = imageField || item.image_field || 'image';
+
+    const image = isFromRealObject
+      ? item[imageFieldWithDefault]
+      : item.image_scales[imageFieldWithDefault]?.[0];
+
+    if (!image) return null;
+
+    const isSvg = image['content-type'] === 'image/svg+xml';
+
+    const baseUrl = isFromRealObject ? '' : flattenToAppURL(item['@id'] + '/');
+
+    attrs.src = `${baseUrl}${flattenToAppURL(image.download)}`;
+    attrs.width = image.width;
+    attrs.height = image.height;
+    attrs.style = {
+      aspectRatio: `${image.width} / ${image.height}`,
+      ...imageProps.style,
+    };
+    attrs.className = cx(className, { responsive });
+
+    if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
+      const sortedScales = Object.values(image.scales).sort((a, b) => {
+        if (a.width > b.width) return 1;
+        else if (a.width < b.width) return -1;
+        else return 0;
+      });
+
+      attrs.srcSet = sortedScales
+        .map(
+          (scale) =>
+            `${baseUrl}${flattenToAppURL(scale.download)} ${scale.width}w`,
+        )
+        .join(', ');
+    }
+  }
+
+  if (loading === 'lazy') {
+    attrs.loading = 'lazy';
+    attrs.decoding = 'async';
+  } else {
+    attrs.fetchpriority = 'high';
+  }
+
+  return <img {...attrs} alt={alt} {...imageProps} />;
+}
+
+Image.propTypes = {
+  item: PropTypes.shape({
+    '@id': PropTypes.string,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
+    image: PropTypes.object,
+  }),
+  imageField: PropTypes.string,
+  src: PropTypes.string,
+  alt: PropTypes.string.isRequired,
+  loading: PropTypes.string,
+  responsive: PropTypes.bool,
+  className: PropTypes.string,
+};

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

@@ -0,0 +1,125 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Image from './Image';
+
+test('renders an image component with fetchpriority high', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component with lazy loading', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+      loading="lazy"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component with responsive class', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+      responsive={true}
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component from a catalog brain', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        '@id': 'http://localhost:3000/image',
+        image_field: 'image',
+        image_scales: {
+          image: [
+            {
+              download: '@@images/image/image.png',
+              width: 400,
+              height: 400,
+              scales: {
+                preview: {
+                  download: '@@images/image/image-400.png',
+                  width: 400,
+                  height: 400,
+                },
+              },
+            },
+          ],
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component from a string src', () => {
+  const component = renderer.create(
+    <Image
+      src="http://localhost:3000/image/@@images/image/image.png"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/theme/LanguageSelector/LanguageSelector.js

@@ -11,7 +11,12 @@ import { useSelector } from 'react-redux';
 import cx from 'classnames';
 import { find, map } from 'lodash';
 
-import { Helmet, langmap, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  Helmet,
+  langmap,
+  flattenToAppURL,
+  toReactIntlLang,
+} from '@plone/volto/helpers';
 
 import config from '@plone/volto/registry';
 
@@ -42,7 +47,7 @@ const LanguageSelector = (props) => {
             aria-label={`${intl.formatMessage(
               messages.switchLanguageTo,
             )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: lang === currentLang })}
+            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
             to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
             title={langmap[lang].nativeName}
             onClick={() => {
@@ -57,7 +62,7 @@ const LanguageSelector = (props) => {
     </div>
   ) : (
     <Helmet>
-      <html lang={settings.defaultLanguage} />
+      <html lang={toReactIntlLang(settings.defaultLanguage)} />
     </Helmet>
   );
 };

package/src/components/theme/Login/Login.jsx

@@ -239,6 +239,7 @@ class Login extends Component {
                         <Input
                           type="password"
                           id="password"
+                          autoComplete="current-password"
                           name="password"
                           placeholder={this.props.intl.formatMessage(
                             messages.password,

package/src/components/theme/Logo/Logo.jsx

@@ -8,6 +8,7 @@ import { Image } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
+import { toBackendLang } from '@plone/volto/helpers';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 
 const messages = defineMessages({
@@ -34,13 +35,15 @@ const Logo = () => {
 
   return (
     <UniversalLink
-      href={settings.isMultilingual ? `/${lang}` : '/'}
+      href={settings.isMultilingual ? `/${toBackendLang(lang)}` : '/'}
       title={intl.formatMessage(messages.site)}
     >
       <Image
         src={LogoImage}
         alt={intl.formatMessage(messages.plonesite)}
         title={intl.formatMessage(messages.plonesite)}
+        width="158.2"
+        height="40.7"
       />
     </UniversalLink>
   );

package/src/components/theme/MultilingualRedirector/MultilingualRedirector.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux';
 import { useCookies } from 'react-cookie';
 import config from '@plone/volto/registry';
 import { changeLanguage } from '@plone/volto/actions';
-import { normalizeLanguageName } from '@plone/volto/helpers';
+import { toGettextLang } from '@plone/volto/helpers';
 
 const MultilingualRedirector = (props) => {
   const { settings } = config;
@@ -23,7 +23,7 @@ const MultilingualRedirector = (props) => {
     // const detectedLang = (navigator.language || navigator.userLanguage).substring(0, 2);
     let mounted = true;
     if (settings.isMultilingual && pathname === '/') {
-      const langFileName = normalizeLanguageName(redirectToLanguage);
+      const langFileName = toGettextLang(redirectToLanguage);
       import('@root/../locales/' + langFileName + '.json').then((locale) => {
         if (mounted) {
           dispatch(changeLanguage(redirectToLanguage, locale.default));

package/src/components/theme/Navigation/NavItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL, toBackendLang } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 const NavItem = ({ item, lang }) => {
@@ -15,7 +15,9 @@ const NavItem = ({ item, lang }) => {
         className="item"
         activeClassName="active"
         exact={
-          settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
+          settings.isMultilingual
+            ? item.url === `/${toBackendLang(lang)}`
+            : item.url === ''
         }
       >
         {item.title}

package/src/components/theme/NotFound/NotFound.jsx

@@ -1,53 +1,67 @@
-/**
- * Home container.
- * @module components/theme/NotFound/NotFound
- */
-
-import React from 'react';
+import { useEffect } from 'react';
+import { BodyClass, toBackendLang } from '@plone/volto/helpers';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 import { Container } from 'semantic-ui-react';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { getNavigation } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
 
 /**
  * Not found function.
  * @function NotFound
  * @returns {string} Markup of the not found page.
  */
-const NotFound = () => (
-  <Container className="view-wrapper">
-    <h1>
-      <FormattedMessage
-        id="This page does not seem to exist…"
-        defaultMessage="This page does not seem to exist…"
-      />
-    </h1>
-    <p className="description">
-      <FormattedMessage
-        id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-        defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
-      />
-    </p>
-    <p>
-      <FormattedMessage
-        id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
-        values={{
-          site_admin: (
-            <Link to="/contact-form">
-              <FormattedMessage
-                id="Site Administration"
-                defaultMessage="Site Administration"
-              />
-            </Link>
-          ),
-        }}
-      />
-    </p>
-    <p>
-      <FormattedMessage id="Thank you." defaultMessage="Thank you." />
-    </p>
-  </Container>
-);
+const NotFound = () => {
+  const dispatch = useDispatch();
+  const lang = useSelector((state) => state.intl.locale);
+
+  useEffect(() => {
+    dispatch(
+      getNavigation(
+        config.settings.isMultilingual ? `/${toBackendLang(lang)}` : '/',
+        config.settings.navDepth,
+      ),
+    );
+  }, [dispatch, lang]);
+
+  return (
+    <Container className="view-wrapper">
+      <BodyClass className="page-not-found" />
+      <h1>
+        <FormattedMessage
+          id="This page does not seem to exist…"
+          defaultMessage="This page does not seem to exist…"
+        />
+      </h1>
+      <p className="description">
+        <FormattedMessage
+          id="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+          defaultMessage="We apologize for the inconvenience, but the page you were trying to access is not at this address. You can use the links below to help you find what you are looking for."
+        />
+      </p>
+      <p>
+        <FormattedMessage
+          id="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          defaultMessage="If you are certain you have the correct web address but are encountering an error, please contact the {site_admin}."
+          values={{
+            site_admin: (
+              <Link to="/contact-form">
+                <FormattedMessage
+                  id="Site Administration"
+                  defaultMessage="Site Administration"
+                />
+              </Link>
+            ),
+          }}
+        />
+      </p>
+      <p>
+        <FormattedMessage id="Thank you." defaultMessage="Thank you." />
+      </p>
+    </Container>
+  );
+};
 
 export default withServerErrorCode(404)(NotFound);

package/src/components/theme/PasswordReset/PasswordReset.jsx

@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'My username is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'My email is',
@@ -50,8 +50,8 @@ const messages = defineMessages({
     defaultMessage: 'New password',
   },
   passwordDescription: {
-    id: 'Enter your new password. Minimum 5 characters.',
-    defaultMessage: 'Enter your new password. Minimum 5 characters.',
+    id: 'Enter your new password. Minimum 8 characters.',
+    defaultMessage: 'Enter your new password. Minimum 8 characters.',
   },
   passwordRepeatTitle: {
     id: 'Confirm password',
@@ -227,6 +227,9 @@ class PasswordReset extends Component {
       );
     }
     if (this.props.token) {
+      const errmsg = this.props.error
+        ? this.props.error.response.body.error
+        : null;
       return (
         <div id="page-password-reset">
           <Helmet
@@ -238,7 +241,7 @@ class PasswordReset extends Component {
               description={this.props.intl.formatMessage(messages.description)}
               onSubmit={this.onSubmit}
               onCancel={this.onCancel}
-              error={this.state.error || this.props.error}
+              error={this.state.error || errmsg}
               schema={{
                 fieldsets: [
                   {

package/src/components/theme/PasswordReset/RequestPasswordReset.jsx

@@ -32,7 +32,7 @@ const messages = defineMessages({
   },
   usernameTitle: {
     id: 'label_my_username_is',
-    defaultMessage: 'My username is',
+    defaultMessage: 'My user name is',
   },
   emailTitle: {
     id: 'label_my_email_is',