@kitconcept/volto-light-theme 6.0.1 → 7.0.0-alpha.1

package/.changelog.draft

@@ -1,7 +1,11 @@
-## 6.0.1 (2025-05-15)
+## 7.0.0-alpha.1 (2025-05-16)
+
+### Breaking
+
+- Move the `Card` component to `primitives` folder. @sneridagh [#548](https://github.com/kitconcept/volto-light-theme/pull/548)
 
 ### Bugfix
 
-- Removed background color specification in the whole footer. We only want it in some areas of it, and depending if some sections are present or not. @sneridagh 
+- Fix condition on showing the card or not if the placeholder is present. @sneridagh [#548](https://github.com/kitconcept/volto-light-theme/pull/548)
 
 

package/CHANGELOG.md

@@ -8,6 +8,27 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.1 (2025-05-16)
+
+### Breaking
+
+- Move the `Card` component to `primitives` folder. @sneridagh [#548](https://github.com/kitconcept/volto-light-theme/pull/548)
+
+### Bugfix
+
+- Fix condition on showing the card or not if the placeholder is present. @sneridagh [#548](https://github.com/kitconcept/volto-light-theme/pull/548)
+
+## 7.0.0-alpha.0 (2025-05-16)
+
+### Breaking
+
+- The new card primitive has been applied to all Teasers. @sneridagh
+  See upgrade guide for more information. [#537](https://github.com/kitconcept/volto-light-theme/pull/537)
+
+### Feature
+
+- Added new card primitive. @sneridagh [#537](https://github.com/kitconcept/volto-light-theme/pull/537)
+
 ## 6.0.1 (2025-05-15)
 
 ### Bugfix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.1",
+  "version": "7.0.0-alpha.1",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@plone/scripts": "^3.6.2",
+    "@storybook/react": "^8.6.12",
     "@types/jest": "^29.5.8",
     "@types/lodash": "^4.14.201",
     "@types/react": "^18.3.12",

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

@@ -4,11 +4,11 @@ import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
-import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
 import DefaultSummary from '@kitconcept/volto-light-theme/components/Summary/DefaultSummary';
+import Card from '../../../primitives/Card/Card';
+import isEmpty from 'lodash/isEmpty';
 
 const messages = defineMessages({
   PleaseChooseContent: {
@@ -32,53 +32,41 @@ const TeaserDefaultTemplate = (props) => {
       dependencies: [href['@type']],
     }).component || DefaultSummary;
   const { openExternalLinkInNewTab } = config.settings;
+  const openLinkInNewTab =
+    data.openLinkInNewTab ||
+    (openExternalLinkInNewTab && !isInternalURL(href['@id']))
+      ? '_blank'
+      : null;
+  const { '@id': id, ...filteredData } = data;
 
   return (
     <div className={cx('block teaser', className)} style={style}>
       <>
-        {!href && isEditMode && (
+        {isEmpty(href) && isEditMode ? (
           <Message>
             <div className="teaser-item placeholder">
               <img src={imageBlockSVG} alt="" />
               <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
             </div>
           </Message>
-        )}
-        {href && (
-          <MaybeWrap
-            condition={!isEditMode}
-            as={UniversalLink}
-            href={href['@id']}
-            target={
-              data.openLinkInNewTab ||
-              (openExternalLinkInNewTab && !isInternalURL(href['@id']))
-                ? '_blank'
-                : null
-            }
+        ) : (
+          <Card
+            href={!isEditMode ? href['@id'] : null}
+            openLinkInNewTab={openLinkInNewTab}
           >
-            <div className="teaser-item default">
-              {url && !image?.image_field ? (
-                <div className="image-wrapper">
-                  <Image src={url} alt="" loading="lazy" responsive={true} />
-                </div>
-              ) : (
-                (href.hasPreviewImage || href.image_field || image) && (
-                  <div className="image-wrapper">
-                    <Image
-                      item={image || href}
-                      imageField={image ? image.image_field : href.image_field}
-                      alt=""
-                      loading="lazy"
-                      responsive={true}
-                    />
-                  </div>
-                )
-              )}
-              <div className="content">
-                <Summary item={{ ...href, ...data }} HeadingTag="h2" />
-              </div>
-            </div>
-          </MaybeWrap>
+            <Card.Image
+              src={url && !image?.image_field ? url : undefined}
+              item={!data.overwrite ? href : { ...href, ...filteredData }}
+              image={data.overwrite ? image : undefined}
+              imageComponent={Image}
+            />
+            <Card.Summary>
+              <Summary
+                item={!data.overwrite ? href : { ...href, ...filteredData }}
+                HeadingTag="h2"
+              />
+            </Card.Summary>
+          </Card>
         )}
       </>
     </div>

package/src/components/Summary/DefaultSummary.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { ObjectBrowserItem } from '@plone/types';
+
+export type DefaultSummaryProps = {
+  item: Partial<ObjectBrowserItem>;
+  HeadingTag?: React.ElementType;
+  a11yLabelId?: string;
+  hide_description?: boolean;
+};
+
+const DefaultSummary = (props: DefaultSummaryProps) => {
+  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  return (
+    <>
+      {item?.head_title && <div className="headline">{item.head_title}</div>}
+      <HeadingTag className="title" id={a11yLabelId}>
+        {item.title ? item.title : item.id}
+      </HeadingTag>
+      {!hide_description && <p className="description">{item.description}</p>}
+    </>
+  );
+};
+
+export default DefaultSummary;

package/src/components/Summary/{EventSummary.jsx → EventSummary.tsx}

@@ -3,9 +3,10 @@ import {
   formatDateRange,
 } from '@kitconcept/volto-light-theme/helpers/dates';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+import type { DefaultSummaryProps } from './DefaultSummary';
 
-const EventSummary = (props) => {
-  const { item, HeadingTag = 'h3' } = props;
+const EventSummary = (props: DefaultSummaryProps) => {
+  const { item, HeadingTag = 'h3', hide_description } = props;
   const start = parseDateFromCatalog(item.start);
   const end = parseDateFromCatalog(item.end);
   const headline = [
@@ -14,6 +15,7 @@ const EventSummary = (props) => {
         {formatDateRange({ start, end, locale: item.Language })}
       </span>
     ) : start ? (
+      // @ts-expect-error
       <FormattedDate key="day" date={start} />
     ) : null,
     item.head_title,
@@ -28,9 +30,7 @@ const EventSummary = (props) => {
       <HeadingTag className="title">
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!item.hide_description && (
-        <p className="description">{item.description}</p>
-      )}
+      {!hide_description && <p className="description">{item.description}</p>}
     </>
   );
 };

package/src/components/Summary/{FileSummary.jsx → FileSummary.tsx}

@@ -1,7 +1,8 @@
 import FileType from '@kitconcept/volto-light-theme/helpers/Filetype';
+import type { DefaultSummaryProps } from './DefaultSummary';
 
-const FileSummary = (props) => {
-  const { item, HeadingTag = 'h3' } = props;
+const FileSummary = (props: DefaultSummaryProps) => {
+  const { item, HeadingTag = 'h3', hide_description } = props;
 
   const headline = [item.getObjSize, FileType(item.mime_type), item.head_title]
     .filter((x) => x)
@@ -14,9 +15,7 @@ const FileSummary = (props) => {
       <HeadingTag className="title">
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!item.hide_description && (
-        <p className="description">{item.description}</p>
-      )}
+      {!hide_description && <p className="description">{item.description}</p>}
     </>
   );
 };

package/src/components/Summary/{NewsItemSummary.jsx → NewsItemSummary.tsx}

@@ -1,12 +1,14 @@
 import { parseDateFromCatalog } from '@kitconcept/volto-light-theme/helpers/dates';
 import FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+import type { DefaultSummaryProps } from './DefaultSummary';
 
-const NewsItemSummary = (props) => {
-  const { item, HeadingTag = 'h3' } = props;
+const NewsItemSummary = (props: DefaultSummaryProps) => {
+  const { item, HeadingTag = 'h3', hide_description } = props;
 
   const effective = parseDateFromCatalog(item.effective);
   const headline = [
     effective ? (
+      // @ts-expect-error
       <FormattedDate
         key="day"
         date={effective}
@@ -30,9 +32,7 @@ const NewsItemSummary = (props) => {
       <HeadingTag className="title">
         {item.title ? item.title : item.id}
       </HeadingTag>
-      {!item.hide_description && (
-        <p className="description">{item.description}</p>
-      )}
+      {!hide_description && <p className="description">{item.description}</p>}
     </>
   );
 };

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import DefaultSummary from './DefaultSummary';
+import { default as NewsItemSummaryComponent } from './NewsItemSummary';
+import { default as EventSummaryComponent } from './EventSummary';
+import { default as FileSummaryComponent } from './FileSummary';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+
+const meta = {
+  title: 'Primitives/Summary',
+  component: DefaultSummary,
+  parameters: {
+    layout: 'centered',
+    // backgrounds: { disable: true },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DefaultSummary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Summary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <DefaultSummary {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        '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.',
+      head_title: 'Simple Card',
+    },
+  },
+};
+
+export const SummaryHideDescription: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <DefaultSummary {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        '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.',
+      head_title: 'Simple Card',
+    },
+    hide_description: true,
+  },
+};
+
+export const NewsItemSummary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <NewsItemSummaryComponent {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        '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.',
+      head_title: 'Simple Card',
+      start: '2023-01-01T11:00:00+00:00',
+      end: '2023-12-31T12:00:00+00:00',
+      effective: '2023-07-06T18:35:00+00:00',
+    },
+  },
+};
+
+export const EventSummary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <EventSummaryComponent {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        '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.',
+      head_title: 'Simple Card',
+      start: '2023-01-01T11:00:00+00:00',
+      end: '2023-12-31T12:00:00+00:00',
+      effective: '2023-07-06T18:35:00+00:00',
+    },
+  },
+};
+
+export const FileSummary: Story = {
+  render: (args) => (
+    <div style={{ width: '300px' }}>
+      <Wrapper>
+        <FileSummaryComponent {...args} />
+      </Wrapper>
+    </div>
+  ),
+  args: {
+    item: {
+      title: 'Simple Card with strings',
+      description:
+        '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.',
+      head_title: 'Simple Card',
+      start: '2023-01-01T11:00:00+00:00',
+      end: '2023-12-31T12:00:00+00:00',
+      effective: '2023-07-06T18:35:00+00:00',
+    },
+  },
+};

package/src/components/Widgets/ObjectList.tsx

@@ -176,7 +176,8 @@ const ObjectListWidget = (props: ObjectListWidgetProps) => {
     setActiveObject(newIndex);
   }
 
-  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
+  const objectSchema =
+    typeof schema === 'function' ? schema({ ...props, activeObject }) : schema;
 
   function handleDragEnd(event) {
     const { active, over } = event;

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

@@ -0,0 +1,251 @@
+import React from 'react';
+import Card from './Card';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { ObjectBrowserItem } from '../../stories/mocks';
+import Wrapper from '@plone/volto/storybook';
+import { Button } from '@plone/components';
+import DefaultSummary from '../../components/Summary/DefaultSummary';
+
+const meta = {
+  title: 'Primitives/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    // backgrounds: { disable: true },
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <Story />
+      </Wrapper>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const item = {
+  title: 'Card Title',
+  description:
+    '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.',
+  head_title: 'Card Kicker',
+};
+const imageSRC = 'black-starry-night.jpg';
+const imageSRC2 = 'image-light.jpg';
+
+export const Simple: Story = {
+  render: (args) => (
+    <Card href={args.href}>
+      <Card.Image src={imageSRC} />
+      <Card.Summary>
+        <DefaultSummary item={item} HeadingTag="h2" />
+      </Card.Summary>
+    </Card>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SimpleWithoutLink: Story = {
+  render: (args) => (
+    <Card>
+      <Card.Image src={imageSRC} />
+      <Card.Summary>
+        <DefaultSummary item={item} HeadingTag="h2" />
+      </Card.Summary>
+    </Card>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const AlignedLeft: Story = {
+  render: (args) => (
+    <div
+      className="has--align--left"
+      style={{ width: 'var(--default-container-width)' }}
+    >
+      <Card href={args.href}>
+        <Card.Image src={imageSRC} />
+        <Card.Summary>
+          <DefaultSummary item={item} HeadingTag="h2" />
+        </Card.Summary>
+      </Card>
+    </div>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+};
+
+export const AlignedRight: Story = {
+  render: (args) => (
+    <div
+      className="has--align--right"
+      style={{ width: 'var(--default-container-width)' }}
+    >
+      <Card href={args.href}>
+        <Card.Image src={imageSRC} />
+        <Card.Summary>
+          <DefaultSummary item={item} HeadingTag="h2" />
+        </Card.Summary>
+      </Card>
+    </div>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+};
+
+export const SimpleContained: Story = {
+  render: (args) => (
+    <div
+      className="contained"
+      style={{ ['--theme-high-contrast-color' as string]: '#ecebeb' }}
+    >
+      <Card href={args.href}>
+        <Card.Image src={imageSRC} />
+        <Card.Summary>
+          <DefaultSummary item={item} HeadingTag="h2" />
+        </Card.Summary>
+      </Card>
+    </div>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const SimpleListing: Story = {
+  render: (args) => (
+    <div
+      className="card-listing"
+      style={{ width: 'var(--default-container-width)' }}
+    >
+      <Card href={args.href}>
+        <Card.Image src={imageSRC} />
+        <Card.Summary>
+          <DefaultSummary item={item} HeadingTag="h2" />
+        </Card.Summary>
+      </Card>
+    </div>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+};
+
+export const CustomImage: Story = {
+  render: (args) => (
+    <div
+      className="card-listing"
+      style={{ width: 'var(--default-container-width)' }}
+    >
+      <Card href={args.href}>
+        <Card.Image>
+          <div className="date-inset">
+            <div className="day">10</div>
+            <div className="month">May 2025</div>
+          </div>
+        </Card.Image>
+        <Card.Summary>
+          <DefaultSummary item={item} HeadingTag="h2" />
+        </Card.Summary>
+      </Card>
+    </div>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+};
+
+export const CustomAction: Story = {
+  render: (args) => (
+    <div style={{ width: 'var(--default-container-width)' }}>
+      <Card href={args.href}>
+        <Card.Image src={imageSRC} />
+        <Card.Summary>
+          <DefaultSummary item={item} HeadingTag="h2" />
+        </Card.Summary>
+        <Card.Actions>
+          <div style={{ marginTop: '20px' }}>
+            <a href="https://www.plone.org" rel="noreferrer" target="_blank">
+              <Button>Read More</Button>
+            </a>
+          </div>
+        </Card.Actions>
+      </Card>
+    </div>
+  ),
+  args: {
+    href: '/folder/page',
+  },
+};
+
+export const WithItem: Story = {
+  render: (args) => (
+    <Card href={args.href}>
+      <Card.Image src={imageSRC} />
+      <Card.Summary>
+        <DefaultSummary item={ObjectBrowserItem(imageSRC)} HeadingTag="h2" />
+      </Card.Summary>
+    </Card>
+  ),
+  args: {
+    href: ObjectBrowserItem(imageSRC)['@id'],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithCustomImage: Story = {
+  render: (args) => (
+    <Card href={args.href}>
+      <Card.Image image={ObjectBrowserItem(imageSRC2)} />
+      <Card.Summary>
+        <DefaultSummary item={ObjectBrowserItem(imageSRC)} HeadingTag="h2" />
+      </Card.Summary>
+    </Card>
+  ),
+  args: {
+    href: ObjectBrowserItem(imageSRC)['@id'],
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '300px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};