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

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

@@ -1246,6 +1246,7 @@ const Template = (args) => {
               icon="chevron down"
               aria-label="dropdown"
               className=""
+              classNameHeader="mobile-sr-only"
               viewportWidth={viewportWidth}
             >
               <div
@@ -1280,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
@@ -1297,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}

package/src/ui/Header/Header.test.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router-dom';
 import Header from './Header';
@@ -29,10 +31,7 @@ describe('Header component', () => {
             <p>Test</p>
           </Header.TopItem>
           <Header.TopItem>
-            <Header.TopDropdownMenu
-              hasLanguageDropdown={true}
-              viewportWidth={1000}
-            >
+            <Header.TopDropdownMenu viewportWidth={1000}>
               <div aria-label="language switcher">Language Switcher</div>
             </Header.TopDropdownMenu>
           </Header.TopItem>
@@ -290,4 +289,103 @@ describe('Header component', () => {
       code: 'Enter',
     });
   });
+
+  test('TopDropdownMenu renders without crashing', () => {
+    render(<Header.TopDropdownMenu text="Desktop" />);
+    const dropdownMenu = screen.getByText('Desktop');
+    expect(dropdownMenu).toBeInTheDocument();
+  });
+
+  test('TopDropdownMenu renders the correct text based on viewportWidth', () => {
+    render(
+      <Header.TopDropdownMenu
+        text="Desktop"
+        mobileText="Mobile"
+        viewportWidth={500}
+      />,
+    );
+    expect(screen.getByText('Mobile')).toBeInTheDocument();
+
+    render(
+      <Header.TopDropdownMenu
+        text="Desktop"
+        mobileText="Mobile"
+        viewportWidth={1200}
+      />,
+    );
+    expect(screen.getByText('Desktop')).toBeInTheDocument();
+  });
+
+  test('TopDropdownMenu opens dropdown menu when clicked, closed on escape', () => {
+    render(<Header.TopDropdownMenu text={'Desktop'} />);
+    const dropdownMenu = screen.getByText('Desktop');
+    fireEvent.click(dropdownMenu);
+    const dropdownItems = screen.getByRole('option');
+    expect(dropdownItems).toBeVisible();
+
+    fireEvent.keyDown(screen.getByText('Desktop'), {
+      key: 'Escape',
+      code: 'Escape',
+    });
+  });
+  test('renders dropdown text and checks for visibility of options on click', () => {
+    // Render the component
+    render(
+      <div className="wrapper">
+        <Header.TopDropdownMenu
+          text="Dropdown"
+          tabletText="Tablet Dropdown"
+          mobileText="Mobile Dropdown"
+        >
+          <a href="/" data-testid="option1">
+            Option 1
+          </a>
+        </Header.TopDropdownMenu>
+        <a href="/" data-testid="option2">
+          Option 2
+        </a>
+      </div>,
+    );
+
+    const dropdown = screen.getByRole('listbox');
+
+    // Find the dropdown text and options
+    const dropdownText = screen.getByText('Dropdown');
+
+    // Initially, options should not be visible
+    expect(dropdown).toHaveAttribute('aria-expanded', 'false');
+
+    // Simulate click on the dropdown text
+    fireEvent.click(dropdownText);
+
+    // After clicking, options should be visible
+    expect(dropdown).toHaveAttribute('aria-expanded', 'true');
+
+    // Simulate Escape key press to trigger onBlur
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+
+    // After Escape key press, options should not be visible
+    expect(dropdown).toHaveAttribute('aria-expanded', 'false');
+
+    // Simulate click on the dropdown text
+    // fireEvent.click(dropdownText);
+
+    // Click on document to trigger onBlur
+    // fireEvent.click(document);
+
+    // Hit Enter key on the dropdown text
+    // fireEvent.keyDown(dropdownText, { key: 'Enter', code: 'Enter' });
+
+    // Tab outside of the dropdown
+    fireEvent.keyDown(dropdownText, { key: 'Tab', code: 'Tab' });
+    fireEvent.keyDown(dropdownText, { key: 'Enter', code: 'Enter' });
+
+    expect(dropdown).toHaveAttribute('aria-expanded', 'true');
+
+    // Simulate Escape key press to trigger onBlur
+    fireEvent.keyDown(document, { key: 'Escape', code: 'Escape' });
+
+    // Call onBlur on the dropdown text
+    fireEvent.blur(dropdownText);
+  });
 });

package/src/ui/Header/HeaderMenuPopUp.js

@@ -202,6 +202,7 @@ const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
                 panels={firstLevelPanels}
                 key={index}
                 defaultActiveIndex={defaultIndex === index ? 0 : -1}
+                className={'ui'}
               />
             );
           })}
@@ -287,9 +288,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
         aria-expanded={activeIndex === index}
         as="button"
         onClick={() => {
-          if (activeIndex === index) {
-            setActiveIndex(-1);
-          } else setActiveIndex(index);
+          setActiveIndex(activeIndex === index ? -1 : index);
         }}
       >
         {element.title}

package/src/ui/InpageNavigation/InpageNavigation.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Container, Button, Icon } from 'semantic-ui-react';
+import { debounce } from 'lodash';
 
 class InpageNavigation extends Component {
   constructor(props) {
@@ -22,7 +23,10 @@ class InpageNavigation extends Component {
   };
 
   componentDidMount() {
-    window.addEventListener('scroll', this.handleInpageNavigationVisibility);
+    window.addEventListener(
+      'scroll',
+      debounce(this.handleInpageNavigationVisibility, 250),
+    );
   }
 
   componentWillUnmount() {

package/src/ui/Item/Item.stories.test.js

@@ -19,7 +19,7 @@ describe('DefaultGroup Component', () => {
 });
 
 describe('DefaultItem Component', () => {
-  it('renders correclty', () => {
+  it('renders correctly', () => {
     const { container } = render(<DefaultItem {...DefaultItem.args} />);
     expect(container.querySelector('.header')).toBeInTheDocument();
     expect(container.querySelector('.meta')).toBeInTheDocument();
@@ -29,7 +29,7 @@ describe('DefaultItem Component', () => {
 });
 
 describe('Default Component', () => {
-  it('renders correclty', () => {
+  it('renders correctly', () => {
     const { container } = render(<Default {...Default.args} />);
     expect(container.querySelector('.header')).toBeInTheDocument();
     expect(container.querySelector('.meta')).toBeInTheDocument();

package/src/ui/Item/ItemGroupWithIcons.stories.js

@@ -133,7 +133,12 @@ function ItemGroup({
     <Container>
       <Grid>
         <Grid.Row>
-          <Grid.Column mobile={12} tablet={6} computer={6}>
+          <Grid.Column
+            mobile={12}
+            tablet={6}
+            computer={6}
+            className={'column-blocks-wrapper'}
+          >
             <Item.Group unstackable className="row">
               {ColumnLeft.map((item) => (
                 <SingleItem
@@ -148,7 +153,12 @@ function ItemGroup({
               ))}
             </Item.Group>
           </Grid.Column>
-          <Grid.Column mobile={12} tablet={6} computer={6}>
+          <Grid.Column
+            mobile={12}
+            tablet={6}
+            computer={6}
+            className={'column-blocks-wrapper'}
+          >
             <Item.Group unstackable className="row">
               {ColumnRight.map((item) => (
                 <SingleItem
@@ -265,42 +275,42 @@ FlexGroup.args = {
       imageUrl: GlobeEco,
       icon: 'ri-earth-line',
       description:
-        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
+        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data. ',
     },
     {
       childKey: 1,
-      imageUrl: Sustainable,
-      icon: 'ri-leaf-line',
+      imageUrl: Network,
+      icon: 'ri-pin-distance-line',
       description:
-        'Supply input on solutions to the sustainability challenges of today – and tomorrow.  ',
+        'Build stronger networks and partnerships with state and regional governments and organisations. This is an example of an item having bigger description text. ',
     },
     {
       childKey: 2,
-      imageUrl: DataAnalytics,
-      icon: 'ri-pie-chart-line',
+      imageUrl: Sustainable,
+      icon: 'ri-leaf-line',
       description:
-        'This is an exmple of an item having bigger description text. Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
+        'Supply input on solutions to the sustainability challenges of today – and tomorrow. This is an example of an item having bigger description text.  ',
     },
     {
       childKey: 3,
-      imageUrl: Network,
-      icon: 'ri-pin-distance-line',
+      imageUrl: Knowledge,
+      icon: 'ri-line-chart-line',
       description:
-        'Build stronger networks and partnerships with state and regional governments and organisations.',
+        'Strengthen the EU’s knowledge capacity and help secure the resources needed to create a sustainable Europe.',
     },
     {
       childKey: 4,
-      imageUrl: GlobeEco,
-      icon: 'ri-earth-line',
+      imageUrl: DataAnalytics,
+      icon: 'ri-pie-chart-line',
       description:
-        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
+        'Leverage the data and technology to support the EU’s decision-making processes concerning the environment and climate',
     },
     {
       childKey: 5,
-      imageUrl: Knowledge,
-      icon: 'ri-line-chart-line',
+      imageUrl: GlobeEco,
+      icon: 'ri-earth-line',
       description:
-        'Strengthen the EU’s knowledge capacity and help secure the resources needed to create a sustainable Europe.',
+        'Support Europe’s transition to a sustainable future with evidence-based knowledge and data.',
     },
   ],
 };

package/src/ui/Message/Message.stories.js

@@ -114,15 +114,15 @@ Warning.parameters = {
   },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  header: 'Error header',
-  content: 'This is an Error Message',
+export const ErrorMessage = Template.bind({});
+ErrorMessage.args = {
+  header: 'ErrorMessage header',
+  content: 'This is an ErrorMessage Message',
   icon: 'exclamation circle',
   error: true,
   size: 'small',
 };
-Error.argTypes = {
+ErrorMessage.argTypes = {
   error: {
     description: 'message may be formatted to display an error message',
     table: {
@@ -135,7 +135,7 @@ Error.argTypes = {
     },
   },
 };
-Error.parameters = {
+ErrorMessage.parameters = {
   controls: {
     exclude: ['icon', 'error'],
     hideNoControlsWarning: true,

package/src/ui/Message/Message.stories.test.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import { Info, Error, Warning, Success, Default } from './Message.stories';
+import {
+  Info,
+  ErrorMessage,
+  Warning,
+  Success,
+  Default,
+} from './Message.stories';
 import '@testing-library/jest-dom/extend-expect';
 
 describe('Info component', () => {
@@ -11,11 +17,11 @@ describe('Info component', () => {
   });
 });
 
-describe('Error component', () => {
+describe('ErrorMessage component', () => {
   it('renders a Message component', () => {
-    const { getByText } = render(<Error {...Error.args} />);
-    expect(getByText(Error.args.header)).toBeInTheDocument();
-    expect(getByText(Error.args.content)).toBeInTheDocument();
+    const { getByText } = render(<ErrorMessage {...ErrorMessage.args} />);
+    expect(getByText(ErrorMessage.args.header)).toBeInTheDocument();
+    expect(getByText(ErrorMessage.args.content)).toBeInTheDocument();
   });
 });
 

package/src/ui/TagList/TagList.stories.jsx

@@ -45,7 +45,7 @@ export const List = (args) => (
       <TagList.Title>{args.title}</TagList.Title>
       <TagList.Content>
         {args.tags.map((tag, index) => [
-          <Tag className={tag.class} href={tag.href} key={index}>
+          <Tag href={tag.href} key={index}>
             {tag.category}
           </Tag>,
         ])}