@kitconcept/volto-light-theme 8.0.0-alpha.2 → 8.0.0-alpha.21

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/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/RenderBlocks.jsx

@@ -12,6 +12,7 @@ import config from '@plone/volto/registry';
 import ViewDefaultBlock from '@plone/volto/components/manage/Blocks/Block/DefaultView';
 import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
+import ErrorBoundary from '../Blocks/Block/ErrorBoundary';
 
 import StyleWrapperV3 from './StyleWrapperV3';
 import RenderBlocksV2 from './RenderBlocksV2';
@@ -69,48 +70,55 @@ const RenderBlocks = (props) => {
 
         if (Block) {
           return (
-            <MaybeWrap
-              key={block}
-              condition={blockWrapperTag}
-              as={blockWrapperTag}
+            <ErrorBoundary
+              key={`error-boundary-block-${block}`}
+              name={`blockId-${block}-type-${content[blocksFieldname]?.[block]?.['@type']}`}
+              block={block}
+              type={content[blocksFieldname]?.[block]?.['@type']}
             >
-              {currentBlockModel === 3 ? (
-                <StyleWrapperV3
-                  block={block}
-                  content={content}
-                  data={blockData}
-                  blocksConfig={blocksConfig}
-                  isContainer={isContainer}
-                >
-                  <Block
-                    id={block}
-                    metadata={metadata}
-                    properties={content}
+              <MaybeWrap
+                key={block}
+                condition={blockWrapperTag}
+                as={blockWrapperTag}
+              >
+                {currentBlockModel === 3 ? (
+                  <StyleWrapperV3
+                    block={block}
+                    content={content}
                     data={blockData}
-                    path={getBaseUrl(location?.pathname || '')}
                     blocksConfig={blocksConfig}
-                  />
-                </StyleWrapperV3>
-              ) : (
-                <StyleWrapper
-                  key={block}
-                  {...props}
-                  id={block}
-                  block={block}
-                  data={blockData}
-                  isContainer={isContainer}
-                >
-                  <Block
+                    isContainer={isContainer}
+                  >
+                    <Block
+                      id={block}
+                      metadata={metadata}
+                      properties={content}
+                      data={blockData}
+                      path={getBaseUrl(location?.pathname || '')}
+                      blocksConfig={blocksConfig}
+                    />
+                  </StyleWrapperV3>
+                ) : (
+                  <StyleWrapper
+                    key={block}
+                    {...props}
                     id={block}
-                    metadata={metadata}
-                    properties={content}
+                    block={block}
                     data={blockData}
-                    path={getBaseUrl(location?.pathname || '')}
-                    blocksConfig={blocksConfig}
-                  />
-                </StyleWrapper>
-              )}
-            </MaybeWrap>
+                    isContainer={isContainer}
+                  >
+                    <Block
+                      id={block}
+                      metadata={metadata}
+                      properties={content}
+                      data={blockData}
+                      path={getBaseUrl(location?.pathname || '')}
+                      blocksConfig={blocksConfig}
+                    />
+                  </StyleWrapper>
+                )}
+              </MaybeWrap>
+            </ErrorBoundary>
           );
         }
 

package/src/components/Theme/RenderBlocksV2.jsx

@@ -15,6 +15,8 @@ import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 import RenderEmptyBlock from '@plone/volto/components/theme/View/RenderEmptyBlock';
 import cx from 'classnames';
 import { groupByBGColor } from '../../helpers/grouping';
+import ErrorBoundary from '../Blocks/Block/ErrorBoundary';
+import StyleWrapperV3 from './StyleWrapperV3';
 
 const messages = defineMessages({
   unknownBlock: {
@@ -67,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;
@@ -92,29 +97,55 @@ const RenderBlocks = (props) => {
 
               if (Block) {
                 return (
-                  <MaybeWrap
-                    key={block}
-                    condition={blockWrapperTag}
-                    as={blockWrapperTag}
+                  <ErrorBoundary
+                    key={`error-boundary-block-${block}`}
+                    name={`blockId-${block}-type-${content[blocksFieldname]?.[block]?.['@type']}`}
+                    block={block}
+                    type={content[blocksFieldname]?.[block]?.['@type']}
                   >
-                    <StyleWrapper
+                    <MaybeWrap
                       key={block}
-                      {...props}
-                      id={block}
-                      block={block}
-                      data={blockData}
-                      isContainer={isContainer}
+                      condition={blockWrapperTag}
+                      as={blockWrapperTag}
                     >
-                      <Block
-                        id={block}
-                        metadata={metadata}
-                        properties={content}
-                        data={blockData}
-                        path={getBaseUrl(location?.pathname || '')}
-                        blocksConfig={blocksConfig}
-                      />
-                    </StyleWrapper>
-                  </MaybeWrap>
+                      {currentBlockModel === 3 ? (
+                        <StyleWrapperV3
+                          block={block}
+                          content={content}
+                          data={blockData}
+                          blocksConfig={blocksConfig}
+                          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>
                 );
               }