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

package/CHANGELOG.md

@@ -4,6 +4,54 @@ 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.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
+
+- feat(footer): Add footer description #306 from eea/footer-description [ichim-david - [`bf655d1`](https://github.com/eea/volto-eea-design-system/commit/bf655d133dd75b217c34b3d4303ad450a59f2c51)]
+- feat(footer): Add footer description [kreafox - [`2ad0f71`](https://github.com/eea/volto-eea-design-system/commit/2ad0f714556c5b8c2fd95a2caea5c3a1e82c75d1)]
+
+#### :bug: Bug Fixes
+
+- fix(footer): Add class for children [kreafox - [`3c50d15`](https://github.com/eea/volto-eea-design-system/commit/3c50d15cd6ed46d78ef10d48fd851ed7c4b5ddea)]
+- fix(footer): Don't show empty row if description is not present [kreafox - [`2ca7f7d`](https://github.com/eea/volto-eea-design-system/commit/2ca7f7d3247668ae8583b8cd629856aac82eb07d)]
+- fix(search): Fix search links color #307 from eea/search-accessibility [ichim-david - [`a76f48b`](https://github.com/eea/volto-eea-design-system/commit/a76f48bab3a7d3f6b748eaa85b33266401372e40)]
+- fix(search): Fix search links color [kreafox - [`69c42ef`](https://github.com/eea/volto-eea-design-system/commit/69c42effc5bdc3d31f18de74d77a3b7cc0018dc5)]
+
+#### :nail_care: Enhancements
+
+- change(carousel): tweak card width and padding for better arrow alignment [David Ichim - [`e184f70`](https://github.com/eea/volto-eea-design-system/commit/e184f70062d622e1ec53e8e1e2b012c080e62d77)]
+- change(storybook): include footer description in storybook [kreafox - [`e904aa0`](https://github.com/eea/volto-eea-design-system/commit/e904aa0850e101d736e8d045e822d9a58b75ff6a)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-beta.4 [Alin Voinea - [`8c335c5`](https://github.com/eea/volto-eea-design-system/commit/8c335c56c5a2a76ea87f9da318055770f904e649)]
+- Back to dev [Alin Voinea - [`38b0333`](https://github.com/eea/volto-eea-design-system/commit/38b03333066416915b056f8ac45da4de87ed7184)]
 ### [1.0.0-beta.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-beta.2...1.0.0-beta.3) - 21 February 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-beta.3",
+  "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/Description.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Grid } from 'semantic-ui-react';
+
+const Description = (props) => {
+  if (props.children) {
+    return <div className="footer-description">{props.children}</div>;
+  }
+
+  return props.description ? (
+    <Grid.Row>
+      <div className="footer-description">
+        <p>{props.description}</p>
+      </div>
+    </Grid.Row>
+  ) : null;
+};
+
+Description.propTypes = {
+  description: PropTypes.string,
+};
+
+export default Description;

package/src/ui/Footer/Footer.jsx

@@ -12,6 +12,8 @@ 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';
 
 /**
  * Component to display the footer.
@@ -22,9 +24,15 @@ import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
 
 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>
@@ -37,6 +45,7 @@ Footer.Header = FooterHeader;
 Footer.Sites = FooterSites;
 Footer.Social = Social;
 Footer.SubFooter = SubFooter;
+Footer.Description = Description;
 
 /**
  * Property types.

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

@@ -31,6 +31,7 @@ const Template = (args) => (
 export const Default = Template.bind({});
 Default.args = {
   header: 'Thematic information platforms',
+  description: '',
   actions: [
     { link: '/#', title: 'Privacy' },
     { link: '/#', title: 'Sitemap' },

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>
@@ -37,6 +40,8 @@ const SubFooter = (props) => {
         </Grid.Column>
       </Grid>
 
+      <Footer.Description description={props.description} />
+
       <Grid.Row>
         <Footer.Social social={props.social} />
       </Grid.Row>
@@ -53,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/theme.config

@@ -135,4 +135,5 @@
   @import (optional) "@{siteFolder}/@{addon}/@{addontype}s/@{addonelement}.overrides";
 }
 
+
 /* End Config */

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 {
@@ -95,6 +99,15 @@ footer .theme-sites {
   }
 }
 
+.subfooter .footer-description {
+  margin: @mobileFooterDescriptionMargin;
+  text-align: @footerDescriptionTextAlign;
+
+  p {
+    font-size: @mobileFooterDescriptionFontSize;
+  }
+}
+
 footer .footer-wrapper .menu {
   .actions {
     display: flex;
@@ -131,10 +144,14 @@ footer .footer-wrapper .menu {
     flex-direction: column;
   }
 
- footer .footer-wrapper .menu .copyright a {
+  footer .footer-wrapper .menu .copyright a {
     font-size: @mobileMenuCopyrightFontSize;
     font-weight: @mobileMenuCopyrightFontWeight;
   }
+
+  .contact-block .subcontact {
+    margin-top: @mobileSubcontactBlockMarginTop;
+  }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
@@ -143,7 +160,7 @@ footer .footer-wrapper .menu {
   }
 
   footer .theme-sites .header {
-    font-size: @tabletFooterTitleFontSize
+    font-size: @tabletFooterTitleFontSize;
   }
 
   .subfooter .item {
@@ -176,6 +193,10 @@ footer .footer-wrapper .menu {
     margin-right: @tabletSubContactIconMarginRight;
   }
 
+  .subfooter .footer-description {
+    margin: @tabletFooterDescriptionMargin;
+  }
+
   .subfooter .social {
     justify-content: @tabletSocialJustifyContent;
     gap: @tabletSocialGap;
@@ -187,7 +208,6 @@ footer .footer-wrapper .menu {
       }
     }
   }
-
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
@@ -208,32 +228,46 @@ footer .footer-wrapper .menu {
 
   .subfooter .logo-header {
     // To match the figma align
-    margin-left: @computerLogoHeaderMarginLeft
-  }
+    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 .social {
-    margin: @computerSocialIconsMargin;
-  }
+    .subfooter .contact {
+      align-items: center;
+      font-size: @contactFontSize;
+      gap: @contactGap;
+
+      i.big.icon {
+        font-size: @computerContactIconFontSize;
+      }
+    }
 
-  .footer .footer-wrapper .menu {
+    .subfooter .footer-description {
+      margin: @computerFooterDescriptionMargin;
 
-    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;
@@ -50,6 +51,14 @@
 @computerSubContactIconMarginRight  : @rem-space-4;
 @computerSubContactIconFontWeight   : @font-weight-4;
 
+/* Description */
+@mobileFooterDescriptionMargin      : @rem-space-2 0 @rem-space-8;
+@tabletFooterDescriptionMargin      : @rem-space-7 0 0 0;
+@computerFooterDescriptionMargin    : @rem-space-17 0 0 0;
+@computerFooterDescriptionFontSize  : @font-size-1;
+@mobileFooterDescriptionFontSize    : @font-size-0;
+@footerDescriptionTextAlign         : center;
+
 /* Social Icons */
 @mobileSocialIconsMargin            : @rem-space-2 0 @rem-space-8;
 @tabletSocialIconsMargin            : @rem-space-7 0;

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

@@ -93,8 +93,7 @@
     cursor: pointer;
   }
 
-  &:hover .language-link
-   {
+  &:hover .language-link {
     color: @dropdownMenuItemColorHover;
   }
 }
@@ -371,7 +370,10 @@
       .item {
         padding: 0;
         margin: 0;
-        cursor: pointer;
+
+        a {
+          color: @searchBoxSuggestionsTextColor;
+        }
       }
     }
   }
@@ -443,8 +445,8 @@
   height: @mobileMainSectionHeight;
   align-items: center;
   justify-content: center;
-  background-color: @burgerActionBackgroundColor;
   border: none;
+  background-color: @burgerActionBackgroundColor;
   cursor: pointer;
 }
 
@@ -460,8 +462,8 @@
   height: @mobileMainSectionHeight;
   align-items: center;
   justify-content: center;
-  background-color: @secondaryColor;
   border: none;
+  background-color: @secondaryColor;
   cursor: pointer;
 }
 

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

@@ -14,7 +14,6 @@
 
 /* Cards must have same height */
 .ui.card {
-  min-width: @minWidth;
   height: 100%;
   text-align: var(--text-align, @cardTextAlign);
   background-color: var(--card-background-color, @background);
@@ -304,7 +303,6 @@
 
   .slick-track {
     display: flex;
-    gap: @slickTrackGap;
     margin: @slickTrackMargin;
   }
 
@@ -313,6 +311,7 @@
     height: auto;
     flex: 1;
     flex-direction: column;
+    margin: @slickSlideMargin;
 
     > div {
       height: 100%;
@@ -323,6 +322,7 @@
 /* Carousel arrows */
 .cards-carousel .ui.button.icon.slider-arrow {
   padding: @carouselButtonPadding;
+  margin: @carouselButtonMargin;
 
   .active, &:focus, &:hover {
     background: transparent;
@@ -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

@@ -22,7 +22,6 @@
 @minHeight: 0px;
 @padding: 0em;
 @width: 290px;
-@minWidth: 250px;
 @borderWidth: 1px;
 @borderShadow: 0px 0px 0px @borderWidth @solidBorderColor;
 @boxShadow: @eeaGlobalShadow;
@@ -333,6 +332,7 @@
 
 /* Button */
 @carouselButtonPadding: 0;
+@carouselButtonMargin: 0;
 @carouselButtonIconColor: @tertiaryColor;
 @carouselButtonIconFontSize: 3.125rem;
 @carouselButtonIconOpacity: 1;
@@ -346,13 +346,15 @@
 @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;
-@slickTrackGap: 1.25rem;
 @slickTrackMargin: 1rem 0;
+@slickSlideMargin: 0 10px;
 
 /*******************************
         Teaser Cards