@eeacms/volto-eea-website-theme 1.22.1 → 1.24.0

package/src/index.js

@@ -1,28 +1,34 @@
-import { Icon } from '@plone/volto/components';
-import { getBlocks } from '@plone/volto/helpers';
+import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation';
 import CustomCSS from '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS';
 import DraftBackground from '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground';
 import HomePageInverseView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView';
 import HomePageView from '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView';
-import InpageNavigation from '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation';
 import NotFound from '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound';
-import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
 import { TokenWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget';
+import { TopicsWidget } from '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget';
+import { Icon } from '@plone/volto/components';
+import { getBlocks } from '@plone/volto/helpers';
+import Tag from '@eeacms/volto-eea-design-system/ui/Tag/Tag';
+
+import {
+  addStylingFieldsetSchemaEnhancer,
+  addStylingFieldsetSchemaEnhancerImagePosition,
+} from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 
-import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
-import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title';
 import installLayoutSettingsBlock from '@eeacms/volto-eea-website-theme/components/manage/Blocks/LayoutSettings';
+import installCustomTitle from '@eeacms/volto-eea-website-theme/components/manage/Blocks/Title';
 
+import FlexGroup from '@eeacms/volto-eea-website-theme/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup';
 import BaseTag from './components/theme/BaseTag';
 import SubsiteClass from './components/theme/SubsiteClass';
-import FlexGroup from '@eeacms/volto-eea-website-theme/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup';
 import contentBoxSVG from './icons/content-box.svg';
 
-import installSlate from './slate';
 import okMiddleware from './middleware/ok';
 import voltoCustomMiddleware from './middleware/voltoCustom';
+import installSlate from './slate';
 
 import * as eea from './config';
+import React from 'react';
 
 const restrictedBlocks = [
   '__grid', // Grid/Teaser block (kitconcept)
@@ -30,6 +36,84 @@ const restrictedBlocks = [
   'teaser',
 ];
 
+/**
+ * Customizes the variations of a tabs block by modifying their schema and semantic icons.
+ *
+ * @param {Array} tabs_block_variations - An array of variations for the tabs block.
+ * @param {Object} config - The Volto configuration object.
+ */
+function tabVariationCustomization(tabs_block_variations, config) {
+  if (!tabs_block_variations) return;
+  const defaultVariation = tabs_block_variations.find(
+    ({ id }) => id === 'default',
+  );
+  const accordionVariation = tabs_block_variations.find(
+    ({ id }) => id === 'accordion',
+  );
+  const horizontalVariation = tabs_block_variations.find(
+    ({ id }) => id === 'horizontal-responsive',
+  );
+
+  if (accordionVariation) {
+    accordionVariation.semanticIcon = {
+      opened: 'ri-arrow-up-s-line',
+      closed: 'ri-arrow-down-s-line',
+    };
+  }
+
+  const oldSchemaEnhancer =
+    config.blocks.blocksConfig.tabs_block.schemaEnhancer;
+  config.blocks.blocksConfig.tabs_block.schemaEnhancer = (props) => {
+    const schema = (oldSchemaEnhancer ? oldSchemaEnhancer(props) : props)
+      .schema;
+    const oldSchemaExtender = schema.properties?.data?.schemaExtender;
+    schema.properties.data.schemaExtender = (schema, child) => {
+      const innerSchema = oldSchemaExtender
+        ? oldSchemaExtender(schema, child)
+        : schema;
+      innerSchema.properties.icon.description = (
+        <>
+          Ex. ri-home-line. See{' '}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            href="https://remixicon.com/"
+          >
+            Remix Icon set
+          </a>
+        </>
+      );
+      return innerSchema;
+    };
+    return schema;
+  };
+  const oldDefaultSchemaEnhancer = defaultVariation.schemaEnhancer;
+  defaultVariation.schemaEnhancer = (props) => {
+    const newSchema = oldDefaultSchemaEnhancer(props);
+    const menuFieldset = newSchema.fieldsets.find(({ id }) => id === 'menu');
+    menuFieldset.fields = [
+      'menuAlign',
+      'menuPosition',
+      'menuColor',
+      'menuInverted',
+    ];
+    return newSchema;
+  };
+
+  const oldHorizontalSchemaEnhancer = horizontalVariation.schemaEnhancer;
+  horizontalVariation.schemaEnhancer = (props) => {
+    const newSchema = oldHorizontalSchemaEnhancer(props);
+    const menuFieldset = newSchema.fieldsets.find(({ id }) => id === 'menu');
+    menuFieldset.fields = [
+      'menuAlign',
+      'menuPosition',
+      'menuColor',
+      'menuInverted',
+    ];
+    return newSchema;
+  };
+}
+
 const applyConfig = (config) => {
   // EEA specific settings
   config.settings.eea = {
@@ -54,6 +138,16 @@ const applyConfig = (config) => {
       config.blocks.blocksConfig[block].restricted = true;
     }
   });
+
+  //Apply the image position style for image and leadimage blocks
+  if (config.blocks.blocksConfig.leadimage) {
+    config.blocks.blocksConfig.leadimage.schemaEnhancer = addStylingFieldsetSchemaEnhancerImagePosition;
+  }
+
+  if (config.blocks.blocksConfig.image) {
+    config.blocks.blocksConfig.image.schemaEnhancer = addStylingFieldsetSchemaEnhancerImagePosition;
+  }
+
   // Set Languages in nextcloud-video-block
   if (
     config?.blocks?.blocksConfig?.nextCloudVideo?.subtitlesLanguages &&
@@ -116,12 +210,9 @@ const applyConfig = (config) => {
 
   // Apply tabs block customization
   if (config.blocks.blocksConfig.tabs_block) {
-    if (config.blocks.blocksConfig.tabs_block.templates.accordion) {
-      config.blocks.blocksConfig.tabs_block.templates.accordion.semanticIcon = {
-        opened: 'ri-arrow-up-s-line',
-        closed: 'ri-arrow-down-s-line',
-      };
-    }
+    const tabs_block_variations =
+      config.blocks.blocksConfig.tabs_block.variations;
+    tabVariationCustomization(tabs_block_variations, config);
   }
   //Group block flex variation
   if (config.blocks.blocksConfig.group) {
@@ -154,8 +245,8 @@ const applyConfig = (config) => {
   if (config.blocks.blocksConfig.columnsBlock) {
     config.blocks.blocksConfig.columnsBlock.available_colors = eea.colors;
     config.blocks.blocksConfig.columnsBlock.tocEntries = (
-      block = {},
       tocData,
+      block = {},
     ) => {
       // integration with volto-block-toc
       const headlines = tocData.levels || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -366,6 +457,22 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.accordion.mostUsed = true;
   }
 
+  // Teaser block changes
+  if (config.blocks.blocksConfig.teaser) {
+    // Use volto-eea-design-system Tag component for rendering teaser tags
+    config.blocks.blocksConfig.teaser.renderTag = (tag, index) => {
+      return (
+        <Tag
+          href={`https://www.eea.europa.eu/en/advanced-search?filters[0][field]=topic&filters[0][values][0]=${tag}&filters[0][type]=any&filters[1][field]=language&filters[1][type]=any&filters[1][values][0]=en&filters[2][field]=issued.date&filters[2][values][0]=Last 5 years&filters[2][type]=any&sort-field=issued.date&sort-direction=desc`}
+          key={index}
+          aria-label={`Search for content tagged with ${tag}`}
+        >
+          {tag}
+        </Tag>
+      );
+    };
+  }
+
   // Breadcrumbs
   config.settings.apiExpanders.push({
     match: '',

package/src/index.test.js

@@ -0,0 +1,343 @@
+import applyConfig from './index';
+import * as eea from './config';
+import BaseTag from './components/theme/BaseTag';
+
+jest.mock(
+  '@eeacms/volto-eea-design-system/ui/InpageNavigation/InpageNavigation',
+  () => 'MockedInpageNavigation',
+);
+jest.mock('@eeacms/volto-eea-website-theme/helpers/schema-utils', () => ({
+  addStylingFieldsetSchemaEnhancer: jest.fn(),
+}));
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/CustomCSS/CustomCSS',
+  () => 'MockedCustomCSS',
+);
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/NotFound/NotFound',
+  () => 'MockedNotFound',
+);
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/DraftBackground/DraftBackground',
+  () => 'MockedDraftBackground',
+);
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/Widgets/TokenWidget',
+  () => ({
+    TokenWidget: 'MockedTokenWidget',
+  }),
+);
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/Widgets/TopicsWidget',
+  () => ({
+    TopicsWidget: 'MockedThemesWidget',
+  }),
+);
+jest.mock('./components/theme/SubsiteClass', () => 'MockedSubsiteClass');
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageView',
+  () => 'MockedHomePageView',
+);
+jest.mock(
+  '@eeacms/volto-eea-website-theme/components/theme/Homepage/HomePageInverseView',
+  () => 'MockedHomePageInverseView',
+);
+jest.mock('@plone/volto/components', () => ({
+  Icon: 'MockedIcon',
+}));
+
+global.__SERVER__ = true;
+
+describe('applyConfig', () => {
+  it('should update the config settings with EEA specific settings', () => {
+    const originalConfig = {
+      blocks: {
+        blocksConfig: {
+          title: {
+            restricted: undefined,
+          },
+          description: {
+            restricted: undefined,
+          },
+          image: {},
+          video: {},
+          teaser: {
+            restricted: undefined,
+          },
+          nextCloudVideo: {
+            subtitlesLanguages: [],
+          },
+          accordion: undefined,
+          tabs_block: undefined,
+          columnsBlock: undefined,
+          hero: undefined,
+          group: undefined,
+          listing: undefined,
+          dividerBlock: undefined,
+          callToActionBlock: undefined,
+        },
+      },
+      views: {
+        layoutViews: undefined,
+        errorViews: {},
+      },
+      widgets: {
+        views: {
+          id: {
+            taxonomy_themes: undefined,
+          },
+          widget: {
+            tags: undefined,
+          },
+        },
+      },
+      settings: {
+        eea: {
+          languages: [{ code: 'en', name: 'English' }],
+        },
+        contactForm: '',
+        serverConfig: undefined,
+        showTags: true,
+        dateLocale: '',
+        available_colors: [],
+        expressMiddleware: [],
+        appExtras: undefined,
+
+        pluggableStyles: undefined,
+        apiExpanders: [],
+        hasLanguageDropdown: true,
+        themeColors: [],
+        previewText: '',
+        requiredBlocks: [],
+      },
+    };
+    const config = applyConfig(originalConfig);
+
+    expect(config.settings.contactForm).toBe('/contact');
+    expect(config.settings.showTags).toBe(false);
+    expect(config.blocks.blocksConfig['teaser'].restricted).toBe(true);
+    expect(config.blocks.blocksConfig['title'].restricted).toBe(false);
+    expect(config.blocks.blocksConfig['description'].restricted).toBe(false);
+    expect(config.settings.dateLocale).toBe('en-gb');
+    expect(config.views.layoutViews['homepage_view']).toBe(
+      'MockedHomePageView',
+    );
+    expect(config.views.layoutViews['homepage_inverse_view']).toBe(
+      'MockedHomePageInverseView',
+    );
+    expect(config.views.errorViews['404']).toBe('MockedNotFound');
+
+    expect(config.blocks.blocksConfig['description'].className).toBe(
+      'documentDescription eea callout',
+    );
+
+    expect(config.widgets.views.id.subjects).toBe('MockedTokenWidget');
+    expect(config.settings.expressMiddleware.length).toEqual(2);
+    expect(config.settings.appExtras).toEqual([
+      { match: '/**', component: 'MockedInpageNavigation' },
+      { match: '', component: 'MockedCustomCSS' },
+      { match: '', component: 'MockedDraftBackground' },
+      { match: '', component: 'MockedSubsiteClass' },
+      { match: '', component: BaseTag },
+    ]);
+    expect(config.settings.available_colors).toEqual(eea.colors);
+    expect(config.settings.hasLanguageDropdown).toBe(false);
+    expect(config.settings.themeColors).toEqual([
+      { value: undefined, title: 'No theme' },
+      { value: 'primary', title: 'Primary' },
+      { value: 'secondary', title: 'Secondary' },
+      { value: 'tertiary', title: 'Tertiary' },
+    ]);
+    expect(config.settings.pluggableStyles).toEqual([
+      {
+        id: 'content-box-gray',
+        title: 'Default',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+      {
+        id: 'content-box-primary',
+        title: 'Primary',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+      {
+        id: 'content-box-secondary',
+        title: 'Secondary',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+      {
+        id: 'content-box-tertiary',
+        title: 'Tertiary',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+    ]);
+    expect(config.blocks.blocksConfig.image.mostUsed).toBe(false);
+    expect(config.blocks.blocksConfig.video.mostUsed).toBe(false);
+    expect(config.settings.apiExpanders).toEqual([
+      { match: '', GET_CONTENT: ['breadcrumbs'] },
+    ]);
+  });
+
+  it('should update the config settings with EEA specific settings', () => {
+    const originalConfig = {
+      blocks: {
+        blocksConfig: {
+          title: {
+            restricted: undefined,
+          },
+          description: {
+            restricted: undefined,
+          },
+          image: {},
+          video: {},
+          teaser: {
+            restricted: undefined,
+          },
+          nextCloudVideo: {
+            subtitlesLanguages: undefined,
+          },
+          accordion: {
+            defaults: {},
+          },
+          tabs_block: {
+            templates: {
+              accordion: {},
+            },
+            variations: [
+              { id: 'default', title: 'Default', isDefault: true },
+              {
+                id: 'horizontal-responsive',
+                title: 'Horizontal',
+                isDefault: false,
+              },
+            ],
+          },
+          columnsBlock: {},
+          hero: {},
+          group: {},
+          listing: {},
+          dividerBlock: {},
+          callToActionBlock: {},
+        },
+      },
+      views: {
+        layoutViews: {},
+        errorViews: {},
+      },
+      widgets: {
+        views: {
+          id: {
+            taxonomy_themes: undefined,
+          },
+          widget: {
+            tags: undefined,
+          },
+        },
+      },
+      settings: {
+        eea: {},
+        contactForm: '',
+        serverConfig: {
+          extractScripts: {},
+        },
+        showTags: true,
+        dateLocale: '',
+        available_colors: [],
+        expressMiddleware: [],
+        appExtras: [],
+
+        pluggableStyles: [],
+        apiExpanders: [],
+        hasLanguageDropdown: true,
+        themeColors: [],
+        previewText: '',
+        requiredBlocks: [],
+      },
+    };
+    const config = applyConfig(originalConfig);
+
+    expect(config.settings.eea).toEqual(eea);
+    expect(config.settings.contactForm).toBe('/contact');
+    expect(config.settings.serverConfig.extractScripts.errorPages).toBe(true);
+    expect(config.settings.showTags).toBe(false);
+    expect(config.blocks.blocksConfig['teaser'].restricted).toBe(true);
+    expect(config.blocks.blocksConfig['title'].restricted).toBe(false);
+    expect(config.blocks.blocksConfig['description'].restricted).toBe(false);
+    expect(config.settings.dateLocale).toBe('en-gb');
+    expect(config.views.layoutViews['homepage_view']).toBe(
+      'MockedHomePageView',
+    );
+    expect(config.views.layoutViews['homepage_inverse_view']).toBe(
+      'MockedHomePageInverseView',
+    );
+    expect(config.views.errorViews['404']).toBe('MockedNotFound');
+
+    expect(config.blocks.blocksConfig['accordion'].options).toEqual({});
+    expect(config.blocks.blocksConfig['accordion'].defaults.theme).toBe(
+      'secondary',
+    );
+
+    expect(config.blocks.blocksConfig['columnsBlock'].available_colors).toEqual(
+      eea.colors,
+    );
+    expect(config.blocks.blocksConfig['description'].className).toBe(
+      'documentDescription eea callout',
+    );
+    expect(config.blocks.blocksConfig['hero'].copyrightPrefix).toBe('Image');
+
+    expect(config.widgets.views.id.subjects).toBe('MockedTokenWidget');
+    expect(config.settings.expressMiddleware.length).toEqual(2);
+    expect(config.settings.appExtras).toEqual([
+      { match: '/**', component: 'MockedInpageNavigation' },
+      { match: '', component: 'MockedCustomCSS' },
+      { match: '', component: 'MockedDraftBackground' },
+      { match: '', component: 'MockedSubsiteClass' },
+      { match: '', component: BaseTag },
+    ]);
+    expect(config.settings.available_colors).toEqual(eea.colors);
+    expect(config.settings.hasLanguageDropdown).toBe(false);
+    expect(config.settings.themeColors).toEqual([
+      { value: undefined, title: 'No theme' },
+      { value: 'primary', title: 'Primary' },
+      { value: 'secondary', title: 'Secondary' },
+      { value: 'tertiary', title: 'Tertiary' },
+    ]);
+    expect(config.settings.pluggableStyles).toEqual([
+      {
+        id: 'content-box-gray',
+        title: 'Default',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+      {
+        id: 'content-box-primary',
+        title: 'Primary',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+      {
+        id: 'content-box-secondary',
+        title: 'Secondary',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+      {
+        id: 'content-box-tertiary',
+        title: 'Tertiary',
+        previewComponent: expect.any(Function),
+        viewComponent: expect.any(Function),
+      },
+    ]);
+    expect(config.blocks.blocksConfig.image.mostUsed).toBe(false);
+    expect(config.blocks.blocksConfig.video.mostUsed).toBe(false);
+    expect(config.blocks.blocksConfig.dividerBlock.mostUsed).toBe(true);
+    expect(config.blocks.blocksConfig.callToActionBlock.mostUsed).toBe(true);
+    expect(config.blocks.blocksConfig.accordion.mostUsed).toBe(true);
+    expect(config.settings.apiExpanders).toEqual([
+      { match: '', GET_CONTENT: ['breadcrumbs'] },
+    ]);
+  });
+});

package/src/customizations/@eeacms/volto-tabs-block/components/templates/default/schema.js

@@ -1,109 +0,0 @@
-export default () => ({
-  title: 'Default tabs block',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['description'],
-    },
-    {
-      id: 'menu',
-      title: 'Menu',
-      fields: ['menuAlign', 'menuPosition', 'menuColor', 'menuInverted'],
-    },
-  ],
-  properties: {
-    description: {
-      title: 'Description',
-    },
-    menuPosition: {
-      title: 'Position',
-      choices: [
-        ['top', 'Top'],
-        ['bottom', 'Bottom'],
-        ['left side', 'Left side'],
-        ['right side', 'Right side'],
-      ],
-    },
-    menuAlign: {
-      title: 'Alignment',
-      type: 'array',
-      choices: [
-        ['left', 'Left'],
-        ['center', 'Center'],
-        ['right', 'Right'],
-        ['space-between', 'Space between'],
-      ],
-    },
-    menuSize: {
-      title: 'Size',
-      choices: [
-        ['mini', 'Mini'],
-        ['tiny', 'Tiny'],
-        ['small', 'Small'],
-        ['large', 'Large'],
-        ['huge', 'Huge'],
-        ['massive', 'Masive'],
-      ],
-    },
-    menuColor: {
-      title: 'Color',
-      defaultValue: 'green',
-      choices: [
-        ['red', 'Red'],
-        ['orange', 'Orange'],
-        ['yellow', 'Yellow'],
-        ['olive', 'Olive'],
-        ['green', 'Green'],
-        ['teal', 'Teal'],
-        ['blue', 'Blue'],
-        ['violet', 'Violet'],
-        ['purple', 'Purple'],
-        ['pink', 'Pink'],
-        ['brown', 'Brown'],
-        ['grey', 'Grey'],
-        ['black', 'Black'],
-      ],
-    },
-    menuBorderless: {
-      title: 'Borderless',
-      type: 'boolean',
-    },
-    menuCompact: {
-      title: 'Compact',
-      type: 'boolean',
-    },
-    menuFluid: {
-      title: 'Fluid',
-      type: 'boolean',
-      value: true,
-    },
-    menuInverted: {
-      title: 'Inverted',
-      type: 'boolean',
-    },
-    menuPointing: {
-      title: 'Pointing',
-      type: 'boolean',
-      value: true,
-    },
-    menuSecondary: {
-      title: 'Secondary',
-      type: 'boolean',
-      value: true,
-    },
-    menuStackable: {
-      title: 'Stackable',
-      type: 'boolean',
-    },
-    menuTabular: {
-      title: 'Tabular',
-      type: 'boolean',
-    },
-    menuText: {
-      title: 'Text',
-      type: 'boolean',
-    },
-  },
-  required: [],
-});