@eeacms/volto-clms-theme 1.1.211 → 1.1.212

package/CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.1.212](https://github.com/eea/volto-clms-theme/compare/1.1.211...1.1.212) - 19 February 2025
+
+#### :rocket: New Features
+
+- feat: Implementation of the dataset listing enhancement prototype within the product -refs #280654 [ana-oprea - [`5c24fec`](https://github.com/eea/volto-clms-theme/commit/5c24fec680e7721bc092f1d842c351ecaa2d3ce9)]
+
+#### :bug: Bug Fixes
+
+- fix: lint errors [ana-oprea - [`6b61c4d`](https://github.com/eea/volto-clms-theme/commit/6b61c4d1091cb68424dd545df0a669d277c5e873)]
+
 ### [1.1.211](https://github.com/eea/volto-clms-theme/compare/1.1.210...1.1.211) - 13 February 2025
 
 ### [1.1.210](https://github.com/eea/volto-clms-theme/compare/1.1.209...1.1.210) - 10 February 2025

package/jest-addon.config.js

@@ -15,6 +15,8 @@ module.exports = {
       '<rootDir>/src/addons/volto-clms-theme/src/$1',
     '@eeacms/volto-clms-utils/(.*)$':
       '<rootDir>/node_modules/@eeacms/volto-clms-utils/src/$1',
+    '@eeacms/volto-tabs-block/(.*)$':
+      '<rootDir>/node_modules/@eeacms/volto-tabs-block/src/$1',
     '@kitconcept/volto-blocks-grid/(.*)$':
       '<rootDir>/node_modules/@kitconcept/volto-blocks-grid/src/$1',
     '@plone/volto-slate':
@@ -31,7 +33,7 @@ module.exports = {
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(@eeacms/volto-clms-utils/|@plone/volto/|slick-carousel|react-input-range))',
+    'node_modules/(?!(@eeacms/volto-clms-utils/|@eeacms/volto-tabs-block/|@plone/volto/|slick-carousel|react-input-range))',
   ],
   coverageThreshold: {
     global: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.1.211",
+  "version": "1.1.212",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",

package/src/components/Blocks/CclFamiliesCardContainerBlock/CclFamiliesCardContainerEdit.jsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import { CardBlockSchema, CardContainerSchema } from './schema';
+import { isEmpty } from 'lodash';
+import { emptyCard, getPanels } from '../utils';
+import FamilyCard from './FamilyCard';
+
+const CclFamiliesListingEdit = (props) => {
+  const { block, data, onChangeBlock, selected, setSidebarTab } = props;
+  const [selectedCardBlock, setSelectedCardBlock] = useState(-1);
+
+  let schema = CardContainerSchema();
+  const properties = isEmpty(data?.customCards?.blocks)
+    ? emptyCard(2)
+    : data.customCards;
+
+  const panelData = properties;
+  const panels = getPanels(panelData);
+  useEffect(() => {
+    if (isEmpty(data?.customCards)) {
+      onChangeBlock(block, {
+        ...data,
+        customCards: {
+          ...properties,
+        },
+      });
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  return (
+    <>
+      <div
+        className="cardContainer-header"
+        onClick={() => {
+          setSidebarTab(1);
+          setSelectedCardBlock(-1);
+        }}
+        aria-hidden="true"
+      >
+        {data.title || 'Family card container'}
+      </div>
+      <div className={'card-container'}>
+        <>
+          {panels.map(([uid, panel], index) => (
+            <FamilyCard
+              key={index}
+              card={panel}
+              onClickImage={() => {
+                setSelectedCardBlock(uid);
+              }}
+              isCustomCard={true}
+              isEditMode
+            />
+          ))}
+        </>
+      </div>
+      <SidebarPortal selected={selected && selectedCardBlock === -1}>
+        <BlockDataForm
+          schema={schema}
+          title="Card container block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+      <SidebarPortal
+        selected={
+          selected && selectedCardBlock !== -1 && data.customCards?.blocks
+        }
+      >
+        <BlockDataForm
+          schema={CardBlockSchema()}
+          title="Card block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              customCards: {
+                ...data.customCards,
+                blocks: {
+                  ...data.customCards.blocks,
+                  [selectedCardBlock]: {
+                    ...data.customCards.blocks[selectedCardBlock],
+                    [id]: value,
+                  },
+                },
+              },
+            });
+          }}
+          formData={data.customCards?.blocks[selectedCardBlock]}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default CclFamiliesListingEdit;

package/src/components/Blocks/CclFamiliesCardContainerBlock/CclFamiliesCardContainerEdit.test.jsx

@@ -0,0 +1,209 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CclFamiliesCardContainerEdit from './CclFamiliesCardContainerEdit';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+
+const mockStore = configureStore([]);
+
+const initialState = {
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+};
+const store = mockStore(initialState);
+
+jest.mock('../utils', () => ({
+  emptyCard: jest.fn(() => ({
+    blocks: {
+      '123': { '@type': 'card', title: 'Card 1' },
+      '456': { '@type': 'card', title: 'Card 2' },
+    },
+  })),
+  getPanels: jest.fn((data) => Object.entries(data.blocks || {})),
+}));
+
+jest.mock('./FamilyCard', () => {
+  return function MockFamilyCard({ onClickImage }) {
+    return (
+      <div
+        data-testid="family-card"
+        onClick={onClickImage}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            onClickImage(e);
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        aria-label="Family Card"
+      >
+        Family Card
+      </div>
+    );
+  };
+});
+
+describe('CclFamiliesCardContainerEdit', () => {
+  const defaultProps = {
+    block: 'block-123',
+    data: {},
+    onChangeBlock: jest.fn(),
+    selected: true,
+    setSidebarTab: jest.fn(),
+    intl: { formatMessage: jest.fn() },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('initializes with empty cards when no customCards data exists', () => {
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...defaultProps} />
+      </Provider>,
+    );
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith(
+      'block-123',
+      expect.objectContaining({
+        customCards: expect.any(Object),
+      }),
+    );
+  });
+
+  it('displays the container title', () => {
+    const props = {
+      ...defaultProps,
+      data: { title: 'Test Container' },
+    };
+
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...props} />
+      </Provider>,
+    );
+    expect(screen.getByText('Test Container')).toBeInTheDocument();
+  });
+
+  it('displays default title when no title is provided', () => {
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...defaultProps} />
+      </Provider>,
+    );
+    expect(screen.getByText('Family card container')).toBeInTheDocument();
+  });
+
+  it('clicking container header sets sidebar tab and resets selected card', () => {
+    act(() => {
+      render(
+        <Provider store={store}>
+          <CclFamiliesCardContainerEdit {...defaultProps} />
+        </Provider>,
+      );
+      fireEvent.click(screen.getByText('Family card container'));
+    });
+
+    expect(defaultProps.setSidebarTab).toHaveBeenCalledWith(1);
+    expect(screen.getByRole('form')).toBeInTheDocument();
+  });
+
+  it('renders family cards for each panel', () => {
+    const props = {
+      ...defaultProps,
+      data: {
+        customCards: {
+          blocks: {
+            '123': { title: 'Card 1' },
+            '456': { title: 'Card 2' },
+          },
+        },
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...props} />
+      </Provider>,
+    );
+    const cards = screen.getAllByTestId('family-card');
+    expect(cards).toHaveLength(2);
+  });
+
+  it('shows correct sidebar portal based on card selection', () => {
+    const props = {
+      ...defaultProps,
+      data: {
+        customCards: {
+          blocks: {
+            '123': { title: 'Card 1' },
+          },
+        },
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...props} />
+      </Provider>,
+    );
+
+    expect(screen.getByText('Card container block')).toBeInTheDocument();
+
+    // Click on a card
+    fireEvent.click(screen.getByTestId('family-card'));
+
+    // Should now show card block form
+    expect(screen.getByText('Card block')).toBeInTheDocument();
+  });
+
+  it('clicking header resets card selection and shows container form', () => {
+    const props = {
+      ...defaultProps,
+      data: {
+        customCards: {
+          blocks: {
+            '123': { title: 'Card 1' },
+          },
+        },
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...props} />
+      </Provider>,
+    );
+
+    // First click a card to select it
+    fireEvent.click(screen.getByTestId('family-card'));
+    expect(screen.getByText('Card block')).toBeInTheDocument();
+
+    // Then click the header
+    fireEvent.click(screen.getByText('Family card container'));
+
+    // Should show container form again
+    expect(screen.getByText('Card container block')).toBeInTheDocument();
+    expect(props.setSidebarTab).toHaveBeenCalledWith(1);
+  });
+
+  it('initializes with empty cards when no customCards data exists', () => {
+    render(
+      <Provider store={store}>
+        <CclFamiliesCardContainerEdit {...defaultProps} />
+      </Provider>,
+    );
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith(
+      'block-123',
+      expect.objectContaining({
+        customCards: expect.any(Object),
+      }),
+    );
+  });
+});

package/src/components/Blocks/CclFamiliesCardContainerBlock/CclFamiliesCardContainerView.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { isEmpty } from 'lodash';
+import { getPanels } from '../utils';
+import FamilyCard from './FamilyCard';
+
+const CclFamiliesListingView = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    setSidebarTab,
+    setSelectedCardBlock,
+  } = props;
+
+  const properties = data?.customCards;
+
+  const panelData = properties;
+  const panels = getPanels(panelData);
+  useEffect(() => {
+    if (isEmpty(data?.customCards)) {
+      onChangeBlock(block, {
+        ...data,
+        customCards: {
+          ...properties,
+        },
+      });
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  return (
+    <>
+      <div
+        className="cardContainer-header"
+        onClick={() => {
+          setSidebarTab(1);
+          setSelectedCardBlock(-1);
+        }}
+        aria-hidden="true"
+      >
+        {data?.title && data.title}
+      </div>
+      <div className={'card-container'}>
+        <>
+          {panels.map(([uid, panel], index) => (
+            <FamilyCard
+              key={index}
+              card={panel}
+              isCustomCard={true}
+              isEditMode={false}
+            />
+          ))}
+        </>
+      </div>
+    </>
+  );
+};
+
+export default CclFamiliesListingView;

package/src/components/Blocks/CclFamiliesCardContainerBlock/CclFamiliesCardContainerView.test.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CclFamiliesCardContainerView from './CclFamiliesCardContainerView';
+import { getPanels } from '../utils';
+
+jest.mock('../utils', () => ({
+  getPanels: jest.fn(),
+}));
+
+jest.mock('./FamilyCard', () => {
+  return function MockFamilyCard({ card, isCustomCard, isEditMode }) {
+    return <div data-testid="family-card">{card.title || 'Family Card'}</div>;
+  };
+});
+
+describe('CclFamiliesCardContainerView', () => {
+  const defaultProps = {
+    block: 'block-123',
+    data: {},
+    onChangeBlock: jest.fn(),
+    setSidebarTab: jest.fn(),
+    setSelectedCardBlock: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getPanels.mockImplementation((data) => [
+      ['card1', { title: 'Card 1' }],
+      ['card2', { title: 'Card 2' }],
+    ]);
+  });
+
+  it('renders without crashing', () => {
+    render(<CclFamiliesCardContainerView {...defaultProps} />);
+    expect(screen.getAllByTestId('family-card')).toHaveLength(2);
+  });
+
+  it('initializes with empty cards when no customCards data exists', () => {
+    render(<CclFamiliesCardContainerView {...defaultProps} />);
+
+    expect(defaultProps.onChangeBlock).toHaveBeenCalledWith(
+      'block-123',
+      expect.objectContaining({
+        customCards: expect.any(Object),
+      }),
+    );
+  });
+
+  it('does not call onChangeBlock when customCards exist', () => {
+    const propsWithCards = {
+      ...defaultProps,
+      data: {
+        customCards: {
+          blocks: {
+            card1: { title: 'Card 1' },
+            card2: { title: 'Card 2' },
+          },
+        },
+      },
+    };
+
+    render(<CclFamiliesCardContainerView {...propsWithCards} />);
+    expect(defaultProps.onChangeBlock).not.toHaveBeenCalled();
+  });
+
+  it('renders title when provided', () => {
+    const propsWithTitle = {
+      ...defaultProps,
+      data: {
+        title: 'Test Title',
+        customCards: {},
+      },
+    };
+
+    render(<CclFamiliesCardContainerView {...propsWithTitle} />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+  });
+
+  it('renders correct number of FamilyCard components', () => {
+    const propsWithCards = {
+      ...defaultProps,
+      data: {
+        customCards: {
+          blocks: {
+            card1: { title: 'Card 1' },
+            card2: { title: 'Card 2' },
+          },
+        },
+      },
+    };
+
+    render(<CclFamiliesCardContainerView {...propsWithCards} />);
+    const cards = screen.getAllByTestId('family-card');
+    expect(cards).toHaveLength(2);
+  });
+
+  it('passes correct props to FamilyCard components', () => {
+    getPanels.mockImplementation((data) => [['card1', { title: 'Test Card' }]]);
+
+    const propsWithCards = {
+      ...defaultProps,
+      data: {
+        customCards: {
+          blocks: {
+            card1: { title: 'Test Card' },
+          },
+        },
+      },
+    };
+
+    render(<CclFamiliesCardContainerView {...propsWithCards} />);
+
+    const card = screen.getByText('Test Card');
+    expect(card).toBeInTheDocument();
+  });
+
+  it('handles undefined data', () => {
+    const propsWithUndefined = {
+      ...defaultProps,
+      data: undefined,
+    };
+
+    expect(() => {
+      render(<CclFamiliesCardContainerView {...propsWithUndefined} />);
+    }).not.toThrow();
+  });
+});

package/src/components/Blocks/CclFamiliesCardContainerBlock/FamilyCard.jsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { Link } from 'react-router-dom';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
+
+const FamilyCard = (props) => {
+  const {
+    children,
+    card,
+    onClickImage = () => {
+      return '';
+    },
+    isEditMode,
+  } = props;
+
+  const [hasLink, setHasLink] = useState(false);
+  const href = card.href;
+
+  useEffect(() => {
+    if (isEditMode) {
+      setHasLink(false);
+    } else {
+      if (card.href) {
+        if (card.href && card.href.length > 0) {
+          setHasLink(true);
+        }
+        if (card.href.length === 0) {
+          setHasLink(false);
+        }
+      }
+    }
+  }, [isEditMode, card.href]);
+
+  const url = hasLink && isInternalURL(href) ? flattenToAppURL(href) : href;
+  const As = hasLink && isInternalURL(url) ? Link : 'a';
+
+  return (
+    <As
+      href={hasLink ? url : null}
+      to={hasLink ? url : null}
+      className={'card-product-family'}
+      onClick={() => onClickImage()}
+      onKeyDown={() => onClickImage()}
+    >
+      <div className="card-text">
+        <div className="card-product-familiy-title">{card?.title}</div>
+        <div>
+          <div className="card-product-familiy-description">
+            {card?.description}
+          </div>
+        </div>
+        {children}
+      </div>
+      <div className="card-icon">
+        <FontAwesomeIcon icon={['fas', 'chevron-right']} />
+      </div>
+    </As>
+  );
+};
+
+export default FamilyCard;

package/src/components/Blocks/CclFamiliesCardContainerBlock/FamilyCard.test.jsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { BrowserRouter } from 'react-router-dom';
+import FamilyCard from './FamilyCard';
+import { isInternalURL } from '@plone/volto/helpers';
+
+jest.mock('@plone/volto/helpers', () => ({
+  isInternalURL: jest.fn(),
+  flattenToAppURL: jest.fn((url) => url),
+}));
+
+jest.mock('@eeacms/volto-clms-utils/components', () => ({
+  FontAwesomeIcon: () => <span data-testid="chevron-icon">Icon</span>,
+}));
+
+const renderWithRouter = (ui) => {
+  return render(<BrowserRouter>{ui}</BrowserRouter>);
+};
+
+describe('FamilyCard', () => {
+  const defaultProps = {
+    card: {
+      title: 'Test Card',
+      description: 'Test Description',
+    },
+    onClickImage: jest.fn(),
+    isEditMode: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    isInternalURL.mockImplementation(() => false);
+  });
+
+  it('renders basic card content correctly', () => {
+    renderWithRouter(<FamilyCard {...defaultProps} />);
+
+    expect(screen.getByText('Test Card')).toBeInTheDocument();
+    expect(screen.getByText('Test Description')).toBeInTheDocument();
+    expect(screen.getByTestId('chevron-icon')).toBeInTheDocument();
+  });
+
+  it('handles click events', () => {
+    renderWithRouter(<FamilyCard {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Test Card'));
+    expect(defaultProps.onClickImage).toHaveBeenCalled();
+  });
+
+  it('handles keyDown events', () => {
+    renderWithRouter(<FamilyCard {...defaultProps} />);
+
+    fireEvent.keyDown(screen.getByText('Test Card'));
+    expect(defaultProps.onClickImage).toHaveBeenCalled();
+  });
+
+  it('renders children when provided', () => {
+    renderWithRouter(
+      <FamilyCard {...defaultProps}>
+        <div data-testid="child-content">Child Content</div>
+      </FamilyCard>,
+    );
+
+    expect(screen.getByTestId('child-content')).toBeInTheDocument();
+  });
+
+  it('does not render link in edit mode', () => {
+    const propsWithLink = {
+      ...defaultProps,
+      isEditMode: true,
+      card: {
+        ...defaultProps.card,
+        href: 'http://example.com',
+      },
+    };
+
+    renderWithRouter(<FamilyCard {...propsWithLink} />);
+
+    const element = screen.getByText('Test Card').closest('a, Link');
+    expect(element).not.toHaveAttribute('href', 'http://example.com');
+  });
+
+  it('renders internal link correctly', () => {
+    isInternalURL.mockImplementation(() => true);
+
+    const propsWithInternalLink = {
+      ...defaultProps,
+      card: {
+        ...defaultProps.card,
+        href: '/internal/page',
+      },
+    };
+
+    renderWithRouter(<FamilyCard {...propsWithInternalLink} />);
+
+    expect(screen.getByText('Test Card').closest('a')).toHaveAttribute(
+      'href',
+      '/internal/page',
+    );
+  });
+
+  it('renders external link correctly', () => {
+    const propsWithExternalLink = {
+      ...defaultProps,
+      card: {
+        ...defaultProps.card,
+        href: 'https://example.com',
+      },
+    };
+
+    renderWithRouter(<FamilyCard {...propsWithExternalLink} />);
+
+    expect(screen.getByText('Test Card').closest('a')).toHaveAttribute(
+      'href',
+      'https://example.com',
+    );
+  });
+
+  it('handles empty href array', () => {
+    const propsWithEmptyHref = {
+      ...defaultProps,
+      card: {
+        ...defaultProps.card,
+        href: '',
+      },
+    };
+
+    renderWithRouter(<FamilyCard {...propsWithEmptyHref} />);
+
+    const element = screen.getByText('Test Card').closest('a');
+    expect(element).not.toHaveAttribute('href');
+  });
+
+  it('handles direct href string', () => {
+    const propsWithDirectHref = {
+      ...defaultProps,
+      card: {
+        ...defaultProps.card,
+        href: 'https://example.com',
+      },
+    };
+
+    renderWithRouter(<FamilyCard {...propsWithDirectHref} />);
+
+    expect(screen.getByText('Test Card').closest('a')).toHaveAttribute(
+      'href',
+      'https://example.com',
+    );
+  });
+
+  it('updates hasLink state when href changes', async () => {
+    const { rerender } = renderWithRouter(<FamilyCard {...defaultProps} />);
+
+    // Initial render without href
+    let element = screen.getByText('Test Card').closest('a');
+    expect(element).not.toHaveAttribute('href');
+
+    // Update props with href
+    const propsWithHref = {
+      ...defaultProps,
+      card: {
+        ...defaultProps.card,
+        href: 'https://example.com',
+      },
+    };
+
+    await act(async () => {
+      rerender(<FamilyCard {...propsWithHref} />);
+    });
+
+    element = screen.getByText('Test Card').closest('a');
+    expect(element).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('handles undefined card properties', () => {
+    const propsWithUndefined = {
+      ...defaultProps,
+      card: {},
+    };
+
+    renderWithRouter(<FamilyCard {...propsWithUndefined} />);
+
+    expect(screen.getByTestId('chevron-icon')).toBeInTheDocument();
+  });
+});

package/src/components/Blocks/CclFamiliesCardContainerBlock/schema.js

@@ -0,0 +1,53 @@
+export const CardContainerSchema = () => ({
+  title: 'Card container',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['title', 'customCards'],
+    },
+  ],
+  properties: {
+    title: {
+      title: 'Title',
+      description: 'Card container block friendly name',
+      type: 'string',
+    },
+    customCards: {
+      title: 'Custom cards',
+      type: 'panels',
+      schema: CardBlockSchema,
+    },
+  },
+  required: ['cardOrigin'],
+});
+
+export const CardBlockSchema = () => {
+  return {
+    title: 'Card block',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['title', 'description', 'href'],
+      },
+    ],
+    properties: {
+      title: {
+        title: 'Title',
+        description: 'Card title',
+        type: 'string',
+        placeholder: 'Card title here',
+      },
+      description: {
+        title: 'Description',
+        type: 'string',
+      },
+      href: {
+        title: 'Link',
+        type: 'string',
+      },
+    },
+    required: [],
+  };
+};

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclProductTabsWithSubtabsView.jsx

@@ -0,0 +1,209 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { NavLink, useHistory, useLocation } from 'react-router-dom';
+import cx from 'classnames';
+import { RenderBlocks } from '@plone/volto/components';
+import { slugify } from '../../utils';
+import './fontawesome';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+
+const TabsComponent = ({
+  tabsList = [],
+  tabs = {},
+  ExtraComponent = () => null,
+  metadata = {},
+}) => {
+  const location = useLocation();
+  const history = useHistory();
+  // Local state for the active tab and which main tab (if any) is expanded.
+  const [activeTab, setActiveTab] = useState(null);
+  const [expandedTab, setExpandedTab] = useState(null);
+
+  const groupedTabs = useMemo(() => {
+    const groups = [];
+    let currentGroup = null;
+    tabsList.forEach((tabId) => {
+      const isSubTab = Boolean(tabs[tabId]?.subTab?.subtab);
+      if (!isSubTab) {
+        currentGroup = { main: tabId, subs: [] };
+        groups.push(currentGroup);
+      } else if (currentGroup) {
+        currentGroup.subs.push(tabId);
+      } else {
+        currentGroup = { main: tabId, subs: [] };
+        groups.push(currentGroup);
+      }
+    });
+    return groups;
+  }, [tabsList, tabs]);
+
+  // Helper: update URL and activeTab.
+  const updateTab = (tabId, tabHash) => {
+    setActiveTab(tabId);
+    history.push(tabHash);
+  };
+
+  // When clicking a main tab:
+  const handleMainTabClick = (e, tabId, tabHash, subs) => {
+    e.preventDefault();
+    // If there are subtabs for this main tab:
+    if (subs && subs.length > 0) {
+      if (expandedTab !== tabId) {
+        setExpandedTab(tabId);
+        // If the current active tab is not one of the subtabs, switch to the first subtab.
+        if (!subs.includes(activeTab)) {
+          const firstSub = subs[0];
+          const subTitle = tabs[firstSub]?.title || 'Subtab';
+          updateTab(firstSub, getTabHash(subTitle));
+        } else {
+          // Otherwise, update the URL hash.
+          updateTab(tabId, tabHash);
+        }
+      } else {
+        // Collapse the subtabs and select the first main tab.
+        setExpandedTab(null);
+        updateTab(
+          tabsList[0] || tabId,
+          tabs[tabsList[0]]?.title
+            ? getTabHash(tabs[tabsList[0]]?.title || '')
+            : tabId,
+        );
+      }
+    } else {
+      // No subtabs—simply update the active tab.
+      updateTab(tabId, tabHash);
+    }
+  };
+
+  // When clicking a subtab.
+  const handleSubTabClick = (e, tabId, tabHash) => {
+    e.preventDefault();
+    updateTab(tabId, tabHash);
+  };
+
+  const getTabHash = (title) => `#tab=${slugify(title)}`;
+
+  // On mount or when location.hash changes, update activeTab.
+  useEffect(() => {
+    const hash = location.hash;
+    if (hash) {
+      const foundTab = tabsList.find((tabId) => {
+        const title = tabs[tabId]?.title || '';
+        return hash === getTabHash(title);
+      });
+      if (foundTab) {
+        setActiveTab(foundTab);
+        return;
+      }
+    }
+    // Fallback: if no hash is present or no match was found, select the first tab.
+    if (tabsList.length > 0) {
+      setActiveTab(tabsList[0]);
+    }
+  }, [location.hash, tabsList, tabs]);
+
+  useEffect(() => {
+    if (activeTab) {
+      const group = groupedTabs.find((group) => group.subs.includes(activeTab));
+      if (group && expandedTab !== group.main) {
+        setExpandedTab(group.main);
+      }
+    }
+  }, [activeTab, expandedTab, groupedTabs]);
+
+  return (
+    <>
+      <div className="left-content cont-w-25">
+        <ExtraComponent />
+        <nav className="left-menu">
+          {groupedTabs.map((group, idx) => {
+            const mainTab = group.main;
+            const mainTitle = tabs[mainTab]?.title || `Tab ${idx + 1}`;
+            const mainTabHash = getTabHash(mainTitle);
+            return (
+              <React.Fragment key={mainTab}>
+                <div
+                  id={mainTabHash}
+                  className={cx(
+                    'card',
+                    activeTab === mainTab && 'active',
+                    group.subs && group.subs.length > 0 && 'has-subtabs',
+                  )}
+                >
+                  <NavLink
+                    to={mainTabHash}
+                    onClick={(e) =>
+                      handleMainTabClick(e, mainTab, mainTabHash, group.subs)
+                    }
+                  >
+                    {mainTitle}
+                  </NavLink>
+                </div>
+                {/* Render subtabs only if the main tab is expanded */}
+                {group.subs.length > 0 && expandedTab === mainTab && (
+                  <div className="subtabs">
+                    {group.subs.map((subTabId) => {
+                      const subTitle = tabs[subTabId]?.title || 'Subtab';
+                      const subTabHash = getTabHash(subTitle);
+                      return (
+                        <div
+                          key={subTabId}
+                          id={subTabHash}
+                          className={cx(
+                            'card',
+                            activeTab === subTabId && 'active',
+                            'subcard',
+                          )}
+                        >
+                          <NavLink
+                            to={subTabHash}
+                            onClick={(e) =>
+                              handleSubTabClick(e, subTabId, subTabHash)
+                            }
+                          >
+                            {subTitle}
+                          </NavLink>
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </React.Fragment>
+            );
+          })}
+        </nav>
+      </div>
+      <div className="right-content cont-w-75">
+        {activeTab && tabs[activeTab] ? (
+          <div
+            key={activeTab} // Using activeTab as a key forces a re‑mount on change.
+            className={cx('panel', 'panel-selected')}
+            role="button"
+            aria-hidden="false"
+          >
+            <RenderBlocks metadata={metadata} content={tabs[activeTab]} />
+          </div>
+        ) : (
+          <div>No content available.</div>
+        )}
+      </div>
+    </>
+  );
+};
+
+const CclProductTabsWithSubtabsView = (props) => {
+  return (
+    <div className="ccl-container ccl-container-flex tab-container">
+      <TabsComponent {...props} />
+    </div>
+  );
+};
+
+export default compose(
+  connect((state) => ({
+    hashlink: state.hashlink,
+  })),
+  withScrollToTarget,
+)(CclProductTabsWithSubtabsView);

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclProductTabsWithSubtabsView.test.jsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { Provider } from 'react-intl-redux';
+import configureStore from 'redux-mock-store';
+import '@testing-library/jest-dom';
+import CclProductTabsWithSubtabsView from './CclProductTabsWithSubtabsView';
+
+const mockStore = configureStore([]);
+
+const initialState = {
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+};
+const store = mockStore(initialState);
+
+describe('CclProductTabsWithSubtabsView', () => {
+  const history = createMemoryHistory();
+  const defaultProps = {
+    tabsList: ['tab1', 'tab2', 'tab3', 'tab4'],
+    tabs: {
+      tab1: { title: 'First Tab', content: 'Content 1' },
+      tab2: { title: 'Second Tab', content: 'Content 2' },
+      tab3: { title: 'Third Tab', content: 'Content 3' },
+      tab4: {
+        title: 'Fourth Tab',
+        content: 'Content 4',
+        subTab: { subtab: true },
+      },
+    },
+    metadata: {},
+  };
+
+  const renderWithRouter = (ui, { route = '/' } = {}) => {
+    history.push(route);
+    return render(
+      <Provider store={store}>
+        <Router history={history}>{ui}</Router>
+      </Provider>,
+    );
+  };
+
+  beforeEach(() => {
+    history.push('/');
+  });
+
+  it('renders all main tabs', () => {
+    renderWithRouter(<CclProductTabsWithSubtabsView {...defaultProps} />);
+
+    expect(screen.getByText('First Tab')).toBeInTheDocument();
+    expect(screen.getByText('Second Tab')).toBeInTheDocument();
+    expect(screen.getByText('Third Tab')).toBeInTheDocument();
+    expect(screen.queryByText('Fourth Tab')).not.toBeInTheDocument(); // Fourth tab is a subtab
+  });
+
+  it('selects first tab by default', () => {
+    renderWithRouter(<CclProductTabsWithSubtabsView {...defaultProps} />);
+
+    const firstTab = screen.getByText('First Tab').closest('.card');
+    expect(firstTab).toHaveClass('active');
+  });
+
+  it('changes active tab on click', () => {
+    renderWithRouter(<CclProductTabsWithSubtabsView {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Second Tab'));
+
+    const secondTab = screen.getByText('Second Tab').closest('.card');
+    expect(secondTab).toHaveClass('active');
+  });
+
+  it('handles subtabs correctly', () => {
+    const propsWithSubtabs = {
+      ...defaultProps,
+      tabsList: ['main1', 'main2', 'sub1', 'sub2'],
+      tabs: {
+        main1: { title: 'Main Tab' },
+        main2: { title: 'Main Tab 2' },
+        sub1: { title: 'Subtab 1', subTab: { subtab: true } },
+        sub2: { title: 'Subtab 2', subTab: { subtab: true } },
+      },
+    };
+
+    renderWithRouter(<CclProductTabsWithSubtabsView {...propsWithSubtabs} />);
+
+    const firstTab = screen.getByText('Main Tab').closest('.card');
+    expect(firstTab).toHaveClass('active');
+    // Click main tab to expand subtabs
+    fireEvent.click(screen.getByText('Main Tab 2'));
+
+    // Check if subtabs are visible
+    expect(screen.getByText('Subtab 1')).toBeInTheDocument();
+    expect(screen.getByText('Subtab 2')).toBeInTheDocument();
+    const firstSubTab = screen.getByText('Subtab 1').closest('.card');
+    expect(firstSubTab).toHaveClass('active');
+  });
+
+  it('updates URL hash when changing tabs', () => {
+    renderWithRouter(<CclProductTabsWithSubtabsView {...defaultProps} />);
+
+    fireEvent.click(screen.getByText('Second Tab'));
+
+    expect(history.location.hash).toBe('#tab=second_tab');
+  });
+
+  it('selects correct tab based on URL hash', () => {
+    act(() => {
+      renderWithRouter(<CclProductTabsWithSubtabsView {...defaultProps} />, {
+        route: '/#tab=second_tab',
+      });
+    });
+
+    const secondTab = screen.getByText('Second Tab').closest('.card');
+    expect(secondTab).toHaveClass('active');
+  });
+
+  it('collapses expanded subtabs when clicking different main tab', () => {
+    const propsWithSubtabs = {
+      ...defaultProps,
+      tabsList: ['main1', 'main2', 'sub1', 'sub2'],
+      tabs: {
+        main1: { title: 'Main Tab 1' },
+        main2: { title: 'Main Tab 2' },
+        sub1: { title: 'Subtab 1', subTab: { subtab: true } },
+        sub2: { title: 'Subtab 2', subTab: { subtab: true } },
+      },
+    };
+
+    renderWithRouter(<CclProductTabsWithSubtabsView {...propsWithSubtabs} />);
+
+    const firstTab = screen.getByText('Main Tab 1').closest('.card');
+    expect(firstTab).toHaveClass('active');
+
+    // Expand second main tab's subtabs
+    fireEvent.click(screen.getByText('Main Tab 2'));
+
+    // Click second main tab
+    fireEvent.click(screen.getByText('Main Tab 2'));
+
+    // Verify subtabs are no longer visible
+    expect(screen.queryByText('Subtab 1')).not.toBeInTheDocument();
+  });
+
+  it('renders ExtraComponent when provided', () => {
+    const ExtraComponent = () => (
+      <div data-testid="extra-component">Extra Content</div>
+    );
+
+    renderWithRouter(
+      <CclProductTabsWithSubtabsView
+        {...defaultProps}
+        ExtraComponent={ExtraComponent}
+      />,
+    );
+
+    expect(screen.getByTestId('extra-component')).toBeInTheDocument();
+  });
+
+  it('handles empty tabsList', () => {
+    renderWithRouter(
+      <CclProductTabsWithSubtabsView {...defaultProps} tabsList={[]} />,
+    );
+
+    expect(screen.getByText('No content available.')).toBeInTheDocument();
+  });
+});

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/index.js

@@ -5,6 +5,7 @@ import CclCarouselView from './CclCarouselView';
 import RoutingHOC from './RoutingHOC';
 import CclProductTabsView from './CclProductTabsView';
 import FixTemplates from './FixTemplates';
+import CclProductTabsWithSubtabsView from './CclProductTabsWithSubtabsView';
 
 export {
   CclTabsView,
@@ -13,5 +14,6 @@ export {
   CclCarouselView,
   RoutingHOC,
   CclProductTabsView,
+  CclProductTabsWithSubtabsView,
   FixTemplates,
 };

package/src/components/Blocks/customBlocks.js

@@ -12,6 +12,7 @@ import { SelectFacetFilterListEntry } from '@plone/volto/components/manage/Block
 import {
   CclCarouselView,
   CclProductTabsView,
+  CclProductTabsWithSubtabsView,
   CclTabsView,
   CclVerticalFaqTabsView,
   CclVerticalTabsView,
@@ -52,6 +53,8 @@ import CclHomeUsersBlockView from '@eeacms/volto-clms-theme/components/Blocks/Cc
 import CclMapMenu from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoArcgisBlock/CclMapMenu';
 import CclRelatedListingEdit from '@eeacms/volto-clms-theme/components/Blocks/CclRelatedListingBlock/CclRelatedListingEdit';
 import CclRelatedListingView from '@eeacms/volto-clms-theme/components/Blocks/CclRelatedListingBlock/CclRelatedListingView';
+import CclFamiliesCardContainerView from '@eeacms/volto-clms-theme/components/Blocks/CclFamiliesCardContainerBlock/CclFamiliesCardContainerView';
+import CclFamiliesCardContainerEdit from '@eeacms/volto-clms-theme/components/Blocks/CclFamiliesCardContainerBlock/CclFamiliesCardContainerEdit';
 import CclUseCaseListEdit from '@eeacms/volto-clms-theme/components/Blocks/CclUseCaseList/CclUseCaseListEdit';
 import CclUseCaseListView from '@eeacms/volto-clms-theme/components/Blocks/CclUseCaseList/CclUseCaseListView';
 import CclWhiteBgView from '@eeacms/volto-clms-theme/components/Blocks/CclHomeBgImageBlock/CclWhiteBgView';
@@ -246,6 +249,12 @@ const customBlocks = (config) => ({
         view: RoutingHOC(CclProductTabsView),
         schema: defaultSchema,
       },
+      CCLProductTabsWithSubtabs: {
+        title: 'Vertical Product Tabs with Subtabs',
+        edit: DefaultEdit,
+        view: RoutingHOC(CclProductTabsWithSubtabsView),
+        schema: defaultSchema,
+      },
       CCLVerticalFaqTabs: {
         title: 'Vertical FAQ Tabs',
         edit: DefaultEdit,
@@ -323,6 +332,22 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
+  familiesCardContainer: {
+    id: 'familiesCardContainer', // The name (id) of the block
+    title: 'Families card container', // The display name of the block
+    icon: containerSVG, // The icon used in the block chooser
+    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
+    view: CclFamiliesCardContainerView, // The view mode component
+    edit: CclFamiliesCardContainerEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  },
   relatedListing: {
     id: 'relatedListing', // The name (id) of the block
     title: 'Related items listing', // The display name of the block

package/theme/site/extras/cards.less

@@ -438,3 +438,45 @@
 .card-work-line h2 {
   margin-top: 0 !important;
 }
+
+.card-product-family {
+  position: relative;
+  display: flex;
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid transparent;
+
+  .card-icon {
+    width: auto;
+    color: black;
+    font-size: 0.7rem;
+    font-weight: bold;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  &:not(:last-of-type) {
+    border-bottom: solid 1px fade(@clmsGreen, 20%);
+  }
+}
+
+.card-product-family:hover {
+  background-color: fade(@clmsGreen, 5%);
+  border-color: @clmsGreen;
+
+  .card-product-familiy-title {
+    color: @clmsGreen;
+  }
+}
+
+.card-product-familiy-title {
+  margin-bottom: 0.5rem;
+  color: #404040;
+  font-weight: bold;
+  font-size: 15px;
+}
+
+.card-product-familiy-description {
+  color: #404040;
+  font-size: 14px;
+}

package/theme/site/extras/ccl-tabs.less

@@ -23,3 +23,11 @@
 .deactivate-content {
   display: none;
 }
+
+.block-editor-tabs_block
+  .block.tabs_block
+  .tabs-block.edit
+  .default.tabs
+  .ui.left.menu {
+  flex-wrap: wrap;
+}