@eeacms/volto-cca-policy 0.3.34 → 0.3.36

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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).
 
+### [0.3.36](https://github.com/eea/volto-cca-policy/compare/0.3.35...0.3.36) - 7 May 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`8c6a6ad`](https://github.com/eea/volto-cca-policy/commit/8c6a6adfb65e10eb4d2c85dc76883cfd64306063)]
+
+#### :hammer_and_wrench: Others
+
+- Remove defineMessages [Tiberiu Ichim - [`86aa49c`](https://github.com/eea/volto-cca-policy/commit/86aa49c7c56029108862a4210cad2e81b08cbf40)]
+- Show a message in non-en country profiles [Tiberiu Ichim - [`8d6842b`](https://github.com/eea/volto-cca-policy/commit/8d6842b1043d13d739b25da119803c4fb359b8dd)]
+- Customize language bar [Tiberiu Ichim - [`f85ce9f`](https://github.com/eea/volto-cca-policy/commit/f85ce9f2f2fb9c594e66c3b26cd198819a05b58d)]
+### [0.3.35](https://github.com/eea/volto-cca-policy/compare/0.3.34...0.3.35) - 6 May 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`3ee5c45`](https://github.com/eea/volto-cca-policy/commit/3ee5c45a2c6240ca4891b424278b66d36b097bd2)]
+
+#### :hammer_and_wrench: Others
+
+- Customize html widget to let it treat whitespace [Tiberiu Ichim - [`c587517`](https://github.com/eea/volto-cca-policy/commit/c58751740401480d5e87674cc1a16d9a010385be)]
+- Refs #287349 - remove uk from observatory map dependency [Tripon Eugen - [`6b90a59`](https://github.com/eea/volto-cca-policy/commit/6b90a599a2aaa9c00b9b24625216c5c34e518075)]
+- Refs #287349 - remove uk from observatory map eslint [Tripon Eugen - [`b535431`](https://github.com/eea/volto-cca-policy/commit/b5354318a41f03cc8d5dec9ae5a93cd8e1182d0d)]
+- Refs #287349 - remove uk from observatory map [Tripon Eugen - [`d3d89dd`](https://github.com/eea/volto-cca-policy/commit/d3d89ddf80e63af63ebcc4a3a2eb538dce1eec3b)]
 ### [0.3.34](https://github.com/eea/volto-cca-policy/compare/0.3.33...0.3.34) - 6 May 2025
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/components/manage/Blocks/CountryMapObservatory/CountryMapObservatoryOLView.jsx

@@ -37,12 +37,14 @@ const CountryMapObservatoryView = (props) => {
     setOverlaySource(new ol.source.Vector());
 
     const features = new ol.format.GeoJSON().readFeatures(geofeatures);
-    const updateEuCountryNames = euCountryNames.map((countryName) => {
-      if ('Turkey' === countryName) {
-        countryName = 'Türkiye';
-      }
-      return countryName;
-    });
+    const updateEuCountryNames = euCountryNames
+      .map((countryName) => {
+        if ('Turkey' === countryName) {
+          countryName = 'Türkiye';
+        }
+        return countryName;
+      })
+      .filter((countryName) => countryName !== 'United Kingdom');
 
     const filtered = features.filter((f) =>
       updateEuCountryNames.includes(f.get('na')),

package/src/components/manage/Blocks/CountryMapObservatory/Interactions.jsx

@@ -21,6 +21,10 @@ function setTooltipVisibility(node, label, event, visible) {
 export const Interactions = ({ overlaySource, tooltipRef, onFeatureClick }) => {
   const map = useMapContext().map;
 
+  const euCountryNamesFiltered = euCountryNames.filter(
+    (euCountryName) => euCountryName !== 'United Kingdom',
+  );
+
   React.useEffect(() => {
     if (!map) return;
 
@@ -40,7 +44,7 @@ export const Interactions = ({ overlaySource, tooltipRef, onFeatureClick }) => {
             overlaySource.removeFeature(highlight);
           } catch {}
         }
-        if (feature && euCountryNames.includes(feature.get('na'))) {
+        if (feature && euCountryNamesFiltered.includes(feature.get('na'))) {
           overlaySource.addFeature(feature);
           map.getTargetElement().style.cursor = 'pointer';
           const node = tooltipRef.current;
@@ -64,7 +68,7 @@ export const Interactions = ({ overlaySource, tooltipRef, onFeatureClick }) => {
         onFeatureClick(feature);
       }
     });
-  }, [map, overlaySource, tooltipRef, onFeatureClick]);
+  }, [map, overlaySource, tooltipRef, onFeatureClick, euCountryNamesFiltered]);
 
   return null;
 };

package/src/components/manage/Blocks/CountryProfileDetail/View.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TabPane, Tab, Accordion, Icon } from 'semantic-ui-react';
+import { Message, TabPane, Tab, Accordion, Icon } from 'semantic-ui-react';
 import CountryTabPane from './CountryTabPane';
+import { FormattedMessage } from 'react-intl';
 
 import './styles.less';
 
@@ -10,6 +11,7 @@ export default function View(props) {
   // );
   const dataJson = props?.properties['@components']?.countryprofile?.html || {};
   const [activePanes, setActivePanes] = React.useState({});
+  const isNonEN = props?.properties?.language !== 'en';
 
   const panes = [];
   if (dataJson?.menu) {
@@ -32,6 +34,14 @@ export default function View(props) {
 
   return (
     <>
+      {isNonEN && (
+        <Message class="eea callout">
+          <FormattedMessage
+            id="officiallyInEnglish"
+            defaultMessage="Officially reported governmental information is only available in English"
+          />
+        </Message>
+      )}
       {dataJson.message_top ? (
         <div class="eea callout">{dataJson.message_top}</div>
       ) : null}

package/src/components/theme/Header/LanguageSwitch.jsx

@@ -7,10 +7,12 @@ import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { Header } from '@eeacms/volto-eea-design-system/ui';
 import cx from 'classnames';
+import { FormattedMessage } from 'react-intl';
 
-import { selectedLanguageAtom } from '../../../state';
 import globeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Header/global-line.svg';
 
+import { selectedLanguageAtom } from '../../../state';
+
 export default function LanguageSwitch({ history }) {
   const { eea } = config.settings;
   const translations = useSelector(
@@ -43,6 +45,7 @@ export default function LanguageSwitch({ history }) {
     });
   };
 
+  // .filter((item) => eea.non_eu_langs.indexOf(item.code) !== -1)
   return (
     <Header.TopDropdownMenu
       id="language-switcher"
@@ -61,37 +64,79 @@ export default function LanguageSwitch({ history }) {
         role="listbox"
         aria-label="language switcher"
       >
-        {eea.languages.map((item, index) => {
-          const translated = (translations || []).some(
-            (obj) => obj.language === item.code,
-          );
-          const active = item.code === currentLang;
-          const disabled = !translated && !active;
+        {eea.languages
+          .filter((item) => eea.non_eu_langs.indexOf(item.code) === -1)
+          .map((item, index) => {
+            const translated = (translations || []).some(
+              (obj) => obj.language === item.code,
+            );
+            const active = item.code === currentLang;
+            const disabled = !translated && !active;
+
+            return (
+              <Dropdown.Item
+                className={cx({
+                  disabled: disabled,
+                  active: active,
+                })}
+                as="li"
+                key={index}
+                text={
+                  <span>
+                    <span className="country-code">
+                      {item.code.toUpperCase()}
+                    </span>{' '}
+                    {item.name}
+                  </span>
+                }
+                onClick={(e) =>
+                  disabled || active
+                    ? e.preventDefault()
+                    : handlePageRedirect(item)
+                }
+              ></Dropdown.Item>
+            );
+          })}
+        <strong className="noneu-langs-label">
+          <FormattedMessage
+            id="Non-EU Languages"
+            defaultMessage="Non-EU Languages"
+          />
+        </strong>
+
+        {eea.languages
+          .filter((item) => eea.non_eu_langs.indexOf(item.code) !== -1)
+          .map((item, index) => {
+            const translated = (translations || []).some(
+              (obj) => obj.language === item.code,
+            );
+            const active = item.code === currentLang;
+            const disabled = !translated && !active;
 
-          return (
-            <Dropdown.Item
-              className={cx({
-                disabled: disabled,
-                active: active,
-              })}
-              as="li"
-              key={index}
-              text={
-                <span>
-                  {item.name}
-                  <span className="country-code">
-                    {item.code.toUpperCase()}
+            return (
+              <Dropdown.Item
+                className={cx({
+                  disabled: disabled,
+                  active: active,
+                })}
+                as="li"
+                key={index}
+                text={
+                  <span>
+                    <span className="country-code">
+                      {item.code.toUpperCase()}
+                    </span>{' '}
+                    {item.name}
                   </span>
-                </span>
-              }
-              onClick={(e) =>
-                disabled || active
-                  ? e.preventDefault()
-                  : handlePageRedirect(item)
-              }
-            ></Dropdown.Item>
-          );
-        })}
+                }
+                onClick={(e) =>
+                  disabled || active
+                    ? e.preventDefault()
+                    : handlePageRedirect(item)
+                }
+              ></Dropdown.Item>
+            );
+          })}
       </ul>
     </Header.TopDropdownMenu>
   );

package/src/constants.js

@@ -21,31 +21,33 @@ export const download_fields = [
 ];
 
 export const eea_languages = [
-  { name: 'English', code: 'en' },
   { name: 'български', code: 'bg' },
   { name: 'Español', code: 'es' },
-  // { name: 'Čeština', code: 'cs' },
+  { name: 'Čeština', code: 'cs' },
   { name: 'Dansk', code: 'da' },
   { name: 'Deutsch', code: 'de' },
-  // { name: 'Eesti keel', code: 'et' },
+  { name: 'Eesti keel', code: 'et' },
   { name: 'Ελληνικά', code: 'el' },
+  { name: 'English', code: 'en' },
   { name: 'Français', code: 'fr' },
-  // { name: 'Gaeilge', code: 'ga' },
+  { name: 'Gaeilge', code: 'ga' },
   { name: 'Hrvatski', code: 'hr' },
   { name: 'Italiano', code: 'it' },
-  // { name: 'Latviešu valoda', code: 'lv' },
-  // { name: 'Lietuvių kalba', code: 'lt' },
-  // { name: 'Magyar', code: 'hu' },
-  // { name: 'Malti', code: 'mt' },
-  // { name: 'Nederlands', code: 'nl' },
+  { name: 'Latviešu', code: 'lv' },
+  { name: 'Lietuvių', code: 'lt' },
+  { name: 'Magyar', code: 'hu' },
+  { name: 'Malti', code: 'mt' },
+  { name: 'Nederlands', code: 'nl' },
   { name: 'Polski', code: 'pl' },
   { name: 'Português', code: 'pt' },
   { name: 'Română', code: 'ro' },
-  // { name: 'Slovenčina', code: 'sk' },
-  // { name: 'Slovenščina', code: 'sl' },
+  { name: 'Slovenčina', code: 'sk' },
+  { name: 'Slovenščina', code: 'sl' },
   { name: 'Suomi', code: 'fi' },
   { name: 'Svenska', code: 'sv' },
   { name: 'Íslenska', code: 'is' },
   { name: 'Nynorsk', code: 'nn' },
-  // { name: 'Türkçe', code: 'tr' },
+  { name: 'Türkçe', code: 'tr' },
 ];
+
+export const non_eu_langs = ['is', 'nn', 'tr'];

package/src/customizations/@plone/volto-slate/widgets/HtmlSlateWidget.jsx

@@ -80,7 +80,8 @@ const HtmlSlateWidget = (props) => {
         parsed.getElementsByTagName('google-sheets-html-origin').length > 0
           ? parsed.querySelector('google-sheets-html-origin > table')
           : parsed.body;
-      let data = deserialize(editor, body, { collapseWhitespace: false });
+      let data = deserialize(editor, body, { collapseWhitespace: true });
+      // console.log({ data, parsed, body, html });
       if (data.length) {
         data = normalizeExternalData(editor, data);
       } else {

package/src/customizations/@plone/volto-slate/widgets/README.md

@@ -1,9 +1,17 @@
+# Customizations
+
 Customized for this
 
+```js
+if (data.length) {
+  data = normalizeExternalData(editor, data);
+} else {
+  return [createEmptyParagraph()];
+}
 ```
-      if (data.length) {
-        data = normalizeExternalData(editor, data);
-      } else {
-        return [createEmptyParagraph()];
-      }
+
+and this:
+
+```js
+let data = deserialize(editor, body, { collapseWhitespace: true });
 ```

package/src/index.js

@@ -43,7 +43,7 @@ import eeaWhiteLogo from '@eeacms/volto-eea-design-system/../theme/themes/eea/as
 import './slate-styles.less';
 import BrokenLinks from './components/theme/Views/BrokenLinks';
 
-import { eea_languages } from './constants';
+import { eea_languages, non_eu_langs } from './constants';
 
 const getEnv = () => (typeof window !== 'undefined' ? window.env : process.env);
 
@@ -109,13 +109,12 @@ const applyConfig = (config) => {
   config.settings.hasLanguageDropdown = true;
   config.settings.defaultLanguage = 'en';
   config.settings.supportedLanguages = [
-    'en',
-
     'bg', // bulgarian
     'es', // spanish
     'cs', // czech
     'da', // danish
     'de', // german
+    'en',
     'et', // estonian
     'el', // greek
     'fr', // french
@@ -145,6 +144,7 @@ const applyConfig = (config) => {
   config.settings.eea = {
     ...(config.settings.eea || {}),
     languages: eea_languages,
+    non_eu_langs,
     headerOpts: {
       ...(config.settings.eea?.headerOpts || {}),
       logo: ccaLogo,

package/theme/globals/site.overrides

@@ -49,13 +49,13 @@ p.has--clear--both:empty {
   .ui.items > .item > .image > img {
     width: auto;
   }
-  .ui.items > .item > .image + .content{
+  .ui.items > .item > .image + .content {
     padding-left: 1rem;
   }
 
   .ui.items > .item .ui.middle.aligned.image {
     display: flex;
-  
+
     img {
       align-self: center;
     }
@@ -258,3 +258,68 @@ iframe {
     }
   }
 }
+
+// language dropdown
+.top.bar {
+  .ui.container {
+    .wrapper.language-list {
+      /* display: flex; */
+      /* flex-direction: column; */
+      margin: 0.25rem 0;
+      gap: 0.25rem;
+      white-space: pre-wrap;
+
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+      grid-auto-flow: column;
+      grid-auto-rows: auto;
+      grid-template-rows: repeat(10, auto);
+
+      .menu {
+        cursor: auto;
+        position: absolute;
+        display: none;
+        outline: none;
+        top: 100%;
+        min-width: -moz-max-content;
+        min-width: max-content;
+        margin: 0;
+        padding: 0;
+        background: #fff;
+        font-size: 1em;
+        text-shadow: none;
+        text-align: left;
+        box-shadow: 0 2px 3px 0 #e6e7e8;
+        border: 1px solid #e6e7e8;
+        border-radius: 0;
+        transition: opacity 0.1s ease;
+        z-index: 11;
+        will-change: transform, opacity;
+
+        max-width: 100%;
+        width: fit-content;
+      }
+      .item {
+        padding-left: 0.8em;
+        min-width: 10em;
+      }
+
+      .noneu-langs-label {
+        // border-bottom: 1px solid black;
+      }
+    }
+  }
+}
+
+#language-switcher .menu .wrapper .item {
+  justify-content: flex-start !important;
+  font-weight: 400;
+}
+
+@media (max-width: 768px) {
+  .top.bar .ui.dropdown .wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+}
+// end language dropdown