@eeacms/volto-eea-design-system 0.4.3 → 0.5.0

package/src/ui/Header/Header.jsx

@@ -13,6 +13,12 @@ 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';
+
+Header.propTypes = {
+  transparency: PropTypes.bool,
+  inverted: PropTypes.bool,
+};
 
 function Header({ children }) {
   return <div className="eea header">{children}</div>;
@@ -39,7 +45,7 @@ const TopDropdownMenu = ({
   text,
   viewportWidth,
 }) => {
-  const isMobile = viewportWidth < 480;
+  const isMobile = viewportWidth < 767;
 
   const Component = ({ mobileText }) => (
     <Dropdown
@@ -57,14 +63,39 @@ const TopDropdownMenu = ({
   );
 };
 
+// disable sticky until it's more stable
+// const useScrollingUp = () => {
+//   let prevScroll;
+//
+//   if (process.browser) {
+//     prevScroll = window.pageYOffset;
+//   }
+//   const [scrollingUp, setScrollingUp] = React.useState(false);
+//   const handleScroll = () => {
+//     const currScroll = window.pageYOffset;
+//     const isScrolled = prevScroll > currScroll;
+//     setScrollingUp(isScrolled);
+//     prevScroll = currScroll;
+//   };
+//   React.useEffect(() => {
+//     window.addEventListener('scroll', handleScroll, { passive: true });
+//     return () => {
+//       window.removeEventListener('scroll', handleScroll, { passive: true });
+//     };
+//   });
+//   return scrollingUp;
+// };
+
 const Main = ({
   logo,
   menuItems,
   renderMenuItem,
   renderGlobalMenuItem,
   pathname,
+  transparency,
+  inverted,
 }) => {
-  const [activeItem, setActiveItem] = React.useState('');
+  const [activeItem, setActiveItem] = React.useState(pathname);
   const [menuIsActive, setMenuIsActive] = React.useState(false);
   const [searchIsActive, setSearchIsActive] = React.useState(false);
   const [burger, setBurger] = React.useState('');
@@ -73,15 +104,19 @@ const Main = ({
     setMenuIsActive(false);
     setSearchIsActive(false);
     setBurger('');
+    // remove active menu when we have no pathname which means we hit logo to go home
+    if (!pathname) {
+      setActiveItem('');
+    }
   }, [pathname]);
 
   const searchOnClick = (e, x) => {
     if (menuIsActive === true) {
       setBurger('');
       setMenuIsActive(false);
+      setActiveItem('');
     }
     setSearchIsActive(!searchIsActive);
-    setActiveItem('');
   };
 
   const mobileBurgerOnClick = () => {
@@ -95,49 +130,57 @@ const Main = ({
     } else {
       setBurger('');
       setMenuIsActive(false);
+      setActiveItem('');
     }
   };
 
-  const desktopBurgerOnClick = () => {
-    setMenuIsActive(false);
-    setActiveItem('');
-  };
-
   const menuOnClick = (e, item) => {
     if (searchIsActive) setSearchIsActive(false);
     setActiveItem(item['@id'] || item.url);
     setMenuIsActive(true);
   };
 
-  React.useEffect(() => {
-    if (searchIsActive || burger === 'open' || menuIsActive) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = 'unset';
-    }
-  }, [searchIsActive, burger, menuIsActive]);
+  // React.useEffect(() => {
+  //   if (searchIsActive || burger === 'open' || menuIsActive) {
+  //     document.body.style.overflow = 'hidden';
+  //   } else {
+  //     document.body.style.overflow = 'unset';
+  //   }
+  // }, [searchIsActive, burger, menuIsActive]);
 
   const node = React.useRef();
   const searchButtonRef = React.useRef();
-  const desktopMenuBurgerRef = React.useRef();
   const mobileMenuBurgerRef = React.useRef();
 
+  // disable sticky setting until feature is more stable
+  // const isScrollingUp = useScrollingUp();
+  // <div
+  // className={`main bar ${transparency ? 'transparency' : ''} ${
+  //     isScrollingUp ? 'sticky' : ''
+  // }`}
+  // >
   return (
-    <div className="main bar" ref={node}>
+    <div
+      className={`main bar ${transparency ? 'transparency' : ''}`}
+      ref={node}
+    >
       <Container>
         <Grid>
           <Grid.Column mobile={8} tablet={8} computer={4}>
             {logo}
           </Grid.Column>
           <Grid.Column mobile={4} tablet={4} computer={8}>
-            <div className="main-menu">
-              {!menuIsActive && menuItems && (
+            <div className={inverted ? 'main-menu inverted' : 'main-menu'}>
+              {menuItems && (
                 <Menu className="eea-main-menu tablet or lower hidden" text>
                   {menuItems.map((item) => (
                     <Menu.Item
                       name={item['@id'] || item.url}
-                      active={activeItem === item.key}
                       key={item['@id'] || item.url}
+                      active={
+                        activeItem.indexOf(item['@id']) !== -1 ||
+                        activeItem.indexOf(item.url) !== -1
+                      }
                     >
                       {renderGlobalMenuItem(item, {
                         onClick: menuOnClick,
@@ -146,16 +189,6 @@ const Main = ({
                   ))}
                 </Menu>
               )}
-              {menuIsActive && (
-                <Header.BurgerAction
-                  className="desktop"
-                  onClick={desktopBurgerOnClick}
-                  ref={desktopMenuBurgerRef}
-                >
-                  {/* <Icon name="close" /> */}
-                  <Image src={closeIcon} alt="menu close icon" />
-                </Header.BurgerAction>
-              )}
               <div
                 className="search-action"
                 onClick={searchOnClick}
@@ -173,9 +206,6 @@ const Main = ({
                 onClick={mobileBurgerOnClick}
                 ref={mobileMenuBurgerRef}
               >
-                {/* <Icon
-                  name={this.state.burger === 'open' ? 'close' : 'bars'}
-                ></Icon> */}
                 <Image
                   src={burger === 'open' ? `${closeIcon}` : `${burgerIcon}`}
                   alt="menu icon open/close"
@@ -197,7 +227,7 @@ const Main = ({
           activeItem={activeItem}
           menuItems={menuItems}
           onClose={mobileBurgerOnClick}
-          triggerRefs={[mobileMenuBurgerRef, desktopMenuBurgerRef]}
+          triggerRefs={[mobileMenuBurgerRef]}
         />
       )}
     </div>

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,76 +1,237 @@
 import React from 'react';
-import { Container } from 'semantic-ui-react';
-import cx from 'classnames';
+import {
+  Container,
+  Divider,
+  Grid,
+  List,
+  Icon,
+  Accordion,
+} from 'semantic-ui-react';
 
+import { Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-const levels = ['first', 'second', 'third'];
+const createColumns = (item, length) => {
+  let subArrays = [];
+  let size = length;
+  for (let i = 0; i < item.items.length; i += size) {
+    subArrays.push(item.items.slice(i, i + size));
+  }
 
-const Item = ({ item, renderMenuItem }) => (
+  const column = subArrays.map((subArray, index) => (
+    <Grid.Column key={index}>
+      <List>
+        {subArray.map((arrayItem, idx) => (
+          <Link role="listitem" className="item" to={arrayItem.url} key={idx}>
+            {arrayItem.title}
+          </Link>
+        ))}
+      </List>
+    </Grid.Column>
+  ));
+
+  return column;
+};
+
+const ItemGrid = ({ item, columns, length }) => (
+  <>
+    <Link className="sub-title" to={item.url}>
+      {item.title}
+    </Link>
+    <Grid columns={columns}>{createColumns(item, length)}</Grid>
+  </>
+);
+
+const Item = ({ item, icon = false, iconName }) => (
   <>
-    {item.items.length > 0 && (
-      <label htmlFor={`drop-${item['@id'] || item.url}`} className="toggle">
-        {item.title}
-      </label>
-    )}
-    {renderMenuItem(item)}
-    {item.items.length > 0 && (
-      <input type="checkbox" id={`drop-${item['@id'] || item.url}`} />
-    )}
+    <Link className="sub-title" to={item.url}>
+      {item.title}
+    </Link>
+    <List className="menu-list">
+      {item.items.map((listItem, index) => (
+        <Link role="listitem" className="item" to={listItem.url} key={index}>
+          {icon && <Icon className={iconName} />}
+          {listItem.title}
+        </Link>
+      ))}
+    </List>
   </>
 );
 
-const ItemsList = ({ items, renderMenuItem, level = 0, activeItem }) => (
-  <ul
-    className={cx(
-      level === 0 ? 'menu' : 'sub',
-      levels[level],
-      `level-${level}`,
-    )}
-  >
-    {items.map((item) => (
-      <li
-        key={item['@id'] || item.url}
-        className={cx({
-          hasSubMenu: item.items?.length > 0,
-          active: (item['@id'] || item.url) === activeItem,
-        })}
-      >
-        <Item item={item} renderMenuItem={renderMenuItem} />
-
-        {item.items.length > 0 && (
-          <ItemsList
-            items={item.items}
-            level={level + 1}
-            renderMenuItem={renderMenuItem}
-            activeItem={activeItem}
-          />
+const Topics = ({ menuItem }) => (
+  <Grid>
+    {menuItem.items.map((section, index) => (
+      <React.Fragment key={index}>
+        {section.title === 'At a glance' ? (
+          <Grid.Column width={3} id="at-a-glance">
+            <Item item={section} icon={true} iconName="ri-leaf-line" />
+          </Grid.Column>
+        ) : (
+          <Grid.Column width={9} key={index}>
+            <ItemGrid item={section} columns={4} length={10} />
+          </Grid.Column>
         )}
-      </li>
+      </React.Fragment>
+    ))}
+  </Grid>
+);
+
+const Countries = ({ menuItem }) => (
+  <Grid>
+    <Grid.Column width={8}>
+      {menuItem.items.map((section, index) => (
+        <React.Fragment key={index}>
+          {section.title === 'EEA member countries' && (
+            <ItemGrid item={section} columns={5} length={7} />
+          )}
+        </React.Fragment>
+      ))}
+    </Grid.Column>
+    <Grid.Column width={4}>
+      <Grid columns={1} className="nested-grid">
+        {menuItem.items.map((section, index) => (
+          <React.Fragment key={index}>
+            {section.title !== 'EEA member countries' && (
+              <Grid.Column>
+                <ItemGrid item={section} columns={2} length={3} />
+              </Grid.Column>
+            )}
+          </React.Fragment>
+        ))}
+      </Grid>
+    </Grid.Column>
+  </Grid>
+);
+
+const StandardMegaMenuGrid = ({ menuItem }) => (
+  <Grid columns={4}>
+    {menuItem.items.map((section, index) => (
+      <Grid.Column key={index}>
+        <Item item={section} />
+      </Grid.Column>
     ))}
-  </ul>
+  </Grid>
 );
 
-function HeaderMenuPopUp({
-  menuItems,
-  onClose,
-  triggerRefs,
-  renderMenuItem,
-  activeItem,
-}) {
+const FirstLevelContent = ({ element }) => {
+  const topics = element.title === 'Topics' ? true : false;
+
+  const firstLevelPanels = [];
+  let content;
+  if (!topics) {
+    element.items.forEach((item, index) => {
+      let x = {};
+      x.key = item['@id'];
+      x.title = (
+        <Accordion.Title key={`title=${index}`}>
+          {item.title}
+          <Icon className="ri-arrow-down-s-line" size="small" />
+        </Accordion.Title>
+      );
+      x.content = (
+        <Accordion.Content key={index}>
+          <SecondLevelContent element={item} />
+        </Accordion.Content>
+      );
+      firstLevelPanels.push(x);
+    });
+    content = <Accordion.Accordion panels={firstLevelPanels} />;
+  } else {
+    content = <SecondLevelContent element={element} topics={true} />;
+  }
+  return <>{content}</>;
+};
+
+const SecondLevelContent = ({ element, topics = false }) => {
+  let content;
+  if (topics) {
+    const atAGlance = element.items.find(
+      (element) => element.title === 'At a glance',
+    );
+    content = (
+      <List>
+        {atAGlance.items.map((item, index) => (
+          <Link role="listitem" className="item" to={item.url} key={index}>
+            {item.title}
+          </Link>
+        ))}
+        <Link
+          role="listitem"
+          className="item"
+          to={element.url}
+          key={element['@id']}
+        >
+          A-Z Topics
+        </Link>
+      </List>
+    );
+  } else {
+    content = (
+      <List>
+        {element.items.map((item, index) => (
+          <Link role="listitem" className="item" to={item.url} key={index}>
+            {item.title}
+          </Link>
+        ))}
+      </List>
+    );
+  }
+
+  return <>{content}</>;
+};
+
+const NestedAccordion = ({ menuItems }) => {
+  const rootPanels = [];
+  menuItems.forEach((element, index) => {
+    let x = {};
+    x.key = index;
+    x.title = (
+      <Accordion.Title key={`title-${index}`}>
+        {element.title}
+        <Icon className="ri-arrow-down-s-line" size="small" />
+      </Accordion.Title>
+    );
+    x.content = (
+      <Accordion.Content key={index}>
+        <FirstLevelContent element={element} />
+      </Accordion.Content>
+    );
+    rootPanels.push(x);
+  });
+
+  return <Accordion panels={rootPanels} />;
+};
+
+function HeaderMenuPopUp({ menuItems, onClose, triggerRefs, activeItem }) {
   const nodeRef = React.useRef();
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
+  const menuItem = menuItems.find(
+    (current) => current.url === activeItem || current['@id'] === activeItem,
+  );
+
   return (
     <div id="mega-menu" ref={nodeRef}>
       <Container>
-        <nav>
-          <ItemsList
-            items={menuItems}
-            renderMenuItem={renderMenuItem}
-            activeItem={activeItem}
-          />
-        </nav>
+        {menuItem && (
+          <div className="menu-content tablet hidden mobile hidden">
+            <h3 className="title">
+              <Link to={menuItem.url}>{menuItem.title}</Link>
+            </h3>
+            <Divider fitted />
+            {menuItem.title === 'Topics' ? (
+              <Topics menuItem={menuItem} />
+            ) : menuItem.title === 'Countries' ? (
+              <Countries menuItem={menuItem} />
+            ) : (
+              <StandardMegaMenuGrid menuItem={menuItem} />
+            )}
+          </div>
+        )}
+
+        <div className="tablet only mobile only">
+          <NestedAccordion menuItems={menuItems} />
+        </div>
       </Container>
     </div>
   );

package/src/ui/Header/HeaderSearchPopUp.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Input, Button, Icon } from 'semantic-ui-react';
+import { Container, Input } from 'semantic-ui-react';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
@@ -14,16 +14,16 @@ function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
         <div className="wrapper">
           <Input
             className="search"
-            icon="search"
+            icon={{ className: 'ri-search-line', link: true }}
             placeholder="Search..."
             fluid
           />
-          <div className="action">
+          {/* <div className="action">
             <Button icon labelPosition="left" className="search">
               <Icon name="search" />
               Advanced Search
             </Button>
-          </div>
+          </div> */}
         </div>
       </Container>
     </div>

package/src/ui/Hero/Hero.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+Hero.propTypes = {
+  image: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  fullHeight: PropTypes.bool,
+  alignContent: PropTypes.string,
+  textAlign: PropTypes.string,
+  metaAlign: PropTypes.string,
+  backgroundVariant: PropTypes.string,
+  quoted: PropTypes.bool,
+  textVariant: PropTypes.string,
+};
+
+function Hero({
+  image_url,
+  image,
+  fullWidth,
+  fullHeight,
+  alignContent,
+  backgroundVariant,
+  children,
+}) {
+  return (
+    // full width prop
+    <div
+      className={`${
+        fullWidth ? 'eea hero-block full-width' : 'eea hero-block'
+      } ${fullHeight ? 'full-height' : ''} color-bg-${backgroundVariant}`}
+    >
+      <div
+        className="hero-block-image"
+        style={image ? { backgroundImage: `url(${image_url})` } : {}}
+      >
+        <div
+          className={`hero-block-inner-wrapper d-flex ui container flex-items-${alignContent}`}
+        >
+          <div className="hero-block-body">{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Hero.Text = ({ quoted, textVariant, textAlign, children }) => (
+  <div className={`hero-block-text color-fg-${textVariant} text-${textAlign}`}>
+    <h2 className={`${quoted ? 'quoted' : ''}`}>{children}</h2>
+  </div>
+);
+Hero.Meta = ({ metaAlign, children }) => (
+  <div className={`hero-block-meta text-${metaAlign}`}>{children}</div>
+);
+
+export default Hero;