@eeacms/volto-eea-design-system 1.36.6 → 1.37.1

package/CHANGELOG.md

@@ -4,7 +4,18 @@ 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.36.6](https://github.com/eea/volto-eea-design-system/compare/1.36.5...1.36.6) - 7 May 2025
+### [1.37.1](https://github.com/eea/volto-eea-design-system/compare/1.37.0...1.37.1) - 25 June 2025
+
+### [1.37.0](https://github.com/eea/volto-eea-design-system/compare/1.36.6...1.37.0) - 6 June 2025
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`ab9dc4f`](https://github.com/eea/volto-eea-design-system/commit/ab9dc4f95e31c3e2f9d77e793158178c5dbd5f51)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.37.0 [Alin Voinea - [`f92f838`](https://github.com/eea/volto-eea-design-system/commit/f92f83820b7c8888ea2d414f1c1a4c233e440876)]
+### [1.36.6](https://github.com/eea/volto-eea-design-system/compare/1.36.5...1.36.6) - 8 May 2025
 
 ### [1.36.5](https://github.com/eea/volto-eea-design-system/compare/1.36.4...1.36.5) - 7 May 2025
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.36.6",
+  "version": "1.37.1",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Banner/Banner.stories.jsx

@@ -1,8 +1,9 @@
 import React, { useRef } from 'react';
+import cx from 'classnames';
 import Banner from './Banner';
 // eslint-disable-next-line import/no-unresolved
 import imgUrl from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/banner.png';
-import { Icon } from 'semantic-ui-react';
+import { Icon, Container } from 'semantic-ui-react';
 import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import Copyright from '../Copyright/Copyright';
 
@@ -132,8 +133,12 @@ const Template = (args) => {
           </>
         }
       >
-        <Banner.Subtitle>{args.subtitle}</Banner.Subtitle>
+        {!args.aboveTitle && args.subtitle && (
+          <Banner.Subtitle>{args.subtitle}</Banner.Subtitle>
+        )}
+        {args.aboveTitle}
         <Banner.Title>{args.title}</Banner.Title>
+        {args.belowTitle}
         {args.metadata && (
           <Banner.Metadata>
             <>
@@ -176,3 +181,119 @@ Default.args = {
   copyrightIcon: 'ri-copyright-line',
   copyright: 'John Smith, Well with Nature /EEA',
 };
+
+const InvertedwithHeroTemplate = (args) => (
+  <Container
+    className={cx(
+      'homepage-inverse homepage-header light-header',
+      args.heroHeaderSize ? 'hero-header' : '',
+    )}
+    fluid
+  >
+    <Template
+      {...args}
+      hideShareButton
+      hideDownloadButton
+      aboveTitle={
+        !args.hideContentType ? (
+          <div className="content-type">{args.content_type}</div>
+        ) : (
+          ' '
+        )
+      }
+      belowTitle={
+        <>
+          <Banner.Subtitle>
+            <span className="subtitle-light">{args.subtitle}</span>
+          </Banner.Subtitle>
+        </>
+      }
+    />
+  </Container>
+);
+
+export const InvertedHero = InvertedwithHeroTemplate.bind({});
+InvertedHero.args = {
+  ...Default.args,
+  metadata: Default.args.metadata.filter((meta) => meta.type !== 'type'),
+  hideContentType: false,
+  heroHeaderSize: false,
+  content_type: 'Web report',
+};
+
+const invertedArgTypes = {
+  hideContentType: {
+    description: 'hide content type',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+  hideShareButton: {
+    description: 'hide/show share button',
+    table: {
+      disable: true,
+    },
+    control: false,
+  },
+  hideDownloadButton: {
+    description: 'hide/show download button',
+    table: {
+      disable: true,
+    },
+    control: false,
+  },
+};
+
+InvertedHero.argTypes = {
+  ...invertedArgTypes,
+  heroHeaderSize: {
+    description: 'Make banner size of an hero image',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: true,
+      },
+    },
+  },
+};
+
+const InvertedTemplate = (args) => (
+  <Container
+    className={cx('view-viewview homepage-inverse light-header')}
+    fluid
+  >
+    <Template
+      {...args}
+      hideShareButton
+      hideDownloadButton
+      aboveTitle={
+        <>
+          {!args.hideContentType && (
+            <div className="content-type">{args.content_type}</div>
+          )}
+          <div className="subtitle">{args.subtitle}</div>
+        </>
+      }
+    />
+  </Container>
+);
+
+export const Inverted = InvertedTemplate.bind({});
+
+Inverted.args = {
+  ...Default.args,
+  metadata: Default.args.metadata.filter((meta) => meta.type !== 'type'),
+  hideContentType: false,
+  content_type: 'Web report page',
+};
+
+Inverted.argTypes = {
+  ...invertedArgTypes,
+};

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import { Container } from 'semantic-ui-react';
+import {
+  Container,
+  Accordion as SemanticAccordion,
+  Icon,
+} from 'semantic-ui-react';
+import cx from 'classnames';
 
 const sidenavItems = [
   {
@@ -239,3 +244,132 @@ Default.args = {
   header: '',
   sidenavItems: sidenavItems,
 };
+
+const AccordionNavigation = ({ navigation, header }) => {
+  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [activeItems, setActiveItems] = React.useState({});
+
+  const onClickSummary = (e) => {
+    e.preventDefault();
+    setIsNavOpen((prev) => !prev);
+  };
+
+  const onKeyDownSummary = (e) => {
+    if (e.keyCode === 13 || e.keyCode === 32) {
+      e.preventDefault();
+      onClickSummary(e);
+    }
+  };
+
+  const renderItems = ({ item, level = 0 }) => {
+    const {
+      title,
+      href = item['@id'],
+      is_current,
+      is_in_path,
+      items: childItems,
+      type = 'Link',
+    } = item;
+    const hasChildItems = childItems && childItems.length > 0;
+
+    const checkIfActive = () => {
+      return activeItems[href] !== undefined ? activeItems[href] : is_in_path;
+    };
+
+    const isActive = checkIfActive();
+
+    const handleTitleClick = () => {
+      setActiveItems((prev) => ({ ...prev, [href]: !isActive }));
+    };
+
+    return (
+      <li
+        className={cx({
+          is_in_path,
+          'accordion-list-title': !hasChildItems,
+          'accordion-list-item': hasChildItems,
+        })}
+        key={href}
+      >
+        {hasChildItems ? (
+          <SemanticAccordion className="default">
+            <SemanticAccordion.Title
+              active={isActive}
+              as={'button'}
+              aria-expanded={isActive}
+              onClick={handleTitleClick}
+              aria-controls={`accordion-content-${title}`}
+              id={`accordion-title-${title}`}
+            >
+              <span className="title-text">{title}</span>
+              <Icon
+                className={
+                  isActive ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
+                }
+              />
+            </SemanticAccordion.Title>
+            <SemanticAccordion.Content
+              active={isActive}
+              role="region"
+              id={`accordion-content-${title}`}
+              aria-labelledby={`accordion-title-${title}`}
+            >
+              <ul className="accordion-list">
+                {childItems.map((child) =>
+                  renderItems({ item: child, level: level + 1 }),
+                )}
+              </ul>
+            </SemanticAccordion.Content>
+          </SemanticAccordion>
+        ) : (
+          <a
+            href={href}
+            className={cx(`title-link contenttype-${type}`, {
+              current: is_current,
+              in_path: is_in_path,
+            })}
+          >
+            {title}
+          </a>
+        )}
+      </li>
+    );
+  };
+
+  return navigation.length ? (
+    <Container>
+      <nav className="context-navigation" aria-label={header}>
+        <details open={isNavOpen}>
+          {/* eslint-disable-next-line */}
+          <summary
+            className="context-navigation-header accordion-header"
+            onClick={onClickSummary}
+            onKeyDown={onKeyDownSummary}
+          >
+            {header}
+            <Icon
+              size="large"
+              className={
+                isNavOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'
+              }
+            />
+          </summary>
+
+          <ul
+            className="context-navigation-list accordion-list"
+            style={{ width: '100%' }}
+          >
+            {navigation.map((item) => renderItems({ item }))}
+          </ul>
+        </details>
+      </nav>
+    </Container>
+  ) : null;
+};
+
+export const Accordion = AccordionNavigation.bind({});
+
+Accordion.args = {
+  navigation: sidenavItems,
+  header: 'Navigation',
+};

package/src/ui/Header/HeaderMenuPopUp.js

@@ -30,7 +30,8 @@ const ItemGrid = ({
   renderMenuItem,
   hideChildrenFromNavigation,
 }) => {
-  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  const item_id =
+    item?.title?.toLowerCase()?.replaceAll(' ', '-') + '-sub-title';
   return (
     <>
       {renderMenuItem(item, { className: 'sub-title', id: item_id })}
@@ -53,7 +54,8 @@ const Item = ({
   renderMenuItem,
   hideChildrenFromNavigation,
 }) => {
-  const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
+  const item_id =
+    item?.title?.toLowerCase()?.replaceAll(' ', '-') + '-sub-title';
   return (
     <>
       {renderMenuItem(item, {
@@ -349,8 +351,13 @@ function HeaderMenuPopUp({
   // be used for all menu items that don't have a specific layout
   const layout =
     (!!menuItemsLayouts &&
-      Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
-      menuItemsLayouts[menuItem.url]) ||
+      menuItem?.items?.length > 0 &&
+      (menuItemsLayouts[menuItem?.url] ||
+        menuItemsLayouts[
+          Object.keys(menuItemsLayouts).find((key) =>
+            menuItem?.url?.includes(key),
+          )
+        ])) ||
     (!!menuItemsLayouts && menuItemsLayouts['*']) ||
     {};
 

package/theme/themes/eea/extras/banner.less

@@ -344,14 +344,11 @@
 *******************************/
 
 @media print {
-  .eea.banner .gradient .content,
-  .eea.banner .image .gradient .content {
-    padding-top: @printContentPadding;
-  }
-
-  .eea.banner .gradient .content > div > div {
-    padding-top: 0;
-    padding-bottom: 0;
+  .eea.banner {
+    .gradient .content,
+    .image .gradient .content {
+      padding: @printContentPadding;
+    }
   }
 }
 

package/theme/themes/eea/extras/banner.variables

@@ -20,7 +20,7 @@
 @mobileContentPadding      : 1rem 0 1.25rem;
 @tabletContentPadding      : 3rem 0 1.25rem;
 @computerContentPadding    : 5rem 0 1.25rem;
-@printContentPadding       : 15px;
+@printContentPadding       : 2rem 1.25rem;
 
 @mobileContentPaddingWithImage      : 6.25rem 0 1.25rem;
 @tabletContentPaddingWithImage      : 12.5rem 0 1.25rem;

package/theme/themes/eea/extras/header.less

@@ -1017,6 +1017,46 @@
     padding: 0 1.25rem;
   }
 }
+
+@media print {
+  .top.bar,
+  .main-menu,
+  .eea .header .action,
+  #page-header .action {
+    display: none !important;
+    visibility: hidden;
+  }
+
+  .eea.header {
+    max-width: @containerWidth !important;
+
+    .eea-logo {
+      margin-top: 0;
+    }
+  }
+
+  .logo {
+    margin-left: 0;
+  }
+
+  .main.bar.transparency:before {
+    background-color: transparent !important;
+  }
+
+  .homepage.homepage-inverse {
+    .eea.header {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+
+      .main.bar {
+        padding: @printHeaderMainSectionPadding;
+      }
+    }
+  }
+}
+
 /*******************************
           /Light Header
 *******************************/

package/theme/themes/eea/extras/header.variables

@@ -111,6 +111,7 @@
 /* Main Section */
 @headerMainSectionBackground: transparent;
 @headerMainSectionTransparency: rgba(255, 255, 255, 0.1);
+@printHeaderMainSectionPadding: 1.5em 2.5em 0 2.5em;
 
 /* Logo */
 @logoWidth: 100%;

package/theme/themes/eea/extras/hero.less

@@ -8,7 +8,7 @@
 --------------------*/
 
 .block.hero .ui.delete-button {
-    color: @heroDeleteButtonColor !important;
+  color: @heroDeleteButtonColor !important;
 }
 
 .eea.hero-block {
@@ -105,17 +105,22 @@
 }
 
 @media print {
+  .homepage.homepage-inverse {
+    .hero-block-inner-wrapper {
+      padding: @printInverseHeroBlockPrintPadding;
+    }
+  }
+
+  .hero-block-inner-wrapper {
+    padding: @printHeroBlockPrintPadding;
+  }
+
   .eea.hero-block.full-height,
   .eea.hero-block.full-height .hero-block-image-wrapper,
   .eea.hero-block.full-height .hero-block-inner-wrapper {
     min-height: unset;
   }
 
-  .hero-block-inner-wrapper {
-    padding-top: @heroBlockPrintPadding;
-    padding-bottom: @heroBlockPrintPadding;
-  }
-
   .hero-block-image-wrapper {
     left: 0 !important;
     right: 0 !important;
@@ -132,8 +137,8 @@
   }
 
   .hero-block-body .eea.copyright {
-    display: none;
-    visibility: hidden;
+    position: relative;
+    bottom: 0;
   }
 }
 

package/theme/themes/eea/extras/hero.variables

@@ -27,7 +27,8 @@
 @heroBlockWrapperPadding : 5rem;
 @tableHeroBlockWrapperPadding: 6rem;
 @desktopHeroBlockWrapperPadding: 194px 96px;
-@heroBlockPrintPadding: 20px;
+@printHeroBlockPrintPadding: 2.5em;
+@printInverseHeroBlockPrintPadding: 8.5em 2.5em 2.5em 2.5em;
 
 /* Body */
 @mobileHeroBlockBodyGap  : @rem-space-6;

package/theme/themes/eea/globals/site.overrides

@@ -206,41 +206,58 @@ a {
 
 @media print {
 
+  @page {
+    size: A4;
+    margin: 1cm;
+  }
+  * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
   .skiplinks-wrapper,
-  .top.bar,
-  .main.bar.transparency,
-  .main-menu,
-  .eea .header .action,
   .slider-arrow,
   #footer,
-  #page-header .action,
-  #inpage-navigation {
-    display: none;
+  #inpage-navigation,
+  .column.actions,
+  .slick-arrows {
+    display: none !important;
     visibility: hidden;
   }
 
-  .logo {
-    margin-left: 0;
+  .block.gridBlock .ui.grid,
+  .content-box {
+    break-inside: avoid;
   }
 
-  .static-banner {
-    display: none;
-    visibility: hidden;
+  .ui.segment.breadcrumbs {
+    padding: 0;
+
+    .ui.breadcrumb {
+      visibility: hidden;
+    }
   }
 
-  .image {
-    page-break-inside: avoid;
+  .ui.tab {
+    display: block;
   }
 
-  img {
-    page-break-inside: avoid;
+  .static-banner {
+    display: none;
+    visibility: hidden;
   }
 
-  .card {
+  img,
+  .image,
+  .card,
+  .visualization,
+  .embed-map,
+  .embed-tableau,
+  .embed-map-visualization,
+  .embed-visualization {
     page-break-inside: avoid;
   }
 
   .grid-block-teaser .card {
     page-break-inside: auto;
   }
-}
+}