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

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';
 
@@ -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/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/extras/header.less

@@ -825,8 +825,6 @@
     padding: @megaMenuAccordionTitlePadding;
     border-bottom: @megaMenuAccordionTitleBorderBottom;
     color: @megaMenuTextColor;
-    color: @megaMenuTextColor;
-    font-size: @megaMenuAccordionTitleFontSize;
     font-size: @megaMenuAccordionTitleFontSize;
     font-weight: @megaMenuAccordionTitleFontWeight;
 

package/theme/themes/eea/globals/mixins.less

@@ -14,3 +14,11 @@
 .image-overlay-gradient() {
   .gradientMix(linear; rgba(46, 62, 76, 0.65) 38.6%, rgba(46, 62, 76, 0.169) 59.52%, rgba(69, 95, 106, 0) 79.64%; 13.39deg)
 }
+
+.useTitleMaxLines(@value: 2) {
+  display: -webkit-box !important;
+  overflow: hidden;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--title-max-lines, @value);
+}

package/theme/themes/eea/globals/utilities.less

@@ -37,15 +37,19 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-left,
 .has--text--left,
 .has--textAlign--left { text-align: left !important; }
+
 .text-center,
 .has--text--center,
 .has--textAlign--center { text-align: center !important;}
+
 .text-right,
 .has--text--right,
 .has--textAlign--right { text-align: right !important; }
+
 .text-justify,
 .has--text--justify,
 .has--textAlign--justify { text-align: justify !important; }
+
 .bold { font-weight: bold !important; }
 
 .has--text--left {
@@ -57,6 +61,49 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   --justify-content: space-evenly;
 }
 
+/*******************************
+   Image properties utilities
+*******************************/
+
+// image object fit
+.has--object-fit--contain {
+  --image-object-fit: contain;
+}
+
+.has--object-fit--cover {
+  --image-object-fit: cover;
+}
+
+.has--object-fit--fill {
+  --image-object-fit: fill;
+}
+
+.has--object-fit--scale-down {
+  --image-object-fit: scale-down;
+}
+
+// image object position
+.has--object-position--top {
+  --image-object-position: top;
+}
+
+.has--object-position--bottom {
+  --image-object-position: bottom;
+}
+
+.has--object-position--left {
+  --image-object-position: left;
+}
+
+.has--object-position--right {
+  --image-object-position: right;
+}
+
+.has--object-position--center {
+  --image-object-position: center;
+}
+
+
 // background position utilities
 .has--bg--top {
   background-position: top !important;

package/theme/themes/eea/modules/accordion.overrides

@@ -158,3 +158,10 @@
 .ui.accordion.tertiary .title:not(.active):focus-visible i {
   color: @tertiaryColorCSSVar;
 }
+
+@media only screen and (max-width: @largestMobileScreen) {
+  .accordion-block h1 * { font-size: @mobileH1; }
+  .accordion-block h2 * { font-size: @mobileH2; }
+  .accordion-block h3 * { font-size: @mobileH3; }
+  .accordion-block h4 * { font-size: @mobileH4; }
+}

package/theme/themes/eea/views/card.overrides

@@ -32,11 +32,14 @@
   img {
     width: var(--card-image-width, @imageWidth);
     height: var(--card-image-width, @imageHeight);
-    object-fit: @imageObjectFit;
-    object-position: @imageObjectPosition;
   }
 }
 
+.ui.card img, img.ui.image {
+  object-fit: var(--image-object-fit, @imageObjectFit);
+  object-position: var(--image-object-position, @imageObjectPosition);
+}
+
 
 .ui.cards > .card > .content > *:not(:last-child),
 .ui.card > .content > *:not(:last-child) {
@@ -150,6 +153,8 @@
     width: @roundedImageWidth;
     height: @roundedImageHeight;
     border-radius: @roundedImageBorderRadius !important;
+    object-fit: var(--image-object-fit, @imageObjectFit);
+    object-position: var(--image-object-position, @imageObjectPosition);
   }
 
   .content {
@@ -434,24 +439,22 @@
     padding-left: @tabletTeaserCardPaddingInline;
     padding-right: @tabletTeaserCardPaddingInline;
   }
+
   .grid-block-teaser .ui.card {
     min-width: @tabletTeaserCardMinWidth;
   }
 }
 
-// Added from listing-cards.less
-.grid-block-teaser .ui.card.u-card .header {
-  display: -webkit-box !important;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--title-max-lines, 3);
-}
-
 // Spacing adjustment to display outline with overflow hidden
 .ui.card .header {
   padding: @headerPadding;
 }
+
 .ui.card .header > a {
-  display: @headerLinkDisplay;
+  .useTitleMaxLines();
 }
 
+// Meta align fix
+.ui.card.u-card .meta:after {
+    content: none;
+}

package/src/ui/Card/AvatarGrid/AvatarGrid.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Grid, Card, Image } from 'semantic-ui-react';
-
-function AvatarGrid({ children, ...rest }) {
-  return (
-    <div className="eea avatar-grid" {...rest}>
-      <div className="wrapper">{children}</div>
-    </div>
-  );
-}
-
-AvatarGrid.Content = ({ children }) => {
-  return <div className="content">{children}</div>;
-};
-
-AvatarGrid.Group = ({ children, ...rest }) => {
-  let avatars = rest.avatars;
-
-  return (
-    <div className="avatar group">
-      <Grid>
-        {avatars.map((avatar, index) => (
-          <Grid.Column key={index} mobile={12} tablet={4} computer={4}>
-            <div className="avatar-wrapper">
-              <Card
-                className={`eea rounded ${
-                  rest.variant === 'default' ? '' : rest.variant
-                } ${rest.inverted ? 'inverted' : ''}`}
-                fluid={rest.fluid}
-              >
-                {rest.hasLink ? (
-                  <Image
-                    as="a"
-                    href={rest.href}
-                    src={avatar.src}
-                    wrapped
-                    ui={false}
-                    alt="card image"
-                  />
-                ) : (
-                  <Image src={avatar.src} wrapped ui={false} alt="card image" />
-                )}
-                <Card.Content>
-                  {rest.hasLink ? (
-                    <Card.Header>
-                      <a href={rest.href}>{avatar.title}</a>
-                    </Card.Header>
-                  ) : (
-                    <Card.Header>{avatar.title}</Card.Header>
-                  )}
-                  <Card.Description>{avatar.description}</Card.Description>
-                </Card.Content>
-              </Card>
-            </div>
-          </Grid.Column>
-        ))}
-      </Grid>
-    </div>
-  );
-};
-export default AvatarGrid;