@eeacms/volto-eea-design-system 1.19.0 → 1.21.0

package/src/ui/Card/Card.stories.test.jsx

@@ -1,14 +1,48 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 import {
   TeaserCardGrid,
   CarouselCards,
   FluidGrid,
+  ImageGrid,
   CardGrid,
   Default,
 } from './Card.stories';
 
 describe('TeaserCardGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<TeaserCardGrid {...TeaserCardGrid.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${TeaserCardGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${TeaserCardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${TeaserCardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${TeaserCardGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${TeaserCardGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the teaser card grid with correct number of cards', () => {
     const { container } = render(<TeaserCardGrid {...TeaserCardGrid.args} />);
     const teaserCards = container.querySelectorAll('.column.grid-block-teaser');
@@ -26,6 +60,39 @@ describe('TeaserCardGrid component', () => {
 });
 
 describe('CarouselCards component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<CarouselCards {...CarouselCards.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${CarouselCards.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${CarouselCards.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${CarouselCards.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${CarouselCards.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${CarouselCards.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the carousel with correct number of cards', () => {
     const { container } = render(<CarouselCards {...CarouselCards.args} />);
     const carouselCards = container.querySelectorAll(
@@ -46,7 +113,50 @@ describe('CarouselCards component', () => {
   });
 });
 
+describe('ImageGrid component', () => {
+  it('renders the image grid with correct number of cards', () => {
+    const { container } = render(<ImageGrid {...ImageGrid.args} />);
+    const imageGridCards = container.querySelectorAll(
+      '.imageCard-items .ui.card a.image',
+    );
+    expect(imageGridCards.length).toBe(5);
+  });
+});
+
 describe('FluidGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<FluidGrid {...FluidGrid.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${FluidGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${FluidGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${FluidGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${FluidGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${FluidGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders fluid grid with correct number of cards', () => {
     const { container } = render(<FluidGrid {...FluidGrid.args} />);
     const fluidGridCards = container.querySelectorAll(
@@ -58,6 +168,39 @@ describe('FluidGrid component', () => {
 });
 
 describe('CardGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<CardGrid {...CardGrid.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${CardGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${CardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${CardGrid.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${CardGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${CardGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the card grid with correct number of cards', () => {
     const { container } = render(<CardGrid {...CardGrid.args} />);
     const cardGridCards = container.querySelectorAll(
@@ -67,7 +210,70 @@ describe('CardGrid component', () => {
   });
 });
 
+describe('ImageGrid component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<ImageGrid {...ImageGrid.args} />);
+
+    expect(container.querySelector('.ui.image')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${ImageGrid.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${ImageGrid.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${ImageGrid.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('renders the image grid with correct number of cards', () => {
+    const { container } = render(<ImageGrid {...ImageGrid.args} />);
+    const imageGridCards = container.querySelectorAll(
+      '.ui.card.u-card.default .ui.image',
+    );
+    expect(imageGridCards.length).toBe(5);
+  });
+});
+
 describe('Default component', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Default {...Default.args} />);
+
+    expect(container.querySelector('.image')).toBeInTheDocument();
+    expect(container.querySelector('.header')).toBeInTheDocument();
+    expect(container.querySelector('.meta')).toBeInTheDocument();
+    expect(container.querySelector('.description')).toBeInTheDocument();
+
+    expect(
+      container.querySelector(`.ui.card.u-card.${Default.args.variant}`),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.max-${Default.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.title-max-${Default.args.maxLines}-lines`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-fit--${Default.args.objectFit}`,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector(
+        `.ui.card.u-card.has--object-position--${Default.args.objectPosition}`,
+      ),
+    ).toBeInTheDocument();
+  });
+
   it('renders the default with correct number of cards', () => {
     const { container } = render(<Default {...Default.args} />);
     const defaultCards = container.querySelectorAll(

package/src/ui/Footer/Footer.jsx

@@ -18,7 +18,7 @@ import Description from '@eeacms/volto-eea-design-system/ui/Footer/Description';
 /**
  * Component to display the footer.
  * @function Footer
- * @param {Object} intl Intl object
+ * @param {Object} props object
  * @returns {string} Markup of the component
  */
 
@@ -28,7 +28,7 @@ const Footer = (props) => {
   const bgImgRef = React.useRef();
   const onScreen = useFirstVisited(bgImgRef);
   return (
-    <footer id={'footer'}>
+    <footer id={'footer'} aria-label={'Footer'}>
       <div
         ref={bgImgRef}
         className={onScreen ? 'footer-wrapper' : 'footer-wrapper-nobg'}

package/src/ui/Header/Header.jsx

@@ -15,7 +15,7 @@ import burgerIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/asse
 import HeaderSearchPopUp from './HeaderSearchPopUp';
 import HeaderMenuPopUp from './HeaderMenuPopUp';
 import PropTypes from 'prop-types';
-
+import _ from 'lodash';
 import { isInternalURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
@@ -25,7 +25,11 @@ Header.propTypes = {
 };
 
 function Header({ children }) {
-  return <div className="eea header">{children}</div>;
+  return (
+    <header className="eea header" aria-label={'Site'}>
+      {children}
+    </header>
+  );
 }
 
 const TopHeader = ({ children }) => (
@@ -44,15 +48,15 @@ const onKeyDownHandler = (event) => {
   if (event.key === 'Enter') {
     event.preventDefault();
     event.target.click();
-    //event.target.focus();
   }
 };
 
 const TopDropdownMenu = ({
   children,
+  ariaLabel,
   className,
+  classNameHeader,
   icon,
-  hasLanguageDropdown = false,
   id,
   tabletText,
   mobileText,
@@ -63,45 +67,38 @@ const TopDropdownMenu = ({
   const isMobile = viewportWidth < 767;
 
   const Component = ({ mobileText }) => {
+    const headerText = mobileText || text;
+    const label = ariaLabel || headerText;
+    const dropdownRef = React.useRef(null);
+
     return (
       <>
-        {children.props['aria-label'] === 'language switcher' ? (
-          hasLanguageDropdown && (
-            <Dropdown
-              id={id}
-              className={className}
-              text={mobileText || text}
-              icon={icon || 'chevron down'}
-              aria-label="dropdown"
-              role="dropdown"
-              lazyLoad
-              closeOnChange={true}
-              closeOnBlur={false}
-              closeOnEscape={true}
-              openOnFocus={false}
-              onKeyDown={onKeyDownHandler}
-            >
-              <Dropdown.Menu role="option">{children}</Dropdown.Menu>
-            </Dropdown>
-          )
-        ) : (
-          <Dropdown
-            id={id}
-            className={className}
-            text={mobileText || text}
-            icon={icon || 'chevron down'}
-            role="dropdown"
-            aria-label="dropdown"
-            lazyLoad
-            closeOnChange={true}
-            closeOnBlur={false}
-            closeOnEscape={true}
-            openOnFocus={false}
-            onKeyDown={onKeyDownHandler}
-          >
-            <Dropdown.Menu role="option">{children}</Dropdown.Menu>
-          </Dropdown>
-        )}
+        <Dropdown
+          id={id}
+          className={className}
+          text={() => (
+            <div className={`divider text ${classNameHeader}`}>
+              {headerText}
+            </div>
+          )}
+          ref={dropdownRef}
+          icon={icon || 'chevron down'}
+          aria-label={label}
+          closeOnChange={true}
+          closeOnBlur={false}
+          closeOnEscape={true}
+          openOnFocus={true}
+          onBlur={(e) => {
+            const dropdown = dropdownRef.current;
+            const ref = dropdown.ref.current;
+            if (e.target !== ref && !ref.contains(e.relatedTarget)) {
+              dropdown.close();
+            }
+          }}
+          onKeyDown={onKeyDownHandler}
+        >
+          <Dropdown.Menu role="option">{children}</Dropdown.Menu>
+        </Dropdown>
       </>
     );
   };
@@ -288,7 +285,7 @@ const Main = ({
       className={`main bar ${transparency ? 'transparency' : ''}`}
       ref={node}
     >
-      <Container>
+      <Container className={'main-bar-container'}>
         <Grid>
           <Grid.Column mobile={8} tablet={8} computer={4}>
             {logo}
@@ -296,52 +293,57 @@ const Main = ({
           <Grid.Column mobile={4} tablet={4} computer={8}>
             <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
               {menuItems && (
-                <ul
-                  className="ui text eea-main-menu tablet or lower hidden menu"
-                  ref={desktopMenuRef}
-                  id={'navigation'}
-                >
-                  {menuItems.map((item) => (
-                    <Menu.Item
-                      name={item['@id'] || item.url}
-                      key={item['@id'] || item.url}
-                      as={'li'}
-                      active={
-                        activeItem.indexOf(item['@id']) !== -1 ||
-                        activeItem.indexOf(item.url) !== -1
-                      }
-                    >
-                      {renderGlobalMenuItem(item, {
-                        onClick: menuOnClick,
-                      })}
-                    </Menu.Item>
-                  ))}
-                </ul>
+                <nav aria-label={'Main'}>
+                  <ul
+                    className="ui text eea-main-menu tablet or lower hidden menu"
+                    ref={desktopMenuRef}
+                    id={'navigation'}
+                  >
+                    {menuItems.map((item) => (
+                      <Menu.Item
+                        name={item['@id'] || item.url}
+                        key={item['@id'] || item.url}
+                        as={'li'}
+                        active={
+                          activeItem.indexOf(item['@id']) !== -1 ||
+                          activeItem.indexOf(item.url) !== -1
+                        }
+                        aria-expanded={
+                          activeItem.indexOf(item['@id']) !== -1 ||
+                          activeItem.indexOf(item.url) !== -1
+                        }
+                      >
+                        {renderGlobalMenuItem(item, {
+                          onClick: menuOnClick,
+                        })}
+                      </Menu.Item>
+                    ))}
+                  </ul>
+                </nav>
               )}
               {!hideSearch && (
                 <button
                   className="search-action"
                   onClick={searchOnClick}
-                  tabIndex="0"
-                  aria-pressed="false"
-                  aria-haspopup="true"
+                  aria-expanded={searchIsActive}
                   ref={searchButtonRef}
                 >
                   {/* <Icon name={!state.activeSearch ? 'search' : 'close'} /> */}
                   <Image
                     src={!searchIsActive ? `${searchIcon}` : `${closeIcon}`}
-                    alt="search button open/close"
+                    alt="Global search"
                   />
                 </button>
               )}
               <Header.BurgerAction
                 className={`mobile ${burger}`}
                 onClick={mobileBurgerOnClick}
+                aria-expanded={menuIsActive}
                 ref={mobileMenuBurgerRef}
               >
                 <Image
                   src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
-                  alt="menu icon open/close"
+                  alt="Menu navigation"
                 />
               </Header.BurgerAction>
             </div>
@@ -374,9 +376,7 @@ const BurgerAction = React.forwardRef((props, ref) => (
   <button
     ref={ref}
     className={`burger-action ${props.className}`}
-    tabIndex="0"
-    aria-pressed="false"
-    aria-haspopup="true"
+    {..._.omit(props, ['onClick', 'children', 'className', 'ref'])}
     onClick={props.onClick}
   >
     {props.children}

package/src/ui/Header/Header.stories.js

@@ -58,16 +58,20 @@ const logoProps = {
 };
 
 const links = [
-  { title: 'EEA Main Portal', href: '/#' },
-  { title: 'Biodiversity Information System for Europe', href: '/#' },
-  { title: 'Climate Adaptation Platform', href: '/#' },
-  { title: 'Copernicus in situ component', href: '/#' },
-  { title: 'Copernicus land monitoring', href: '/#' },
+  { title: 'European Environment Agency website', href: '/#' },
+  { title: 'WISE marine - Marine information system for Europe', href: '/#' },
+  {
+    title: 'WISE freshwater - Freshwater information system for Europe',
+    href: '/#',
+  },
+  { title: 'BISE - Biodiversity information system for Europe', href: '/#' },
+  { title: 'FISE - Forest information system for Europe', href: '/#' },
+  { title: 'European Climate and health observatory', href: '/#' },
+  { title: 'ClimateADAPT', href: '/#' },
   { title: 'European Industrial Emissions Portal', href: '/#' },
-  { title: 'Forest Information System for Europe', href: '/#' },
-  { title: 'Information Platform for Chemical Monitoring', href: '/#' },
-  { title: 'Marine Water Information System for Europe', href: '/#' },
-  { title: 'Fresh Water Information System for Europe', href: '/#' },
+  { title: 'Climate and Energy in the EU', href: '/#' },
+  { title: 'Copernicus Land Monitoring Service', href: '/#' },
+  { title: 'Copernicus InSitu', href: '/#' },
 ];
 
 const languages = [
@@ -1234,7 +1238,7 @@ const Template = (args) => {
       <Header>
         <Header.TopHeader>
           <Header.TopItem className="official-union">
-            <Image src={eeaFlag} alt="eea flag"></Image>
+            <Image src={eeaFlag} alt="European Union flag"></Image>
             <Header.TopDropdownMenu
               text="An official website of the European Union | How do you know?"
               tabletText="An official website of the European Union"
@@ -1242,6 +1246,7 @@ const Template = (args) => {
               icon="chevron down"
               aria-label="dropdown"
               className=""
+              classNameHeader="mobile-sr-only"
               viewportWidth={viewportWidth}
             >
               <div
@@ -1276,7 +1281,7 @@ const Template = (args) => {
               mobileText={mobileLinksMenuTitle}
               viewportWidth={viewportWidth}
             >
-              <div className="wrapper">
+              <div className="wrapper" tabIndex={0} role={'presentation'}>
                 {links.map((item, index) => (
                   <Dropdown.Item key={index}>
                     <a
@@ -1293,47 +1298,49 @@ const Template = (args) => {
             </Header.TopDropdownMenu>
           </Header.TopItem>
 
-          <Header.TopDropdownMenu
-            id="language-switcher"
-            hasLanguageDropdown={hasLanguageDropdown}
-            className="item"
-            text={`${language.toUpperCase()}`}
-            mobileText={`${language.toUpperCase()}`}
-            icon={
-              <Image
-                role="option"
-                src={globeIcon}
-                alt="language dropdown globe icon"
-              ></Image>
-            }
-            viewportWidth={viewportWidth}
-          >
-            <ul
-              className="wrapper language-list"
-              role="listbox"
-              aria-label="language switcher"
+          {hasLanguageDropdown && (
+            <Header.TopDropdownMenu
+              id="language-switcher"
+              className="item"
+              ariaLabel={'language switcher'}
+              text={`${language.toUpperCase()}`}
+              mobileText={`${language.toUpperCase()}`}
+              icon={
+                <Image
+                  role="option"
+                  src={globeIcon}
+                  alt="language dropdown globe icon"
+                ></Image>
+              }
+              viewportWidth={viewportWidth}
             >
-              {languages.map((item, index) => (
-                <Dropdown.Item
-                  as="li"
-                  key={index}
-                  text={
-                    <a
-                      href={'/' + item.code}
-                      onClick={() => setLanguage(item.code)}
-                      tabIndex={0}
-                      className={'language-link'}
-                    >
-                      {item.name}
-                      <span className="country-code">
-                        {item.code.toUpperCase()}
-                      </span>
-                    </a>
-                  }
-                ></Dropdown.Item>
-              ))}
-            </ul>
-          </Header.TopDropdownMenu>
+              <ul
+                className="wrapper language-list"
+                role="listbox"
+                aria-label="language switcher"
+              >
+                {languages.map((item, index) => (
+                  <Dropdown.Item
+                    as="li"
+                    key={index}
+                    text={
+                      <a
+                        href={'/' + item.code}
+                        onClick={() => setLanguage(item.code)}
+                        tabIndex={0}
+                        className={'language-link'}
+                      >
+                        {item.name}
+                        <span className="country-code">
+                          {item.code.toUpperCase()}
+                        </span>
+                      </a>
+                    }
+                  ></Dropdown.Item>
+                ))}
+              </ul>
+            </Header.TopDropdownMenu>
+          )}
         </Header.TopHeader>
         <Header.Main
           transparency={args.transparency}