@eeacms/volto-eea-design-system 1.0.7 → 1.12.0

package/src/ui/Footer/Contact.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
 const Contact = ({ children, contacts }) =>
   children?.length ? (
     children
@@ -9,15 +11,38 @@ const Contact = ({ children, contacts }) =>
     <div className="contact-block">
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Link to={contact.link} className="bold">
-            {contact.text}
-          </Link>
+          {isInternalURL(contact.link) ? (
+            <Link to={contact.link} className="bold">
+              {contact.text}
+            </Link>
+          ) : (
+            <a
+              href={contact.link}
+              target={'_blank'}
+              rel="noopener noreferrer"
+              className={'bold'}
+            >
+              {contact.text}
+            </a>
+          )}
           {contact.children && (
             <div className="subcontact">
               {contact.children.map((child, index) => (
-                <Link to={child.link} key={index}>
-                  {child.text}
-                </Link>
+                <>
+                  {isInternalURL(child.link) ? (
+                    <Link to={child.link} key={index}>
+                      {child.text}
+                    </Link>
+                  ) : (
+                    <a
+                      href={child.link}
+                      target={'_blank'}
+                      rel="noopener noreferrer"
+                    >
+                      {child.text}
+                    </a>
+                  )}
+                </>
               ))}
             </div>
           )}

package/src/ui/Footer/Footer.stories.js

@@ -33,29 +33,60 @@ Default.args = {
   header: 'Environmental information systems',
   description: '',
   actions: [
-    { link: '/#', title: 'Privacy' },
-    { link: '/#', title: 'Sitemap' },
-    { link: '/#', title: 'CMS Login' },
+    { link: '/privacy', title: 'Privacy' },
+    { link: '/sitemap', title: 'Sitemap' },
+    { link: 'https://www.eea.europa.eu/en/login', title: 'CMS Login' },
   ],
   copyright: [
     { link: 'https://status.eea.europa.eu/', title: 'System status' },
-    { link: '/#', title: '© Copyright 2023 EEA' },
+    {
+      link: '/copyright',
+      title: '© Copyright 2023 EEA',
+    },
   ],
   sites: [
-    { link: '/#', src: Marine, alt: 'WISE marine' },
-    { link: '/#', src: Freshwater, alt: 'WISE freshwater' },
-    { link: '/#', src: Bise, alt: 'Biodiversity' },
-    { link: '/#', src: Fise, alt: 'Forest information system for europe' },
+    { link: 'https://water.europa.eu/marine', src: Marine, alt: 'WISE marine' },
+    {
+      link: 'https://water.europa.eu/freshwater',
+      src: Freshwater,
+      alt: 'WISE freshwater',
+    },
+    { link: 'https://biodiversity.europa.eu/', src: Bise, alt: 'Biodiversity' },
     {
-      link: '/#',
+      link: 'https://forest.eea.europa.eu/',
+      src: Fise,
+      alt: 'Forest information system for europe',
+    },
+    {
+      link: 'https://climate-adapt.eea.europa.eu/observatory',
       src: ClimateHealth,
       alt: 'Information platform for chemical monitoring',
     },
-    { link: '/#', src: Cca, alt: 'Climate adapt' },
-    { link: '/#', src: Industry, alt: 'European industrial emissions portal' },
-    { link: '/#', src: Energy, alt: 'Climate and energy in the EU' },
-    { link: '/#', src: Copernicus, alt: 'Copernicus land monitoring service' },
-    { link: '/#', src: Insitu, alt: 'Copernicus in situ' },
+    {
+      link: 'https://climate-adapt.eea.europa.eu/',
+      src: Cca,
+      alt: 'Climate adapt',
+    },
+    {
+      link: 'https://industry.eea.europa.eu/',
+      src: Industry,
+      alt: 'European industrial emissions portal',
+    },
+    {
+      link: 'https://climate-energy.eea.europa.eu/',
+      src: Energy,
+      alt: 'Climate and energy in the EU',
+    },
+    {
+      link: 'https://land.copernicus.eu/',
+      src: Copernicus,
+      alt: 'Copernicus land monitoring service',
+    },
+    {
+      link: 'https://insitu.copernicus.eu/',
+      src: Insitu,
+      alt: 'Copernicus in situ',
+    },
   ],
   managedBy: [
     {
@@ -82,23 +113,43 @@ Default.args = {
     },
   ],
   social: [
-    { name: 'twitter', icon: 'ri-twitter-fill', link: '/#' },
-    { name: 'facebook', icon: 'ri-facebook-box-fill', link: '/#' },
-    { name: 'linkedin', icon: 'ri-linkedin-fill', link: '/#' },
-    { name: 'youtube', icon: 'ri-youtube-fill', link: '/#' },
-    { name: 'instagram', icon: 'ri-instagram-fill', link: '/#' },
-    { name: 'rss', icon: 'ri-rss-fill', link: '/#' },
+    {
+      name: 'twitter',
+      icon: 'ri-twitter-fill',
+      link: 'https://twitter.com/euenvironment',
+    },
+    {
+      name: 'facebook',
+      icon: 'ri-facebook-box-fill',
+      link: 'https://www.facebook.com/European.Environment.Agency',
+    },
+    {
+      name: 'linkedin',
+      icon: 'ri-linkedin-fill',
+      link: 'https://www.linkedin.com/company/european-environment-agency',
+    },
+    {
+      name: 'youtube',
+      icon: 'ri-youtube-fill',
+      link: 'https://www.youtube.com/user/EEAvideos',
+    },
+    {
+      name: 'instagram',
+      icon: 'ri-instagram-fill',
+      link: 'https://www.instagram.com/ourplanet_eu',
+    },
+    { name: 'rss', icon: 'ri-rss-fill', link: '/subscription/news-feeds' },
   ],
   contacts: [
     {
       text: 'About us',
-      link: '/#',
+      link: '/about',
       children: [
-        { text: 'FAQs', link: '/#' },
-        { text: 'Careers', link: '/#' },
+        { text: 'FAQs', link: 'http://external.site' },
+        { text: 'Careers', link: '/careers' },
       ],
     },
-    { text: 'Contact us', link: '/#' },
-    { text: 'Sign up to our newsletter', link: '/#' },
+    { text: 'Contact us', link: '/contact-us' },
+    { text: 'Sign up to our newsletter', link: '/newsletter' },
   ],
 };

package/src/ui/Header/Header.jsx

@@ -138,6 +138,7 @@ const Main = ({
   transparency,
   inverted,
   hideSearch,
+  isMultilingual,
 }) => {
   const history = useHistory();
   const [activeItem, setActiveItem] = React.useState(pathname);
@@ -154,10 +155,15 @@ const Main = ({
     setSearchIsActive(false);
     setBurger('');
     // remove active menu when we have no pathname which means we hit logo to go home
-    if (!pathname) {
+    //remove the lang route in order to check if empty
+    //setActiveItem as pathname when pathname changed
+    if (
+      !pathname ||
+      (isMultilingual === true && !pathname?.split('/')?.slice(2)?.join('/'))
+    ) {
       setActiveItem('');
-    }
-  }, [pathname]);
+    } else setActiveItem(pathname);
+  }, [isMultilingual, pathname]);
 
   React.useEffect(() => {
     if (searchIsActive) {

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Transition } from 'semantic-ui-react';
 import { Container, Grid, List, Icon, Accordion } from 'semantic-ui-react';
 
@@ -88,7 +88,7 @@ const Countries = ({ menuItem, renderMenuItem }) => (
     <Grid.Column width={8}>
       {menuItem.items.map((section, index) => (
         <React.Fragment key={index}>
-          {section.title === 'EEA member countries' && (
+          {index === 0 && (
             <ItemGrid
               sectionTitle={section.title}
               item={section}
@@ -103,7 +103,7 @@ const Countries = ({ menuItem, renderMenuItem }) => (
       <Grid columns={1} className="nested-grid">
         {menuItem.items.map((section, index) => (
           <React.Fragment key={index}>
-            {section.title !== 'EEA member countries' && (
+            {index !== 0 && (
               <Grid.Column>
                 <ItemGrid
                   sectionTitle={section.title}
@@ -244,17 +244,31 @@ const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
 };
 
 const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
-  let defaultIndex = -1;
+  const [activeIndex, setActiveIndex] = useState(-1);
+
+  useEffect(() => {
+    let index = 0;
+    menuItems.forEach((menuItem) => {
+      if (pathName.includes(menuItem.url)) setActiveIndex(index);
+      ++index;
+    });
+  }, [menuItems, pathName]);
+
   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">
+      <Accordion.Title
+        key={`title-${index}`}
+        index={index}
+        as="button"
+        onClick={() => {
+          if (activeIndex === index) {
+            setActiveIndex(-1);
+          } else setActiveIndex(index);
+        }}
+      >
         {element.title}
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>
@@ -289,7 +303,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
     rootPanels.push(x);
   });
 
-  return <Accordion defaultActiveIndex={defaultIndex} panels={rootPanels} />;
+  return <Accordion activeIndex={activeIndex} panels={rootPanels} />;
 };
 
 function HeaderMenuPopUp({

package/src/ui/Header/HeaderSearchPopUp.js

@@ -30,6 +30,7 @@ function HeaderSearchPopUp({
   const {
     path = '',
     buttonTitle,
+    buttonUrl,
     description,
     placeholder = 'Search',
     searchSuggestions,
@@ -115,7 +116,7 @@ function HeaderSearchPopUp({
             <Container>
               <div>{description}</div>
               <a
-                href={defaultView[0].path}
+                href={buttonUrl || defaultView[0].path}
                 className="ui button white inverted"
                 title="Advanced search"
               >

package/src/ui/Video/Video.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import cx from 'classnames';
+
+function Video({ children, align }) {
+  return <div className={cx('block video align', align)}>{children}</div>;
+}
+
+Video.Body = ({ children, align }) => (
+  <div className={cx('video-inner', { 'full-width': align === 'full' })}>
+    {children}
+  </div>
+);
+
+Video.Embed = ({
+  children,
+  url,
+  loop,
+  autoPlay,
+  align,
+  placeholder_image,
+  required_caption,
+}) => {
+  return (
+    <video
+      src={url}
+      controls={!autoPlay}
+      autoPlay={autoPlay}
+      muted={autoPlay}
+      loop={loop}
+      poster={placeholder_image}
+      type="video/mp4"
+    >
+      <track kind="captions" {...required_caption} />
+      {children}
+    </video>
+  );
+};
+
+Video.Track = ({ tracks }) =>
+  tracks.map((track, index) => {
+    return <track {...track} />;
+  });
+
+export default Video;

package/src/ui/Video/Video.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import Video from './Video';
+import englishTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-en.vtt';
+import romanianTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-ro.vtt';
+import greekTrack from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/video/demo-track-el.vtt';
+
+export default {
+  title: 'Components/Video',
+  component: Video,
+  argTypes: {
+    align: {
+      options: ['center', 'right', 'left'],
+      control: {
+        type: 'select',
+        labels: {
+          '': 'default',
+        },
+      },
+      defaultValue: 'center',
+      table: {
+        defaultValue: { summary: 'center' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <Container>
+    <Video align={args.align}>
+      <Video.Body align={args.align}>
+        <Video.Embed {...args}>
+          <Video.Track tracks={args.tracks} />
+        </Video.Embed>
+      </Video.Body>
+    </Video>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  url: 'https://cmshare.eea.europa.eu/s/Xw7kH2TJGCibHJf/download',
+  autoPlay: false,
+  loop: false,
+  align: 'center',
+  placeholder_image: '',
+  required_caption: { src: englishTrack, srclang: 'en', label: 'English' },
+  tracks: [
+    { src: romanianTrack, kind: 'captions', srclang: 'ro', label: 'Română' },
+    { src: greekTrack, kind: 'captions', srclang: 'el', label: 'Ελλήνικά' },
+  ],
+};

package/src/ui/index.js

@@ -22,8 +22,6 @@ export Timeline from './Timeline/Timeline';
 
 export Testimonial from './Quote/Testimonial/Testimonial';
 
-export AvatarGrid from './Card/AvatarGrid/AvatarGrid';
-
 export KeyContent from './KeyContent/KeyContent';
 
 export DownloadLabeledIcon from './DownloadLabeledIcon/DownloadLabeledIcon';
@@ -39,3 +37,5 @@ export RelatedContent from './Card/RelatedContent/RelatedContent';
 export Hero from './Hero/Hero';
 
 export Copyright from './Copyright/Copyright';
+
+export Video from './Video/Video';

package/theme/theme.config

@@ -88,10 +88,8 @@
 @tagList          : 'eea';
 @inpageNavigation : 'eea';
 @contextNavigation : 'eea';
-@avatar           : 'eea';
 @divider          : 'eea';
 @testimonial      : 'eea';
-@avatarGrid       : 'eea';
 @keyContent       : 'eea';
 @publicationCard  : 'eea';
 @contentBox       : 'eea';
@@ -135,5 +133,4 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
-
 /* End Config */

package/theme/themes/eea/assets/video/demo-track-el.vtt

@@ -0,0 +1,11 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:11.999  line:80%
+[ΜΟΥΣΙΚΗ]
+
+00:00:12.000 --> 00:01:35.999 line:80%
+Αυτά τα components χρησιμοποιούνται ως παράδειγμα χρήσης.
+Αυτοί οι υπότιτλοι έχουν σκοπό την επίδειξη της λειτουργικότητας.
+
+00:01:36.000 --> 00:01:47.999 line:80%
+[ΜΟΥΣΙΚΗ]

package/theme/themes/eea/assets/video/demo-track-en.vtt

@@ -0,0 +1,11 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:11.999  line:80%
+[MUSIC]
+
+00:00:12.000 --> 00:01:35.999 line:80%
+These components are used for demo purposes.
+This track is an example to demonstrate the functionality.
+
+00:01:36.000 --> 00:01:47.999 line:80%
+[MUSIC]

package/theme/themes/eea/assets/video/demo-track-ro.vtt

@@ -0,0 +1,11 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:11.999  line:80%
+[MUZICĂ]
+
+00:00:12.000 --> 00:01:35.999 line:80%
+Aceste componente sunt utilizate în scopuri demonstrative.
+Această piesă este un exemplu pentru a demonstra funcționalitatea.
+
+00:01:36.000 --> 00:01:47.999 line:80%
+[MUZICĂ]

package/theme/themes/eea/collections/table.variables

@@ -35,7 +35,7 @@
 @cellVerticalPadding: @relativeMini;
 @cellHorizontalPadding: @relativeMini;
 @cellVerticalAlign: inherit;
-@cellTextAlign: center;
+@cellTextAlign: inherit;
 @cellBorder: 1px solid @secondaryColor;
 
 /* Table Header */

package/theme/themes/eea/elements/header.overrides

@@ -100,106 +100,3 @@
   flex: 1 0 auto;
   align-items: center;
 }
-
-//@media only screen and (max-width: @mobileWidth) {
-//  .ui.segment.header-wrapper {
-//    position: sticky !important;
-//    z-index: 3;
-//    background: @white;
-//  }
-//
-//  .ui.segment {
-//    position: initial !important;
-//  }
-//
-//  .header .logo-nav-wrapper {
-//    margin: 10px 0 10px;
-//  }
-//}
-//
-//.ui.segment.header-wrapper {
-//  padding: 0;
-//}
-//
-//.ui.segment .header {
-//  padding: 0 15px;
-//}
-//
-//.header .logo-nav-wrapper {
-//  align-items: center;
-//
-//  .navigation {
-//    display: flex;
-//    width: 100%;
-//    align-items: center;
-//    justify-content: center;
-//  }
-//}
-//
-//.header .logo-nav-wrapper .ui.pointing.secondary {
-//  display: flex;
-//  width: 100%;
-//  max-width: 100%;
-//  justify-content: unset;
-//  margin: 0 !important;
-//
-//  .navigation-links {
-//    display: inline-flex;
-//    width: 100%;
-//    justify-content: center;
-//  }
-//
-//  .tools-wrapper {
-//    display: flex;
-//    flex: 1 0 auto;
-//    align-items: center;
-//  }
-//
-//  .tools-search-wrapper {
-//    margin-left: 0;
-//  }
-//
-//  .search form {
-//    padding-top: 0 !important;
-//  }
-//}
-//
-//@media only screen and (max-width: 766px) {
-//  // #141204 take into account that for the header wrapper on mobile views
-//  // we have the volto toolbar on top
-//  .has-toolbar-collapsed .header-wrapper {
-//    top: 20px;
-//  }
-//
-//  .has-toolbar .header-wrapper {
-//    top: 100px;
-//  }
-//}
-//
-//@media only screen and (min-width: 768px) and (max-width: @mobileWidth) {
-//  // #141204 use fixed position instead of sticky in order to always
-//  // have the header on top from 768px to 1279px
-//  .ui.segment.header-wrapper {
-//    position: fixed !important;
-//    top: 0;
-//  }
-//
-//  .header-wrapper {
-//    width: 100%; // when position fixed div behaves as inline
-//  }
-//
-//  .has-toolbar .header-wrapper {
-//    width: calc(100% - 80px); // toolbar width
-//  }
-//
-//  .has-toolbar-collapsed .header-wrapper {
-//    width: calc(100% - 20px);
-//  }
-//}
-//
-//.ui.right.sidebar.metadata-sidebar.menu,
-//.ui.left.sidebar.metadata-sidebar.menu {
-//  .ui.header {
-//    padding: 0;
-//  }
-//}

package/theme/themes/eea/elements/image.overrides

@@ -88,6 +88,12 @@
   position: relative;
 }
 
+// https://www.eea.europa.eu/en/newsroom/photo-competitions
+// ensure link focus goes over the image
+.image-block-container > a {
+  display: @imageBlockContainerLinkDisplay;
+}
+
 /* if the image is smaller than the content area the copyright
   isn't as big as the image unless the image is inline-block
 */

package/theme/themes/eea/elements/image.variables

@@ -20,6 +20,7 @@
 @imageAlignLargeMaxWidth: 50%;
 @imageAlignMediumMaxWidth: 25%;
 @imageAlignSmallMaxWidth: 15%;
+@imageBlockContainerLinkDisplay: block;
 
 /*-------------------
        Types

package/theme/themes/eea/elements/segment.overrides

@@ -8,6 +8,13 @@
   padding-left: 0;
 }
 
+@media print {
+  .ui.basic.segment.content-area {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+
 .ui.primary.segment {
   border-bottom: @4px solid @greyBorderColor;
   font-size: @16px;

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

@@ -228,4 +228,16 @@
   }
 }
 
+@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;
+  }
+}
+
 .loadUIOverrides();

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

@@ -17,11 +17,13 @@
 @mobileContentPadding      : 1rem 0 1.25rem;
 @tabletContentPadding      : 3rem 0 1.25rem;
 @computerContentPadding    : 5rem 0 1.25rem;
+@printContentPadding       : 15px;
 
 @mobileContentPaddingWithImage      : 6.25rem 0 1.25rem;
 @tabletContentPaddingWithImage      : 12.5rem 0 1.25rem;
 @computerContentPaddingWithImage    : 15.625rem 0 1.25rem;
 
+
 /* Title */
 @titleFontWeight           : @bold;
 @titleMaxWidth             : 100%;