Volto upgrade 16.20.1

package.json

@@ -30,7 +30,7 @@
     "@mdi/svg": "7.2.96",
     "html-react-parser": "3.0.15",
     "material-icons": "1.13.4",
-    "nsw-design-system": "3.3.0",
+    "nsw-design-system": "3.5.1",
     "react-color": "2.19.3",
     "volto-form-block": "3.0.1",
     "volto-google-analytics": "2.0.0",
@@ -39,7 +39,7 @@
     "volto-subfooter": "2.0.0"
   },
   "peerDependencies": {
-    "@plone/volto": ">= 16.6.0 < 17.0.0"
+    "@plone/volto": ">= 16.20.1 < 17.0.0"
   },
   "devDependencies": {
     "@plone/scripts": ">= 2.2.2",

razzle.extend.js

@@ -2,32 +2,7 @@ const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
 const fileLoaderFinder = makeLoaderFinder('file-loader');
 
 const plugins = (defaultPlugins) => {
-  return [
-    {
-      name: 'scss',
-      options: {
-        sass: {
-          dev: {
-            sassOptions: {
-              outputStyle: 'expanded',
-              sourceMap: true,
-              includePaths: ['node_modules'],
-              quiet: true,
-            },
-          },
-          prod: {
-            sassOptions: {
-              outputStyle: 'expanded',
-              sourceMap: true,
-              includePaths: ['node_modules'],
-              quiet: true,
-            },
-          },
-        },
-      },
-    },
-    ...defaultPlugins,
-  ];
+  return [...defaultPlugins];
 };
 const modifyWebpackConfig = (config, { target, dev }, webpack) => {
   const fileLoader = config.module.rules.find(fileLoaderFinder);

src/components/Components/Card.jsx

@@ -104,20 +104,14 @@ export function Card({
           )}
         </div>
         {description ? (
-          <div className="nsw-card__copy">
-            {isValidElement(description) ? (
-              description
-            ) : (
-              <div dangerouslySetInnerHTML={{ __html: description.data }}></div>
-            )}
-            {/* {!isEditMode ? (
-              description
-            ) : isValidElement(description) ? (
-              <span dangerouslySetInnerHTML={{ __html: description }}></span>
-            ) : (
-              description
-            )} */}
-          </div>
+          isValidElement(description) ? (
+            <div className="nsw-card__copy">{description}</div>
+          ) : (
+            <div
+              className="nsw-card__copy"
+              dangerouslySetInnerHTML={{ __html: description.data }}
+            ></div>
+          )
         ) : null}
 
         {icon ? icon : <DefaultIcon />}

src/components/Components/Hero.jsx

@@ -1,6 +1,5 @@
 import { UniversalLink } from '@plone/volto/components';
 import cx from 'classnames';
-import './Hero.less';
 
 const widthClassnameMapping = {
   wide: 'nsw-hero-banner--wide',

src/components/Components/InPageAlert.jsx

@@ -96,6 +96,7 @@ export function InPageAlert({
           {isValidElement(content) ? (
             content
           ) : (
+            // TODO: Headings in the alert should have an `nsw-h5` class on them ass of 3.5.1
             <div
               className="nsw-in-page-alert__content"
               dangerouslySetInnerHTML={{ __html: content }}

src/customizations/@root/theme.js

@@ -0,0 +1,13 @@
+// Don't use the full Pastanaga theme
+import '@plone/volto/../theme/themes/pastanaga-cms-ui/extras/cms-ui.semantic.less';
+import '@plone/volto/../theme/themes/pastanaga/extras/extras.less';
+
+// Custom fonts
+import '@fontsource/public-sans/400-italic.css';
+import '@fontsource/public-sans/400.css';
+import '@fontsource/public-sans/700-italic.css';
+import '@fontsource/public-sans/700.css';
+import 'material-icons/iconfont/material-icons.css';
+
+// Rest of the theme. Includes the NSW Design System import
+import 'nsw-design-system-plone6/theme/theme.scss';

src/customizations/volto/components/manage/Blocks/Image/Edit.jsx

@@ -38,6 +38,10 @@ const messages = defineMessages({
     id: 'Browse the site, drop an image, or type an URL',
     defaultMessage: 'Browse the site, drop an image, or type an URL',
   },
+  uploadingImage: {
+    id: 'Uploading image',
+    defaultMessage: 'Uploading image',
+  },
 });
 
 /**
@@ -266,7 +270,11 @@ class Edit extends Component {
                       {this.state.dragging && <Dimmer active></Dimmer>}
                       {this.state.uploading && (
                         <Dimmer active>
-                          <Loader indeterminate>Uploading image</Loader>
+                          <Loader indeterminate>
+                            {this.props.intl.formatMessage(
+                              messages.uploadingImage,
+                            )}
+                          </Loader>
                         </Dimmer>
                       )}
                       <div className="no-image-wrapper">

src/customizations/volto/components/manage/Blocks/Listing/ListingBody.jsx

@@ -1,9 +1,12 @@
+// Not implemented: NoResults component is not implemented (https://github.com/plone/volto/pull/3602)
+
 import { Pagination } from '@plone/volto/components';
 import withQuerystringResults from '@plone/volto/components/manage/Blocks/Listing/withQuerystringResults';
 import config from '@plone/volto/registry';
 import { createRef } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Dimmer, Loader } from 'semantic-ui-react';
+import cx from 'classnames';
 
 const NoResults = ({ hasLoaded, customMessage }) => {
   if (customMessage && customMessage !== '<p></p>') {
@@ -58,44 +61,59 @@ const ListingBody = withQuerystringResults((props) => {
   }
 
   const listingRef = createRef();
+  const HeadlineTag = data.headlineTag || 'h2';
+
   const customMessage = data.noResultsMessage?.data;
 
-  return listingItems?.length > 0 ? (
-    <div ref={listingRef}>
-      <ListingBodyTemplate
-        items={listingItems}
-        isEditMode={isEditMode}
-        {...data}
-        {...variation}
-      />
-      {totalPages > 1 && (
-        <div className="pagination-wrapper">
-          <Pagination
-            current={currentPage}
-            total={totalPages}
-            onChangePage={(e, { activePage }) => {
-              !isEditMode &&
-                listingRef.current.scrollIntoView({ behavior: 'smooth' });
-              onPaginationChange(e, { activePage });
-            }}
+  return (
+    <>
+      {data.headline && (
+        <HeadlineTag
+          className={cx('headline', {
+            emptyListing: !listingItems?.length > 0,
+          })}
+        >
+          {data.headline}
+        </HeadlineTag>
+      )}
+      {listingItems?.length > 0 ? (
+        <div ref={listingRef}>
+          <ListingBodyTemplate
+            items={listingItems}
+            isEditMode={isEditMode}
+            {...data}
+            {...variation}
           />
+          {totalPages > 1 && (
+            <div className="pagination-wrapper">
+              <Pagination
+                current={currentPage}
+                total={totalPages}
+                onChangePage={(e, { activePage }) => {
+                  !isEditMode &&
+                    listingRef.current.scrollIntoView({ behavior: 'smooth' });
+                  onPaginationChange(e, { activePage });
+                }}
+              />
+            </div>
+          )}
+        </div>
+      ) : isEditMode ? (
+        <div className="listing message" ref={listingRef}>
+          {isFolderContentsListing && (
+            <FormattedMessage
+              id="No items found in this container."
+              defaultMessage="No items found in this container."
+            />
+          )}
+          <NoResults hasLoaded={hasLoaded} customMessage={customMessage} />
+        </div>
+      ) : (
+        <div>
+          <NoResults hasLoaded={hasLoaded} customMessage={customMessage} />
         </div>
       )}
-    </div>
-  ) : isEditMode ? (
-    <div className="listing message" ref={listingRef}>
-      {isFolderContentsListing && (
-        <FormattedMessage
-          id="No items found in this container."
-          defaultMessage="No items found in this container."
-        />
-      )}
-      <NoResults hasLoaded={hasLoaded} customMessage={customMessage} />
-    </div>
-  ) : (
-    <div>
-      <NoResults hasLoaded={hasLoaded} customMessage={customMessage} />
-    </div>
+    </>
   );
 });
 

src/customizations/volto/components/manage/Blocks/Search/components/FilterList.jsx

@@ -49,6 +49,7 @@ const FilterList = (props) => {
                   facets[facet].map((value) => {
                     return (
                       <button
+                        key={value}
                         onClick={() => {
                           removeFilter({ facet: facet, value: value });
                         }}

src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -114,15 +114,19 @@ function normalizeState({
     block: id,
   };
 
-  // TODO: need to check if SearchableText facet is not already in the query
-  // Ideally the searchtext functionality should be restructured as being just
-  // another facet
-  params.query = params.query.reduce(
-    // Remove SearchableText from query
-    (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
-    [],
-  );
+  // Note Ideally the searchtext functionality should be restructured as being just
+  // another facet. But right now it's the same. This means that if a searchText
+  // is provided, it will override the SearchableText facet.
+  // If there is no searchText, the SearchableText in the query remains in effect.
+  // TODO eventually the searchText should be a distinct facet from SearchableText, and
+  // the two conditions could be combined, in comparison to the current state, when
+  // one overrides the other.
   if (searchText) {
+    params.query = params.query.reduce(
+      // Remove SearchableText from query
+      (acc, kvp) => (kvp.i === 'SearchableText' ? acc : [...acc, kvp]),
+      [],
+    );
     params.query.push({
       i: 'SearchableText',
       o: 'plone.app.querystring.operation.string.contains',
@@ -278,16 +282,22 @@ const withSearch = (options) => (WrappedComponent) => {
     const timeoutRef = React.useRef();
     const facetSettings = data?.facets;
 
+    const deepQuery = JSON.stringify(data.query);
     const onTriggerSearch = React.useCallback(
-      (toSearchText, toSearchFacets, toSortOn, toSortOrder) => {
+      (
+        toSearchText = undefined,
+        toSearchFacets = undefined,
+        toSortOn = undefined,
+        toSortOrder = undefined,
+      ) => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(
           () => {
             const searchData = normalizeState({
               id,
               query: data.query || {},
               facets: toSearchFacets || facets,
-              searchText: toSearchText,
+              searchText: toSearchText || searchText,
               sortOn: toSortOn ?? sortOn,
               sortOrder: toSortOrder ?? sortOrder,
               facetSettings,
@@ -310,11 +320,15 @@ const withSearch = (options) => (WrappedComponent) => {
           toSearchFacets ? inputDelay / 3 : inputDelay,
         );
       },
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [
+        // Use deep comparison of data.query
+        deepQuery,
         data.query,
         facets,
         id,
         setLocationSearchData,
+        searchText,
         sortOn,
         sortOrder,
         facetSettings,

src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -86,7 +86,7 @@ function Footer() {
       siteSettings && siteSettings[fieldname] && !!siteSettings[fieldname],
   );
   const acknowledgementOfCountry =
-    siteSettings?.acknowledgement_of_country ??
+    siteSettings?.acknowledgement_of_country ||
     intl.formatMessage(messages.acknowledgementOfCountry);
 
   return (

src/customizations/volto/components/theme/Header/Header.jsx

@@ -74,27 +74,7 @@ const SearchStartButton = ({ searchInputElement }) => {
         </button>
       ) : (
         // Below styling is only for buttons in the NSW Design System code unfortunately.
-        <UniversalLink
-          href="/search"
-          style={{
-            fontSize: 'var(--nsw-font-size-xxs-mobile)',
-            lineHeight: 'var(--nsw-line-height-xxs-mobile)',
-            fontWeight: 'var(--nsw-font-bold)',
-            borderRadius: 'var(--nsw-border-radius)',
-            textAlign: 'center',
-            color: 'var(--nsw-brand-dark)',
-            width: '3rem',
-            height: '3rem',
-            background: '0 0',
-            border: '0',
-            padding: '0',
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-          }}
-        >
+        <UniversalLink href="/search">
           <Icon
             name={SearchSVG}
             className="material-icons nsw-material-icons"

src/customizations/volto/components/theme/View/EventView.jsx

@@ -13,9 +13,7 @@ import { EventDetails } from '@plone/volto/components';
 const EventTextfieldView = ({ content }) => (
   <React.Fragment>
     {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
-    {content.description && (
-      <p className="nsw-intro">{content.description}</p>
-    )}
+    {content.description && <p className="nsw-intro">{content.description}</p>}
     {content.image && (
       <Image
         className="document-image"

src/customizations/volto/components/theme/View/NewsItemView.jsx

@@ -21,7 +21,10 @@ import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
  */
 const NewsItemView = ({ content }) => {
   return (
-    <div id="page-document" className="view-wrapper event-view nsw-container">
+    <div
+      id="page-document"
+      className="view-wrapper newsitem-view nsw-container"
+    >
       <div className="nsw-layout">
         <div className="nsw-layout__main">
           {hasBlocksData(content) ? (

src/index.js

@@ -1,5 +1,4 @@
 import applyAddonConfig from './config';
-import './theme.js';
 
 const applyConfig = (config) => {
   applyAddonConfig(config);