@kitconcept/volto-light-theme 7.1.0 → 7.2.0

package/.changelog.draft

@@ -1,18 +1,14 @@
-## 7.1.0 (2025-09-29)
+## 7.2.0 (2025-10-01)
 
 ### Feature
 
-- Add Basque translation @erral [#675](https://github.com/kitconcept/volto-light-theme/pull/675)
+- 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)
 
 ### Bugfix
 
-- Fix use Sass interpolation for CSS variable fallbacks @iRohitSingh [#673](https://github.com/kitconcept/volto-light-theme/pull/673)
-- Fix vertical spacing for first block in case that there is a change of color from default. @sneridagh [#676](https://github.com/kitconcept/volto-light-theme/pull/676)
-- Don't show parent tags when adding the child. @iFlameing 
-
-### Internal
-
-- Fix cypress test for calendar block. @iFlameing [#calendar-cypress](https://github.com/kitconcept/volto-light-theme/pull/calendar-cypress)
-- Misc bugfixes. Upgrade to Volto 18.27.2. @sneridagh 
+- 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)
 
 

package/CHANGELOG.md

@@ -8,6 +8,19 @@
 
 <!-- towncrier release notes start -->
 
+## 7.2.0 (2025-10-01)
+
+### Feature
+
+- 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)
+
+### Bugfix
+
+- 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)
+
 ## 7.1.0 (2025-09-29)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -33,14 +33,17 @@
     "@plone/scripts": "^3.6.2",
     "@storybook/react": "^8.6.12",
     "@testing-library/cypress": "10.0.3",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.2.0",
     "@types/jest": "^29.5.8",
     "@types/lodash": "^4.14.201",
     "@types/node": "^22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "typescript": "^5.7.3",
+    "react-intl-redux": "2.3.0",
+    "redux-mock-store": "1.5.4",
     "release-it": "^19.0.3",
+    "typescript": "^5.7.3",
     "vitest": "^3.1.2",
     "@plone/types": "1.4.5"
   },
@@ -48,12 +51,12 @@
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
     "@dnd-kit/utilities": "3.2.2",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0",
     "react-animate-height": "^3.2.3",
     "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
-    "embla-carousel-autoplay": "^8.0.0",
-    "embla-carousel-react": "^8.0.0",
     "@plone/components": "^3.0.2"
   },
   "peerDependencies": {

package/src/components/Blocks/EventCalendar/Search/components/DateRangePicker.tsx

@@ -22,6 +22,8 @@ import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import CalendarSVG from '@plone/volto/icons/calendar.svg';
 import ClearSVG from '@plone/volto/icons/clear.svg';
+import LeftArrowSVG from '@plone/volto/icons/left-key.svg';
+import RightArrowSVG from '@plone/volto/icons/right-key.svg';
 
 export interface DateRangePickerProps<T extends DateValue>
   extends RACDateRangePickerProps<T> {
@@ -64,13 +66,17 @@ export function DateRangePicker<T extends DateValue>({
 
       {description && <Text slot="description">{description}</Text>}
       <FieldError>{errorMessage}</FieldError>
-      <Popover>
+      <Popover offset={0}>
         <Dialog>
           <RangeCalendar>
             <header>
-              <Button slot="previous">◀</Button>
+              <Button slot="previous">
+                <Icon name={LeftArrowSVG} />
+              </Button>
               <Heading />
-              <Button slot="next">▶</Button>
+              <Button slot="next">
+                <Icon name={RightArrowSVG} />
+              </Button>
             </header>
             <CalendarGrid>
               {(date) => <CalendarCell date={date} />}

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

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import TeaserDefaultTemplate from './DefaultBody';
+
+const mockStore = configureStore();
+
+describe('TeaserDefaultTemplate', () => {
+  it('renders markdown links inside the description', () => {
+    const store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {
+        token: null,
+      },
+    });
+
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <TeaserDefaultTemplate
+            className=""
+            data={{
+              href: [
+                {
+                  '@id': '/news',
+                },
+              ],
+              preview_image: [],
+              title: 'News',
+              description: 'Read the [Portal](/portal) updates',
+              overwrite: true,
+            }}
+            isEditMode={false}
+          />
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const link = screen.getByRole('link', { name: 'Portal' });
+    expect(link.getAttribute('href')).toBe('/portal');
+
+    const mainLink = screen.getByRole('link', { name: 'News' });
+    expect(mainLink.getAttribute('href')).toBe('/news');
+  });
+});

package/src/components/Summary/DefaultSummary.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ObjectBrowserItem } from '@plone/types';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 export type DefaultSummaryProps = {
   item: Partial<ObjectBrowserItem>;
@@ -20,7 +21,9 @@ const DefaultSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/EventSummary.tsx

@@ -4,6 +4,7 @@ import {
 } from '@kitconcept/volto-light-theme/helpers/dates';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import type { DefaultSummaryProps } from './DefaultSummary';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 const EventSummary = (props: DefaultSummaryProps) => {
   const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
@@ -30,7 +31,9 @@ const EventSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/FileSummary.tsx

@@ -1,5 +1,6 @@
 import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
 import type { DefaultSummaryProps } from './DefaultSummary';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 const FileSummary = (props: DefaultSummaryProps) => {
   const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
@@ -15,7 +16,9 @@ const FileSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/NewsItemSummary.tsx

@@ -1,6 +1,7 @@
 import { parseDateFromCatalog } from '@kitconcept/volto-light-theme/helpers/dates';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
 import type { DefaultSummaryProps } from './DefaultSummary';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 const NewsItemSummary = (props: DefaultSummaryProps) => {
   const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
@@ -32,7 +33,9 @@ const NewsItemSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
     </>
   );
 };

package/src/components/Summary/PersonSummary.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import mailSVG from '@plone/volto/icons/email.svg';
 import locationSVG from '@plone/volto/icons/map.svg';
 import phoneSVG from '@plone/volto/icons/mobile.svg';
 import type { DefaultSummaryProps } from './DefaultSummary';
 import { defineMessages, useIntl } from 'react-intl';
+import { smartTextRenderer } from '../../helpers/smartText';
 
 const messages = defineMessages({
   phone: {
@@ -31,7 +31,9 @@ const PersonSummary = (props: DefaultSummaryProps) => {
       <HeadingTag className="title" id={a11yLabelId}>
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!hide_description && <p className="description">{item.description}</p>}
+      {!hide_description && (
+        <p className="description">{smartTextRenderer(item.description)}</p>
+      )}
 
       {item.contact_email && (
         <div className="summary-extra-info email">

package/src/components/Summary/Summary.stories.tsx

@@ -38,6 +38,24 @@ export const Summary: Story = {
   },
 };
 
+export const SummaryWithLink: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <DefaultSummary {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        '[Lorem ipsum](https://example.com) 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.',
+      head_title: 'Simple Card',
+    },
+  },
+};
+
 export const SummaryHideDescription: Story = {
   render: (args) => (
     <div style={{ width: '300px' }}>

package/src/helpers/smartText.test.tsx

@@ -0,0 +1,95 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { smartTextRenderer } from './smartText';
+
+vi.mock('@plone/volto/components/manage/UniversalLink/UniversalLink', () => ({
+  default: ({
+    href,
+    children,
+  }: {
+    href: string;
+    children: React.ReactNode;
+  }) => (
+    <a href={href} data-testid="universal-link">
+      {children}
+    </a>
+  ),
+}));
+
+const renderWithWrapper = (description: string | null | undefined) =>
+  render(
+    <div data-testid="description-wrapper">
+      {smartTextRenderer(description)}
+    </div>,
+  );
+
+describe('smartTextRenderer', () => {
+  it('returns null for empty description', () => {
+    expect(smartTextRenderer('')).toBeNull();
+    expect(smartTextRenderer(null)).toBeNull();
+    expect(smartTextRenderer(undefined)).toBeNull();
+  });
+
+  it('renders plain text without creating links', () => {
+    const description = 'This is a plain description.';
+    const { container, queryByTestId } = renderWithWrapper(description);
+
+    expect(container).toHaveTextContent(description);
+    expect(queryByTestId('universal-link')).toBeNull();
+  });
+
+  it('renders a single markdown link and preserves surrounding text', () => {
+    const description = 'Visit [Google](https://google.com) for more info.';
+    const { container } = renderWithWrapper(description);
+    const link = screen.getByRole('link', { name: 'Google' });
+
+    expect(container).toHaveTextContent('Visit Google for more info.');
+    expect(link).toHaveAttribute('href', 'https://google.com');
+  });
+
+  it('renders multiple markdown links with text segments between them', () => {
+    const description = 'Check [One](/one) and [Two](/two) for details.';
+    renderWithWrapper(description);
+    const links = screen.getAllByRole('link');
+
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/one');
+    expect(links[1]).toHaveAttribute('href', '/two');
+  });
+
+  it('trims whitespace around link text and href values', () => {
+    const description = 'Go to [  Space  ](  /space  )!';
+    const { container } = renderWithWrapper(description);
+    const link = screen.getByRole('link', { name: 'Space' });
+
+    expect(container).toHaveTextContent('Go to Space!');
+    expect(link).toHaveAttribute('href', '/space');
+  });
+
+  it('ignores bracketed text that is not a markdown link', () => {
+    const description = 'Keep [this] but not a link.';
+    const { container } = renderWithWrapper(description);
+
+    expect(container).toHaveTextContent('Keep [this] but not a link.');
+  });
+
+  it('resets the markdown matcher between invocations', () => {
+    const { rerender } = renderWithWrapper('First [Link](/first) call.');
+    expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(
+      'href',
+      '/first',
+    );
+
+    rerender(
+      <div data-testid="description-wrapper">
+        {smartTextRenderer('Second [Link](/second) call.')}
+      </div>,
+    );
+
+    expect(screen.getByRole('link', { name: 'Link' })).toHaveAttribute(
+      'href',
+      '/second',
+    );
+  });
+});

package/src/helpers/smartText.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+
+const linkPattern = /\[([^\]]+)\]\(([^)]+)\)/g;
+
+export const smartTextRenderer = (smartText) => {
+  if (!smartText) return null;
+
+  linkPattern.lastIndex = 0;
+
+  const parts = [];
+  let lastIndex = 0;
+  let match;
+
+  while ((match = linkPattern.exec(smartText)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(smartText.slice(lastIndex, match.index));
+    }
+
+    const [, text, href] = match;
+
+    parts.push({
+      type: 'link',
+      text: text.trim(),
+      href: href.trim(),
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  if (lastIndex < smartText.length) {
+    parts.push(smartText.slice(lastIndex));
+  }
+
+  return parts.map((part, index) => {
+    if (typeof part === 'string') {
+      return <React.Fragment key={`text-${index}`}>{part}</React.Fragment>;
+    }
+
+    return (
+      <UniversalLink href={part.href} key={`link-${index}`}>
+        {part.text}
+      </UniversalLink>
+    );
+  });
+};

package/src/theme/_bgcolor-blocks-layout.scss

@@ -3,17 +3,8 @@
   color: var(--theme-foreground-color);
   @include color-block-change-vertical-spacing();
 
-  // // TODO: investigate why on SSR the whitespace is removed and in client not
-  // // This is a workaround to avoid the two use cases...
-  // &[style*='--theme-color:#fff']:first-child,
-  // &[style*='--theme-color: #fff']:first-child {
-  //   padding-top: 0;
-  // }
-
-  // &:first-child:has(> .previous--has--same--backgroundColor) {
-  //   padding-top: 0;
-  // }
-
+  // First block of the page has no top padding, only if previous block has same background color
+  // eg: when it's different than default.
   &:first-child:has(> :first-child.previous--has--same--backgroundColor) {
     padding-top: 0;
   }

package/src/theme/_layout.scss

@@ -368,7 +368,7 @@ External link removal for all the blocks.
   .block.teaser.has--align--center,
   .block.eventMetadata .details-container,
   .block-editor-teaser .teaser-item.default,
-  .block-editor-teaser .card-inner, // deprecate when category is in place
+  .block-editor-teaser:not(.contained) .card-inner, // deprecate when category is in place
   .block-editor-slateTable .block.table,
   .block-editor-highlight .teaser-description-title,
   .block-editor-toc .table-of-contents,

package/src/theme/blocks/_eventSearch.scss

@@ -417,12 +417,20 @@ This is css code of popup of calendar */
   border-radius: unset;
 }
 .react-aria-RangeCalendar {
+  font-size: 24px;
+
+  table .react-aria-CalendarCell {
+    width: 2.75rem;
+  }
+
   header {
     display: flex;
+    margin: 10px 0 20px 0;
   }
 
   //ask victor about this. Font family causing unwanted problems in rendering of icon.
   .react-aria-Button {
+    border: none;
     border-radius: unset;
     font-family: unset;
   }
@@ -432,3 +440,17 @@ This is css code of popup of calendar */
     text-align: center;
   }
 }
+
+// body:has(.react-aria-Popover[data-trigger='DateRangePicker'])
+//   .react-aria-Group {
+//   border-bottom: none;
+// }
+
+.react-aria-Popover[data-trigger='DateRangePicker'] {
+  min-width: var(--trigger-width);
+  border-top: none;
+}
+
+.react-aria-Dialog:has(.react-aria-RangeCalendar) {
+  padding: 10px;
+}

package/src/theme/card.scss

@@ -24,6 +24,9 @@
 
     img {
       display: block;
+      // Beware of this, it can cause issues with some images, added back on 2025-09-30 @sneridagh
+      // Small images will be pixelated though
+      width: 100%;
       aspect-ratio: var(--image-aspect-ratio, $aspect-ratio) !important;
     }
   }

package/tsconfig.json

@@ -12,6 +12,7 @@
     "noEmit": true,
     "lib": ["es2022", "dom", "dom.iterable"],
     "jsx": "react-jsx",
+    "types": ["vitest", "@testing-library/jest-dom"],
     "paths": {
       "@plone/volto/*": [
         "../../core/packages/volto/src/*",

package/vitest.config.mjs

@@ -4,11 +4,18 @@ import path from 'path';
 
 export default defineConfig({
   ...voltoVitestConfig,
+  resolve: {
+    alias: {
+      ...voltoVitestConfig.resolve.alias,
+      // Alias for absolute imports
+      '@kitconcept/volto-light-theme': path.resolve(__dirname, './src'),
+      '@kitconcept/volto-light-theme/': path.resolve(__dirname, './src/'),
+    },
+  },
   server: {
     fs: {
       allow: [
-        // Allow vite/vitest to access these folders
-        '..', // allow going up from frontend/
+        '..',
         path.resolve(__dirname, '../../../../../core/packages/volto'),
       ],
     },