@eeacms/volto-marine-policy 1.1.3 → 1.1.5

package/CHANGELOG.md

@@ -4,11 +4,16 @@ 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.1.3](https://github.com/eea/volto-marine-policy/compare/1.1.2...1.1.3) - 24 April 2024
+### [1.1.5](https://github.com/eea/volto-marine-policy/compare/1.1.4...1.1.5) - 6 May 2024
 
 #### :bug: Bug Fixes
 
-- fix: add custom font-size to menu-items refs#268362 [nileshgulia1 - [`71abd79`](https://github.com/eea/volto-marine-policy/commit/71abd79cae07ec940fce0fc4e25687f8b99f6ed2)]
+- fix: eslint . [nileshgulia1 - [`6280d19`](https://github.com/eea/volto-marine-policy/commit/6280d191037782ce11c491b681b9e20878da15f2)]
+- fix(navigation): do not expand accordion without children [nileshgulia1 - [`057e1ca`](https://github.com/eea/volto-marine-policy/commit/057e1ca6966b023cb9354ba437c9879c8f1e14d4)]
+
+### [1.1.4](https://github.com/eea/volto-marine-policy/compare/1.1.3...1.1.4) - 29 April 2024
+
+### [1.1.3](https://github.com/eea/volto-marine-policy/compare/1.1.2...1.1.3) - 25 April 2024
 
 ### [1.1.2](https://github.com/eea/volto-marine-policy/compare/1.1.1...1.1.2) - 24 April 2024
 

package/package.json

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

package/src/components/Blocks/ContextNavigation/Accordion.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Accordion as SemanticAccordion, Icon } from 'semantic-ui-react';
-
 import AccordionContent from './AccordionContent';
 import { useHistory } from 'react-router-dom';
 
 const Accordion = (props) => {
   const { items = {}, curent_location, activeMenu, data = {} } = props;
   const [currentIndex, setIndex] = React.useState(activeMenu ?? 0);
+  const [showChildren, setShowChildren] = React.useState(false);
   const history = useHistory();
 
   const handleClick = (e, item) => {
@@ -19,6 +19,7 @@ const Accordion = (props) => {
     const newIndex = currentIndex === index ? -1 : index;
     setIndex(newIndex);
   };
+
   return (
     <>
       <div className="context-navigation-header">{data?.title}</div>
@@ -45,7 +46,7 @@ const Accordion = (props) => {
               }}
             >
               <span className="item-title">{item.title}</span>
-              {active ? (
+              {active && showChildren ? (
                 <Icon
                   className="ri-arrow-up-s-line"
                   onClick={(e) => {
@@ -61,7 +62,7 @@ const Accordion = (props) => {
                 />
               )}
             </SemanticAccordion.Title>
-            <SemanticAccordion.Content active={active}>
+            <SemanticAccordion.Content active={active && showChildren}>
               <AccordionContent
                 curent_location={curent_location}
                 key={index}
@@ -71,6 +72,7 @@ const Accordion = (props) => {
                   url: item.url,
                 }}
                 data={data}
+                setShowChildren={setShowChildren}
               />
             </SemanticAccordion.Content>
           </SemanticAccordion>

package/src/components/Blocks/ContextNavigation/AccordionContent.jsx

@@ -10,6 +10,7 @@ const AccordionContent = (props) => {
     main,
     curent_location,
     data: { types = [] },
+    setShowChildren,
   } = props;
   const location = main.url;
 
@@ -22,6 +23,14 @@ const AccordionContent = (props) => {
   //   (state) => state.content?.subrequests?.[location]?.data?.items || [],
   // );
   const items = useChildren(location);
+
+  React.useEffect(() => {
+    const filteredItems = items.filter((item) =>
+      types.length ? types.includes(item['@type']) : item,
+    );
+    if (filteredItems.length) setShowChildren(true);
+  }, [items, setShowChildren, types]);
+
   return (
     <div className="dataset-content">
       <div>

package/src/index.js

@@ -348,6 +348,43 @@ const applyConfig = (config) => {
     { cssClass: 'poppins-regular', label: 'Poppins Regular' },
     { cssClass: 'poppins-light', label: 'Poppins Light' },
     { cssClass: 'poppins-bold', label: 'Poppins Bold' },
+    { cssClass: 'large-text', label: 'Large text' },
+    { cssClass: 'primary-big-text', label: 'Big text' },
+    { cssClass: 'medium-text', label: 'Medium text' },
+    { cssClass: 'small-text', label: 'Small text' },
+    { cssClass: 'blue-text', label: 'Blue text' },
+    { cssClass: 'blue-chart-text', label: 'Blue plot-chart text' },
+    { cssClass: 'green-chart-text', label: 'Green plot-chart text' },
+    { cssClass: 'yellow-chart-text', label: 'Yellow plot-chart text' },
+    { cssClass: 'orange-chart-text', label: 'Orange plot-chart text' },
+    { cssClass: 'red-chart-text', label: 'Red plot-chart text' },
+    { cssClass: 'blue-circle text-circle', label: 'Blue circle' },
+    { cssClass: 'green-circle text-circle', label: 'Green circle' },
+    { cssClass: 'orange-circle text-circle', label: 'Orange circle' },
+    { cssClass: 'yellow-circle text-circle', label: 'Yellow circle' },
+    { cssClass: 'grey-circle text-circle', label: 'Grey circle' },
+    { cssClass: 'black-text', label: 'Black text' },
+
+    {
+      cssClass: 'uwwt-empty-box blue-uwwt-background',
+      label: 'UWWT blue empty box',
+    },
+    {
+      cssClass: 'uwwt-empty-box green-uwwt-background',
+      label: 'UWWT green empty box',
+    },
+    {
+      cssClass: 'uwwt-empty-box yellow-uwwt-background',
+      label: 'UWWT yellow empty box',
+    },
+    {
+      cssClass: 'uwwt-empty-box orange-uwwt-background',
+      label: 'UWWT orange empty box',
+    },
+    {
+      cssClass: 'uwwt-empty-box red-uwwt-background',
+      label: 'UWWT red empty box',
+    },
   ];
 
   // EEA customizations

package/src/slate-styles.less

@@ -41,3 +41,114 @@
   font-family: @headerFont;
   font-weight: 600;
 }
+
+@uwwt-blue: #0079cf;
+@uwwt-green: #50b0a4;
+@uwwt-yellow: #fad936;
+@uwwt-orange: #ed763e;
+@uwwt-red: #ff544d;
+@uwwt-grey: #808080;
+
+.large-text {
+  font-size: 4rem;
+}
+
+.primary-big-text {
+  font-size: 1.625rem;
+}
+
+.medium-text {
+  font-size: 1.25rem;
+}
+
+.small-text {
+  font-size: 0.8rem;
+}
+
+.blue-chart-text {
+  color: @uwwt-blue;
+}
+
+.green-chart-text {
+  color: @uwwt-green;
+}
+
+.yellow-chart-text {
+  color: @uwwt-yellow;
+}
+
+.orange-chart-text {
+  color: @uwwt-orange;
+}
+
+.red-chart-text {
+  color: @uwwt-red;
+}
+
+.black-text {
+  color: #333;
+}
+
+#view .text-circle {
+  display: inline-block;
+  width: 125px;
+  height: 125px;
+  border-radius: 50%;
+  font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 35px !important;
+  font-weight: 600;
+  line-height: 125px !important;
+  text-align: center;
+}
+
+.grey-circle {
+  background-color: @uwwt-grey;
+  color: #fff;
+}
+
+.blue-circle {
+  background-color: @uwwt-blue;
+  color: #fff;
+}
+
+.green-circle {
+  background-color: @uwwt-green;
+  color: #fff;
+}
+
+.orange-circle {
+  background-color: @uwwt-orange;
+  color: #fff;
+}
+
+.yellow-circle {
+  background-color: @uwwt-yellow;
+  color: #fff;
+}
+
+.uwwt-empty-box {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin: -2px 0 -2px 16px;
+}
+
+.blue-uwwt-background {
+  background-color: @uwwt-blue;
+}
+
+.green-uwwt-background {
+  background-color: @uwwt-green;
+}
+
+.yellow-uwwt-background {
+  background-color: @uwwt-yellow;
+}
+
+.orange-uwwt-background {
+  background-color: @uwwt-orange;
+}
+
+.red-uwwt-background {
+  background-color: @uwwt-red;
+}