@plone/volto 16.21.3 → 16.22.0

package/src/components/theme/View/SummaryView.jsx

@@ -6,9 +6,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container } from 'semantic-ui-react';
+import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
 import PreviewImage from '../PreviewImage/PreviewImage';
+import config from '@plone/volto/registry';
 
 /**
  * Summary view component class.
@@ -16,43 +17,51 @@ import PreviewImage from '../PreviewImage/PreviewImage';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const SummaryView = ({ content }) => (
-  <Container className="view-wrapper summary-view">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        {content.items.map((item) => (
-          <article key={item.url}>
-            <h2>
-              <UniversalLink item={item} title={item['@type']}>
-                {item.title}
-              </UniversalLink>
-            </h2>
-            {item.image_field && (
-              <PreviewImage
-                item={item}
-                alt={item.image_caption ? item.image_caption : item.title}
-                size="thumb"
-                className="ui image floated right clear"
-              />
-            )}
-            {item.description && <p>{item.description}</p>}
-            <p>
-              <UniversalLink item={item}>
-                <FormattedMessage id="Read More…" defaultMessage="Read More…" />
-              </UniversalLink>
-            </p>
-          </article>
-        ))}
-      </section>
-    </article>
-  </Container>
-);
+const SummaryView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper summary-view">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          {content.items.map((item) => (
+            <article key={item.url}>
+              <h2>
+                <UniversalLink item={item} title={item['@type']}>
+                  {item.title}
+                </UniversalLink>
+              </h2>
+              {item.image_field && (
+                <PreviewImage
+                  item={item}
+                  alt={item.image_caption ? item.image_caption : item.title}
+                  size="thumb"
+                  className="ui image floated right clear"
+                />
+              )}
+              {item.description && <p>{item.description}</p>}
+              <p>
+                <UniversalLink item={item}>
+                  <FormattedMessage
+                    id="Read More…"
+                    defaultMessage="Read More…"
+                  />
+                </UniversalLink>
+              </p>
+            </article>
+          ))}
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/components/theme/View/TabularView.jsx

@@ -6,8 +6,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
-import { Container, Table } from 'semantic-ui-react';
+import { Container as SemanticContainer, Table } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
 
 /**
  * Tabular view component class.
@@ -15,59 +16,64 @@ import { FormattedMessage } from 'react-intl';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const TabularView = ({ content }) => (
-  <Container className="view-wrapper">
-    <article id="content">
-      <header>
-        <h1 className="documentFirstHeading">{content.title}</h1>
-        {content.description && (
-          <p className="documentDescription">{content.description}</p>
-        )}
-      </header>
-      <section id="content-core">
-        <Table celled padded>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>
-                <FormattedMessage id="Title" defaultMessage="Title" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage
-                  id="Description"
-                  defaultMessage="Description"
-                />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="Type" defaultMessage="Type" />
-              </Table.HeaderCell>
-              <Table.HeaderCell>
-                <FormattedMessage id="State" defaultMessage="State" />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            {content.items.map((item) => (
-              <Table.Row key={item.url}>
-                <Table.Cell>
-                  <UniversalLink
-                    item={item}
-                    className="summary url"
-                    title={item['@type']}
-                  >
-                    {item.title}
-                  </UniversalLink>
-                </Table.Cell>
-                <Table.Cell>{item.description}</Table.Cell>
-                <Table.Cell>{item['@type']}</Table.Cell>
-                <Table.Cell>{item.review_state}</Table.Cell>
+const TabularView = ({ content }) => {
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container className="view-wrapper">
+      <article id="content">
+        <header>
+          <h1 className="documentFirstHeading">{content.title}</h1>
+          {content.description && (
+            <p className="documentDescription">{content.description}</p>
+          )}
+        </header>
+        <section id="content-core">
+          <Table celled padded>
+            <Table.Header>
+              <Table.Row>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Title" defaultMessage="Title" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage
+                    id="Description"
+                    defaultMessage="Description"
+                  />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="Type" defaultMessage="Type" />
+                </Table.HeaderCell>
+                <Table.HeaderCell>
+                  <FormattedMessage id="State" defaultMessage="State" />
+                </Table.HeaderCell>
               </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      </section>
-    </article>
-  </Container>
-);
+            </Table.Header>
+            <Table.Body>
+              {content.items.map((item) => (
+                <Table.Row key={item.url}>
+                  <Table.Cell>
+                    <UniversalLink
+                      item={item}
+                      className="summary url"
+                      title={item['@type']}
+                    >
+                      {item.title}
+                    </UniversalLink>
+                  </Table.Cell>
+                  <Table.Cell>{item.description}</Table.Cell>
+                  <Table.Cell>{item['@type']}</Table.Cell>
+                  <Table.Cell>{item.review_state}</Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        </section>
+      </article>
+    </Container>
+  );
+};
 
 /**
  * Property types.

package/src/config/index.js

@@ -74,6 +74,7 @@ let config = {
     port,
     // The URL Volto is going to be served (see sensible defaults above)
     publicURL,
+    okRoute: '/ok',
     apiPath,
     apiExpanders: [
       // Add the following expanders for only issuing a single request.

package/src/config/server.js

@@ -1,6 +1,7 @@
 import imagesMiddleware from '@plone/volto/express-middleware/images';
 import filesMiddleware from '@plone/volto/express-middleware/files';
 import robotstxtMiddleware from '@plone/volto/express-middleware/robotstxt';
+import okMiddleware from '@plone/volto/express-middleware/ok';
 import sitemapMiddleware from '@plone/volto/express-middleware/sitemap';
 import staticsMiddleware from '@plone/volto/express-middleware/static';
 import devProxyMiddleware from '@plone/volto/express-middleware/devproxy';
@@ -11,6 +12,7 @@ const settings = {
     filesMiddleware(),
     imagesMiddleware(),
     robotstxtMiddleware(),
+    okMiddleware(),
     sitemapMiddleware(),
     staticsMiddleware(),
   ],

package/src/express-middleware/ok.js

@@ -0,0 +1,16 @@
+import express from 'express';
+import config from '@plone/volto/registry';
+
+const ok = function (req, res, next) {
+  res.type('text/plain');
+  res.set('Expires', 'Sat, 1 Jan 2000 00:00:00 GMT');
+  res.set('Cache-Control', 'max-age=0, must-revalidate, private');
+  res.send('ok');
+};
+
+export default function () {
+  const middleware = express.Router();
+  middleware.all(config?.settings?.okRoute || '/ok', ok);
+  middleware.id = 'ok';
+  return middleware;
+}

package/src/helpers/Url/Url.js

@@ -3,7 +3,7 @@
  * @module helpers/Url
  */
 
-import { last, memoize } from 'lodash';
+import { last, memoize, isArray, isObject, isString } from 'lodash';
 import { urlRegex, telRegex, mailRegex } from './urlRegex';
 import prependHttp from 'prepend-http';
 import config from '@plone/volto/registry';
@@ -251,6 +251,27 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Get field url
+ * @method getFieldURL
+ * @param {object} data
+ * @returns {string | any} URL string value if field is of url type or any.
+ */
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};
+
 /**
  * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
  * @method normalizeUrl

package/src/helpers/Url/Url.test.js

@@ -10,6 +10,7 @@ import {
   isCmsUi,
   isInternalURL,
   isUrl,
+  getFieldURL,
   normalizeUrl,
   removeProtocol,
   addAppURL,
@@ -260,6 +261,46 @@ describe('Url', () => {
       expect(isUrl(href)).toBe(false);
     });
   });
+  describe('getFieldURL', () => {
+    it('returns app URL if the field is a string', () => {
+      const field = `${settings.apiPath}/foo/bar`;
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with "@id"', () => {
+      const field = { '@id': '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with type URL', () => {
+      const field = { '@type': 'URL', value: '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with url or href properties', () => {
+      const fieldUrl = { url: '/foo/bar' };
+      const fieldHref = { href: '/foo/bar' };
+      expect(getFieldURL(fieldUrl)).toBe('/foo/bar');
+      expect(getFieldURL(fieldHref)).toBe('/foo/bar');
+    });
+    it('returns array of app URL if the field is an array of strings', () => {
+      const field = [
+        `${settings.apiPath}/foo/bar/1`,
+        `${settings.apiPath}/foo/bar/2`,
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+    it('returns array of app URL if the field is an array of objects', () => {
+      const field = [
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/1`,
+        },
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/2`,
+        },
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+  });
   describe('normalizeUrl', () => {
     it('normalizeUrl test', () => {
       const href = `www.example.com`;

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

@@ -26,7 +26,7 @@ body {
   &.has-toolbar-menu-open,
   &.has-mobile-menu-open {
     // The body scroll locker when the toolbar or the mobile menu are active in mobile.
-    @media only screen and (max-width: @largestMobileScreen) {
+    @media only screen and (max-width: @largestTabletScreen) {
       overflow: hidden;
     }
   }
@@ -588,4 +588,5 @@ body.has-toolbar-collapsed .mobile-menu {
 @import 'login';
 @import 'language-selector';
 @import 'views';
+@import 'toc';
 .loadUIOverrides();

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

@@ -0,0 +1,29 @@
+.table-of-contents.horizontalMenu.sticky-toc {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+}
+
+.table-of-contents.horizontalMenu .hidden {
+  z-index: -1;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.table-of-contents.horizontalMenu .hidden-dropdown {
+  display: none !important;
+}
+
+.table-of-contents.horizontalMenu .item.dropdown {
+  position: absolute !important;
+  right: 0;
+}
+
+.table-of-contents.horizontalMenu > .ui.menu {
+  position: relative;
+}
+
+.table-of-contents.horizontalMenu .item.dropdown .focused > a {
+  border: 2px solid black !important;
+  border-radius: 4px;
+}