@kitconcept/volto-light-theme 6.0.0-alpha.16 → 6.0.0-alpha.18

package/.changelog.draft

@@ -1,7 +1,12 @@
-## 6.0.0-alpha.16 (2025-03-03)
+## 6.0.0-alpha.18 (2025-03-21)
+
+### Feature
+
+- Add Color Contrast Checker component @danalvrz [#463](https://github.com/kitconcept/volto-light-theme/pull/463)
+- Add docs for ColorContrastChecker. @danalvrz [#507](https://github.com/kitconcept/volto-light-theme/pull/507)
 
 ### Bugfix
 
-- Fix last edge case in the intranet header in edit mode with the `complementary_logo`. @sneridagh [#483](https://github.com/kitconcept/volto-light-theme/pull/483)
+- Make the `footer_links` and `footer_logos` loops more resilient. @sneridagh [#508](https://github.com/kitconcept/volto-light-theme/pull/508)
 
 

package/CHANGELOG.md

@@ -8,6 +8,51 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.18 (2025-03-21)
+
+### Feature
+
+- Add Color Contrast Checker component @danalvrz [#463](https://github.com/kitconcept/volto-light-theme/pull/463)
+- Add docs for ColorContrastChecker. @danalvrz [#507](https://github.com/kitconcept/volto-light-theme/pull/507)
+
+### Bugfix
+
+- Make the `footer_links` and `footer_logos` loops more resilient. @sneridagh [#508](https://github.com/kitconcept/volto-light-theme/pull/508)
+
+## 6.0.0-alpha.17 (2025-03-20)
+
+### Breaking
+
+- Renamed widget: `ThemeColorPicker` -> `ColorPicker`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
+- Renamed widget: `BackgroundColorWidget` -> `themeColorSwatch`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
+- Renamed widget: `sizeWidget` -> `size`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
+
+### Feature
+
+- New widget: `colorPicker`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
+- New widget: `themeColorSwatch`. @sneridagh [#486](https://github.com/kitconcept/volto-light-theme/pull/486)
+- Add `@kitconcept/volto-banner-block` to the recommended VLT add-ons. @sneridagh [#487](https://github.com/kitconcept/volto-light-theme/pull/487)
+- New widget: `object_list`. @sneridagh [#491](https://github.com/kitconcept/volto-light-theme/pull/491)
+- Use the `@inherit` endpoint. @sneridagh [#494](https://github.com/kitconcept/volto-light-theme/pull/494)
+- Update volto-highlight-block to 4.1.0 @sneridagh [#498](https://github.com/kitconcept/volto-light-theme/pull/498)
+
+### Bugfix
+
+- Remove title attribute from the logo. @davisagli [#336](https://github.com/kitconcept/volto-light-theme/pull/336)
+- Color fixes for description, links and buttons for Slider & Highlight blocks. @danalvrz [#476](https://github.com/kitconcept/volto-light-theme/pull/476)
+- Fixed nested blocks theme: when the theme is not set, inherit from parent instead of getting the default one for the current nested block. @sneridagh [#489](https://github.com/kitconcept/volto-light-theme/pull/489)
+- Fix workflow: acceptance always runs, even if one of the dependencies are skipped. @sneridagh [#492](https://github.com/kitconcept/volto-light-theme/pull/492)
+- Add actions to header + Fix hydration problem in /edit + Sitemap container. @sneridagh [#492](https://github.com/kitconcept/volto-light-theme/pull/492)
+- Specify desktop flex direction starting at 768px screen width. @danalvrz [#496](https://github.com/kitconcept/volto-light-theme/pull/496)
+
+### Internal
+
+- Added deployment workflow. @ericof [#495](https://github.com/kitconcept/volto-light-theme/pull/495)
+
+### Documentation
+
+- Update requirements for plone.restapi in docs. @sneridagh [#498](https://github.com/kitconcept/volto-light-theme/pull/498)
+
 ## 6.0.0-alpha.16 (2025-03-03)
 
 ### Bugfix

package/README.md

@@ -1,9 +1,7 @@
 # Volto Light Theme by kitconcept
 
 [![NPM](https://img.shields.io/npm/v/@kitconcept/volto-light-theme.svg)](https://www.npmjs.com/package/@kitconcept/volto-light-theme)
-[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/code.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
-[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/unit.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
-[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/acceptance.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
+[![Build Status](https://github.com/kitconcept/volto-light-theme/actions/workflows/main.yml/badge.svg)](https://github.com/kitconcept/volto-light-theme/actions)
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://kitconcept.com/kitconcept-white.svg">
@@ -16,7 +14,7 @@ The main vision of the Volto Light Theme (VLT) is to serve as a foundation for k
 It incorporates feedback from the company's clients and Plone community from the last few years of projects and the success stories in the UI/UX side.
 It aims to be future-proof, keeping it aligned with the upcoming Volto and Plone 7 vision in terms of theming strategy decided by the Plone community.
 
-![Volto-Light-Theme](https://github.com/kitconcept/volto-light-theme/raw/main/volto-light-theme.png)
+![Volto-Light-Theme](https://github.com/kitconcept/volto-light-theme/raw/main/docs/_static/volto-light-theme.png)
 
 ## Documentation
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.16",
+  "version": "6.0.0-alpha.18",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
-  "types": "src/types/index.d.ts",
+  "types": "src/index.ts",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/kitconcept/volto-light-theme.git"
@@ -33,26 +33,32 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "release-it": "^17.7.0",
-    "@plone/types": "1.3.1"
+    "@plone/types": "1.3.2"
   },
   "dependencies": {
-    "react-aria-components": "^1.5.0",
+    "@dnd-kit/core": "6.0.8",
+    "@dnd-kit/sortable": "7.0.2",
+    "@dnd-kit/utilities": "3.2.2",
+    "react-animate-height": "^3.2.3",
+    "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "@plone/components": "^3.0.1"
+    "@plone/components": "^3.0.2"
   },
   "peerDependencies": {
     "@eeacms/volto-accordion-block": "^10.4.6",
-    "@kitconcept/volto-button-block": "^2.3.1 || ^3.0.3",
+    "@kitconcept/volto-banner-block": "^1.0.1",
+    "@kitconcept/volto-button-block": "^3.0.3",
     "@kitconcept/volto-dsgvo-banner": "^2.3.2",
     "@kitconcept/volto-heading-block": "^2.4.0",
-    "@kitconcept/volto-highlight-block": "^4.0.0",
+    "@kitconcept/volto-highlight-block": "^4.1.0",
     "@kitconcept/volto-introduction-block": "^1.0.0",
     "@kitconcept/volto-separator-block": "^4.1.2",
     "@kitconcept/volto-slider-block": "^6.3.1",
     "classnames": "^2.2.6",
     "lodash": "4.17.21",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-intl": "^3.12.1",
     "react-redux": "^8.1.2",
     "react-router-dom": "^5.2.0"

package/src/components/Footer/Footer.jsx

@@ -1,4 +1,3 @@
-// SemanticUI-free pre-@plone/components
 import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useSelector, shallowEqual } from 'react-redux';
@@ -17,21 +16,19 @@ const messages = defineMessages({
 
 const Footer = () => {
   const intl = useIntl();
-  const {
-    content,
-    lang,
-    siteActions = [],
-  } = useSelector(
+  const { content } = 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 footerSettings = useSelector(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.footer']
+        ?.data,
+  );
+  const footerLinks = footerSettings?.footer_links;
 
   return (
     <footer id="footer">
@@ -83,11 +80,7 @@ const Footer = () => {
             }}
           />
         </div>
-        <FooterLinks
-          links={footerLinks}
-          siteActions={siteActions}
-          lang={lang}
-        />
+        <FooterLinks links={footerLinks} />
         <div className="logo">
           <Logo />
         </div>

package/src/components/Footer/FooterLinks.tsx

@@ -1,20 +1,17 @@
 import isEmpty from 'lodash/isEmpty';
-import { addAppURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { 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';
+import type { SiteFooterSettings } from '../../types';
 
-type FooterLinksProps = { links: BlocksData; siteActions: any; lang: string };
+type FooterLinksProps = { links: SiteFooterSettings['footer_links'] };
 
 const FooterLinks = (props: FooterLinksProps) => {
-  const { lang, links, siteActions } = props;
+  const { links } = props;
 
   return (
     <ul className="footer-links">
-      {!isEmpty(links?.blocks)
-        ? links.blocks_layout.items.map((itemId) => {
-            const link = links.blocks[itemId];
-
+      {links && Array.isArray(links)
+        ? links.map((link) => {
             if (isEmpty(link) || !link.href) return null;
 
             const title = link.title || link.href[0]['title'];
@@ -24,32 +21,13 @@ const FooterLinks = (props: FooterLinksProps) => {
 
             return (
               <li className="item" key={href}>
-                <UniversalLink href={href}>{title}</UniversalLink>
+                <UniversalLink href={href} openLinkInNewTab={undefined}>
+                  {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}
+        : null}
     </ul>
   );
 };

package/src/components/Footer/FooterLogos.tsx

@@ -1,10 +1,10 @@
 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';
 import cx from 'classnames';
+import type { SiteFooterSettings } from '../../types';
 
 type FormState = {
   content: {
@@ -13,25 +13,23 @@ type FormState = {
   form: {
     global: Content;
   };
-  navroot: {
-    data: {
-      navroot: Content;
-    };
-  };
 };
 
 const FooterLogos = () => {
-  const navroot = useSelector<FormState, Content>(
-    (state) => state.navroot.data.navroot,
-  );
   const formState = useSelector<FormState, Content>(
     (state) => state.form.global,
   );
-  const logos = formState?.footer_logos || navroot?.footer_logos;
-  const logosSize = formState?.footer_logos_size || navroot?.footer_logos_size;
+  const footerSettings = useSelector<FormState, SiteFooterSettings>(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.footer']
+        ?.data,
+  );
+  const logos = formState?.footer_logos || footerSettings?.footer_logos;
+  const logosSize =
+    formState?.footer_logos_size || footerSettings?.footer_logos_size;
   const footer_logos_container_width =
     formState?.footer_logos_container_width ||
-    navroot?.footer_logos_container_width;
+    footerSettings?.footer_logos_container_width;
 
   return (
     <Container className={cx({ [footer_logos_container_width]: 1 })}>
@@ -40,9 +38,8 @@ const FooterLogos = () => {
           [logosSize]: logosSize,
         })}
       >
-        {!isEmpty(logos?.blocks)
-          ? logos.blocks_layout.items.map((itemId) => {
-              const logo = logos.blocks[itemId];
+        {logos && Array.isArray(logos)
+          ? logos.map((logo) => {
               const logoInfo: {
                 hrefTitle: string;
                 href: string;
@@ -73,7 +70,7 @@ const FooterLogos = () => {
               if (!logoInfo.src) return null;
 
               return (
-                <li className="item" key={logoInfo.href}>
+                <li className="item" key={logoInfo['@id']}>
                   {/* @ts-ignore */}
                   <ConditionalLink
                     condition={logoInfo.href}

package/src/components/Header/Header.jsx

@@ -1,4 +1,5 @@
 // SemanticUI-free pre-@plone/components
+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Container } from '@plone/components';
@@ -69,21 +70,35 @@ const InternetHeader = ({ pathname, siteLabel, token, siteAction }) => {
   );
 };
 
-const IntranetHeader = ({ pathname, siteLabel, token, siteAction }) => {
+const IntranetHeader = ({ pathname, siteLabel, token }) => {
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const dispatch = useDispatch();
 
-  const navRoot = useSelector((state) => state.navroot?.data?.navroot);
+  const headerSettings = useSelector(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
+        ?.data,
+  );
   const formData = useSelector((state) => state.form.global);
 
   const intranetFlag =
     !isEmpty(formData) && formData.intranet_flag
       ? formData?.intranet_flag || siteLabel
-      : navRoot?.intranet_flag || siteLabel;
+      : headerSettings?.intranet_flag || siteLabel;
 
   const complementary_logo =
     !isEmpty(formData) && formData?.complementary_logo?.data
       ? `data:${formData.complementary_logo['content-type']};base64,${formData.complementary_logo.data}`
-      : navRoot?.complementary_logo?.download;
+      : headerSettings?.complementary_logo?.download;
+
+  const headerActions =
+    !isEmpty(formData) && formData?.header_actions
+      ? formData.header_actions
+      : headerSettings?.header_actions;
 
   const pointToSidebar = (fieldSetName, fieldId) => {
     dispatch(setSidebarTab(0));
@@ -98,14 +113,16 @@ const IntranetHeader = ({ pathname, siteLabel, token, siteAction }) => {
 
           <div className="tools">
             {!token && <Anontools />}
-            {siteAction &&
-              siteAction.map((item) => (
-                <UniversalLink key={item.url} href={item.url}>
+            {headerActions &&
+              Array.isArray(headerActions) &&
+              headerActions.map((item) => (
+                <UniversalLink key={item['@id']} href={item.href?.[0]['@id']}>
                   {item.title}
                 </UniversalLink>
               ))}
           </div>
           {siteLabel &&
+            isClient &&
             (!isEmpty(formData) ? (
               <Button
                 className="intranet-flag"

package/src/components/Logo/Logo.jsx

@@ -21,28 +21,31 @@ const Logo = () => {
   const site = useSelector((state) => state.site.data);
   const navroot = useSelector((state) => state.navroot.data);
   const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
-  const navRootLogo = navroot?.navroot?.logo?.download || null;
-  const navRootLogoWidth = navroot?.navroot?.logo?.width || null;
-  const navRootLogoHeight = navroot?.navroot?.logo?.height || null;
+  const headerSettings = useSelector(
+    (state) =>
+      state.content.data?.['@components']?.inherit?.['voltolighttheme.header']
+        ?.data,
+  );
+  const logo = headerSettings?.logo;
+  const logoUrl = logo?.download || null;
+  const logoWidth = logo?.width || null;
+  const logoHeight = logo?.height || null;
 
   return (
     <Link to={navRootPath} aria-label={intl.formatMessage(messages.home)}>
       <img
         src={
-          navRootLogo
-            ? flattenToAppURL(navRootLogo)
+          logoUrl
+            ? flattenToAppURL(logoUrl)
             : site['plone.site_logo']
               ? flattenToAppURL(site['plone.site_logo'])
               : LogoImage
         }
-        width={navRootLogoWidth}
-        height={navRootLogoHeight}
+        width={logoWidth}
+        height={logoHeight}
         alt={
           intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
         }
-        title={
-          intl.formatMessage(messages.logoOf) + ' ' + site['plone.site_title']
-        }
       />
     </Link>
   );

package/src/components/Theming/Theming.tsx

@@ -2,7 +2,7 @@ import Helmet from '@plone/volto/helpers/Helmet/Helmet';
 import type { Content } from '@plone/types';
 import { useSelector } from 'react-redux';
 import isEmpty from 'lodash/isEmpty';
-import config from '@plone/registry';
+import type { SiteThemeSettings } from '../../types';
 
 type FormState = {
   content: {
@@ -13,34 +13,37 @@ type FormState = {
   };
 };
 
-// TODO: Change when we have the final list of colors
-// and if they are nested in the serialization under a key
-function buildStyleTag(content: Content, colors: string[]) {
-  if (Array.isArray(colors)) {
-    return colors
-      .filter((color) => content[color])
-      .map((color) => {
-        return `--${color.replace(/_/g, '-')}: ${content[color]}; `;
-      })
-      .join('');
-  }
+function buildStyleTag(content: Partial<Content>, colors: SiteThemeSettings) {
+  const colorKeys = Object.keys(colors);
+  return colorKeys
+    .filter((color) => content[color])
+    .map((color) => {
+      return `--${color.replace(/_/g, '-')}: ${content[color]}; `;
+    })
+    .join('');
 }
 
-const Theming = ({ navRoot }) => {
-  const colorFields = config.settings.userDefinedControlPanelColors;
+const Theming = ({ content }: { content: Content }) => {
+  const colorSettings =
+    content?.['@components']?.inherit?.['voltolighttheme.theme']?.data;
   const formData = useSelector<FormState, Content>(
     (state) => state.form.global,
   );
 
-  const liveContent = navRoot ? (!isEmpty(formData) ? formData : navRoot) : {};
+  const liveContent = colorSettings
+    ? !isEmpty(formData)
+      ? formData
+      : colorSettings
+    : {};
 
   return (
     <>
       <Helmet>
         <style>
-          {`
+          {colorSettings &&
+            `
 :root {
-  ${buildStyleTag(liveContent, colorFields)}
+  ${buildStyleTag(liveContent, colorSettings)}
 }
                 `}
         </style>

package/src/components/Widgets/{BlockAlignmentWidget.tsx → BlockAlignment.tsx}

@@ -1,6 +1,9 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './Buttons';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageLeftSVG from '@plone/volto/icons/image-left.svg';
 import imageRightSVG from '@plone/volto/icons/image-right.svg';
@@ -21,7 +24,11 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
   left: [imageLeftSVG, intl.formatMessage(messages.left)],
   right: [imageRightSVG, intl.formatMessage(messages.right)],
   center: [imageFitSVG, intl.formatMessage(messages.center)],

package/src/components/Widgets/{BlockWidthWidget.tsx → BlockWidth.tsx}

@@ -1,7 +1,10 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
-import ButtonsWidget, { type ButtonsWidgetProps } from './ButtonsWidget';
+import ButtonsWidget, {
+  type ActionInfo,
+  type ButtonsWidgetProps,
+} from './Buttons';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@plone/volto/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
@@ -26,7 +29,11 @@ const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }: { intl: IntlShape }) => ({
+export const defaultActionsInfo = ({
+  intl,
+}: {
+  intl: IntlShape;
+}): Record<string, ActionInfo> => ({
   narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
   default: [imageFitSVG, intl.formatMessage(messages.default)],
   layout: [imageWideSVG, intl.formatMessage(messages.layout)],