@eeacms/volto-bise-policy 1.0.7 → 1.0.9

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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.9](https://github.com/eea/volto-bise-policy/compare/1.0.8...1.0.9) - 6 June 2023
+
+#### :nail_care: Enhancements
+
+- change(inline-styles): enabled only primary secondary and tertiary inline styles [David Ichim - [`b9392ba`](https://github.com/eea/volto-bise-policy/commit/b9392baba2bd7255d7afe07fd7c82d43543bd7ec)]
+
+#### :hammer_and_wrench: Others
+
+- update slate inline styles [Miu Razvan - [`ad5f9db`](https://github.com/eea/volto-bise-policy/commit/ad5f9db710ca50586aba1ba96e04dc8f84b33ac9)]
+- fixes [Miu Razvan - [`cb680f2`](https://github.com/eea/volto-bise-policy/commit/cb680f268f297f7ed577081a00b358f60cc627ad)]
+- update [Miu Razvan - [`4c0d4f2`](https://github.com/eea/volto-bise-policy/commit/4c0d4f269c7b05976a4de5dc915fdb3338c976a6)]
+### [1.0.8](https://github.com/eea/volto-bise-policy/compare/1.0.7...1.0.8) - 29 May 2023
+
+#### :hammer_and_wrench: Others
+
+- update [Miu Razvan - [`baf4a08`](https://github.com/eea/volto-bise-policy/commit/baf4a082ddb5841cf3380cc30ff94b77ed9e168f)]
+- update [Miu Razvan - [`c75abcb`](https://github.com/eea/volto-bise-policy/commit/c75abcb25b1f0984567ec6e9afc0d61820edb32d)]
+- clean up [Miu Razvan - [`0fcd494`](https://github.com/eea/volto-bise-policy/commit/0fcd494a87c2c3cdf519e16ffa6c43403dbe8315)]
+- fix z-index on navigation menu [Miu Razvan - [`5fbd3fd`](https://github.com/eea/volto-bise-policy/commit/5fbd3fdb2c0705ec15d7968651900f9f7bba9f6f)]
+- update for url widget [tedw87 - [`78df6cb`](https://github.com/eea/volto-bise-policy/commit/78df6cb7f944ce718c0bf89b97a462ccc1d1dcb7)]
+- fix import [tedw87 - [`7bb66ba`](https://github.com/eea/volto-bise-policy/commit/7bb66badc31b872532e3a528af2cd496b4455344)]
+- update [tedw87 - [`3d502b1`](https://github.com/eea/volto-bise-policy/commit/3d502b1054d03e1bf5114eaa08c7c064c52474d0)]
+- fix prettier [tedw87 - [`2632d29`](https://github.com/eea/volto-bise-policy/commit/2632d294b4859da014635c72ffcc231fc4b09287)]
+- update with getFieldUrl function [tedw87 - [`bea0cf1`](https://github.com/eea/volto-bise-policy/commit/bea0cf1572496ef159d5b12c59b1c20cb9948ee7)]
 ### [1.0.7](https://github.com/eea/volto-bise-policy/compare/1.0.6...1.0.7) - 23 May 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-bise-policy",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "@eeacms/volto-bise-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Menu } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { getFieldURL } from '@eeacms/volto-bise-policy/helpers';
 
 import './styles.less';
 
@@ -13,9 +14,9 @@ const View = ({ history, data, navigation, ...props }) => {
   const items = useMemo(() => {
     return [
       ...(navigation.filter(
-        (item) => flattenToAppURL(item.url) === flattenToAppURL(data.parent),
+        (item) => flattenToAppURL(item.url) === getFieldURL(data.parent),
       )[0]?.items || []),
-      ...pages,
+      ...pages.map((page) => ({ ...page, url: getFieldURL(page.url) })),
     ];
   }, [navigation, pages, data.parent]);
 

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import SidebarPortal from '@plone/volto/components/manage/Sidebar/SidebarPortal';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { getFieldURL } from '@eeacms/volto-bise-policy/helpers';
 import schema from './schema';
 
 const Edit = (props) => {
   return (
     <>
-      {props.data.url && <p>Redirect to {props.data.url}</p>}
+      {props.data.url && <p>Redirect to {getFieldURL(props.data.url)}</p>}
       {!props.data.url && <p>Select redirect target</p>}
 
       <SidebarPortal selected={props.selected}>

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

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { getFieldURL } from '@eeacms/volto-bise-policy/helpers';
 
 const View = (props) => {
   useEffect(() => {
-    props.history.push(flattenToAppURL(props.data.url));
+    props.history.push(getFieldURL(props.data.url));
     /* eslint-disable-next-line */
   }, []);
 

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

@@ -4,7 +4,6 @@ import installFactsheetsListing from './FactsheetsListing';
 import installKeyFacts from './KeyFacts';
 import installMaesViewer from './MaesViewer';
 import installNavigation from './Navigation';
-import installNewsletter from './NewsletterSignup';
 
 export default (config) => {
   return [
@@ -14,6 +13,5 @@ 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

@@ -239,39 +239,54 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
     if (pathName.indexOf(element.url) !== -1) {
       defaultIndex = index;
     }
+    const hasItems = element.items?.length > 0;
+    let overview = cloneDeep(element);
+
     x.title = (
-      <Accordion.Title key={`title-${index}`} index={index} as="button">
-        {element.title}
-        <Icon className="ri-arrow-down-s-line" size="small" />
+      <Accordion.Title
+        key={`title-${index}`}
+        index={index}
+        as="button"
+        active={hasItems ? false : undefined}
+      >
+        {hasItems ? (
+          <>
+            {element.title}
+            <Icon className="ri-arrow-down-s-line" size="small" />
+          </>
+        ) : (
+          renderMenuItem(overview)
+        )}
       </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>
-    );
+    if (hasItems) {
+      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);
   });
 

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

@@ -8,7 +8,8 @@ import { Dropdown, Image, Sticky } from 'semantic-ui-react';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import Cookies from 'universal-cookie';
 
-import { withRouter } from 'react-router-dom';
+import { matchPath } from 'react-router';
+import { withRouter, useParams } from 'react-router-dom';
 import { UniversalLink } from '@plone/volto/components';
 import {
   getBaseUrl,
@@ -51,6 +52,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
   const dispatch = useDispatch();
   const [language, setLanguage] = useState(getLanguage());
   const previousToken = usePrevious(token);
+  const params = useParams();
   const { items } = props;
   const { eea } = config.settings;
   const { headerOpts, headerSearchBox } = eea || {};
@@ -58,10 +60,9 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
 
   const width = useSelector((state) => state.screen?.width);
 
-  const router_pathname = useSelector(
-    (state) => removeTrailingSlash(state.router?.location?.pathname) || '',
-  );
-  let pathname = router_pathname;
+  const pathname = removeTrailingSlash(props.pathname);
+
+  const _pathname = removeTrailingSlash(history.location.pathname);
 
   const content_pathname = useMemo(
     () => flattenToAppURL(content.data?.['@id']),
@@ -70,12 +71,28 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
 
   const isSubsite = subsite?.['@type'] === 'Subsite';
 
-  if (content.get.loading && content_pathname !== router_pathname) {
-    pathname = content_pathname;
-  }
+  const isN2KSite = useMemo(() => {
+    return !!matchPath(pathname, {
+      path: ['/natura2000/sites/site', '/natura2000/sites/site_cdda'],
+      exact: false,
+    });
+  }, [pathname]);
+
+  const isN2KSpecies = useMemo(() => {
+    return !!matchPath(pathname, {
+      path: '/natura2000/species/species',
+      exact: false,
+    });
+  }, [pathname]);
 
-  const isHomePageInverse =
-    content_pathname === '' && ['', '/'].includes(pathname);
+  const isN2KHabitat = useMemo(() => {
+    return !!matchPath(pathname, {
+      path: '/natura2000/habitats/habitat',
+      exact: false,
+    });
+  }, [pathname]);
+
+  const isHomePageInverse = content_pathname === '' && _pathname === '';
 
   const isMultilingual =
     config.settings.isMultilingual || (isSubsite && subsite.isMultilingual);
@@ -124,6 +141,11 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
   return (
     <Header menuItems={items}>
       {isHomePageInverse && <BodyClass className="homepage homepage-inverse" />}
+      {isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat && (
+        <BodyClass className="with-n2k-navigation" />
+      )}
+      {isSubsite && isN2KSite && <BodyClass className="is-n2k-site" />}
+
       <Header.TopHeader>
         <Header.TopItem className="official-union">
           <Image src={eeaFlag} alt="eea flag"></Image>
@@ -194,7 +216,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
           </Header.TopItem>
         )}
 
-        {isMultilingual && (
+        {isMultilingual && !isN2KSite && !isN2KSpecies && !isN2KHabitat && (
           <Header.TopItem>
             <Header.TopDropdownMenu
               id="language-switcher"
@@ -235,7 +257,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
                             'g',
                           );
                           const matches = [
-                            ...router_pathname.matchAll(multilingualSubsiteRe),
+                            ...pathname.matchAll(multilingualSubsiteRe),
                           ][0];
                           if (matches && matches[2] !== `/${item.code}/`) {
                             changeLanguage(item.code);
@@ -261,7 +283,7 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
         context={__CLIENT__ && document.querySelector('.content-area')}
       >
         <Header.Main
-          pathname={router_pathname}
+          pathname={pathname}
           headerSearchBox={headerSearchBox}
           inverted={isHomePageInverse ? true : false}
           transparency={isHomePageInverse ? true : false}
@@ -275,7 +297,32 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
             />
           }
           menuItems={
-            isSubsite && !subsite.isRoot
+            isN2KSite
+              ? [
+                  {
+                    title: 'AT A GLANCE',
+                    url: '#',
+                    items: [],
+                    className: 'at-glance',
+                    onClick: (e) => {
+                      e.preventDefault();
+                      window.scrollTo({
+                        top: document.body.scrollHeight,
+                        behavior: 'smooth',
+                      });
+                    },
+                  },
+                  {
+                    title: 'GO TO EXPERT VIEW',
+                    url: params.site_code
+                      ? `https://natura2000.eea.europa.eu/Natura2000/SDF.aspx?site=${params.site_code}`
+                      : '#',
+                    items: [],
+                    className: 'deep-dive',
+                    target: params.site_code ? '_blank' : null,
+                  },
+                ]
+              : isSubsite && !subsite.isRoot && !isN2KSpecies && !isN2KHabitat
               ? getSubsiteItems()
               : items.filter((item) => item.url !== '/natura2000')
           }
@@ -283,9 +330,16 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
             <a
               href={item.url || '/'}
               title={item.title}
+              target={item.target || '_self'}
+              className={item.className}
               onClick={(e) => {
-                e.preventDefault();
-                onClick(e, item);
+                if (!isN2KSite) {
+                  e.preventDefault();
+                  onClick(e, item);
+                }
+                if (item.onClick) {
+                  item.onClick(e, item);
+                }
               }}
             >
               {item.title}
@@ -297,8 +351,13 @@ const EEAHeader = ({ token, history, subsite, content, ...props }) => {
               title={item.nav_title || item.title}
               {...(options || {})}
               className={cx(options?.className, {
-                active: item.url === router_pathname,
+                active: item.url === pathname,
               })}
+              onClick={(e) => {
+                if (item.onClick) {
+                  item.onClick(e);
+                }
+              }}
             >
               {props?.iconPosition !== 'right' && props?.children}
               <span>{item.nav_title || item.title}</span>

package/src/helpers.js

@@ -0,0 +1,19 @@
+import isArray from 'lodash/isArray';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};

package/src/icons/content-box.svg

@@ -0,0 +1,14 @@
+<svg width="90mm" height="90mm" version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
+ <g stroke-width=".26458" aria-label="ContentBox">
+  <path d="m21.961 27.071v1.7611q-0.84334-0.78547-1.8024-1.1741-0.95083-0.3886-2.0257-0.3886-2.1166 0-3.2411 1.2981-1.1245 1.2898-1.1245 3.7372 0 2.4391 1.1245 3.7372 1.1245 1.2898 3.2411 1.2898 1.0748 0 2.0257-0.3886 0.9591-0.3886 1.8024-1.1741v1.7446q-0.87642 0.5953-1.8603 0.89295-0.97563 0.29765-2.067 0.29765-2.8029 0-4.4151-1.7115-1.6123-1.7198-1.6123-4.688 0-2.9765 1.6123-4.688 1.6123-1.7198 4.4151-1.7198 1.1079 0 2.0836 0.29765 0.9839 0.28938 1.8438 0.87642z"/>
+  <path d="m28.063 30.27q-1.2237 0-1.9347 0.9591-0.71105 0.95083-0.71105 2.6127 0 1.6619 0.70278 2.621 0.71105 0.95083 1.943 0.95083 1.2154 0 1.9265-0.9591 0.71105-0.9591 0.71105-2.6127 0-1.6453-0.71105-2.6044-0.71105-0.96736-1.9265-0.96736zm0-1.2898q1.9843 0 3.1171 1.2898 1.1327 1.2898 1.1327 3.5718 0 2.2737-1.1327 3.5718-1.1327 1.2898-3.1171 1.2898-1.9926 0-3.1253-1.2898-1.1245-1.2981-1.1245-3.5718 0-2.282 1.1245-3.5718 1.1327-1.2898 3.1253-1.2898z"/>
+  <path d="m42.532 32.875v5.5892h-1.5213v-5.5396q0-1.3146-0.51262-1.9678-0.51262-0.65318-1.5379-0.65318-1.2319 0-1.943 0.78547-0.71105 0.78547-0.71105 2.1414v5.2337h-1.5296v-9.2602h1.5296v1.4386q0.54569-0.83508 1.2816-1.2485 0.74413-0.4134 1.7115-0.4134 1.5957 0 2.4143 0.99217 0.81854 0.9839 0.81854 2.9021z"/>
+  <path d="m47.071 26.574v2.6292h3.1336v1.1823h-3.1336v5.027q0 1.1327 0.30592 1.4552 0.31419 0.32246 1.265 0.32246h1.5627v1.2733h-1.5627q-1.7611 0-2.4308-0.65318-0.66971-0.66145-0.66971-2.3977v-5.027h-1.1162v-1.1823h1.1162v-2.6292z"/>
+  <path d="m60.126 33.454v0.74413h-6.9948q0.09922 1.5709 0.94256 2.3977 0.85161 0.81854 2.3647 0.81854 0.87642 0 1.695-0.21497 0.82681-0.21497 1.6371-0.64491v1.4386q-0.81854 0.34726-1.6784 0.52916-0.85988 0.1819-1.7446 0.1819-2.2158 0-3.5139-1.2898-1.2898-1.2898-1.2898-3.4891 0-2.2737 1.2237-3.6049 1.2319-1.3394 3.3155-1.3394 1.8686 0 2.9517 1.2071 1.0914 1.1989 1.0914 3.2659zm-1.5213-0.44648q-0.01654-1.2485-0.70279-1.9926-0.67798-0.74413-1.8024-0.74413-1.2733 0-2.0422 0.71932-0.76066 0.71932-0.87642 2.0257z"/>
+  <path d="m70.321 32.875v5.5892h-1.5213v-5.5396q0-1.3146-0.51262-1.9678-0.51262-0.65318-1.5379-0.65318-1.2319 0-1.943 0.78547-0.71105 0.78547-0.71105 2.1414v5.2337h-1.5296v-9.2602h1.5296v1.4386q0.54569-0.83508 1.2816-1.2485 0.74413-0.4134 1.7115-0.4134 1.5957 0 2.4143 0.99217 0.81854 0.9839 0.81854 2.9021z"/>
+  <path d="m74.86 26.574v2.6292h3.1336v1.1823h-3.1336v5.027q0 1.1327 0.30592 1.4552 0.31419 0.32246 1.265 0.32246h1.5627v1.2733h-1.5627q-1.7611 0-2.4308-0.65318-0.66971-0.66145-0.66971-2.3977v-5.027h-1.1162v-1.1823h1.1162v-2.6292z"/>
+  <path d="m32.321 57.969v4.5226h2.6789q1.3477 0 1.9926-0.55396 0.65318-0.56223 0.65318-1.7115 0-1.1575-0.65318-1.7032-0.64491-0.55396-1.9926-0.55396zm0-5.0766v3.7206h2.4722q1.2237 0 1.819-0.45474 0.60357-0.46301 0.60357-1.4056 0-0.93429-0.60357-1.3973-0.5953-0.46301-1.819-0.46301zm-1.6702-1.3725h4.2663q1.9099 0 2.9434 0.79374 1.0335 0.79373 1.0335 2.2572 0 1.1327-0.52916 1.8024-0.52916 0.66971-1.5544 0.83507 1.2319 0.26458 1.9099 1.1079 0.68625 0.83508 0.68625 2.0918 0 1.6536-1.1245 2.5548-1.1245 0.90122-3.1997 0.90122h-4.4317z"/>
+  <path d="m45.79 55.67q-1.2237 0-1.9347 0.9591-0.71105 0.95083-0.71105 2.6127 0 1.6619 0.70279 2.621 0.71105 0.95083 1.943 0.95083 1.2154 0 1.9265-0.9591 0.71105-0.9591 0.71105-2.6127 0-1.6453-0.71105-2.6044-0.71105-0.96736-1.9265-0.96736zm0-1.2898q1.9843 0 3.1171 1.2898 1.1327 1.2898 1.1327 3.5718 0 2.2737-1.1327 3.5718-1.1327 1.2898-3.1171 1.2898-1.9926 0-3.1253-1.2898-1.1245-1.2981-1.1245-3.5718 0-2.282 1.1245-3.5718 1.1327-1.2898 3.1253-1.2898z"/>
+  <path d="m59.738 54.604-3.3486 4.5061 3.5222 4.7541h-1.7942l-2.6954-3.6379-2.6954 3.6379h-1.7942l3.5966-4.8451-3.2907-4.4151h1.7942l2.4556 3.299 2.4556-3.299z"/>
+ </g>
+</svg>

package/src/index.js

@@ -3,7 +3,7 @@ import installLink from '@plone/volto-slate/editor/plugins/AdvancedLink';
 import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-bise-policy/components/manage/Blocks/schema';
 
 import installBlocks from './components/manage/Blocks';
-import installStyles from './components/manage/Styles';
+import installStyles from './styles-config';
 
 import biseLogo from '@eeacms/volto-bise-policy/../theme//assets/images/Header/bise-logo.svg';
 import biseWhiteLogo from '@eeacms/volto-bise-policy/../theme//assets/images/Header/bise-logo-white.svg';
@@ -120,18 +120,6 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.hero_image_left.schemaEnhancer = addStylingFieldsetSchemaEnhancer;
   }
 
-  // Plotly bise color
-  config.settings.plotlyCustomColors = [
-    {
-      title: 'Biodiversity Default',
-      colorscale: ['#094238', '#12957D', '#19C4A5'],
-    },
-    {
-      title: '',
-      colorscale: ['#12957D', '#F9EA8A', '#DD552B', '#AEB0B3'],
-    },
-  ];
-
   // Disable some blocks
   restrictedBlocks.forEach((block) => {
     if (config.blocks.blocksConfig[block]) {

package/src/{components/manage/Styles/index.js → styles-config.js}

@@ -1,14 +1,7 @@
-export default (config) => {
-  // config.settings.plotlyChartsColorScale = [
-  //   '#ee252c',
-  //   '#d5e843',
-  //   '#33b540',
-  //   '#352d4e',
-  //   '#f9ae79',
-  //   '#87d6cb',
-  //   ...(config.settings.plotlyChartsColorScale || []),
-  // ];
+import { Icon } from '@plone/volto/components';
+import contentBoxSVG from '@eeacms/volto-bise-policy/icons/content-box.svg';
 
+export default (config) => {
   config.settings.available_colors = [
     '#005248', // primary color
     '#00A390', // secondary color
@@ -83,20 +76,30 @@ export default (config) => {
     { cssClass: 'white-text', label: 'White text' },
     { cssClass: 'primary-text', label: 'Primary text' },
     { cssClass: 'secondary-text', label: 'Secondary text' },
+    { cssClass: 'tertiary-text', label: 'Tertiary text' },
     { cssClass: 'dark-green-text', label: 'Dark green text' },
     { cssClass: 'blue-text', label: 'Blue text' },
     { cssClass: 'red-text', label: 'Red text' },
     { cssClass: 'yellow-text', label: 'Yellow text' },
     { cssClass: 'grey-text', label: 'Grey text' },
   ];
-  // config.settings.slate.styleMenu.blockStyles = [
-  //   ...config.settings.slate.styleMenu.blockStyles,
-  //   { cssClass: 'green-block-text', label: 'Green Text' },
-  //   { cssClass: 'underline-block-text', label: 'Underline Text' },
-  // ];
 
   config.settings.pluggableStyles = [
     ...(config.settings.pluggableStyles || []),
+    {
+      id: 'content-box-tertiary',
+      title: 'Tertiary',
+      previewComponent: () => (
+        <Icon name={contentBoxSVG} size="88px" className="tertiary" />
+      ),
+      viewComponent: (props) => {
+        return (
+          <div className="content-box tertiary">
+            <div className="content-box-inner">{props.children}</div>
+          </div>
+        );
+      },
+    },
     {
       id: 'borderBlock',
       title: 'Border',
@@ -159,5 +162,25 @@ export default (config) => {
     },
   ];
 
+  // Plotly bise color
+  config.settings.plotlyCustomColors = [
+    {
+      title: 'A2',
+      colorscale: [
+        '#3D2201',
+        '#603808',
+        '#8B5E34',
+        '#BC8A5F',
+        '#E7BC91',
+        '#FFEDD8',
+        '#FFF6EC',
+      ],
+    },
+    {
+      title: 'A1',
+      colorscale: ['#12957D', '#F9EA8A', '#DD552B', '#AEB0B3'],
+    },
+  ];
+
   return config;
 };

package/theme/extras/header.overrides

@@ -26,10 +26,6 @@
   text-decoration: none;
 }
 
-.eea.header {
-  z-index: 4;
-}
-
 .eea.header .main.bar > .ui.container .ui.grid .column {
   display: flex;
   align-items: center;

package/theme/extras/stylemenu.less

@@ -1,16 +1,13 @@
 .primary-big-text {
-  font-size: 45px;
-  line-height: 45px;
+  font-size: 1.625rem;
 }
 
 .medium-text {
-  font-size: 30px;
-  line-height: 30px;
+  font-size: 1.25rem;
 }
 
 .small-text {
-  font-size: 20px;
-  line-height: 20px;
+  font-size: 0.8rem;
 }
 
 .white-text {
@@ -27,6 +24,10 @@
   color: @secondaryColor;
 }
 
+.tertiary-text {
+  color: @tertiaryColor;
+}
+
 .dark-green-text {
   color: @bottleGreen;
 }
@@ -45,4 +46,4 @@
 
 .grey-text {
   color: @tertiaryColor;
-}
+}

package/theme/globals/natura2000.less

@@ -50,4 +50,127 @@
       }
     }
   }
+}
+
+.is-n2k-site {
+  .eea.header .main.bar {
+    .ui.grid, .main-menu, .main-menu > ul, .main-menu > ul > li {
+      height: 100%;
+    }
+  }
+
+  .eea.header .main.bar .main-menu > ul > li {
+    padding: 0 0.5rem !important;
+
+    > a {
+      align-self: center;
+    }
+  }
+
+  #mega-menu {
+    display: grid !important;
+    align-content: center;
+
+
+    .ui.container {
+      width: 100%;
+      padding-bottom: 0;
+    }
+
+    .ui.accordion > button > a {
+      color: #fff !important;
+    }
+  }
+}
+
+
+.at-glance {
+  height: 100%;
+  padding: 0 2rem;
+  background: @secondaryColor 0% 0% no-repeat padding-box;
+  border-bottom: 4px solid @secondaryColor !important;
+  margin-bottom: -16px;
+  padding-bottom: 16px;
+  height: calc(100% + 16px);
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  color: #fff !important;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #fff !important;
+    border-bottom: 4px solid @secondaryColor !important;
+  }
+}
+
+.deep-dive {
+  color: @secondaryColor !important;
+  border-bottom: 4px solid transparent !important;
+
+  &:hover {
+    border-bottom: 4px solid transparent !important;
+  }
+}
+
+.at-glance,
+.deep-dive {
+  font-weight: bold;
+}
+
+.with-n2k-navigation {
+  .eea.header {
+    .main.bar .ui.grid {
+      > :first-child:not(:last-child) {
+        width: 200px !important;
+
+        img {
+          object-fit: fill;
+        }
+      }
+
+      > :last-child:not(:first-child) {
+        width: calc(100% - 200px) !important;
+      }
+
+      @media @smallMonitorUp {
+        .main-menu {
+          justify-content: center;
+  
+          ul {
+            padding-inline-start: 0;
+            justify-content: center !important;
+          }
+        }
+      }
+
+    }
+  }
+}
+
+
+.tabs-block {
+  .columns-header {
+    display: none;
+  }
+}
+
+.tabs-block.carousel_n2k {
+  overflow: hidden;
+
+  .slick-arrows {
+    .learn-more {
+      position: absolute;
+      left: 0;
+      width: 130px;
+      color: #fff !important;
+      text-align: left;
+      transform: translate(-100%, 0);
+
+      @media only screen and (max-width: 1700px) {
+        display: none;
+      }
+    }
+  }
 }

package/theme/globals/site.overrides

@@ -255,9 +255,9 @@ p.has--clear--both:empty {
     }
   }
 
-  .ui.overlay.sidebar {
-    z-index: 800;
-  }
+  // .ui.overlay.sidebar {
+  //   z-index: 800;
+  // }
 }
 
 .subsite.subsite-natura2000:not(.subsite-root) {
@@ -266,9 +266,9 @@ p.has--clear--both:empty {
   }
 }
 
-#toolbar {
-  z-index: 6;
-}
+// #toolbar {
+//   z-index: 6;
+// }
 
 .simple-data-table {
   padding: 0;

package/theme/modules/sticky.overrides

@@ -0,0 +1,21 @@
+.eea.header {
+  z-index: @zIndex;
+}
+
+.eea.header .ui.sticky {
+  z-index: @zIndex;
+}
+
+.sticky-navigation-anchors.full-width:not(.sticky-broken) {
+  z-index: @zIndex;
+}
+
+.sticky-broken {
+  .ui.sticky {
+    z-index: unset !important;
+  }
+}
+
+// #toolbar {
+//   z-index: @zIndex + 1;
+// }

package/theme/theme.config

@@ -83,7 +83,7 @@
 @banner              : 'eea';
 @timeline            : 'eea';
 @footer              : 'eea';
-@header              : 'eea';
+@header              : 'mirage';
 @tag                 : 'eea';
 @tags                : 'eea';
 @tagList             : 'eea';

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

@@ -1,30 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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: [],
-};