@kitconcept/volto-light-theme 6.0.0-alpha.2 → 6.0.0-alpha.3

package/.changelog.draft

@@ -1,7 +1,13 @@
-## 6.0.0-alpha.2 (2024-11-25)
+## 6.0.0-alpha.3 (2024-12-05)
+
+### Feature
+
+- New look and feel specs for footer logos. @sneridagh
+  Added two slots: `preFooter` and `postFooter`. [#437](https://github.com/kitconcept/volto-light-theme/pull/437)
 
 ### Bugfix
 
-- Fix Image block schema bug on creation. @sneridagh [#434](https://github.com/kitconcept/volto-light-theme/pull/434)
+- Fixed edge case when you delete the image content type from the site. @sneridagh [#437](https://github.com/kitconcept/volto-light-theme/pull/437)
+- Fixed layout shift jumps on RAC Popovers. @sneridagh [#440](https://github.com/kitconcept/volto-light-theme/pull/440)
 
 

package/CHANGELOG.md

@@ -8,6 +8,18 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.3 (2024-12-05)
+
+### Feature
+
+- New look and feel specs for footer logos. @sneridagh
+  Added two slots: `preFooter` and `postFooter`. [#437](https://github.com/kitconcept/volto-light-theme/pull/437)
+
+### Bugfix
+
+- Fixed edge case when you delete the image content type from the site. @sneridagh [#437](https://github.com/kitconcept/volto-light-theme/pull/437)
+- Fixed layout shift jumps on RAC Popovers. @sneridagh [#440](https://github.com/kitconcept/volto-light-theme/pull/440)
+
 ## 6.0.0-alpha.2 (2024-11-25)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.2",
+  "version": "6.0.0-alpha.3",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/types/index.d.ts",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "uuid": "^11.0.0",
-    "@plone/components": "^2.1.1"
+    "@plone/components": "^2.2.1"
   },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.6",

package/src/components/Footer/Footer.jsx

@@ -1,14 +1,12 @@
 // SemanticUI-free pre-@plone/components
 import React from 'react';
-import isEmpty from 'lodash/isEmpty';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useSelector, shallowEqual } from 'react-redux';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import { useLocation } from 'react-router-dom';
 import Logo from '@plone/volto/components/theme/Logo/Logo';
 import { Container } from '@plone/components';
-import { flattenToAppURL, addAppURL } from '@plone/volto/helpers/Url/Url';
-import config from '@plone/volto/registry';
+import SlotRenderer from '@plone/volto/components/theme/SlotRenderer/SlotRenderer';
+import FooterLinks from './FooterLinks';
 
 const messages = defineMessages({
   copyright: {
@@ -17,27 +15,28 @@ const messages = defineMessages({
   },
 });
 
-/**
- * Component to display the footer.
- * @function Footer
- * @param {Object} intl Intl object
- * @returns {string} Markup of the component
- */
-const Footer = ({ intl }) => {
-  const { settings } = config;
-  const { lang, siteActions = [] } = useSelector(
+const Footer = () => {
+  const intl = useIntl();
+  const {
+    content,
+    lang,
+    siteActions = [],
+  } = useSelector(
     (state) => ({
       lang: state.intl.locale,
       siteActions: state.actions?.actions?.site_actions,
+      content: state.content.data,
     }),
     shallowEqual,
   );
+  const location = useLocation();
   const navroot = useSelector((state) => state.navroot.data.navroot);
   const footerLinks = navroot?.footer_links;
-  const footerLogos = navroot?.footer_logos;
 
   return (
     <footer id="footer">
+      <SlotRenderer name="preFooter" content={content} location={location} />
+
       <Container className="footer">
         <div className="footer-message">
           <FormattedMessage
@@ -84,75 +83,11 @@ const Footer = ({ intl }) => {
             }}
           />
         </div>
-        <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>
+        <FooterLinks
+          links={footerLinks}
+          siteActions={siteActions}
+          lang={lang}
+        />
         <div className="logo">
           <Logo />
         </div>
@@ -171,19 +106,10 @@ const Footer = ({ intl }) => {
           by kitconcept
         </div>
       </Container>
+
+      <SlotRenderer name="postFooter" content={content} location={location} />
     </footer>
   );
 };
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Footer.propTypes = {
-  /**
-   * i18n object
-   */
-};
-
-export default injectIntl(Footer);
+export default Footer;

package/src/components/Footer/FooterLinks.tsx

@@ -0,0 +1,54 @@
+import isEmpty from 'lodash/isEmpty';
+import { addAppURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import type { BlocksData } from '@plone/types';
+import config from '@plone/volto/registry';
+
+type FooterLinksProps = { links: BlocksData; siteActions: any; lang: string };
+
+const FooterLinks = (props: FooterLinksProps) => {
+  const { lang, links, siteActions } = props;
+
+  return (
+    <ul className="footer-links">
+      {!isEmpty(links?.blocks)
+        ? links.blocks_layout.items.map((itemId) => {
+            const link = links.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={
+                    config.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>
+  );
+};
+
+export default FooterLinks;

package/src/components/Footer/FooterLogos.tsx

@@ -0,0 +1,75 @@
+import type { Content } from '@plone/types';
+import isEmpty from 'lodash/isEmpty';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import { useSelector } from 'react-redux';
+import { Container } from '@plone/components';
+
+type FormState = {
+  content: {
+    data: Content;
+  };
+  navroot: {
+    data: {
+      navroot: Content;
+    };
+  };
+};
+
+const FooterLogos = () => {
+  const navroot = useSelector<FormState, Content>(
+    (state) => state.navroot.data.navroot,
+  );
+  const logos = navroot?.footer_logos;
+
+  return (
+    <Container layout>
+      <ul className="footer-logos">
+        {!isEmpty(logos?.blocks)
+          ? logos.blocks_layout.items.map((itemId) => {
+              const logo = logos.blocks[itemId];
+              const logoInfo: {
+                hrefTitle: string;
+                href: string;
+                logoHref: string;
+                src: string;
+                srcAlt: string;
+              } = {
+                hrefTitle: '',
+                href: '',
+                logoHref: '',
+                src: '',
+                srcAlt: '',
+              };
+              if (logo?.href) {
+                logoInfo.hrefTitle = logo.href[0]['title'];
+                logoInfo.href = flattenToAppURL(logo.href[0]['@id']);
+              }
+              if (logo?.logo && logo.logo[0]?.image_scales) {
+                logoInfo.logoHref = logo.logo[0]['@id'];
+                logoInfo.srcAlt = logo['alt'];
+                logoInfo.src = `${flattenToAppURL(logoInfo.logoHref)}/${logo.logo[0].image_scales[logo.logo[0].image_field][0].download}`;
+              }
+
+              if (!logoInfo.src) return null;
+
+              return (
+                <li className="item" key={logoInfo.href}>
+                  {/* @ts-ignore */}
+                  <ConditionalLink
+                    condition={logoInfo.href}
+                    to={logoInfo.href}
+                    title={logoInfo.hrefTitle || logoInfo.srcAlt}
+                  >
+                    <img src={logoInfo.src} alt={logoInfo.srcAlt} />
+                  </ConditionalLink>
+                </li>
+              );
+            })
+          : null}
+      </ul>
+    </Container>
+  );
+};
+
+export default FooterLogos;

package/src/config/slots.ts

@@ -1,5 +1,6 @@
 import type { ConfigType } from '@plone/registry';
 import Theming from '../components/Theming/Theming';
+import FooterLogos from '../components/Footer/FooterLogos';
 
 export default function install(config: ConfigType) {
   config.registerSlotComponent({
@@ -8,5 +9,11 @@ export default function install(config: ConfigType) {
     component: Theming,
   });
 
+  config.registerSlotComponent({
+    name: 'footerLogos',
+    slot: 'preFooter',
+    component: FooterLogos,
+  });
+
   return config;
 }

package/src/index.ts

@@ -14,6 +14,7 @@ import installWidgets from './config/widgets';
 import installSlots from './config/slots';
 
 import '@plone/components/dist/basic.css';
+import type { BlocksData } from '@plone/types';
 
 defineMessages({
   Press: {
@@ -26,6 +27,12 @@ defineMessages({
   },
 });
 
+declare module '@plone/types' {
+  export interface Content {
+    footer_logos: BlocksData;
+  }
+}
+
 const applyConfig = (config: ConfigType) => {
   installSettings(config);
   installBlocks(config);

package/src/theme/_footer.scss

@@ -1,7 +1,32 @@
 #footer {
-  margin-top: 0;
+  margin-top: $footer-vertical-spacing-top;
   text-align: center;
 
+  ul.footer-logos {
+    display: grid;
+    justify-content: center;
+    padding: $pre-footer-vertical-spacing 0;
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: $spacing-medium;
+    gap: 20px;
+    grid-template-columns: repeat(3, 1fr);
+    list-style: none;
+
+    img {
+      max-width: 100%;
+    }
+
+    li.item:nth-child(3n + 1) {
+      /* Targets 1st, 4th, 7th, etc. */
+      justify-self: start;
+    }
+    li.item:nth-child(3n + 3) {
+      /* Targets 3rd, 6th, 9th, etc. */
+      justify-self: end;
+    }
+  }
+
   .footer {
     padding: 4.2rem 2rem;
     background-color: $lightgrey;
@@ -26,6 +51,7 @@
 
     ul {
       display: flex;
+      flex-wrap: wrap;
       justify-content: center;
       padding-left: 0;
       margin-top: 1.4rem;

package/src/theme/_layout.scss

@@ -60,6 +60,18 @@
   z-index: $zindex;
 }
 
+// RAC Popovers have problems with SemanticUI CSS in the BODY tag
+// SemanticUI by default uses `overflow-x: hidden`.
+// TODO: Remove when https://github.com/plone/volto/pull/6513 is merged and released.
+body {
+  overflow-x: initial;
+}
+
+// This helps not to have a little layout shift when the RAC Popovers are shown.
+html[style*='padding-right'] .sidebar-container {
+  margin-right: 15px;
+}
+
 // We expect initially three main containers
 .header-wrapper {
   .q.container,

package/src/theme/_variables.scss

@@ -274,6 +274,7 @@ $grid-block-vertical-spacing-bottom: $spacing-xlarge !default;
 
 // Footer
 $footer-vertical-spacing-top: $spacing-xlarge !default;
+$pre-footer-vertical-spacing: $spacing-small !default;
 
 // Maps
 $font-weights: (