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

package/src/components/Summary/NewsItemSummary.tsx

@@ -1,10 +1,17 @@
+import * as React from 'react';
 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;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
 
   const effective = parseDateFromCatalog(item.effective);
   const headline = [
@@ -31,9 +38,9 @@ const NewsItemSummary = (props: DefaultSummaryProps) => {
     <>
       {headline.length ? <div className="headline">{headline}</div> : null}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
     </>

package/src/components/Summary/PersonSummary.tsx

@@ -1,3 +1,4 @@
+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';
@@ -22,16 +23,22 @@ const messages = defineMessages({
 });
 
 const PersonSummary = (props: DefaultSummaryProps) => {
-  const { item, HeadingTag = 'h3', a11yLabelId, hide_description } = props;
+  const {
+    item,
+    LinkToItem = React.Fragment,
+    HeadingTag = 'div',
+    a11yLabelId,
+    hide_description,
+  } = props;
   const intl = useIntl();
 
   return (
     <>
       {item?.head_title && <div className="headline">{item.head_title}</div>}
       <HeadingTag className="title" id={a11yLabelId}>
-        {item.title ? item.title : item.id}
+        <LinkToItem>{item.title ? item.title : item.id}</LinkToItem>
       </HeadingTag>
-      {!hide_description && (
+      {!hide_description && item?.description !== '' && (
         <p className="description">{smartTextRenderer(item.description)}</p>
       )}
 

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

@@ -22,15 +22,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Summary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <DefaultSummary {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <DefaultSummary {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       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',
@@ -40,15 +42,17 @@ export const Summary: Story = {
 
 export const SummaryWithLink: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <DefaultSummary {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <DefaultSummary {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       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',
@@ -58,15 +62,17 @@ export const SummaryWithLink: Story = {
 
 export const SummaryHideDescription: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <DefaultSummary {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <DefaultSummary {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       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',
@@ -77,15 +83,17 @@ export const SummaryHideDescription: Story = {
 
 export const NewsItemSummary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <NewsItemSummaryComponent {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <NewsItemSummaryComponent {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       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',
@@ -98,15 +106,17 @@ export const NewsItemSummary: Story = {
 
 export const EventSummary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <EventSummaryComponent {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <EventSummaryComponent {...args} />
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       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',
@@ -119,17 +129,23 @@ export const EventSummary: Story = {
 
 export const FileSummary: Story = {
   render: (args) => (
-    <div style={{ width: '300px' }}>
-      <Wrapper>
-        <FileSummaryComponent {...args} />
-      </Wrapper>
+    <div className="card" style={{ width: '300px' }}>
+      <div className="card-summary">
+        <Wrapper>
+          <div className="file-teaser">
+            <FileSummaryComponent {...args} />
+          </div>
+        </Wrapper>
+      </div>
     </div>
   ),
   args: {
     item: {
-      title: 'Simple Card with strings',
+      title: 'Summary',
       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.',
+      getObjSize: '72.7 KB',
+      mime_type: 'application/pdf',
       head_title: 'Simple Card',
       start: '2023-01-01T11:00:00+00:00',
       end: '2023-12-31T12:00:00+00:00',

package/src/components/Tags/Tags.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { describe, it, beforeEach, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import Tags from './Tags';
+import type { Content } from '@plone/types';
+
+const mockConfig = vi.hoisted(() => ({
+  getComponent: vi.fn(() => ({
+    component: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="container">{children}</div>
+    ),
+  })),
+  settings: {
+    showTags: true,
+  },
+}));
+
+vi.mock('@plone/registry', () => ({
+  __esModule: true,
+  default: mockConfig,
+}));
+
+const mockUseLiveData = vi.fn();
+
+vi.mock('@kitconcept/volto-light-theme/helpers/useLiveData', () => ({
+  useLiveData: (content: unknown, behavior: unknown, field: string) =>
+    mockUseLiveData(content, behavior, field),
+}));
+
+describe('Tags', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfig.settings.showTags = true;
+  });
+
+  it('renders tag links when enabled', () => {
+    mockUseLiveData.mockReturnValue(['React', 'Volto']);
+    render(
+      <MemoryRouter>
+        <Tags content={{ subjects: ['React', 'Volto'] } as Content} />
+      </MemoryRouter>,
+    );
+
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveAttribute('href', '/search?Subject=React');
+    expect(links[1]).toHaveTextContent('Volto');
+  });
+
+  it('returns null when tags are hidden or empty', () => {
+    mockConfig.settings.showTags = false;
+    mockUseLiveData.mockReturnValue(['React']);
+    const { container: hidden } = render(
+      <MemoryRouter>
+        <Tags />
+      </MemoryRouter>,
+    );
+    expect(hidden.firstChild).toBeNull();
+
+    mockConfig.settings.showTags = true;
+    mockUseLiveData.mockReturnValue([]);
+    const { container: empty } = render(
+      <MemoryRouter>
+        <Tags />
+      </MemoryRouter>,
+    );
+    expect(empty.firstChild).toBeNull();
+  });
+});

package/src/components/Tags/{Tags.jsx → Tags.tsx}

@@ -1,11 +1,17 @@
+import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import config from '@plone/registry';
 import { useLiveData } from '@kitconcept/volto-light-theme/helpers/useLiveData';
+import type { Content } from '@plone/types';
 
-const Tags = ({ content }) => {
-  const tags = useLiveData(content, undefined, 'subjects') || [];
+type TagsProps = {
+  content?: Content;
+};
+
+const Tags: React.FC<TagsProps> = ({ content }) => {
+  const safeContent = content ?? ({ subjects: [] } as Content);
+  const tags = useLiveData<string[]>(safeContent, undefined, 'subjects') || [];
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
@@ -22,26 +28,4 @@ const Tags = ({ content }) => {
   );
 };
 
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-Tags.propTypes = {
-  content: PropTypes.shape({
-    subjects: PropTypes.arrayOf(PropTypes.string),
-  }),
-};
-
-/**
- * Default properties.
- * @property {Object} defaultProps Default properties.
- * @static
- */
-Tags.defaultProps = {
-  content: {
-    subjects: [],
-  },
-};
-
 export default Tags;

package/src/components/Theme/EventView.jsx

@@ -73,14 +73,14 @@ const EventView = (props) => {
   return (
     <Container id="page-document" className="view-wrapper event-view">
       <div className="dates">
-        {content?.head_title && (
-          <span className="head-title"> {content?.head_title}</span>
-        )}{' '}
         {formattedDate ? (
           <span className="day" suppressHydrationWarning>
             {formattedDate}
           </span>
-        ) : null}
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
+        )}
       </div>
       {hasBlocksData(content) ? (
         <>

package/src/components/Theme/ImageView.jsx

@@ -23,6 +23,7 @@ const ImageView = ({ content }) => {
   const Image = config.getComponent('Image').component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const width = config.settings.layout.defaultContainerWidth;
 
   return (
     <Container id="page-document" className="view-wrapper image-view">
@@ -30,7 +31,13 @@ const ImageView = ({ content }) => {
       <h1 className="documentFirstHeading">{content.title}</h1>
       {content?.image?.download && (
         <figure>
-          <Image item={content} imageField="image" alt="" responsive={true} />
+          <Image
+            item={content}
+            imageField="image"
+            alt=""
+            responsive={true}
+            sizes={`(max-width: ${width}px) 100vw, ${width}px`}
+          />
           <Caption
             title={content.title}
             description={content.description}

package/src/components/Theme/NewsItemView.jsx

@@ -21,9 +21,6 @@ const NewsItemView = ({ content }) => {
   return (
     <Container id="page-document" className="view-wrapper newsitem-view">
       <div className="dates">
-        {content?.head_title && (
-          <span className="head-title"> {content?.head_title}</span>
-        )}{' '}
         {content.effective ? (
           <FormattedDate
             key="day"
@@ -35,7 +32,10 @@ const NewsItemView = ({ content }) => {
             }}
             className="day"
           />
-        ) : null}
+        ) : null}{' '}
+        {content?.head_title && (
+          <span className="head-title"> {content?.head_title}</span>
+        )}
       </div>
       <RenderBlocks content={content} />
     </Container>

package/src/components/Theme/RenderBlocksV2.jsx

@@ -16,6 +16,7 @@ import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBloc
 import cx from 'classnames';
 import { groupByBGColor } from '../../helpers/grouping';
 import ErrorBoundary from '../Blocks/Block/ErrorBoundary';
+import StyleWrapperV3 from './StyleWrapperV3';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -68,6 +69,9 @@ const RenderBlocks = (props) => {
             }
           >
             {group.map((block) => {
+              const currentBlockModel =
+                blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
+                  ?.blockModel;
               const Block =
                 blocksConfig[content[blocksFieldname]?.[block]?.['@type']]
                   ?.view || ViewDefaultBlock;
@@ -104,23 +108,42 @@ const RenderBlocks = (props) => {
                       condition={blockWrapperTag}
                       as={blockWrapperTag}
                     >
-                      <StyleWrapper
-                        key={block}
-                        {...props}
-                        id={block}
-                        block={block}
-                        data={blockData}
-                        isContainer={isContainer}
-                      >
-                        <Block
-                          id={block}
-                          metadata={metadata}
-                          properties={content}
+                      {currentBlockModel === 3 ? (
+                        <StyleWrapperV3
+                          block={block}
+                          content={content}
                           data={blockData}
-                          path={getBaseUrl(location?.pathname || '')}
                           blocksConfig={blocksConfig}
-                        />
-                      </StyleWrapper>
+                          isContainer={isContainer}
+                        >
+                          <Block
+                            id={block}
+                            metadata={metadata}
+                            properties={content}
+                            data={blockData}
+                            path={getBaseUrl(location?.pathname || '')}
+                            blocksConfig={blocksConfig}
+                          />
+                        </StyleWrapperV3>
+                      ) : (
+                        <StyleWrapper
+                          key={block}
+                          {...props}
+                          id={block}
+                          block={block}
+                          data={blockData}
+                          isContainer={isContainer}
+                        >
+                          <Block
+                            id={block}
+                            metadata={metadata}
+                            properties={content}
+                            data={blockData}
+                            path={getBaseUrl(location?.pathname || '')}
+                            blocksConfig={blocksConfig}
+                          />
+                        </StyleWrapper>
+                      )}
                     </MaybeWrap>
                   </ErrorBoundary>
                 );

package/src/components/Widgets/ColorSwatch.stories.tsx

@@ -0,0 +1,197 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Wrapper from '@plone/volto/storybook';
+import type { StyleDefinition } from '@plone/types';
+
+import ColorSwatch, { type ColorSwatchProps } from './ColorSwatch';
+
+const palettes: StyleDefinition[] = [
+  {
+    name: 'default',
+    label: 'Default',
+    style: {
+      '--theme-color': '#ffffff',
+      '--theme-foreground-color': '#1b1c1d',
+      '--theme-low-contrast-foreground-color': '#585858',
+    },
+  },
+  {
+    name: 'warm',
+    label: 'Warm',
+    style: {
+      '--theme-color': '#fff5ed',
+      '--theme-foreground-color': '#6b2c1f',
+      '--theme-low-contrast-foreground-color': '#b06a54',
+    },
+  },
+  {
+    name: 'unstyled',
+    label: 'No Inline Style',
+    style: undefined,
+  },
+];
+
+const themePalettes: StyleDefinition[] = [
+  {
+    name: 'ocean',
+    label: 'Ocean',
+    style: {
+      '--theme-color': '#dff5ff',
+      '--theme-foreground-color': '#003d5b',
+      '--theme-low-contrast-foreground-color': '#5c6b73',
+    },
+  },
+  {
+    name: 'forest',
+    label: 'Forest',
+    style: {
+      '--theme-color': '#e6f4ea',
+      '--theme-foreground-color': '#1e4d2b',
+      '--theme-low-contrast-foreground-color': '#4b7754',
+    },
+  },
+];
+
+const palettesWithoutDefault: StyleDefinition[] = [
+  {
+    name: 'primary',
+    label: 'Primary',
+    style: {
+      '--theme-color': '#333333',
+      '--theme-foreground-color': '#f2f2f2',
+      '--theme-low-contrast-foreground-color': '#d9d9d9',
+    },
+  },
+  {
+    name: 'secondary',
+    label: 'Secondary',
+    style: {
+      '--theme-color': '#666666',
+      '--theme-foreground-color': '#ffffff',
+      '--theme-low-contrast-foreground-color': '#f0f0f0',
+    },
+  },
+];
+
+const meta = {
+  title: 'Widgets/ColorSwatch',
+  component: ColorSwatch,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div style={{ width: 320 }}>
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColorSwatch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const resolveSelectedColorName = (
+  args: ColorSwatchProps,
+  value: string | undefined,
+) => {
+  const colors = args.themes || args.colors || [];
+  const selectedColorName = colors.find(({ name }) => name === value)?.name;
+  const defaultSelectedColorName =
+    !selectedColorName && typeof args.default === 'string'
+      ? colors.find(({ name }) => name === args.default)?.name
+      : undefined;
+
+  if (selectedColorName || defaultSelectedColorName) {
+    return selectedColorName ?? defaultSelectedColorName;
+  }
+
+  return colors.find(({ name }) => name === 'default')?.name ?? colors[0]?.name;
+};
+
+const InteractiveColorSwatch = (args: ColorSwatchProps) => {
+  const [value, setValue] = React.useState(args.value);
+  const selectedValue = resolveSelectedColorName(args, value);
+
+  return (
+    <>
+      <ColorSwatch
+        {...args}
+        value={value}
+        onChange={(id, selectedValue) => {
+          setValue(selectedValue);
+          args.onChange?.(id, selectedValue);
+        }}
+      />
+      <div style={{ marginTop: '10px' }}>
+        The selected value is: <strong>{selectedValue || 'none'}</strong>
+      </div>
+    </>
+  );
+};
+
+export const NoPalettes: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Theme',
+    title: 'Theme',
+    themes: [],
+  },
+};
+
+export const DefaultPalette: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    value: 'default',
+    colors: palettes,
+  },
+};
+
+export const ThemePalette: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'theme',
+    label: 'Theme palette',
+    title: 'Theme palette',
+    value: 'ocean',
+    themes: themePalettes,
+  },
+};
+
+export const ColorPaletteWithDefault: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    colors: palettes,
+    default: 'warm',
+  },
+};
+
+export const ColorPaletteNoValueNoDefault: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    colors: palettes,
+  },
+};
+
+export const ColorPaletteNoValueNoDefaultWithFallbackToFirst: Story = {
+  render: (args) => <InteractiveColorSwatch {...args} />,
+  args: {
+    id: 'color',
+    label: 'Color palette',
+    title: 'Color palette',
+    colors: palettesWithoutDefault,
+  },
+};