@kitconcept/volto-light-theme 7.2.0 → 7.3.0

package/.changelog.draft

@@ -1,14 +1,13 @@
-## 7.2.0 (2025-10-01)
+## 7.3.0 (2025-10-07)
 
-### Feature
+### Bugfix
 
-- Added smartTextRenderer helper for rendering markdown formatted links in plain text. @sneridagh [#679.1](https://github.com/kitconcept/volto-light-theme/pull/679.1)
-- Link support in descriptions in summaries via a custom mardown parser (smartText). @sneridagh [#679.2](https://github.com/kitconcept/volto-light-theme/pull/679.2)
+- Pass down items to `Card` component, so it can pass it down to `UniversalLink`. @sneridagh [#684](https://github.com/kitconcept/volto-light-theme/pull/684)
+- Added addressable classNames to FileSummary headline. @sneridagh [#686](https://github.com/kitconcept/volto-light-theme/pull/686)
+- Update socialmedia add-on to 2.0.0a10 and Volto to 18.27.3. @sneridagh 
 
-### Bugfix
+### Internal
 
-- Fixed icons and spacing in calendar event range widget. @sneridagh [#680](https://github.com/kitconcept/volto-light-theme/pull/680)
-- Added card img 100% width for account for small images. @sneridagh [#681](https://github.com/kitconcept/volto-light-theme/pull/681)
-- Fixed regression for contained teasers applying a margin only meant for contained ones. @sneridagh [#683](https://github.com/kitconcept/volto-light-theme/pull/683)
+- Replace "head title" with "kicker" in example content. @davisagli 
 
 

package/CHANGELOG.md

@@ -8,6 +8,18 @@
 
 <!-- towncrier release notes start -->
 
+## 7.3.0 (2025-10-07)
+
+### Bugfix
+
+- Pass down items to `Card` component, so it can pass it down to `UniversalLink`. @sneridagh [#684](https://github.com/kitconcept/volto-light-theme/pull/684)
+- Added addressable classNames to FileSummary headline. @sneridagh [#686](https://github.com/kitconcept/volto-light-theme/pull/686)
+- Update socialmedia add-on to 2.0.0a10 and Volto to 18.27.3. @sneridagh 
+
+### Internal
+
+- Replace "head title" with "kicker" in example content. @davisagli 
+
 ## 7.2.0 (2025-10-01)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.2.0",
+  "version": "7.3.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -72,7 +72,7 @@
     "@kitconcept/volto-logos-block": "^3.0.0-alpha.1",
     "@kitconcept/volto-separator-block": "^4.2.1",
     "@kitconcept/volto-slider-block": "^6.4.0",
-    "@plonegovbr/volto-social-media": "^2.0.0-alpha.6",
+    "@plonegovbr/volto-social-media": "^2.0.0-alpha.10",
     "classnames": "^2.2.6",
     "lodash": "4.17.21",
     "react": "18.2.0",

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

@@ -39,7 +39,7 @@ const DefaultTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               })}
               key={item['@id']}
             >
-              <Card href={showLink ? item['@id'] : null}>
+              <Card item={showLink ? item : null}>
                 <Card.Summary>
                   <Summary item={item} HeadingTag="h2" />
                 </Card.Summary>

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

@@ -62,7 +62,7 @@ const GridTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               })}
               key={item['@id']}
             >
-              <Card href={showLink ? item['@id'] : null}>
+              <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
             </div>

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

@@ -57,7 +57,7 @@ const SummaryTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
               })}
               key={item['@id']}
             >
-              <Card href={showLink ? item['@id'] : null}>
+              <Card item={showLink ? item : null}>
                 <ItemBodyTemplate item={item} />
               </Card>
             </div>

package/src/components/Blocks/Teaser/DefaultBody.tsx

@@ -23,10 +23,7 @@ const TeaserDefaultTemplate = (props) => {
   const { '@id': id, ...filteredData } = data;
 
   return (
-    <Card
-      href={showLink ? href['@id'] : null}
-      openLinkInNewTab={openLinkInNewTab}
-    >
+    <Card item={showLink ? href : null} openLinkInNewTab={openLinkInNewTab}>
       <Card.Image
         src={url && !image?.image_field ? url : undefined}
         item={!data.overwrite ? href : { ...href, ...filteredData }}

package/src/components/Summary/FileSummary.tsx

@@ -2,17 +2,30 @@ import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { smartTextRenderer } from '../../helpers/smartText';
 
+const FileHeadline = (props: { item: any }) => {
+  const { item } = props;
+  const headline =
+    item.getObjSize || FileType(item.mime_type) || item.head_title || '';
+
+  return headline?.length === 0 ? null : (
+    <div className="headline">
+      {item.getObjSize && <span className="file-size">{item.getObjSize}</span>}
+      {FileType(item.mime_type) && (
+        <span className="file-type">{FileType(item.mime_type)}</span>
+      )}
+      {item.head_title && (
+        <span className="headline-content">{item.head_title}</span>
+      )}
+    </div>
+  );
+};
+
 const FileSummary = (props: DefaultSummaryProps) => {
   const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
 
-  const headline = [item.getObjSize, FileType(item.mime_type), item.head_title]
-    .filter((x) => x)
-    .flatMap((x) => [' | ', x])
-    .slice(1);
-
   return (
     <>
-      {headline.length ? <div className="headline">{headline}</div> : null}
+      <FileHeadline item={item} />
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>

package/src/helpers/smartText.test.tsx

@@ -67,6 +67,16 @@ describe('smartTextRenderer', () => {
     expect(link).toHaveAttribute('href', '/space');
   });
 
+  it('renders carriage returns and newlines as line breaks', () => {
+    const { container } = renderWithWrapper('Line 1\r\nLine 2\nLine 3');
+    const brs = container.querySelectorAll('br');
+
+    expect(container).toHaveTextContent('Line 1Line 2Line 3');
+    expect(brs).toHaveLength(2);
+    expect(brs[0].nextSibling?.textContent).toBe('Line 2');
+    expect(brs[1].nextSibling?.textContent).toBe('Line 3');
+  });
+
   it('ignores bracketed text that is not a markdown link', () => {
     const description = 'Keep [this] but not a link.';
     const { container } = renderWithWrapper(description);

package/src/helpers/smartText.tsx

@@ -34,7 +34,18 @@ export const smartTextRenderer = (smartText) => {
 
   return parts.map((part, index) => {
     if (typeof part === 'string') {
-      return <React.Fragment key={`text-${index}`}>{part}</React.Fragment>;
+      const segments = part.split(/\r\n|\r|\n/);
+
+      return (
+        <React.Fragment key={`text-${index}`}>
+          {segments.map((segment, segmentIndex) => (
+            <React.Fragment key={`text-${index}-${segmentIndex}`}>
+              {segment}
+              {segmentIndex < segments.length - 1 ? <br /> : null}
+            </React.Fragment>
+          ))}
+        </React.Fragment>
+      );
     }
 
     return (

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

@@ -67,7 +67,7 @@ export const SimpleWithoutLink: Story = {
     </Card>
   ),
   args: {
-    href: '/folder/page',
+    href: undefined,
   },
   decorators: [
     (Story) => (

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/react';
+import Card from './Card';
+
+vi.mock(
+  '@plone/volto/components/manage/ConditionalLink/ConditionalLink',
+  () => {
+    return {
+      __esModule: true,
+      default: React.forwardRef(
+        (
+          {
+            condition,
+            href,
+            item,
+            openLinkInNewTab: _openLinkInNewTab,
+            children,
+            ...rest
+          }: {
+            condition?: boolean;
+            href?: string;
+            item?: { ['@id']?: string };
+            openLinkInNewTab?: boolean;
+            children?: React.ReactNode;
+          },
+          ref: React.ForwardedRef<HTMLAnchorElement>,
+        ) => {
+          if (!condition) return null;
+
+          const computedHref = href ?? item?.['@id'] ?? '#';
+
+          return (
+            <a {...rest} ref={ref} href={computedHref}>
+              {children}
+            </a>
+          );
+        },
+      ),
+    };
+  },
+);
+
+type SummaryProps = {
+  a11yLabelId?: string;
+};
+
+const SummaryContent = ({ a11yLabelId }: SummaryProps) => (
+  <h3 id={a11yLabelId}>Card title</h3>
+);
+
+const BodyContent = () => <div>Body content</div>;
+
+describe('Card', () => {
+  const renderCard = (props: React.ComponentProps<typeof Card>) =>
+    render(
+      <Card {...props}>
+        <Card.Summary>
+          <SummaryContent />
+        </Card.Summary>
+        <BodyContent />
+      </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');
+  });
+
+  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');
+  });
+
+  it('is not interactive when neither href nor item is provided', () => {
+    const { container } = renderCard({});
+    const card = container.querySelector('.card') as HTMLElement;
+
+    expect(card).not.toHaveAttribute('role');
+    expect(card).not.toHaveAttribute('tabindex');
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('is not interactive when neither href nor item is provided and one is null', () => {
+    const { container } = renderCard({ href: null });
+    const card = container.querySelector('.card') as HTMLElement;
+
+    expect(card).not.toHaveAttribute('role');
+    expect(card).not.toHaveAttribute('tabindex');
+    expect(container.querySelector('a')).toBeNull();
+  });
+
+  it('is not interactive when neither href nor item is provided and one is undefined', () => {
+    const { container } = renderCard({ item: undefined });
+    const card = container.querySelector('.card') as HTMLElement;
+
+    expect(card).not.toHaveAttribute('role');
+    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

@@ -3,16 +3,27 @@ import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/Cond
 import cx from 'classnames';
 import type { ObjectBrowserItem } from '@plone/types';
 
-type CardProps = {
+type BaseCardProps = {
   /** Optional additional CSS class names to apply to the card. */
   className?: string;
-  /** Optional URL to make the card clickable as a link. */
-  href?: string;
-  /** If true and `href` is provided, opens the link in a new browser tab. */
   openLinkInNewTab?: boolean;
   children?: React.ReactNode;
 };
 
+type CardPropsWithItem = BaseCardProps & {
+  /** List of items rendered within the card. Mutually exclusive with `href`. */
+  href?: never;
+  item: Partial<ObjectBrowserItem>;
+};
+
+type CardPropsWithoutItem = BaseCardProps & {
+  /** Optional URL to make the card clickable as a link. */
+  href?: string | undefined | null;
+  item?: never;
+};
+
+type CardProps = CardPropsWithItem | CardPropsWithoutItem;
+
 const DefaultImage = (props: any) => {
   const { src, item, imageField, alt, loading, responsive } = props;
   return (
@@ -35,7 +46,10 @@ const childrenWithProps = (children, extraProps) => {
 };
 
 const Card = (props: CardProps) => {
-  const { className, href, openLinkInNewTab } = props;
+  const hasItem = !!props.item;
+  const item = hasItem ? props.item : undefined;
+  const href = !hasItem ? props.href : undefined;
+  const { className, openLinkInNewTab } = props;
 
   const a11yLabelId = React.useId();
   const linkRef = React.useRef<HTMLAnchorElement>(null);
@@ -48,12 +62,14 @@ const Card = (props: CardProps) => {
     }
   };
 
+  const isInteractive = !!props.href || !!props.item;
+
   const onClick: React.MouseEventHandler<HTMLDivElement> = () => {
-    if (href) triggerNavigation();
+    if (isInteractive) triggerNavigation();
   };
 
   const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
-    if (!href) return;
+    if (!isInteractive) return;
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       triggerNavigation();
@@ -63,16 +79,17 @@ const Card = (props: CardProps) => {
   return (
     <div
       className={cx('card', className)}
-      onClick={onClick}
-      onKeyDown={onKeyDown}
-      role={href ? 'link' : undefined}
-      tabIndex={href ? 0 : undefined}
+      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={!!href}
+        condition={isInteractive}
         href={href}
+        item={item}
         openLinkInNewTab={openLinkInNewTab}
         ref={linkRef}
       />

package/src/stories/mocks.ts

@@ -98,7 +98,7 @@ export const teaserBlock = {
         'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.',
       getRemoteUrl: null,
       hasPreviewImage: true,
-      head_title: 'Head title',
+      head_title: 'Kicker',
       image_field: 'preview_image',
       image_scales: {
         preview_image: [
@@ -412,7 +412,7 @@ export const gridBlock = {
       '@type': 'teaser',
       description:
         'Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
-      head_title: 'Head title ',
+      head_title: 'Kicker',
       href: [
         {
           '@id': '.',
@@ -425,7 +425,7 @@ export const gridBlock = {
           title: 'Block: Teaser',
           getRemoteUrl: null,
           hasPreviewImage: true,
-          head_title: 'Head Title',
+          head_title: 'Kicker',
           image_field: 'preview_image',
           image_scales: {
             preview_image: [
@@ -502,7 +502,7 @@ export const gridBlock = {
       '@type': 'teaser',
       description:
         'Lorem ipsum dolor sit amet adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.',
-      head_title: 'Head title ',
+      head_title: 'Kicker',
       href: [
         {
           '@id': '.',
@@ -515,7 +515,7 @@ export const gridBlock = {
           Title: 'Block: Grid',
           getRemoteUrl: null,
           hasPreviewImage: true,
-          head_title: 'Head Title',
+          head_title: 'Kicker',
           image_field: 'preview_image',
           image_scales: {
             preview_image: [

package/src/theme/blocks/_teaser.scss

@@ -150,3 +150,8 @@
 #page-edit .block-editor-teaser.has--backgroundColor--grey {
   background-color: $lightgrey;
 }
+
+.file-teaser .headline span:not(:last-child)::after {
+  margin: 0 10px;
+  content: '|';
+}