@kitconcept/volto-light-theme 6.0.0 → 7.0.0-alpha.0

package/.changelog.draft

@@ -1,3 +1,12 @@
-## 6.0.0 (2025-05-14)
+## 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)
 
 

package/CHANGELOG.md

@@ -8,6 +8,23 @@
 
 <!-- towncrier release notes start -->
 
+## 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
+
+- 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 
+
 ## 6.0.0 (2025-05-14)
 
 ## 6.0.0-alpha.25 (2025-05-14)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0",
+  "version": "7.0.0-alpha.0",
   "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 '../../Card/Card';
+import isEmpty from 'lodash/isEmpty';
 
 const messages = defineMessages({
   PleaseChooseContent: {
@@ -32,11 +32,17 @@ 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="" />
@@ -44,42 +50,23 @@ const TeaserDefaultTemplate = (props) => {
             </div>
           </Message>
         )}
-        {href && (
-          <MaybeWrap
-            condition={!isEditMode}
-            as={UniversalLink}
-            href={href['@id']}
-            target={
-              data.openLinkInNewTab ||
-              (openExternalLinkInNewTab && !isInternalURL(href['@id']))
-                ? '_blank'
-                : null
-            }
-          >
-            <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
+          href={!isEditMode ? href['@id'] : null}
+          openLinkInNewTab={openLinkInNewTab}
+        >
+          <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/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 '../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>
+    ),
+  ],
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import ConditionalLink from '@plone/volto/components/manage/ConditionalLink/ConditionalLink';
+import cx from 'classnames';
+import type { ObjectBrowserItem } from '@plone/types';
+
+type CardProps = {
+  /** 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;
+};
+
+const DefaultImage = (props: any) => {
+  const { src, item, imageField, alt, loading, responsive } = props;
+  return (
+    <img
+      src={src || item?.image_scales?.[imageField]?.[0].download}
+      alt={alt}
+      loading={loading}
+      className={responsive ? 'responsive' : ''}
+    />
+  );
+};
+
+const childrenWithProps = (children, extraProps) => {
+  return React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, extraProps);
+    }
+    return child;
+  });
+};
+
+const Card = (props: CardProps) => {
+  const { className, href, 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 onClick: React.MouseEventHandler<HTMLDivElement> = () => {
+    if (href) triggerNavigation();
+  };
+
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (!href) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      triggerNavigation();
+    }
+  };
+
+  return (
+    <div
+      className={cx('card', className)}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      role={href ? 'link' : undefined}
+      tabIndex={href ? 0 : undefined}
+    >
+      {/* @ts-expect-error since this has no children, should fail */}
+      <ConditionalLink
+        aria-labelledby={a11yLabelId}
+        condition={!!href}
+        href={href}
+        openLinkInNewTab={openLinkInNewTab}
+        ref={linkRef}
+      />
+      <div className="card-inner">
+        {childrenWithProps(props.children, { a11yLabelId })}
+      </div>
+    </div>
+  );
+};
+
+type CardImageProps = {
+  /** The source URL of the image to display. */
+  src?: string;
+  /** An optional item object, used to provide image data from the current item. */
+  item?: Partial<ObjectBrowserItem>;
+  /** An optional image object, used as an alternative source of image data for the item. */
+  image?: Partial<ObjectBrowserItem>;
+  /** A custom React component to render the image. */
+  imageComponent?: React.ComponentType<any>;
+  children?: React.ReactNode;
+};
+
+const CardImage = (props: CardImageProps) => {
+  const { src, item, image, imageComponent } = props;
+  const Image = imageComponent || DefaultImage;
+
+  return (
+    <div className="image-wrapper">
+      {src ? (
+        <Image src={src} alt="" loading="lazy" responsive={true} />
+      ) : item || image ? (
+        (item?.hasPreviewImage || item?.image_field || image) && (
+          <Image
+            item={image || item}
+            imageField={image ? image.image_field : item?.image_field}
+            alt=""
+            loading="lazy"
+            responsive={true}
+          />
+        )
+      ) : (
+        props.children
+      )}
+    </div>
+  );
+};
+
+type CardSummaryProps = {
+  /** The ID of the element that labels the card. */
+  a11yLabelId?: string;
+  children?: React.ReactNode;
+};
+
+const CardSummary = (props: CardSummaryProps) => (
+  <div className="card-summary">
+    {childrenWithProps(props.children, { a11yLabelId: props.a11yLabelId })}
+  </div>
+);
+
+const CardActions = (props: any) => (
+  <div className="actions-wrapper">{props.children}</div>
+);
+
+Card.Image = CardImage;
+Card.Summary = CardSummary;
+Card.Actions = CardActions;
+
+export default Card;

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>}
     </>
   );
 };