@eeacms/volto-bise-policy 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -4,7 +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.0.0](https://github.com/eea/volto-bise-policy/compare/0.1.0...1.0.0) - 7 December 2022
+### [1.0.1](https://github.com/eea/volto-bise-policy/compare/1.0.0...1.0.1) - 29 March 2023
+
+#### :rocket: New Features
+
+- feat(package.json): add @eeacms/volto-block-toc addon to addons list [Miu Razvan - [`ba5d5e6`](https://github.com/eea/volto-bise-policy/commit/ba5d5e6931b5ec324f6aa8c6b735e17963e71db2)]
+
+#### :house: Internal changes
+
+- chore(Jenkinsfile): remove VOLTO variable value [Miu Razvan - [`2c64b0d`](https://github.com/eea/volto-bise-policy/commit/2c64b0d534f670a5a8300927b10c398a3dba05ae)]
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`639f91a`](https://github.com/eea/volto-bise-policy/commit/639f91a3830640e0d9062b136dd8184027d288f7)]
+- Remove locales [Miu Razvan - [`06be14b`](https://github.com/eea/volto-bise-policy/commit/06be14ba9f5e5f2a4c8609d90e1e16381fa784b0)]
+## [1.0.0](https://github.com/eea/volto-bise-policy/compare/0.1.0...1.0.0) - 7 December 2022
 
 #### :hammer_and_wrench: Others
 
@@ -19,7 +33,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update [Miu Razvan - [`487a390`](https://github.com/eea/volto-bise-policy/commit/487a3900f707d88a40d435d88ff6072f1eb9698f)]
 - Fix Jenkinsfile [Miu Razvan - [`96f92cc`](https://github.com/eea/volto-bise-policy/commit/96f92cc4f14b066ced8ec1c6e48a782780f10d80)]
 - Rename to volto-bise-policy [Miu Razvan - [`045b4aa`](https://github.com/eea/volto-bise-policy/commit/045b4aa61164c51db36db40fee1151d31829b9fa)]
-- Initial bise eea design [Miu Razvan - [`8fdb2d9`](https://github.com/eea/volto-bise-policy/commit/8fdb2d980f57a99d52ecd2c6b0114156108b051f)]
 ### 0.1.0 - 7 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -14,6 +14,7 @@
   ],
   "addons": [
     "@eeacms/volto-datablocks",
+    "@eeacms/volto-block-toc",
     "@eeacms/volto-eea-design-system",
     "@eeacms/volto-eea-website-theme"
   ],
@@ -23,6 +24,7 @@
   },
   "dependencies": {
     "@eeacms/volto-datablocks": "*",
+    "@eeacms/volto-block-toc": "*",
     "@eeacms/volto-eea-design-system": "*",
     "@eeacms/volto-eea-website-theme": "*",
     "esri-loader": "3.7.0"

package/src/components/manage/Blocks/NewsletterSignup/Edit.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import View from './View';
+
+import schema from './schema';
+
+const Edit = (props) => {
+  return (
+    <>
+      <View {...props} mode="edit" />
+      <SidebarPortal selected={props.selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          onChangeBlock={props.onChangeBlock}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/NewsletterSignup/View.jsx

@@ -0,0 +1,13 @@
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+const View = (props) => {
+  const Renderer = props.variation.render;
+
+  return (
+    <>
+      <Renderer {...props} />
+    </>
+  );
+};
+
+export default withBlockExtensions(View);

package/src/components/manage/Blocks/NewsletterSignup/index.js

@@ -0,0 +1,49 @@
+import imageSVG from '@plone/volto/icons/image.svg';
+import NavigationBlockView from './View';
+import NavigationBlockEdit from './Edit';
+
+export default (config) => {
+  config.blocks.blocksConfig.newsletterSignup = {
+    id: 'newsletterSignup',
+    title: 'Newsletter signup',
+    icon: imageSVG,
+    group: 'common',
+    view: NavigationBlockView,
+    edit: NavigationBlockEdit,
+    restricted: false,
+    mostUsed: false,
+    variations: [
+      {
+        id: 'default',
+        title: 'Default',
+        isDefault: true,
+        render: (props) => {
+          const { hasImage, imgSrc } = props.data;
+
+          return (
+            <>
+              View mode
+              {hasImage && imgSrc && (
+                <img src={`${props.data.imgSrc}/@@images/image`} alt="asda" />
+              )}
+            </>
+          );
+        },
+      },
+      {
+        id: 'enisa_newsletter',
+        title: 'Enisa newsletter',
+        render: () => 'is enisa newsletter',
+        schemaEnhancer: ({ schema, formData, intl }) => {
+          return schema;
+        },
+      },
+    ],
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/NewsletterSignup/schema.js

@@ -0,0 +1,25 @@
+export default {
+  title: 'Newsletter signup',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['hasImage', 'imgSrc'],
+    },
+  ],
+
+  properties: {
+    hasImage: {
+      title: 'Has image',
+      type: 'boolean',
+      default: true,
+    },
+    imgSrc: {
+      title: 'Image',
+      widget: 'attachedimage',
+    },
+  },
+
+  required: [],
+};

package/src/components/manage/Blocks/index.js

@@ -4,6 +4,7 @@ import installFactsheetsListing from './FactsheetsListing';
 import installKeyFacts from './KeyFacts';
 import installMaesViewer from './MaesViewer';
 import installNavigation from './Navigation';
+import installNewsletter from './NewsletterSignup';
 
 export default (config) => {
   return [
@@ -13,5 +14,6 @@ export default (config) => {
     installKeyFacts,
     installMaesViewer,
     installNavigation,
+    installNewsletter,
   ].reduce((acc, apply) => apply(acc), config);
 };

package/src/customizations/@eeacms/volto-eea-design-system/ui/Header/HeaderMenuPopUp.js

@@ -0,0 +1,354 @@
+import React from 'react';
+import { Transition } from 'semantic-ui-react';
+import { Container, Grid, List, Icon, Accordion } from 'semantic-ui-react';
+
+import { cloneDeep } from 'lodash';
+
+import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
+
+const createColumns = (item, length, renderMenuItem) => {
+  let subArrays = [];
+  let size = length;
+  for (let i = 0; i < item.items.length; i += size) {
+    subArrays.push(item.items.slice(i, i + size));
+  }
+
+  const column = subArrays.map((subArray, index) => (
+    <Grid.Column key={index}>
+      <List>
+        {subArray.map((arrayItem, idx) => (
+          <React.Fragment key={idx}>
+            {renderMenuItem(arrayItem, {
+              className: 'item',
+              role: 'listitem',
+              key: idx,
+            })}
+          </React.Fragment>
+        ))}
+      </List>
+    </Grid.Column>
+  ));
+
+  return column;
+};
+
+const ItemGrid = ({
+  item,
+  columns,
+  length,
+  renderMenuItem,
+  withTitle = true,
+}) => (
+  <>
+    {withTitle && renderMenuItem(item, { className: 'sub-title' })}
+    {item.items.length ? (
+      <Grid columns={columns}>
+        {createColumns(item, length, renderMenuItem)}
+      </Grid>
+    ) : null}
+  </>
+);
+
+const Item = ({ item, icon = false, iconName, renderMenuItem }) => (
+  <>
+    {renderMenuItem(item, { className: 'sub-title' })}
+    <List className="menu-list">
+      {item.items.map((listItem, index) => (
+        <React.Fragment key={index}>
+          {renderMenuItem(
+            listItem,
+            {
+              className: 'item',
+              key: index,
+              role: 'listitem',
+            },
+            { children: icon && <Icon className={iconName} /> },
+          )}
+        </React.Fragment>
+      ))}
+    </List>
+  </>
+);
+
+const Topics = ({ menuItem, renderMenuItem }) => (
+  <Grid>
+    {menuItem.items.map((section, index) => (
+      <React.Fragment key={index}>
+        {section.title === 'At a glance' ? (
+          <Grid.Column width={3} id="at-a-glance">
+            <Item item={section} key={index} renderMenuItem={renderMenuItem} />
+          </Grid.Column>
+        ) : (
+          <Grid.Column width={9} key={index} id="topics-right-column">
+            <ItemGrid
+              item={section}
+              columns={4}
+              length={10}
+              key={index}
+              renderMenuItem={renderMenuItem}
+            />
+          </Grid.Column>
+        )}
+      </React.Fragment>
+    ))}
+  </Grid>
+);
+
+const Countries = ({ menuItem, renderMenuItem }) => {
+  return (
+    <ItemGrid
+      item={menuItem}
+      columns={5}
+      length={7}
+      renderMenuItem={renderMenuItem}
+      withTitle={false}
+    />
+  );
+};
+
+const StandardMegaMenuGrid = ({ menuItem, renderMenuItem }) => (
+  <Grid columns={4}>
+    {menuItem.items.map((section, index) => (
+      <Grid.Column key={index}>
+        <Item item={section} renderMenuItem={renderMenuItem} />
+      </Grid.Column>
+    ))}
+  </Grid>
+);
+
+const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
+  const topics = element.title === 'Topics' ? true : false;
+  let defaultIndex = -1;
+
+  return (
+    <>
+      {!topics ? (
+        <React.Fragment>
+          {element.items.map((item, index) => {
+            let firstLevelPanels = [];
+            if (!item.items.length) {
+              return (
+                <React.Fragment key={index}>
+                  {renderMenuItem(item, { className: 'item sub-title' })}
+                </React.Fragment>
+              );
+            }
+            let x = {};
+            x.key = item['@id'] || item['url'];
+            if (pathName.indexOf(item.url) !== -1) {
+              defaultIndex = index;
+            }
+            x.title = (
+              <Accordion.Title key={`title=${index}`} as="button">
+                {item.title}
+                <Icon className="ri-arrow-down-s-line" size="small" />
+              </Accordion.Title>
+            );
+            let overflow_item = cloneDeep(item);
+            overflow_item.title = 'See all';
+            x.content = (
+              <Accordion.Content>
+                {renderMenuItem(overflow_item, {
+                  className: 'item title-item',
+                })}
+                <SecondLevelContent
+                  element={item}
+                  renderMenuItem={renderMenuItem}
+                />
+              </Accordion.Content>
+            );
+            firstLevelPanels.push(x);
+            return (
+              <Accordion.Accordion
+                panels={firstLevelPanels}
+                key={index}
+                defaultActiveIndex={defaultIndex === index ? 0 : -1}
+              />
+            );
+          })}
+        </React.Fragment>
+      ) : (
+        <SecondLevelContent
+          element={element}
+          topics={true}
+          renderMenuItem={renderMenuItem}
+        />
+      )}
+    </>
+  );
+};
+
+const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
+  let content;
+  if (topics) {
+    const atAGlance = element.items.find(
+      (element) => element.title === 'At a glance',
+    );
+    const inDepth = element.items.find(
+      (element) => element.url.indexOf('in-depth') !== -1,
+    );
+    content = (
+      <List>
+        {atAGlance &&
+          atAGlance.items.map((item, index) => (
+            <React.Fragment key={index}>
+              {renderMenuItem(item, {
+                key: index,
+                role: 'listitem',
+                className: 'item',
+              })}
+            </React.Fragment>
+          ))}
+        {inDepth && (
+          <React.Fragment key={inDepth.url}>
+            {renderMenuItem(inDepth, {
+              key: inDepth.url,
+              role: 'listitem',
+              className: 'item',
+            })}
+          </React.Fragment>
+        )}
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        {element.items.map((item, index) => (
+          <React.Fragment key={index}>
+            {renderMenuItem(item, {
+              key: index,
+              role: 'listitem',
+              className: 'item',
+            })}
+          </React.Fragment>
+        ))}
+      </List>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
+  let defaultIndex = -1;
+  const rootPanels = [];
+  menuItems.forEach((element, index) => {
+    let x = {};
+    x.key = index;
+
+    if (pathName.indexOf(element.url) !== -1) {
+      defaultIndex = index;
+    }
+    x.title = (
+      <Accordion.Title key={`title-${index}`} index={index} as="button">
+        {element.title}
+        <Icon className="ri-arrow-down-s-line" size="small" />
+      </Accordion.Title>
+    );
+    let overview = cloneDeep(element);
+    x.content = (
+      <Accordion.Content key={index}>
+        <div className="mega-menu-title">
+          {/* Inverted right labeled button as a category title - Mobile */}
+          {renderMenuItem(
+            overview,
+            { className: 'ui button inverted icon right labeled' },
+            {
+              iconPosition: 'right',
+              children: (
+                <>
+                  {/* Add word overview to titles */}
+                  <span> overview</span>
+                  <Icon className={'arrow right icon'} alt={'Title icon'} />
+                </>
+              ),
+            },
+          )}
+        </div>
+        <FirstLevelContent
+          element={element}
+          renderMenuItem={renderMenuItem}
+          pathName={pathName}
+        />
+      </Accordion.Content>
+    );
+    rootPanels.push(x);
+  });
+
+  return <Accordion defaultActiveIndex={defaultIndex} panels={rootPanels} />;
+};
+
+function HeaderMenuPopUp({
+  menuItems,
+  renderMenuItem,
+  pathName,
+  onClose,
+  triggerRefs,
+  activeItem,
+  visible,
+}) {
+  const nodeRef = React.useRef();
+  useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
+
+  const menuItem = menuItems.find(
+    (current) => current.url === activeItem || current['@id'] === activeItem,
+  );
+
+  return (
+    <Transition visible={visible} animation="slide down" duration={300}>
+      <div id="mega-menu" ref={nodeRef}>
+        <Container>
+          {menuItem && (
+            <div className="menu-content tablet hidden mobile hidden">
+              {/* Inverted right labeled button as a category title,
+                  for topics the button goes inside the grid */}
+              {menuItem.title && (
+                <div className="mega-menu-title">
+                  {renderMenuItem(
+                    menuItem,
+                    { className: 'ui button inverted icon right labeled' },
+                    {
+                      iconPosition: 'right',
+                      children: (
+                        <>
+                          {/* Add word overview to titles */}
+                          <span> overview</span>
+                          <Icon
+                            className={'arrow right icon'}
+                            alt={'Title icon'}
+                          />
+                        </>
+                      ),
+                    },
+                  )}
+                </div>
+              )}
+              {menuItem.title === 'Topics' ? (
+                <Topics menuItem={menuItem} renderMenuItem={renderMenuItem} />
+              ) : menuItem.title === 'Countries' ? (
+                <Countries
+                  menuItem={menuItem}
+                  renderMenuItem={renderMenuItem}
+                />
+              ) : (
+                <StandardMegaMenuGrid
+                  menuItem={menuItem}
+                  renderMenuItem={renderMenuItem}
+                />
+              )}
+            </div>
+          )}
+          <div className="tablet only mobile only">
+            <NestedAccordion
+              menuItems={menuItems}
+              renderMenuItem={renderMenuItem}
+              pathName={pathName}
+            />
+          </div>
+        </Container>
+      </div>
+    </Transition>
+  );
+}
+
+export default HeaderMenuPopUp;

package/src/customizations/@eeacms/volto-eea-website-theme/components/theme/SubsiteClass.jsx

@@ -0,0 +1,70 @@
+import React, { useEffect, useMemo } from 'react';
+import cx from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+
+import config from '@plone/volto/registry';
+import { BodyClass, flattenToAppURL } from '@plone/volto/helpers';
+import { isSubsiteRoot } from 'volto-subsites/utils';
+import { setSubsite } from 'volto-subsites/actions';
+
+const SubsiteClass = () => {
+  const dispatch = useDispatch();
+  const content = useSelector((state) => state.content?.data);
+  const _subsite = useMemo(
+    () => content?.data?.['@components']?.subsite || {},
+    [content],
+  );
+  const pathname = useMemo(() => flattenToAppURL(content?.['@id']) || '', [
+    content,
+  ]);
+
+  const { eea, bise } = config.settings;
+  const { subsites, multilingualSubsites } = bise || {};
+
+  const subsite = useMemo(() => {
+    for (const subsite of subsites) {
+      const subsiteRe = new RegExp(`^(${subsite['@id']})(.*)`, 'g');
+      const isMultilingual = multilingualSubsites.includes(subsite['@id']);
+      let isRoot = isSubsiteRoot(pathname, subsite);
+
+      if (isMultilingual) {
+        for (const language of eea.languages) {
+          const multilingualSubsiteRe = new RegExp(
+            `^(${subsite['@id']})(/${language.code}($|/))$`,
+            'g',
+          );
+          if (!!pathname.match(multilingualSubsiteRe)) {
+            isRoot = true;
+            break;
+          }
+        }
+      }
+
+      if (!!pathname.match(subsiteRe)) {
+        return {
+          ...subsite,
+          isMultilingual,
+          isRoot,
+        };
+      }
+    }
+    return _subsite;
+  }, [pathname, _subsite, subsites, multilingualSubsites, eea.languages]);
+
+  const subsiteClass = subsite.subsite_css_class?.token;
+
+  useEffect(() => {
+    dispatch(setSubsite(subsite));
+  }, [dispatch, subsite]);
+
+  return (
+    <BodyClass
+      className={cx({
+        subsite: subsite?.['@type'] === 'Subsite',
+        [`subsite-${subsiteClass}`]: !!subsiteClass,
+        'subsite-root': subsite.isRoot,
+      })}
+    />
+  );
+};
+export default SubsiteClass;