@kitconcept/volto-light-theme 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/helpers/styleDefinitions.test.tsx

@@ -0,0 +1,30 @@
+import { styleDefinitionsEnhancer } from './styleDefinitions';
+import config from '@plone/volto/registry';
+
+describe('styleDefinitionsEnhancer', () => {
+  it('should enhance style definitions correctly', () => {
+    const data = {
+      styles: {
+        backgroundColor: 'red',
+        textColor: 'blue',
+      },
+    };
+
+    config.registerUtility({
+      type: 'styleFieldDefinition',
+      name: 'backgroundColor',
+      method: () => {
+        return [
+          { name: 'red', label: 'Red', style: { '--bg-color': 'red' } },
+          { name: 'green', label: 'Green', style: { '--bg-color': 'green' } },
+        ];
+      },
+    });
+
+    const container = {};
+
+    const result = styleDefinitionsEnhancer({ data, container });
+
+    expect(result).toEqual({ '--bg-color': 'red' });
+  });
+});

package/src/helpers/styleDefinitions.ts

@@ -0,0 +1,49 @@
+import config from '@plone/volto/registry';
+import { findStyleByName } from '@plone/volto/helpers/Blocks/Blocks';
+import isEmpty from 'lodash/isEmpty';
+
+export function blockThemesEnhancer({ data, container }) {
+  if (!data['@type']) return {};
+  const blockConfig = config.blocks.blocksConfig[data['@type']];
+  if (!blockConfig) return {};
+  const blockStyleDefinitions =
+    // We look up for the blockThemes in the block's config, then in the global config
+    // We keep `colors` for BBB, but `themes` should be used
+    blockConfig.themes || blockConfig.colors || config.blocks.themes || [];
+
+  if (
+    !isEmpty(container) &&
+    container.theme &&
+    (!data.theme || data.theme === 'default')
+  ) {
+    return findStyleByName(blockStyleDefinitions, container.theme);
+  }
+  if (data.theme) {
+    return data.theme ? findStyleByName(blockStyleDefinitions, data.theme) : {};
+  } else {
+    // No theme, return default color
+    return findStyleByName(config.blocks.themes, 'default');
+  }
+}
+
+export function styleDefinitionsEnhancer({ data, container }) {
+  let resultantStyles = {};
+  Object.keys(data.styles || {}).forEach((fieldName) => {
+    const styleFieldEnhancer = config.getUtility({
+      type: 'styleFieldDefinition',
+      name: fieldName,
+    });
+
+    if (styleFieldEnhancer.method) {
+      resultantStyles = {
+        ...resultantStyles,
+        ...findStyleByName(
+          styleFieldEnhancer.method({ data, container }),
+          data.styles[fieldName],
+        ),
+      };
+    }
+  });
+
+  return resultantStyles;
+}

package/src/helpers/useLiveData.ts

@@ -6,6 +6,7 @@ type FormState = {
   content: {
     data: Content;
   };
+  errorContext: Content;
   form: {
     global: Content;
   };
@@ -16,11 +17,15 @@ export function useLiveData<T>(
   behavior: string | undefined,
   field: string,
 ) {
+  const errorContext = useSelector((state: FormState) => state.errorContext);
+  const context = content ?? errorContext;
+
   const location = useLocation();
   const addMode = location?.pathname?.endsWith('/add');
+
   const current = behavior
-    ? (content?.['@components']?.inherit?.[behavior]?.data?.[field] as T)
-    : (content[field] as T);
+    ? (context?.['@components']?.inherit?.[behavior]?.data?.[field] as T)
+    : (context[field] as T);
 
   const formData = useSelector<FormState, T>(
     (state) => state.form.global?.[field],

package/src/index.ts

@@ -6,6 +6,7 @@ import { Container } from '@plone/components';
 import EventView from './components/Theme/EventView';
 
 import { migrateToVLT6ColorAndWidthModel } from './transforms/to6';
+import { migrateToVLT8FloatingBlocks } from './transforms/to8';
 
 import installSettings from './config/settings';
 import installBlocks from './config/blocks';
@@ -14,6 +15,8 @@ import installWidgets from './config/widgets';
 import installSlots from './config/slots';
 import installSummary from './config/summary';
 
+import reducers from './reducers';
+
 import '@plone/components/dist/basic.css';
 
 import type {
@@ -96,8 +99,20 @@ const applyConfig = (config: ConfigType) => {
     method: migrateToVLT6ColorAndWidthModel,
   });
 
+  config.registerUtility({
+    name: 'migrateToVLT8FloatingBlocks',
+    type: 'transform',
+    dependencies: { reducer: 'content' },
+    method: migrateToVLT8FloatingBlocks,
+  });
+
   config.views.contentTypesViews.Event = EventView;
 
+  config.addonReducers = {
+    ...config.addonReducers,
+    ...reducers,
+  };
+
   return config;
 };
 

package/src/internalChecks.test.ts

@@ -0,0 +1,94 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const recommendedAddonsPath = path.resolve(
+  __dirname,
+  '../../../..',
+  'recommendedAddons.json',
+);
+const mrsDeveloperPath = path.resolve(
+  __dirname,
+  '../../..',
+  'mrs.developer.json',
+);
+
+const readJSON = <T>(filePath: string): T =>
+  JSON.parse(fs.readFileSync(filePath, 'utf-8'));
+
+const normalizeVersion = (version: unknown) =>
+  typeof version === 'string' ? version.replace(/^[\\^~]/, '') : version;
+
+const excludedPackages = new Set(['@eeacms/volto-accordion-block']);
+
+describe('internal checks', () => {
+  it('keeps recommended add-ons in sync with mrs.developer.json', () => {
+    const recommendedAddons = readJSON<Record<string, string>>(
+      recommendedAddonsPath,
+    );
+    const mrsDeveloper = readJSON<Record<string, unknown>>(mrsDeveloperPath);
+
+    const mrsByPackage = Object.entries(mrsDeveloper).reduce<
+      Record<string, Record<string, unknown> & { configKey: string }>
+    >((acc, [configKey, configValue]) => {
+      if (
+        configValue &&
+        typeof configValue === 'object' &&
+        'package' in configValue
+      ) {
+        acc[String((configValue as Record<string, unknown>).package)] = {
+          ...(configValue as Record<string, unknown>),
+          configKey,
+        };
+      }
+      return acc;
+    }, {});
+
+    const issues: string[] = [];
+
+    Object.entries(recommendedAddons).forEach(
+      ([packageName, recommendedVersion]) => {
+        if (excludedPackages.has(packageName)) return;
+
+        const mrsEntry = mrsByPackage[packageName];
+
+        if (!mrsEntry) {
+          issues.push(
+            `${packageName} is listed in recommendedAddons.json but missing from frontend/mrs.developer.json.`,
+          );
+          return;
+        }
+
+        const mrsVersion =
+          (mrsEntry.tag as string | undefined) ||
+          (mrsEntry.branch as string | undefined) ||
+          (mrsEntry.version as string | undefined);
+
+        if (!mrsVersion) {
+          issues.push(
+            `${packageName} (${mrsEntry.configKey}) has no tag, branch, or version specified in frontend/mrs.developer.json.`,
+          );
+          return;
+        }
+
+        const normalizedRecommended = normalizeVersion(recommendedVersion);
+        const normalizedMrsVersion = normalizeVersion(mrsVersion);
+
+        if (
+          recommendedVersion !== mrsVersion &&
+          normalizedRecommended !== normalizedMrsVersion
+        ) {
+          issues.push(
+            `${packageName} differs: recommendedAddons.json=${recommendedVersion} vs frontend/mrs.developer.json(${mrsEntry.configKey})=${mrsVersion}.`,
+          );
+        }
+      },
+    );
+
+    expect(issues).toEqual([]);
+  });
+});

package/src/primitives/Card/Card.stories.tsx

@@ -165,7 +165,10 @@ export const CustomImage: Story = {
   render: (args) => (
     <div
       className="card-listing"
-      style={{ width: 'var(--default-container-width)' }}
+      style={{
+        width: 'var(--default-container-width)',
+        '--theme-high-contrast-color': '#ecebeb',
+      }}
     >
       <Card href={args.href}>
         <Card.Image>

package/src/primitives/Card/Card.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import Card from './Card';
 
 vi.mock(
@@ -43,10 +43,16 @@ vi.mock(
 
 type SummaryProps = {
   a11yLabelId?: string;
+  LinkToItem?: React.ElementType;
 };
 
-const SummaryContent = ({ a11yLabelId }: SummaryProps) => (
-  <h3 id={a11yLabelId}>Card title</h3>
+const SummaryContent = ({
+  a11yLabelId,
+  LinkToItem = React.Fragment,
+}: SummaryProps) => (
+  <h3 id={a11yLabelId}>
+    <LinkToItem>Card title</LinkToItem>
+  </h3>
 );
 
 const BodyContent = () => <div>Body content</div>;
@@ -64,26 +70,20 @@ describe('Card', () => {
 
   it('is interactive when an href is provided', () => {
     const { container } = renderCard({ href: '/target', className: 'custom' });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    expect(card).toHaveAttribute('role', 'link');
-    expect(card).toHaveAttribute('tabindex', '0');
 
     const anchor = container.querySelector('a');
     expect(anchor).not.toBeNull();
     expect(anchor).toHaveAttribute('href', '/target');
+    expect(anchor).toHaveClass('card-primary-link');
   });
 
   it('is interactive when an item is provided', () => {
     const { container } = renderCard({ item: { '@id': '/item-target' } });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    expect(card).toHaveAttribute('role', 'link');
-    expect(card).toHaveAttribute('tabindex', '0');
 
     const anchor = container.querySelector('a');
     expect(anchor).not.toBeNull();
     expect(anchor).toHaveAttribute('href', '/item-target');
+    expect(anchor).toHaveClass('card-primary-link');
   });
 
   it('is not interactive when neither href nor item is provided', () => {
@@ -112,26 +112,4 @@ describe('Card', () => {
     expect(card).not.toHaveAttribute('tabindex');
     expect(container.querySelector('a')).toBeNull();
   });
-
-  it('triggers navigation handlers when interactive', () => {
-    const clickSpy = vi
-      .spyOn(HTMLAnchorElement.prototype, 'click')
-      .mockImplementation(() => {});
-    const selectionSpy = vi
-      .spyOn(window, 'getSelection')
-      .mockReturnValue({ toString: () => '' } as unknown as Selection);
-
-    const { container } = renderCard({ href: '/target' });
-    const card = container.querySelector('.card') as HTMLElement;
-
-    fireEvent.click(card);
-    fireEvent.keyDown(card, { key: 'Enter' });
-    fireEvent.keyDown(card, { key: ' ' });
-    fireEvent.keyDown(card, { key: 'Escape' });
-
-    expect(clickSpy).toHaveBeenCalledTimes(3);
-
-    clickSpy.mockRestore();
-    selectionSpy.mockRestore();
-  });
 });

package/src/primitives/Card/Card.tsx

@@ -52,49 +52,32 @@ const Card = (props: CardProps) => {
   const { className, openLinkInNewTab } = props;
 
   const a11yLabelId = React.useId();
-  const linkRef = React.useRef<HTMLAnchorElement>(null);
-
-  const triggerNavigation = () => {
-    // Only navigate if there is *no* text selection
-    const hasSelection = !!window.getSelection()?.toString();
-    if (!hasSelection) {
-      linkRef.current?.click();
-    }
-  };
-
   const isInteractive = !!props.href || !!props.item;
 
-  const onClick: React.MouseEventHandler<HTMLDivElement> = () => {
-    if (isInteractive) triggerNavigation();
-  };
-
-  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!isInteractive) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      triggerNavigation();
-    }
-  };
+  const LinkToItem = React.useCallback(
+    ({ children }: { children: React.ReactNode }) => {
+      return (
+        <ConditionalLink
+          className="card-primary-link"
+          condition={isInteractive}
+          href={href}
+          item={item}
+          openLinkInNewTab={openLinkInNewTab}
+        >
+          {children}
+        </ConditionalLink>
+      );
+    },
+    [href, item, isInteractive, openLinkInNewTab],
+  );
 
   return (
-    <div
-      className={cx('card', className)}
-      onClick={isInteractive ? onClick : undefined}
-      onKeyDown={isInteractive ? onKeyDown : undefined}
-      role={isInteractive ? 'link' : undefined}
-      tabIndex={isInteractive ? 0 : undefined}
-    >
-      {/* @ts-expect-error since this has no children, should fail */}
-      <ConditionalLink
-        aria-labelledby={a11yLabelId}
-        condition={isInteractive}
-        href={href}
-        item={item}
-        openLinkInNewTab={openLinkInNewTab}
-        ref={linkRef}
-      />
+    <div className={cx('card', className)}>
       <div className="card-inner">
-        {childrenWithProps(props.children, { a11yLabelId })}
+        {childrenWithProps(props.children, {
+          a11yLabelId,
+          LinkToItem,
+        })}
       </div>
     </div>
   );
@@ -111,10 +94,12 @@ type CardImageProps = {
   imageComponent?: React.ComponentType<any>;
   children?: React.ReactNode;
   showPlaceholderImage?: boolean;
+  sizes?: string;
 };
 
 const CardImage = (props: CardImageProps) => {
-  const { src, item, image, imageComponent, showPlaceholderImage } = props;
+  const { src, item, image, imageComponent, showPlaceholderImage, sizes } =
+    props;
   const Image = imageComponent || DefaultImage;
 
   return (
@@ -132,6 +117,7 @@ const CardImage = (props: CardImageProps) => {
             alt=""
             loading="lazy"
             responsive={true}
+            sizes={sizes}
           />
         )
       ) : (
@@ -144,14 +130,21 @@ const CardImage = (props: CardImageProps) => {
 type CardSummaryProps = {
   /** The ID of the element that labels the card. */
   a11yLabelId?: string;
+  LinkToItem?: React.ElementType;
   children?: React.ReactNode;
 };
 
-const CardSummary = (props: CardSummaryProps) => (
-  <div className="card-summary">
-    {childrenWithProps(props.children, { a11yLabelId: props.a11yLabelId })}
-  </div>
-);
+const CardSummary = (props: CardSummaryProps) => {
+  const { a11yLabelId, LinkToItem } = props;
+  return (
+    <div className="card-summary">
+      {childrenWithProps(props.children, {
+        a11yLabelId,
+        LinkToItem,
+      })}
+    </div>
+  );
+};
 
 const CardActions = (props: any) => (
   <div className="actions-wrapper">{props.children}</div>

package/src/primitives/IconLinkList.tsx

@@ -6,6 +6,58 @@ type IconLinkListProps = {
   iconLinks: Array<iconLink>;
 };
 
+export const IconLinkListTemplate = ({ item }) => {
+  const itemInfo: {
+    title: string;
+    hrefTitle: string;
+    href: string;
+    itemHref: string;
+    src: string;
+    srcAlt: string;
+  } = {
+    title: '',
+    hrefTitle: '',
+    href: '',
+    itemHref: '',
+    src: '',
+    srcAlt: '',
+  };
+
+  // If the item has title, always set it
+  itemInfo.title = item ? item?.title || item?.href?.[0]?.['title'] || '' : '';
+  if (item?.href?.length > 0) {
+    itemInfo.title = item.title || item.href[0]['title'];
+    itemInfo.href = flattenToAppURL(item.href[0]['@id']);
+  }
+  if (item?.icon && item.icon[0]?.image_scales) {
+    itemInfo.itemHref = item.icon[0]['@id'];
+    itemInfo.srcAlt = item['alt'];
+    itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/${item.icon[0].image_scales[item.icon[0].image_field][0].download}`;
+  } else if (item?.icon && item.icon[0]) {
+    itemInfo.itemHref = item.icon[0]['@id'];
+    itemInfo.srcAlt = item['alt'];
+    itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/@@images/image`;
+  }
+
+  if (!itemInfo.src) return null;
+  return (
+    <li className="item" key={item['@id']}>
+      {/* @ts-ignore */}
+      <ConditionalLink
+        condition={itemInfo.href}
+        to={itemInfo.href}
+        title={itemInfo.hrefTitle || itemInfo.srcAlt}
+        openLinkInNewTab={item.openInNewTab}
+      >
+        <div className="image-wrapper">
+          <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
+        </div>
+        <span className="title">{itemInfo.title}</span>
+      </ConditionalLink>
+    </li>
+  );
+};
+
 const IconLinkList = (props: IconLinkListProps) => {
   const { iconLinks } = props;
 
@@ -13,58 +65,7 @@ const IconLinkList = (props: IconLinkListProps) => {
     <ul>
       {iconLinks && Array.isArray(iconLinks)
         ? iconLinks.map((item) => {
-            const itemInfo: {
-              title: string;
-              hrefTitle: string;
-              href: string;
-              itemHref: string;
-              src: string;
-              srcAlt: string;
-            } = {
-              title: '',
-              hrefTitle: '',
-              href: '',
-              itemHref: '',
-              src: '',
-              srcAlt: '',
-            };
-
-            // If the item has title, always set it
-            itemInfo.title = item
-              ? item?.title || item?.href?.[0]?.['title'] || ''
-              : '';
-            if (item?.href?.length > 0) {
-              itemInfo.title = item.title || item.href[0]['title'];
-              itemInfo.href = flattenToAppURL(item.href[0]['@id']);
-            }
-            if (item?.icon && item.icon[0]?.image_scales) {
-              itemInfo.itemHref = item.icon[0]['@id'];
-              itemInfo.srcAlt = item['alt'];
-              itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/${item.icon[0].image_scales[item.icon[0].image_field][0].download}`;
-            } else if (item?.icon && item.icon[0]) {
-              itemInfo.itemHref = item.icon[0]['@id'];
-              itemInfo.srcAlt = item['alt'];
-              itemInfo.src = `${flattenToAppURL(itemInfo.itemHref)}/@@images/image`;
-            }
-
-            if (!itemInfo.src) return null;
-
-            return (
-              <li className="item" key={item['@id']}>
-                {/* @ts-ignore */}
-                <ConditionalLink
-                  condition={itemInfo.href}
-                  to={itemInfo.href}
-                  title={itemInfo.hrefTitle || itemInfo.srcAlt}
-                  openLinkInNewTab={item.openInNewTab}
-                >
-                  <div className="image-wrapper">
-                    <img src={itemInfo.src} alt={itemInfo.srcAlt || ''} />
-                  </div>
-                  <span>{itemInfo.title}</span>
-                </ConditionalLink>
-              </li>
-            );
+            return <IconLinkListTemplate item={item} key={item['@id']} />;
           })
         : null}
     </ul>

package/src/primitives/LinkIconButton.tsx

@@ -0,0 +1,52 @@
+import { useSelector } from 'react-redux';
+import { useLocation, useHistory } from 'react-router-dom';
+import type { ObjectBrowserItem, GetSiteResponse } from '@plone/types';
+import linkSVG from '@plone/volto/icons/link.svg';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Button } from '@plone/components';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+type FormState = {
+  site: { data: GetSiteResponse };
+};
+
+const useLinkIconNavigation = (item?: Partial<ObjectBrowserItem>) => {
+  const location = useLocation();
+  const history = useHistory();
+
+  const handleLinkIconClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const targetUrl = item?.['@id'];
+    if (targetUrl) {
+      const flattenedTargetUrl = flattenToAppURL(targetUrl);
+      const searchParams = new URLSearchParams();
+      searchParams.set('return_to', location.pathname);
+
+      history.push({
+        pathname: flattenedTargetUrl,
+        search: searchParams.toString(),
+      });
+    }
+  };
+  return handleLinkIconClick;
+};
+const LinkIconButton = ({ item }: { item?: Partial<ObjectBrowserItem> }) => {
+  const site = useSelector<FormState, GetSiteResponse>(
+    (state) => state.site?.data,
+  );
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
+  const handleLinkIconClick = useLinkIconNavigation(item);
+  return (
+    hideProfileLinks && (
+      <div className="card-link-icon">
+        <Button aria-label="link" onClick={handleLinkIconClick}>
+          <Icon name={linkSVG} size="33px" />
+        </Button>
+      </div>
+    )
+  );
+};
+
+export default LinkIconButton;

package/src/reducers/errorContext.ts

@@ -0,0 +1,14 @@
+import { GET_CONTENT } from '@plone/volto/constants/ActionTypes';
+
+const initialState = {};
+
+export default function errorContext(state = initialState, action: any = {}) {
+  switch (action.type) {
+    case `${GET_CONTENT}_PENDING`:
+      return {};
+    case `${GET_CONTENT}_FAIL`:
+      return action.error.response?.body ?? {};
+    default:
+      return state;
+  }
+}

package/src/reducers/index.ts

@@ -0,0 +1,7 @@
+import errorContext from './errorContext';
+
+const reducers = {
+  errorContext,
+};
+
+export default reducers;