@eeacms/volto-eea-design-system 1.0.0-beta.4 → 1.0.0-beta.5

package/CHANGELOG.md

@@ -4,7 +4,32 @@ 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.0.0-beta.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.3...1.0.0-beta.4) - 28 February 2023
+### [1.0.0-beta.5](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.4...1.0.0-beta.5) - 7 March 2023
+
+#### :nail_care: Enhancements
+
+- change(footer): removed min width and height from links [David Ichim - [`ac33219`](https://github.com/eea/volto-eea-design-system/commit/ac33219fb77f23bb5148355551a7aad9f453d2e7)]
+- change(carousel): tweak size of carousel dots for better touch interaction [David Ichim - [`e1fb823`](https://github.com/eea/volto-eea-design-system/commit/e1fb8230806de2e157a9a5ea87e63765769565b4)]
+
+#### :house: Internal changes
+
+- style(hiddenStructure): Add hiddenStructure utility to be used with h1 heading on frontpage - refs #158717 [Alin Voinea - [`672cca2`](https://github.com/eea/volto-eea-design-system/commit/672cca2401003f56e5ea104f18103ea090e38fd7)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.5 [Alin Voinea - [`e4417e1`](https://github.com/eea/volto-eea-design-system/commit/e4417e121477511c350ae3fbe4e70aadb445ed86)]
+- better useOnScreen hook [Andrei Grigore - [`c214b6b`](https://github.com/eea/volto-eea-design-system/commit/c214b6b76443f81c795ce2f3aa457562ec088b30)]
+- feature(mobile): increased performance by lazy loading footer images #303 from eea/increase_performance [ichim-david - [`80d1df1`](https://github.com/eea/volto-eea-design-system/commit/80d1df1c459680331d486f9e8e6a95c9db0adbf6)]
+- prettier [David Ichim - [`a7f8384`](https://github.com/eea/volto-eea-design-system/commit/a7f838470c1bcc4e2be115d514d92a1b686a5e9b)]
+- fixed less build failure due to changes in footer.less [David Ichim - [`190bc8c`](https://github.com/eea/volto-eea-design-system/commit/190bc8cfa88191b45808f1e27c6e2737ee3d15b1)]
+- useOnScreen default export [andreiggr - [`3e6cfdd`](https://github.com/eea/volto-eea-design-system/commit/3e6cfdd4dcb814aad328f97be7af41af071ccba6)]
+- lazyload bg img on footer also [andreiggr - [`ae07162`](https://github.com/eea/volto-eea-design-system/commit/ae07162ba1b27bff58fed70eaabc28c78c5f45a3)]
+- lazyload footer images [andreiggr - [`a0633c9`](https://github.com/eea/volto-eea-design-system/commit/a0633c9ec4ccfb63a48eb4e4c4a63c90daac1a37)]
+- use aria-labels on dropdown [andreiggr - [`27e1443`](https://github.com/eea/volto-eea-design-system/commit/27e144315416ceace0f01def03b5b24640f5c7da)]
+- role change for accessibility [andreiggr - [`5e758e0`](https://github.com/eea/volto-eea-design-system/commit/5e758e0a7fa8c56ba688d0a43de5890686f14ea3)]
+- minimum tap dimension for mobile [andreiggr - [`a25e9a8`](https://github.com/eea/volto-eea-design-system/commit/a25e9a8ba8a8a0f24d287ed7513e549ae2caab0f)]
+- Increase performance - mobile friendly [dana-cfc4 - [`07d86c8`](https://github.com/eea/volto-eea-design-system/commit/07d86c8e77568f91d50b3a45248de9427140a295)]
+### [1.0.0-beta.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.3...1.0.0-beta.4) - 1 March 2023
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,6 +22,7 @@
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
     "react-countup": "^6.3.0",
+    "react-lazy-load-image-component": "1.5.6",
     "react-slick": "^0.28.1",
     "remixicon": "2.5.0",
     "slick-carousel": "^1.8.1"

package/src/helpers/index.js

@@ -1,2 +1,3 @@
 export useClickOutside from './useClickOutside';
 export usePrevious from './usePrevious';
+export useOnScreen from './useOnScreen';

package/src/helpers/useOnScreen.js

@@ -0,0 +1,32 @@
+
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+
+function useOnScreen(ref, rootMargin = '0px') {
+  const [isIntersecting, setIntersecting] = React.useState(false);
+
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+        threshold: 0,
+        root: null,
+      },
+    );
+    if (ref?.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      if (ref?.current) {
+        observer.unobserve(ref.current);
+      }
+      observer.disconnect();
+    };
+  }, [ref, rootMargin]);
+  return isIntersecting;
+}
+
+export default useOnScreen;

package/src/ui/Footer/Footer.jsx

@@ -12,6 +12,7 @@ import FooterHeader from '@eeacms/volto-eea-design-system/ui/Footer/FooterHeader
 import SubFooter from '@eeacms/volto-eea-design-system/ui/Footer/SubFooter';
 import Social from '@eeacms/volto-eea-design-system/ui/Footer/Social';
 import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
+import useOnScreen from '../../helpers/useOnScreen';
 import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 
 /**
@@ -23,9 +24,15 @@ import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 
 const Footer = (props) => {
   const { children } = props;
+
+  const bgImgRef = React.useRef();
+  const onScreen = useOnScreen(bgImgRef);
   return (
     <footer id={'footer'}>
-      <div className="footer-wrapper">
+      <div
+        ref={bgImgRef}
+        className={onScreen ? 'footer-wrapper' : 'footer-wrapper-nobg'}
+      >
         <Container>{children}</Container>
       </div>
     </footer>

package/src/ui/Footer/FooterSites.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Grid, Image } from 'semantic-ui-react';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+
 import PropTypes from 'prop-types';
 
 const Sites = (props) => {
@@ -11,10 +13,14 @@ const Sites = (props) => {
       column.push(
         <Grid.Column className="logo" key={i}>
           <a className="logo" href={item.link}>
-            <Image src={item.src} alt={item.alt}></Image>
+            <LazyLoadComponent>
+              <Image src={item.src} alt={item.alt}></Image>
+            </LazyLoadComponent>
           </a>
           <a className="logo" href={nextItem.link}>
-            <Image src={nextItem.src} alt={nextItem.alt}></Image>
+            <LazyLoadComponent>
+              <Image src={nextItem.src} alt={nextItem.alt}></Image>
+            </LazyLoadComponent>
           </a>
         </Grid.Column>,
       );

package/src/ui/Footer/SubFooter.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Footer from './Footer';
 
 import { Grid, Image } from 'semantic-ui-react';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 const SubFooter = (props) => {
   if (props.children) {
@@ -23,7 +24,9 @@ const SubFooter = (props) => {
               <div className="item">
                 <div className={manager.className}>
                   <a href={manager.link}>
-                    <Image src={manager.src} alt={manager.alt}></Image>
+                    <LazyLoadComponent>
+                      <Image src={manager.src} alt={manager.alt}></Image>
+                    </LazyLoadComponent>
                   </a>
                 </div>
               </div>
@@ -55,7 +58,9 @@ const SubFooter = (props) => {
               <div className="item">
                 <div className={manager.className}>
                   <a href={manager.link}>
-                    <Image src={manager.src} alt={manager.alt}></Image>
+                    <LazyLoadComponent>
+                      <Image src={manager.src} alt={manager.alt}></Image>
+                    </LazyLoadComponent>
                   </a>
                 </div>
               </div>

package/src/ui/Header/Header.jsx

@@ -62,11 +62,13 @@ const TopDropdownMenu = ({
               text={mobileText || text}
               icon={icon || 'chevron down'}
               aria-label="dropdown"
+              role="dropdown"
+              lazyLoad
               closeOnChange={true}
               closeOnBlur={false}
               closeOnEscape={true}
             >
-              <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+              <Dropdown.Menu role="option">{children}</Dropdown.Menu>
             </Dropdown>
           )
         ) : (
@@ -75,12 +77,14 @@ const TopDropdownMenu = ({
             className={className}
             text={mobileText || text}
             icon={icon || 'chevron down'}
+            role="dropdown"
             aria-label="dropdown"
+            lazyLoad
             closeOnChange={true}
             closeOnBlur={false}
             closeOnEscape={true}
           >
-            <Dropdown.Menu role="group">{children}</Dropdown.Menu>
+            <Dropdown.Menu role="option">{children}</Dropdown.Menu>
           </Dropdown>
         )}
       </>

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

@@ -21,6 +21,10 @@ footer {
     background-position: @wrapperBackgroundPosition;
     background-size: @mobileWrapperBackgroundSize;
   }
+  .footer-wrapper-nobg {
+    width: @wrapperWidth;
+    padding: @mobileWrapperPadding;
+  }
 }
 
 footer .theme-sites {
@@ -144,6 +148,10 @@ footer .footer-wrapper .menu {
     font-size: @mobileMenuCopyrightFontSize;
     font-weight: @mobileMenuCopyrightFontWeight;
   }
+
+  .contact-block .subcontact {
+    margin-top: @mobileSubcontactBlockMarginTop;
+  }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -221,38 +229,45 @@ footer .footer-wrapper .menu {
   .subfooter .logo-header {
     // To match the figma align
     margin-left: @computerLogoHeaderMarginLeft;
-  }
 
-  .contact-block .subcontact a {
-    font-size: @computerSubContactIconFontSize;
-    margin-right: @computerSubContactIconMarginRight;
-  }
+    .subfooter .item {
+      .header {
+        margin-bottom: @computerItemHeaderMarginBottom;
+      }
 
-  .subfooter .contact {
-    align-items: center;
-    font-size: @contactFontSize;
-    gap: @contactGap;
+    }
 
-    i.big.icon {
-      font-size: @computerContactIconFontSize;
+    .contact-block .subcontact a {
+      font-size: @computerSubContactIconFontSize;
+      margin-right: @computerSubContactIconMarginRight;
     }
-  }
 
-  .subfooter .footer-description {
-    margin: @computerFooterDescriptionMargin;
+    .subfooter .contact {
+      align-items: center;
+      font-size: @contactFontSize;
+      gap: @contactGap;
 
-    p {
-      font-size: @computerFooterDescriptionFontSize;
+      i.big.icon {
+        font-size: @computerContactIconFontSize;
+      }
     }
-  }
 
-  .subfooter .social {
-    margin: @computerSocialIconsMargin;
-  }
+    .subfooter .footer-description {
+      margin: @computerFooterDescriptionMargin;
 
-  .footer .footer-wrapper .menu {
-    a {
-      font-size: @computerMenuFontSize;
+      p {
+        font-size: @computerFooterDescriptionFontSize;
+      }
+    }
+
+    .subfooter .social {
+      margin: @computerSocialIconsMargin;
+    }
+
+    .footer .footer-wrapper .menu {
+      a {
+        font-size: @computerMenuFontSize;
+      }
     }
   }
 }

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

@@ -42,6 +42,7 @@
 @tabletContactGap                   : @rem-space-4;
 @contactGap                         : @rem-space-8;
 @mobileContactIconMarginRight       : @space-3;
+@mobileSubcontactBlockMarginTop     : @space-3;
 @mobileContactIconFontSize          : @font-size-4;
 @computerContactIconFontSize        : @font-size-9;
 @tabletSubContactIconFontSize       : @font-size-0;

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

@@ -99,3 +99,16 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .fw-light {
   font-weight: @font-weight-3;
 }
+
+.hiddenStructure {
+  border: 0 !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}

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

@@ -370,6 +370,7 @@
   position: relative;
   bottom: 0;
 }
+
 .cards-carousel .slick-dots li button:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;
@@ -390,11 +391,13 @@
   outline-style: auto;
 }
 
-@media only screen and (min-width: @computerBreakpoint) {
-  .cards-carousel .slick-dots li button:before {
-    width: inherit;
-    height: inherit;
+@media only screen and (max-width: @tabletBreakpoint) {
+  .cards-carousel .slick-dots li,
+  .cards-carousel .slick-dots li button {
+    width: @mobileCarouselDotsButtonWidth;
+    height: @mobileCarouselDotsButtonHeight;
   }
+
 }
 
 /*******************************

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

@@ -346,8 +346,10 @@
 @carouselDotsBorder: 1px solid @darkCerulean;
 @carouselDotsBackgroundColor: @white;
 @carouselDotsActiveBackgroundColor: @darkCerulean;
-@mobileCarouselDotsWidth: 0.875rem;
-@mobileCarouselDotsHeight: 0.875rem;
+@mobileCarouselDotsWidth: 1.25rem;
+@mobileCarouselDotsHeight: 1.25rem;
+@mobileCarouselDotsButtonWidth: 1.875rem;
+@mobileCarouselDotsButtonHeight: 1.875rem;
 
 /* Slick wrapper */
 @slickListMargin: 0 -0.75em;