@kitconcept/volto-light-theme 5.0.0 → 6.0.0-alpha.0

package/src/components/Blocks/EventMetadata/View.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { FormattedDate } from '@plone/volto/components';
-import { UniversalLink } from '@plone/volto/components';
-import { expandToBackendURL } from '@plone/volto/helpers';
+import { FormattedMessage, useIntl } from 'react-intl';
+import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 import { Container } from '@plone/components';
 
 const EventMetadataView = (props) => {
@@ -14,6 +14,7 @@ const EventMetadataView = (props) => {
     hour: 'numeric',
     minute: 'numeric',
   };
+  const intl = useIntl();
 
   return (
     <div className="block eventMetadata ">
@@ -29,7 +30,7 @@ const EventMetadataView = (props) => {
                 {content?.start && (
                   <FormattedDate date={content?.start} format={dateOptions} />
                 )}{' '}
-                {props.intl.locale === 'de' ? ' Uhr' : ''}
+                {intl.locale === 'de' ? ' Uhr' : ''}
               </div>
               <div className="separator"></div>
             </div>
@@ -43,7 +44,7 @@ const EventMetadataView = (props) => {
                 {content?.end && (
                   <FormattedDate date={content?.end} format={dateOptions} />
                 )}{' '}
-                {props.intl.locale === 'de' ? ' Uhr' : ''}
+                {intl.locale === 'de' ? ' Uhr' : ''}
               </div>
               <div className="separator"></div>
             </div>
@@ -127,4 +128,4 @@ const EventMetadataView = (props) => {
   );
 };
 
-export default injectIntl(EventMetadataView);
+export default EventMetadataView;

package/src/components/Blocks/Image/Edit.jsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
-import { ImageSidebar, SidebarPortal } from '@plone/volto/components';
+import ImageSidebar from '@plone/volto/components/manage/Blocks/Image/ImageSidebar';
+import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 
-import {
-  flattenToAppURL,
-  isInternalURL,
-  withBlockExtensions,
-} from '@plone/volto/helpers';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 import config from '@plone/volto/registry';
 
 import { ImageInput } from '@plone/volto/components/manage/Widgets/ImageWidget';

package/src/components/Blocks/Image/ImageSidebar.jsx

@@ -2,8 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Segment, Button } from 'semantic-ui-react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
-import { BlockDataForm, Icon, Image } from '@plone/volto/components';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import Image from '@plone/volto/components/theme/Image/Image';
 import { ImageSchema } from '@plone/volto/components/manage/Blocks/Image/schema';
 import imageSVG from '@plone/volto/icons/image.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';

package/src/components/Blocks/Image/View.jsx

@@ -5,14 +5,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UniversalLink } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import cx from 'classnames';
 import Caption from '../../Caption/Caption';
-import {
-  flattenToAppURL,
-  isInternalURL,
-  withBlockExtensions,
-} from '@plone/volto/helpers';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers/Url/Url';
+import { withBlockExtensions } from '@plone/volto/helpers/Extensions';
 import config from '@plone/volto/registry';
 
 /**

package/src/components/Blocks/Image/schema.js

@@ -1,5 +1,6 @@
 import { defineMessages } from 'react-intl';
-import { insertInArray } from '@plone/volto/helpers/Utils/Utils';
+import { insertInArray, reorderArray } from '@plone/volto/helpers/Utils/Utils';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   Description: {
@@ -10,10 +11,15 @@ const messages = defineMessages({
     id: 'Title',
     defaultMessage: 'Title',
   },
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
 });
 
 export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
   if (formData.url) {
+    schema.fieldsets = reorderArray(schema.fieldsets, 2, 1);
     schema.fieldsets[0].fields = insertInArray(
       schema.fieldsets[0].fields,
       'description',
@@ -24,6 +30,30 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
       'title',
       1,
     );
+
+    schema.properties.styles.schema.fieldsets[0].fields = [
+      'blockWidth:noprefix',
+      '--image-aspect-ratio',
+      ...schema.properties.styles.schema.fieldsets[0].fields,
+    ];
+
+    schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+      widget: 'blockWidth',
+      title: intl.formatMessage(messages.BlockWidth),
+      default: 'default',
+      filterActions: ['narrow', 'default', 'layout', 'full'],
+      actions: config.blocks.widths,
+    };
+
+    schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
+      widget: 'select',
+      title: 'Aspect Ratio',
+      choices: [
+        ['1', '1:1'],
+        ['16 / 9', '16/9'],
+      ],
+    };
+
     schema.properties.description = {
       title: intl.formatMessage(messages.Description),
       widget: 'textarea',
@@ -33,12 +63,13 @@ export const imageBlockSchemaEnhancer = ({ formData, schema, intl }) => {
     };
   }
   schema.properties.align.default = 'center';
-  schema.properties.align.actions = ['left', 'right', 'center', 'wide', 'full'];
+  schema.properties.align.actions = ['left', 'right', 'center'];
+
   schema.properties.size.default = 'l';
-  schema.properties.size.disabled =
-    formData.align === 'full' ||
-    formData.align === 'wide' ||
-    formData.align === 'center';
+  schema.properties.size.disabled = formData.align === 'center';
+
+  schema.properties.styles.schema.properties['blockWidth:noprefix'].disabled =
+    formData.align === 'left' || formData.align === 'right';
 
   return schema;
 };

package/src/components/Blocks/Listing/DefaultTemplate.jsx

@@ -1,8 +1,9 @@
 // See Customization for more info
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ConditionalLink, UniversalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 

package/src/components/Blocks/Listing/GridTemplate.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ConditionalLink, Component } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import Component from '@plone/volto/components/theme/Component/Component';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
 import config from '@plone/volto/registry';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';

package/src/components/Blocks/Listing/ImageGallery.jsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import loadable from '@loadable/component';
 import 'react-image-gallery/styles/css/image-gallery.css';
 import { Button } from 'semantic-ui-react';
-import { Icon } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 import galleryLeftSVG from '../../../icons/left-key.svg';

package/src/components/Blocks/Listing/SummaryTemplate.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ConditionalLink, Component } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import Component from '@plone/volto/components/theme/Component/Component';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';

package/src/components/Blocks/Search/components/SearchInput.jsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { Button, Input } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import loupeSVG from '@plone/volto/icons/zoom.svg';
 
 const messages = defineMessages({

package/src/components/Blocks/Separator/schema.js

@@ -0,0 +1,59 @@
+import { defineMessages } from 'react-intl';
+import { defaultStylingSchema } from '../schema';
+
+const messages = defineMessages({
+  BlockWidth: {
+    id: 'Block Width',
+    defaultMessage: 'Block Width',
+  },
+  Alignment: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+  shortline: {
+    id: 'Short line',
+    defaultMessage: 'Short line',
+  },
+});
+
+export const SeparatorStylingSchema = ({ schema, formData, intl }) => {
+  defaultStylingSchema({ schema, formData, intl });
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'blockWidth:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties['blockWidth:noprefix'] = {
+    widget: 'blockWidth',
+    title: intl.formatMessage(messages.BlockWidth),
+    default: 'default',
+    filterActions: ['narrow', 'default'],
+  };
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'align:noprefix',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties['align:noprefix'] = {
+    widget: 'blockAlignment',
+    title: intl.formatMessage(messages.Alignment),
+    default: 'left',
+  };
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    'shortLine',
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+  ];
+
+  schema.properties.styles.schema.properties.shortLine = {
+    title: intl.formatMessage(messages.shortline),
+    type: 'boolean',
+  };
+
+  schema.properties.styles.schema.properties['align:noprefix'].disabled =
+    !formData?.styles?.shortLine;
+
+  return schema;
+};

package/src/components/Blocks/Slider/DefaultBody.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { Icon, MaybeWrap, UniversalLink } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import { Input, Button, Message } from 'semantic-ui-react';
-import { isInternalURL } from '@plone/volto/helpers';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import cx from 'classnames';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';

package/src/components/Blocks/Teaser/schema.js

@@ -1,10 +1,30 @@
 export const teaserSchemaEnhancer = ({ schema, formData, intl }) => {
   schema.properties.href.selectedItemAttrs.push('getRemoteUrl');
 
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    '--image-aspect-ratio',
+  ];
+
+  schema.properties.styles.schema.properties['--image-aspect-ratio'] = {
+    widget: 'select',
+    title: 'Aspect Ratio',
+    choices: [
+      ['1', '1:1'],
+      ['16 / 9', '16/9'],
+    ],
+  };
+
   return schema;
 };
 
+// Not sure why, but it was in the new one, check with blockModel3
+// export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
+//   schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+//   return schema;
+// };
 export const gridTeaserDisableStylingSchema = ({ schema, formData, intl }) => {
-  schema.fieldsets = schema.fieldsets.filter((item) => item.id !== 'styling');
+  // Remove all the existing fields from the default schema
+  schema.properties.styles.schema.fieldsets[0].fields = [];
   return schema;
 };

package/src/components/Blocks/schema.js

@@ -10,28 +10,29 @@ const messages = defineMessages({
 });
 
 export const defaultStylingSchema = ({ schema, formData, intl }) => {
-  const BG_COLORS = [
-    { name: 'transparent', label: 'Transparent' },
-    { name: 'grey', label: 'Grey' },
-  ];
-
-  const colors =
-    config.blocks?.blocksConfig?.[formData['@type']]?.colors || BG_COLORS;
+  const themes =
+    config.blocks?.blocksConfig?.[formData['@type']]?.themes ||
+    config.blocks.themes;
 
-  const defaultBGColor =
-    config.blocks?.blocksConfig?.[formData['@type']]?.defaultBGColor;
+  const defaultTheme =
+    config.blocks?.blocksConfig?.[formData['@type']]?.defaultTheme ||
+    // The default color is the first color in the themes list
+    config.blocks.themes?.[0].name;
 
   addStyling({ schema, intl });
 
-  schema.properties.styles.schema.fieldsets[0].fields = [
-    ...schema.properties.styles.schema.fieldsets[0].fields,
-    'backgroundColor',
+  const stylingIndex = schema.fieldsets.findIndex(
+    (item) => item.id === 'styling',
+  );
+  schema.fieldsets[stylingIndex].fields = [
+    ...schema.fieldsets[stylingIndex].fields,
+    'theme',
   ];
-  schema.properties.styles.schema.properties.backgroundColor = {
+  schema.properties.theme = {
     widget: 'color_picker',
     title: intl.formatMessage(messages.backgroundColor),
-    colors,
-    default: defaultBGColor,
+    themes,
+    default: defaultTheme,
   };
 
   return schema;

package/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -7,9 +7,10 @@ import { Link } from 'react-router-dom';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from '@plone/components';
 
-import { Icon } from '@plone/volto/components';
-import { getBreadcrumbs } from '@plone/volto/actions';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { getBreadcrumbs } from '@plone/volto/actions/breadcrumbs/breadcrumbs';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
 
 import homeSVG from '@plone/volto/icons/home.svg';
 

package/src/components/Footer/Footer.jsx

@@ -1,11 +1,13 @@
 // SemanticUI-free pre-@plone/components
 import React from 'react';
-
+import isEmpty from 'lodash/isEmpty';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import { useSelector, shallowEqual } from 'react-redux';
-import { UniversalLink, Logo } from '@plone/volto/components';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import Logo from '@plone/volto/components/theme/Logo/Logo';
 import { Container } from '@plone/components';
-import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, addAppURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -30,9 +32,13 @@ const Footer = ({ intl }) => {
     }),
     shallowEqual,
   );
+  const navroot = useSelector((state) => state.navroot.data.navroot);
+  const footerLinks = navroot?.footer_links;
+  const footerLogos = navroot?.footer_logos;
+
   return (
     <footer id="footer">
-      <Container layout className="footer">
+      <Container className="footer">
         <div className="footer-message">
           <FormattedMessage
             id="The {plonecms} is {copyright} 2000-{current_year} by the {plonefoundation} and friends."
@@ -78,29 +84,73 @@ const Footer = ({ intl }) => {
             }}
           />
         </div>
-        <ul>
-          {/* wrap in div for a11y reasons: listitem role cannot be on the <a> element directly */}
-          {siteActions?.length
-            ? siteActions.map((item) => (
-                <li className="item" key={item.id}>
-                  <UniversalLink
-                    className="item"
-                    href={
-                      settings.isMultilingual
-                        ? `/${lang}/${
-                            item.url
-                              ? flattenToAppURL(item.url)
-                              : addAppURL(item.id)
-                          }`
-                        : item.url
-                          ? flattenToAppURL(item.url)
-                          : addAppURL(item.id)
-                    }
-                  >
-                    {item?.title}
-                  </UniversalLink>
-                </li>
-              ))
+        <ul className="footer-links">
+          {!isEmpty(footerLinks?.blocks)
+            ? footerLinks.blocks_layout.items.map((itemId) => {
+                const link = footerLinks.blocks[itemId];
+                const title = link.title || link.href[0]['title'];
+                const href = flattenToAppURL(link.href[0]['@id']);
+
+                if (!href) return null;
+
+                return (
+                  <li className="item" key={href}>
+                    <UniversalLink href={href}>{title}</UniversalLink>
+                  </li>
+                );
+              })
+            : siteActions?.length
+              ? siteActions.map((item) => (
+                  <li className="item" key={item.id}>
+                    <UniversalLink
+                      className="item"
+                      href={
+                        settings.isMultilingual
+                          ? `/${lang}/${
+                              item.url
+                                ? flattenToAppURL(item.url)
+                                : addAppURL(item.id)
+                            }`
+                          : item.url
+                            ? flattenToAppURL(item.url)
+                            : addAppURL(item.id)
+                      }
+                    >
+                      {item?.title}
+                    </UniversalLink>
+                  </li>
+                ))
+              : null}
+        </ul>
+        <ul className="footer-logos">
+          {!isEmpty(footerLogos?.blocks)
+            ? footerLogos.blocks_layout.items.map((itemId) => {
+                const logo = footerLogos.blocks[itemId];
+                let logoHref, hrefTitle, href, srcAlt, src;
+                if (logo?.href) {
+                  hrefTitle = logo.href[0]['title'];
+                  href = flattenToAppURL(logo.href[0]['@id']);
+                }
+                if (logo?.logo) {
+                  logoHref = logo.logo[0]['@id'];
+                  srcAlt = logo['alt'];
+                  src = `${flattenToAppURL(logoHref)}/${logo.logo[0].image_scales[logo.logo[0].image_field][0].download}`;
+                }
+
+                if (!src) return null;
+
+                return (
+                  <li className="item" key={href}>
+                    <ConditionalLink
+                      condition={href}
+                      to={href}
+                      title={hrefTitle || srcAlt}
+                    >
+                      <img src={src} alt={srcAlt} />
+                    </ConditionalLink>
+                  </li>
+                );
+              })
             : null}
         </ul>
         <div className="logo">

package/src/components/Header/Header.jsx

@@ -8,14 +8,14 @@ import config from '@plone/volto/registry';
 import cx from 'classnames';
 import IntranetSearchWidget from '../SearchWidget/IntranetSearchWidget';
 
-import {
-  Anontools,
-  LanguageSelector,
-  Logo,
-  Navigation,
-  SearchWidget,
-  UniversalLink,
-} from '@plone/volto/components';
+import Anontools from '@plone/volto/components/theme/Anontools/Anontools';
+import LanguageSelector from '@plone/volto/components/theme/LanguageSelector/LanguageSelector';
+import Logo from '@plone/volto/components/theme/Logo/Logo';
+import Navigation from '@plone/volto/components/theme/Navigation/Navigation';
+import SearchWidget from '@plone/volto/components/theme/SearchWidget/SearchWidget';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
 
 const messages = defineMessages({
   siteLabel: {
@@ -74,7 +74,9 @@ const IntranetHeader = ({ pathname, siteLabel, token, siteAction }) => {
             {!token && <Anontools />}
             {siteAction &&
               siteAction.map((item) => (
-                <UniversalLink href={item.url}>{item.title}</UniversalLink>
+                <UniversalLink key={item.url} href={item.url}>
+                  {item.title}
+                </UniversalLink>
               ))}
           </div>
           {siteLabel && (
@@ -105,9 +107,11 @@ const Header = (props) => {
   let siteLabel = config.settings.siteLabel;
   const intranetHeader = config.settings.intranetHeader;
   const token = useSelector((state) => state.userSession.token);
+  const content = useSelector((state) => state.content.data);
   const siteAction = useSelector(
     (state) => state.content.data?.['@components']?.actions?.site_actions,
   );
+  const navRoot = useSelector((state) => state.navroot?.data?.navroot);
   const intl = useIntl();
   const translatedSiteLabel = intl.formatMessage(messages.siteLabel);
 
@@ -118,27 +122,30 @@ const Header = (props) => {
       : siteLabel);
 
   return (
-    <header
-      className={cx('header-wrapper', { 'intranet-header': intranetHeader })}
-    >
-      <Container layout>
-        {intranetHeader ? (
-          <IntranetHeader
-            pathname={pathname}
-            siteLabel={siteLabel}
-            token={token}
-            siteAction={siteAction}
-          />
-        ) : (
-          <InternetHeader
-            pathname={pathname}
-            siteLabel={siteLabel}
-            token={token}
-            siteAction={siteAction}
-          />
-        )}
-      </Container>
-    </header>
+    <>
+      <SlotRenderer name="aboveHeader" content={content} navRoot={navRoot} />
+      <header
+        className={cx('header-wrapper', { 'intranet-header': intranetHeader })}
+      >
+        <Container layout>
+          {intranetHeader ? (
+            <IntranetHeader
+              pathname={pathname}
+              siteLabel={siteLabel}
+              token={token}
+              siteAction={siteAction}
+            />
+          ) : (
+            <InternetHeader
+              pathname={pathname}
+              siteLabel={siteLabel}
+              token={token}
+              siteAction={siteAction}
+            />
+          )}
+        </Container>
+      </header>
+    </>
   );
 };