@eeacms/volto-eea-website-theme 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.21.0](https://github.com/eea/volto-eea-website-theme/compare/1.20.0...1.21.0) - 5 September 2023
+
+#### :house: Internal changes
+
+- chore: fix tests [nileshgulia1 - [`c432106`](https://github.com/eea/volto-eea-website-theme/commit/c432106e0d5794383b4eac2a0027f4cd2f48cc28)]
+- chore: add cypress for new code [nileshgulia1 - [`c989488`](https://github.com/eea/volto-eea-website-theme/commit/c989488946b2ab8b9e9da281dd668a0dc49efa56)]
+- chore: cosmetics [Alin Voinea - [`442b64e`](https://github.com/eea/volto-eea-website-theme/commit/442b64ea3055f4e4f5d5bff9114c90c4a516a512)]
+
+#### :hammer_and_wrench: Others
+
+- test: Update ContactForm snapshot [Alin Voinea - [`e322b51`](https://github.com/eea/volto-eea-website-theme/commit/e322b510c3d0aa092d7a30a3af48b1d049aca5bb)]
+- test: Add jest tests for ContactForm [Alin Voinea - [`e4a4c28`](https://github.com/eea/volto-eea-website-theme/commit/e4a4c2877bdb7c57a361751430c06136a37e37b0)]
+- test: Add jest tests for AlignChooser [Alin Voinea - [`06edf05`](https://github.com/eea/volto-eea-website-theme/commit/06edf05f8f38c43f9b0bbd7ad45a9d73a7ff66aa)]
+- bump package version [David Ichim - [`7ba2dd7`](https://github.com/eea/volto-eea-website-theme/commit/7ba2dd7d91183bda602de8da0f7823a1e8016df5)]
+- i18n: Add en [Alin Voinea - [`e421605`](https://github.com/eea/volto-eea-website-theme/commit/e4216054129654c9ce06962d164b5a28f8c60d2b)]
 ### [1.20.0](https://github.com/eea/volto-eea-website-theme/compare/1.19.0...1.20.0) - 29 August 2023
 
 #### :bug: Bug Fixes

package/jest-addon.config.js

@@ -27,10 +27,10 @@ module.exports = {
   },
   coverageThreshold: {
     global: {
-      branches: 5,
-      functions: 5,
-      lines: 5,
-      statements: 5,
+      branches: 0,
+      functions: 0,
+      lines: 0,
+      statements: 0,
     },
   },
 };

package/locales/de/LC_MESSAGES/volto.po

@@ -11,4 +11,52 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: components/theme/Banner/View
+# defaultMessage: Created
+msgid "Created"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Download
+msgid "Download"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: European Environment Agency
+msgid "European Environment Agency"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Modified
+msgid "Modified"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Published
+msgid "Published"
+msgstr ""
 
+#: components/theme/Banner/View
+# defaultMessage: Share
+msgid "Share"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Share to
+msgid "Share to"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: Site
+msgid "Site"
+msgstr ""
+
+#: components/manage/Blocks/Title/Edit
+# defaultMessage: Type the title…
+msgid "Type the title…"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: RSS Feed
+msgid "rssFeed"
+msgstr ""

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,62 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#: components/theme/Banner/View
+# defaultMessage: Created
+msgid "Created"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Download
+msgid "Download"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: European Environment Agency
+msgid "European Environment Agency"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Modified
+msgid "Modified"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Published
+msgid "Published"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Share
+msgid "Share"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Share to
+msgid "Share to"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: Site
+msgid "Site"
+msgstr ""
+
+#: components/manage/Blocks/Title/Edit
+# defaultMessage: Type the title…
+msgid "Type the title…"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: RSS Feed
+msgid "rssFeed"
+msgstr ""

package/locales/it/LC_MESSAGES/volto.po

@@ -11,4 +11,52 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: components/theme/Banner/View
+# defaultMessage: Created
+msgid "Created"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Download
+msgid "Download"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: European Environment Agency
+msgid "European Environment Agency"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Modified
+msgid "Modified"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Published
+msgid "Published"
+msgstr ""
 
+#: components/theme/Banner/View
+# defaultMessage: Share
+msgid "Share"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Share to
+msgid "Share to"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: Site
+msgid "Site"
+msgstr ""
+
+#: components/manage/Blocks/Title/Edit
+# defaultMessage: Type the title…
+msgid "Type the title…"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: RSS Feed
+msgid "rssFeed"
+msgstr ""

package/locales/ro/LC_MESSAGES/volto.po

@@ -11,4 +11,52 @@ msgstr ""
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"
 
+#: components/theme/Banner/View
+# defaultMessage: Created
+msgid "Created"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Download
+msgid "Download"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: European Environment Agency
+msgid "European Environment Agency"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Modified
+msgid "Modified"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Published
+msgid "Published"
+msgstr ""
 
+#: components/theme/Banner/View
+# defaultMessage: Share
+msgid "Share"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Share to
+msgid "Share to"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: Site
+msgid "Site"
+msgstr ""
+
+#: components/manage/Blocks/Title/Edit
+# defaultMessage: Type the title…
+msgid "Type the title…"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: RSS Feed
+msgid "rssFeed"
+msgstr ""

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"POT-Creation-Date: 2023-08-29T17:13:27.797Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -13,4 +13,52 @@ msgstr ""
 "Preferred-Encodings: utf-8\n"
 "Domain: volto\n"
 
+#: components/theme/Banner/View
+# defaultMessage: Created
+msgid "Created"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Download
+msgid "Download"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: European Environment Agency
+msgid "European Environment Agency"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Modified
+msgid "Modified"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Published
+msgid "Published"
+msgstr ""
 
+#: components/theme/Banner/View
+# defaultMessage: Share
+msgid "Share"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: Share to
+msgid "Share to"
+msgstr ""
+
+#: components/theme/Logo
+# defaultMessage: Site
+msgid "Site"
+msgstr ""
+
+#: components/manage/Blocks/Title/Edit
+# defaultMessage: Type the title…
+msgid "Type the title…"
+msgstr ""
+
+#: components/theme/Banner/View
+# defaultMessage: RSS Feed
+msgid "rssFeed"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -14,6 +14,7 @@
     "react"
   ],
   "addons": [
+    "@eeacms/volto-group-block",
     "@eeacms/volto-eea-design-system",
     "volto-subsites"
   ],
@@ -23,6 +24,7 @@
   },
   "dependencies": {
     "@eeacms/volto-eea-design-system": "*",
+    "@eeacms/volto-group-block": "*",
     "volto-subsites": "*"
   },
   "devDependencies": {

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/FlexGroup.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { Icon, BlocksForm } from '@plone/volto/components';
+import EditBlockWrapper from '@eeacms/volto-group-block/components/manage/Blocks/Group/EditBlockWrapper';
+
+import helpSVG from '@plone/volto/icons/help.svg';
+import RenderBlocks from './RenderBlocks';
+import './editor-flex.less';
+
+const FlexGroup = (props) => {
+  const {
+    block,
+    data,
+    onChangeBlock,
+    onChangeField,
+    pathname,
+    selected,
+    selectedBlock,
+    onSelectBlock,
+    setSelectedBlock,
+    multiSelected,
+    manage,
+    childBlocksForm,
+    formDescription,
+    isEditMode,
+  } = props;
+  const metadata = props.metadata || props.properties;
+  const blockState = {};
+  const { no_of_columns = 2 } = data;
+  const flexClassNames = `ui unstackable items row flex-items-wrapper items-${no_of_columns}-columns`;
+
+  React.useEffect(() => {
+    const dragDropList = document?.querySelector(
+      `.flex-blocks-form[data-block="${block}"] [data-rbd-droppable-id]`,
+    );
+    if (dragDropList) dragDropList.setAttribute('class', flexClassNames);
+  }, [flexClassNames, block, isEditMode]);
+
+  // Get editing instructions from block settings or props
+  let instructions = data?.instructions?.data || data?.instructions;
+  if (!instructions || instructions === '<p><br/></p>') {
+    instructions = formDescription;
+  }
+
+  return (
+    <div className="flex-blocks-form" data-block={block}>
+      {isEditMode ? (
+        <BlocksForm
+          metadata={metadata}
+          properties={childBlocksForm}
+          manage={manage}
+          selectedBlock={selected ? selectedBlock : null}
+          allowedBlocks={data.allowedBlocks}
+          title={data.placeholder}
+          description={instructions}
+          onSelectBlock={(id, l, e) => {
+            const isMultipleSelection = e
+              ? e.shiftKey || e.ctrlKey || e.metaKey
+              : false;
+            onSelectBlock(id, isMultipleSelection, e, selectedBlock);
+          }}
+          onChangeFormData={(newFormData) => {
+            onChangeBlock(block, {
+              ...data,
+              data: newFormData,
+            });
+          }}
+          onChangeField={(id, value) => {
+            if (['blocks', 'blocks_layout'].indexOf(id) > -1) {
+              blockState[id] = value;
+              onChangeBlock(block, {
+                ...data,
+                data: {
+                  ...data.data,
+                  ...blockState,
+                },
+              });
+            } else {
+              onChangeField(id, value);
+            }
+          }}
+          pathname={pathname}
+        >
+          {({ draginfo }, editBlock, blockProps) => (
+            <div className="flex-item">
+              <div className="item-wrapper">
+                <EditBlockWrapper
+                  draginfo={draginfo}
+                  blockProps={blockProps}
+                  disabled={data.disableInnerButtons}
+                  extraControls={
+                    <>
+                      {instructions && (
+                        <>
+                          <Button
+                            icon
+                            basic
+                            title="Section help"
+                            onClick={() => {
+                              setSelectedBlock();
+                              const tab = manage ? 0 : 1;
+                              props.setSidebarTab(tab);
+                            }}
+                          >
+                            <Icon name={helpSVG} className="" size="19px" />
+                          </Button>
+                        </>
+                      )}
+                    </>
+                  }
+                  multiSelected={multiSelected.includes(blockProps.block)}
+                >
+                  {editBlock}
+                </EditBlockWrapper>
+              </div>
+            </div>
+          )}
+        </BlocksForm>
+      ) : (
+        <div className={flexClassNames}>
+          <RenderBlocks metadata={metadata} content={data?.data || {}} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FlexGroup;

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/RenderBlocks.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
+import { defineMessages, injectIntl } from 'react-intl';
+import { map } from 'lodash';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from '@plone/volto/helpers';
+import StyleWrapper from '@plone/volto/components/manage/Blocks/Block/StyleWrapper';
+import config from '@plone/volto/registry';
+import { ViewDefaultBlock } from '@plone/volto/components';
+
+const messages = defineMessages({
+  unknownBlock: {
+    id: 'Unknown Block',
+    defaultMessage: 'Unknown Block {block}',
+  },
+  invalidBlock: {
+    id: 'Invalid Block',
+    defaultMessage: 'Invalid block - Will be removed on saving',
+  },
+});
+
+const RenderBlocks = (props) => {
+  const { content, intl, location, metadata } = props;
+  const blocksFieldname = getBlocksFieldname(content);
+  const blocksLayoutFieldname = getBlocksLayoutFieldname(content);
+  const blocksConfig = props.blocksConfig || config.blocks.blocksConfig;
+  const CustomTag = props.as || React.Fragment;
+
+  return hasBlocksData(content) ? (
+    <CustomTag>
+      {map(content[blocksLayoutFieldname].items, (block) => {
+        const Block =
+          blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view ||
+          ViewDefaultBlock;
+
+        const blockData = applyBlockDefaults({
+          data: content[blocksFieldname][block],
+          intl,
+          metadata,
+          properties: content,
+        });
+
+        return Block ? (
+          <div className="flex-item" key={block}>
+            <StyleWrapper key={block} id={block}>
+              <Block
+                id={block}
+                metadata={metadata}
+                properties={content}
+                data={blockData}
+                path={getBaseUrl(location?.pathname || '')}
+                blocksConfig={blocksConfig}
+              />
+            </StyleWrapper>
+          </div>
+        ) : blockData ? (
+          <div key={block}>
+            {intl.formatMessage(messages.unknownBlock, {
+              block: content[blocksFieldname]?.[block]?.['@type'],
+            })}
+          </div>
+        ) : (
+          <div key={block}>{intl.formatMessage(messages.invalidBlock)}</div>
+        );
+      })}
+    </CustomTag>
+  ) : (
+    ''
+  );
+};
+
+export default injectIntl(RenderBlocks);

package/src/components/manage/Blocks/GroupBlockTemplate/FlexGroup/editor-flex.less

@@ -0,0 +1,14 @@
+@import (multiple) '../../theme.config';
+
+@type: 'extra';
+@element: 'custom';
+
+@baseWidth: 100%;
+
+// on edit ensure add button is next to the block input area
+.flex-blocks-form {
+  .item-wrapper {
+    position: relative;
+    width: 100%;
+  }
+}

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.jsx

@@ -57,7 +57,7 @@ const AlignChooser = ({
   return (
     <div className="align-buttons">
       {actions.map((action) => (
-        <Button.Group>
+        <Button.Group key={action}>
           <Button
             icon
             basic

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { render } from '@testing-library/react';
+import AlignChooser from './AlignChooser';
+
+const mockStore = configureStore();
+
+describe('AlignChooser', () => {
+  const props = {
+    align: 'left',
+    onChangeBlock: jest.fn(),
+    data: { copyrightPosition: 'left' },
+    block: '123',
+    actions: ['left', 'right', 'center', 'full'],
+  };
+  const store = mockStore({
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  });
+
+  it('renders the align buttons', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <AlignChooser {...props} />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('calls onChangeBlock when an align button is clicked', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <AlignChooser {...props} />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('marks the active align button as active', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <AlignChooser {...props} />
+      </Provider>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/customizations/volto/components/theme/ContactForm/ContactForm.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+import ContactForm from './ContactForm';
+
+jest.mock('react-portal', () => ({
+  Portal: jest.fn(() => <div id="Portal" />),
+}));
+
+const mockStore = configureStore();
+
+describe('Contact form', () => {
+  it('renders a contact form', () => {
+    const store = mockStore({
+      emailNotification: {
+        error: {},
+        loaded: false,
+        loading: false,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {},
+      content: {},
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ContactForm location={{ pathname: '/blog' }} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders a contact form with error message', () => {
+    const store = mockStore({
+      emailNotification: {
+        error: {
+          message: 'Error foo',
+        },
+        loaded: false,
+        loading: false,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      userSession: {},
+      content: {},
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <ContactForm location={{ pathname: '/' }} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});

package/src/index.js

@@ -15,6 +15,7 @@ import installLayoutSettingsBlock from '@eeacms/volto-eea-website-theme/componen
 
 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';
@@ -122,6 +123,32 @@ const applyConfig = (config) => {
       };
     }
   }
+  //Group block flex variation
+  if (config.blocks.blocksConfig.group) {
+    config.blocks.blocksConfig.group.variations = [
+      ...(config.blocks.blocksConfig.group.variations || []),
+      {
+        id: 'flex group',
+        isDefault: false,
+        title: 'Flex Group',
+        template: FlexGroup,
+        schemaEnhancer: ({ schema, formData, intl }) => {
+          schema.fieldsets[0].fields.push('no_of_columns');
+          schema.properties.no_of_columns = {
+            title: 'No. of columns',
+            description: 'Choose the number of flex columns',
+            choices: [
+              [2, 2],
+              [3, 3],
+              [4, 4],
+              [5, 5],
+            ],
+          };
+          return schema;
+        },
+      },
+    ];
+  }
 
   // Apply columns block customization
   if (config.blocks.blocksConfig.columnsBlock) {