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

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

@@ -92,21 +92,22 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
       {isHomePageInverse && <BodyClass className="homepage" />}
       <Header.TopHeader>
         <Header.TopItem className="official-union">
-          <Image src={eeaFlag} alt="eea flag"></Image>
+          <Image src={eeaFlag} alt="European Union flag"></Image>
           <Header.TopDropdownMenu
             text="An official website of the European Union | How do you know?"
             tabletText="EEA information systems"
-            mobileText=" "
+            mobileText="EEA information systems"
             icon="chevron down"
             aria-label="dropdown"
-            className=""
+            classNameHeader="mobile-sr-only"
             viewportWidth={width}
           >
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
               className="content"
               onClick={(evt) => evt.stopPropagation()}
               onKeyDown={(evt) => evt.stopPropagation()}
+              tabIndex={0}
+              role={'presentation'}
             >
               <p>
                 All official European Union website addresses are in the{' '}
@@ -129,9 +130,10 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
             <Header.TopDropdownMenu
               id="theme-sites"
               text={headerOpts.partnerLinks.title}
+              aria-label={headerOpts.partnerLinks.title}
               viewportWidth={width}
             >
-              <div className="wrapper">
+              <div className="wrapper" tabIndex={0} role={'presentation'}>
                 {headerOpts.partnerLinks.links.map((item, index) => (
                   <Dropdown.Item key={index}>
                     <a
@@ -150,53 +152,54 @@ const EEAHeader = ({ pathname, token, items, history, subsite }) => {
           </Header.TopItem>
         )}
 
-        {config.settings.isMultilingual && (
-          <Header.TopDropdownMenu
-            id="language-switcher"
-            className="item"
-            hasLanguageDropdown={
-              config.settings.supportedLanguages.length > 1 &&
-              config.settings.hasLanguageDropdown
-            }
-            text={`${language.toUpperCase()}`}
-            mobileText={`${language.toUpperCase()}`}
-            icon={
-              <Image src={globeIcon} alt="language dropdown globe icon"></Image>
-            }
-            viewportWidth={width}
-          >
-            <ul
-              className="wrapper language-list"
-              role="listbox"
-              aria-label="language switcher"
+        {config.settings.isMultilingual &&
+          config.settings.supportedLanguages.length > 1 &&
+          config.settings.hasLanguageDropdown && (
+            <Header.TopDropdownMenu
+              id="language-switcher"
+              className="item"
+              text={`${language.toUpperCase()}`}
+              mobileText={`${language.toUpperCase()}`}
+              icon={
+                <Image
+                  src={globeIcon}
+                  alt="language dropdown globe icon"
+                ></Image>
+              }
+              viewportWidth={width}
             >
-              {eea.languages.map((item, index) => (
-                <Dropdown.Item
-                  as="li"
-                  key={index}
-                  text={
-                    <span>
-                      {item.name}
-                      <span className="country-code">
-                        {item.code.toUpperCase()}
+              <ul
+                className="wrapper language-list"
+                role="listbox"
+                aria-label="language switcher"
+              >
+                {eea.languages.map((item, index) => (
+                  <Dropdown.Item
+                    as="li"
+                    key={index}
+                    text={
+                      <span>
+                        {item.name}
+                        <span className="country-code">
+                          {item.code.toUpperCase()}
+                        </span>
                       </span>
-                    </span>
-                  }
-                  onClick={() => {
-                    const translation = find(translations, {
-                      language: item.code,
-                    });
-                    const to = translation
-                      ? flattenToAppURL(translation['@id'])
-                      : `/${item.code}`;
-                    setLanguage(item.code);
-                    history.push(to);
-                  }}
-                ></Dropdown.Item>
-              ))}
-            </ul>
-          </Header.TopDropdownMenu>
-        )}
+                    }
+                    onClick={() => {
+                      const translation = find(translations, {
+                        language: item.code,
+                      });
+                      const to = translation
+                        ? flattenToAppURL(translation['@id'])
+                        : `/${item.code}`;
+                      setLanguage(item.code);
+                      history.push(to);
+                    }}
+                  ></Dropdown.Item>
+                ))}
+              </ul>
+            </Header.TopDropdownMenu>
+          )}
       </Header.TopHeader>
       <Header.Main
         pathname={pathname}

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/helpers/schema-utils.js

@@ -1,8 +1,11 @@
-import { cloneDeep } from 'lodash';
 import imageNarrowSVG from '@eeacms/volto-eea-website-theme/icons/image-narrow.svg';
 import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import alignTopSVG from '@plone/volto/icons/move-up.svg';
+import alignCenterSVG from '@plone/volto/icons/row.svg';
+import alignBottomSVG from '@plone/volto/icons/move-down.svg';
+import { addStyling } from '@plone/volto/helpers';
 
 export const ALIGN_INFO_MAP = {
   narrow_width: [imageNarrowSVG, 'Narrow width'],
@@ -10,45 +13,48 @@ export const ALIGN_INFO_MAP = {
   wide_width: [imageWideSVG, 'Wide width'],
   full: [imageFullSVG, 'Full width'],
 };
+const ALIGN_INFO_MAP_IMAGE_POSITION = {
+  'has--object-position--top': [alignTopSVG, 'Top'],
+  'has--object-position--center': [alignCenterSVG, 'Center'],
+  'has--object-position--bottom': [alignBottomSVG, 'Bottom'],
+};
 
-export const addStylingFieldsetSchemaEnhancer = ({ schema }) => {
-  const applied = schema?.properties?.styles;
+export const addStylingFieldsetSchemaEnhancer = (props) => {
+  const schema = addStyling(props);
+  schema.properties.styles.schema.properties.size = {
+    widget: 'style_align',
+    title: 'Section size',
+    actions: Object.keys(ALIGN_INFO_MAP),
+    actionsInfoMap: ALIGN_INFO_MAP,
+  };
 
-  if (!applied) {
-    const resSchema = cloneDeep(schema);
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    'size',
+  ];
 
-    resSchema.fieldsets.push({
-      id: 'styling',
-      fields: ['styles'],
-      title: 'Styling',
-    });
-    resSchema.properties.styles = {
-      widget: 'object',
-      title: 'Styling',
-      schema: {
-        fieldsets: [
-          {
-            id: 'default',
-            title: 'Default',
-            fields: ['size'],
-          },
-        ],
-        properties: {
-          size: {
-            widget: 'style_align',
-            title: 'Section size',
-            actions: Object.keys(ALIGN_INFO_MAP),
-            actionsInfoMap: ALIGN_INFO_MAP,
-          },
-        },
-        required: [],
-      },
-    };
-    return resSchema;
-  }
+  return schema;
+};
+
+export const addStylingFieldsetSchemaEnhancerImagePosition = (props) => {
+  const schema = addStyling(props);
+
+  schema.properties.styles.schema.properties.objectPosition = {
+    title: 'Image position',
+    widget: 'style_align',
+    actions: Object.keys(ALIGN_INFO_MAP_IMAGE_POSITION),
+    actionsInfoMap: ALIGN_INFO_MAP_IMAGE_POSITION,
+    defaultValue: 'has--object-position--center',
+  };
+
+  schema.properties.styles.schema.fieldsets[0].fields = [
+    ...schema.properties.styles.schema.fieldsets[0].fields,
+    'objectPosition',
+  ];
 
   return schema;
 };
+
 export const getVoltoStyles = (props) => {
   // return an object with same key and value for cx class setting
   const styles = props ? props : {};