@eeacms/volto-eea-website-theme 1.22.0 → 1.23.0

package/src/customizations/volto/components/theme/Header/Header.test.jsx

@@ -0,0 +1,326 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { render, fireEvent } from '@testing-library/react';
+import configureStore from 'redux-mock-store';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import { Provider } from 'react-intl-redux';
+import config from '@plone/volto/registry';
+
+import Header from './Header';
+
+const mockStore = configureStore();
+let history = createMemoryHistory();
+
+describe('Header', () => {
+  it('renders a header component', () => {
+    const store = mockStore({
+      userSession: { token: null },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navigation: {
+        items: ['en'],
+      },
+      content: {
+        data: {
+          layout: 'homepage_inverse_view',
+        },
+      },
+      router: {
+        location: {
+          pathname: '/home/',
+        },
+      },
+    });
+
+    config.settings = {
+      ...config.settings,
+      eea: {
+        headerOpts: undefined,
+      },
+    };
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <Router history={history}>
+          <Header pathname="/home" />
+        </Router>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a header component', () => {
+    const store = mockStore({
+      userSession: { token: null },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      navigation: {
+        items: ['en'],
+      },
+      content: {
+        data: {
+          layout: 'homepage_inverse_view',
+        },
+      },
+      router: {
+        location: {
+          pathname: '/home/',
+        },
+      },
+    });
+
+    config.settings = {
+      ...config.settings,
+      eea: {
+        headerOpts: {},
+      },
+    };
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a header component', () => {
+    const store = mockStore({
+      userSession: { token: null },
+      intl: {
+        locale: undefined,
+        messages: {},
+      },
+      navigation: {
+        items: ['en'],
+      },
+      content: {
+        data: {
+          layout: 'homepage_view',
+          '@components': {
+            translations: {
+              items: [{ language: 'en' }, { language: 'ro' }],
+            },
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/home/',
+        },
+      },
+    });
+
+    config.settings = {
+      ...config.settings,
+      eea: {
+        headerOpts: {
+          partnerLinks: {
+            links: [{ href: '/link1', title: 'link 1' }],
+          },
+        },
+        defaultLanguage: 'en',
+        languages: [{ code: 'en' }, { code: 'ro' }],
+      },
+      isMultilingual: true,
+      supportedLanguages: ['en', 'ro'],
+      hasLanguageDropdown: true,
+    };
+
+    const { container, rerender } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+
+    fireEvent.click(container.querySelector('.content'));
+    fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
+    fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
+    fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
+      keyCode: 37,
+    });
+    fireEvent.click(container.querySelector('.country-code'));
+
+    // expect(getByText('da')).toBeInTheDocument();
+
+    rerender(
+      <Provider store={{ ...store, userSession: { token: '1234' } }}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+  });
+
+  it('renders a header component', () => {
+    const store = mockStore({
+      userSession: { token: null },
+      intl: {
+        locale: undefined,
+        messages: {},
+      },
+      navigation: {
+        items: ['en'],
+      },
+      content: {
+        data: {
+          layout: 'homepage_view',
+          '@components': {
+            subsite: {
+              '@type': 'Subsite',
+              title: 'Home Page',
+              subsite_logo: {
+                scales: {
+                  mini: {
+                    download:
+                      'http://localhost:8080/Plone/subsite_logo/@@images/image/mini',
+                  },
+                },
+              },
+            },
+            translations: {
+              items: [{ language: 'ro' }],
+            },
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/home/',
+        },
+      },
+    });
+
+    config.settings = {
+      ...config.settings,
+      eea: {
+        headerOpts: {
+          partnerLinks: {
+            links: [{ href: '/link1', title: 'link 1' }],
+          },
+        },
+        defaultLanguage: 'en',
+        languages: [{ code: 'en' }, { code: 'ro' }],
+      },
+      isMultilingual: true,
+      supportedLanguages: ['en', 'ro'],
+      hasLanguageDropdown: true,
+    };
+
+    const { container, rerender } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+
+    fireEvent.click(container.querySelector('.content'));
+    fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
+    fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
+    fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
+      keyCode: 37,
+    });
+    fireEvent.click(container.querySelector('.country-code'));
+
+    // expect(getByText('da')).toBeInTheDocument();
+
+    rerender(
+      <Provider store={{ ...store, userSession: { token: '1234' } }}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+  });
+
+  it('renders a header component', () => {
+    const store = mockStore({
+      userSession: { token: null },
+      intl: {
+        locale: undefined,
+        messages: {},
+      },
+      navigation: {
+        items: [
+          { url: '/test1', title: 'test 1', nav_title: 'Test 1', items: [] },
+          { url: undefined, title: 'test 2', items: [] },
+        ],
+      },
+      content: {
+        data: {
+          layout: 'homepage_view',
+          '@components': {
+            subsite: {
+              '@type': 'Subsite',
+              title: 'Home Page',
+              subsite_logo: undefined,
+            },
+            translations: {
+              items: [{ language: 'ro' }],
+            },
+          },
+        },
+      },
+      router: {
+        location: {
+          pathname: '/home/',
+        },
+      },
+    });
+
+    config.settings = {
+      ...config.settings,
+      eea: {
+        headerOpts: {
+          partnerLinks: {
+            links: [{ href: '/link1', title: 'link 1' }],
+          },
+        },
+        defaultLanguage: 'en',
+        languages: [{ code: 'en' }, { code: 'ro' }],
+      },
+      isMultilingual: true,
+      supportedLanguages: ['en', 'ro'],
+      hasLanguageDropdown: true,
+    };
+
+    const { container, rerender } = render(
+      <Provider store={store}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+
+    fireEvent.click(container.querySelector('.content'));
+    fireEvent.keyDown(container.querySelector('.content'), { keyCode: 37 });
+    fireEvent.keyDown(container.querySelector('.content a'), { keyCode: 37 });
+    fireEvent.keyDown(container.querySelector('a[href="/link1"]'), {
+      keyCode: 37,
+    });
+    fireEvent.click(container.querySelector('.country-code'));
+    fireEvent.click(container.querySelector('a[href="/test1"]'));
+
+    // expect(getByText('da')).toBeInTheDocument();
+
+    rerender(
+      <Provider store={{ ...store, userSession: { token: '1234' } }}>
+        <Router history={history}>
+          <Header pathname="/blog" />
+        </Router>
+      </Provider>,
+    );
+  });
+});

package/src/index.js

@@ -1,26 +1,26 @@
-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 { 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 { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-theme/helpers/schema-utils';
 
+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';
 
@@ -30,6 +30,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 = {
@@ -116,12 +194,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 +229,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'];