@eeacms/volto-eea-design-system 0.6.5 → 0.7.0

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Transition } from 'semantic-ui-react';
 import {
   Container,
   Divider,
@@ -11,7 +12,7 @@ import {
 import { Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-const createColumns = (item, length) => {
+const createColumns = (item, length, renderMenuItem) => {
   let subArrays = [];
   let size = length;
   for (let i = 0; i < item.items.length; i += size) {
@@ -22,9 +23,13 @@ const createColumns = (item, length) => {
     <Grid.Column key={index}>
       <List>
         {subArray.map((arrayItem, idx) => (
-          <Link role="listitem" className="item" to={arrayItem.url} key={idx}>
-            {arrayItem.title}
-          </Link>
+          <React.Fragment key={idx}>
+            {renderMenuItem(arrayItem, {
+              className: 'item',
+              role: 'listitem',
+              key: idx,
+            })}
+          </React.Fragment>
         ))}
       </List>
     </Grid.Column>
@@ -33,42 +38,57 @@ const createColumns = (item, length) => {
   return column;
 };
 
-const ItemGrid = ({ item, columns, length }) => (
+const ItemGrid = ({ item, columns, length, renderMenuItem }) => (
   <>
-    <Link className="sub-title" to={item.url}>
-      {item.title}
-    </Link>
-    <Grid columns={columns}>{createColumns(item, length)}</Grid>
+    {renderMenuItem(item, { className: 'sub-title' })}
+    <Grid columns={columns}>{createColumns(item, length, renderMenuItem)}</Grid>
   </>
 );
 
-const Item = ({ item, icon = false, iconName }) => (
+const Item = ({ item, icon = false, iconName, renderMenuItem }) => (
   <>
-    <Link className="sub-title" to={item.url}>
-      {item.title}
-    </Link>
+    {renderMenuItem(item, { className: 'sub-title' })}
     <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>
+        <React.Fragment key={index}>
+          {renderMenuItem(
+            listItem,
+            {
+              className: 'item',
+              key: index,
+              role: 'listitem',
+            },
+            { children: icon && <Icon className={iconName} /> },
+          )}
+        </React.Fragment>
       ))}
     </List>
   </>
 );
 
-const Topics = ({ menuItem }) => (
+const Topics = ({ menuItem, renderMenuItem }) => (
   <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" />
+            <Item
+              item={section}
+              icon={true}
+              iconName="ri-leaf-line"
+              key={index}
+              renderMenuItem={renderMenuItem}
+            />
           </Grid.Column>
         ) : (
           <Grid.Column width={9} key={index}>
-            <ItemGrid item={section} columns={4} length={10} />
+            <ItemGrid
+              item={section}
+              columns={4}
+              length={10}
+              key={index}
+              renderMenuItem={renderMenuItem}
+            />
           </Grid.Column>
         )}
       </React.Fragment>
@@ -76,13 +96,18 @@ const Topics = ({ menuItem }) => (
   </Grid>
 );
 
-const Countries = ({ menuItem }) => (
+const Countries = ({ menuItem, renderMenuItem }) => (
   <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} />
+            <ItemGrid
+              item={section}
+              columns={5}
+              length={7}
+              renderMenuItem={renderMenuItem}
+            />
           )}
         </React.Fragment>
       ))}
@@ -93,7 +118,12 @@ const Countries = ({ menuItem }) => (
           <React.Fragment key={index}>
             {section.title !== 'EEA member countries' && (
               <Grid.Column>
-                <ItemGrid item={section} columns={2} length={3} />
+                <ItemGrid
+                  item={section}
+                  columns={2}
+                  length={3}
+                  renderMenuItem={renderMenuItem}
+                />
               </Grid.Column>
             )}
           </React.Fragment>
@@ -103,46 +133,62 @@ const Countries = ({ menuItem }) => (
   </Grid>
 );
 
-const StandardMegaMenuGrid = ({ menuItem }) => (
+const StandardMegaMenuGrid = ({ menuItem, renderMenuItem }) => (
   <Grid columns={4}>
     {menuItem.items.map((section, index) => (
       <Grid.Column key={index}>
-        <Item item={section} />
+        <Item item={section} renderMenuItem={renderMenuItem} />
       </Grid.Column>
     ))}
   </Grid>
 );
 
-const FirstLevelContent = ({ element }) => {
+const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
   const topics = element.title === 'Topics' ? true : false;
+  let defaultIndex = -1;
 
   const firstLevelPanels = [];
   let content;
   if (!topics) {
     element.items.forEach((item, index) => {
       let x = {};
-      x.key = item['@id'];
+      x.key = item['@id'] || item['url'];
+      if (pathName.indexOf(item.url) !== -1) {
+        defaultIndex = index;
+      }
       x.title = (
-        <Accordion.Title key={`title=${index}`}>
+        <Accordion.Title key={`title=${index}`} index={index}>
           {item.title}
           <Icon className="ri-arrow-down-s-line" size="small" />
         </Accordion.Title>
       );
       x.content = (
         <Accordion.Content key={index}>
-          <SecondLevelContent element={item} />
+          {renderMenuItem(item, { className: 'item title-item' })}
+          <SecondLevelContent element={item} renderMenuItem={renderMenuItem} />
         </Accordion.Content>
       );
       firstLevelPanels.push(x);
     });
-    content = <Accordion.Accordion panels={firstLevelPanels} />;
+    content = (
+      <Accordion.Accordion
+        defaultActiveIndex={defaultIndex}
+        panels={firstLevelPanels}
+      />
+    );
   } else {
-    content = <SecondLevelContent element={element} topics={true} />;
+    content = (
+      <SecondLevelContent
+        element={element}
+        topics={true}
+        renderMenuItem={renderMenuItem}
+      />
+    );
   }
   return <>{content}</>;
 };
 
-const SecondLevelContent = ({ element, topics = false }) => {
+const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
   let content;
   if (topics) {
     const atAGlance = element.items.find(
@@ -152,9 +198,13 @@ const SecondLevelContent = ({ element, topics = false }) => {
       <List>
         {atAGlance &&
           atAGlance.items.map((item, index) => (
-            <Link role="listitem" className="item" to={item.url} key={index}>
-              {item.title}
-            </Link>
+            <React.Fragment key={index}>
+              {renderMenuItem(item, {
+                key: index,
+                role: 'listitem',
+                className: 'item',
+              })}
+            </React.Fragment>
           ))}
         <Link
           role="listitem"
@@ -170,9 +220,13 @@ const SecondLevelContent = ({ element, topics = false }) => {
     content = (
       <List>
         {element.items.map((item, index) => (
-          <Link role="listitem" className="item" to={item.url} key={index}>
-            {item.title}
-          </Link>
+          <React.Fragment key={index}>
+            {renderMenuItem(item, {
+              key: index,
+              role: 'listitem',
+              className: 'item',
+            })}
+          </React.Fragment>
         ))}
       </List>
     );
@@ -181,29 +235,47 @@ const SecondLevelContent = ({ element, topics = false }) => {
   return <>{content}</>;
 };
 
-const NestedAccordion = ({ menuItems }) => {
+const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
+  let defaultIndex = -1;
   const rootPanels = [];
   menuItems.forEach((element, index) => {
     let x = {};
     x.key = index;
+
+    if (pathName.indexOf(element.url) !== -1) {
+      defaultIndex = index;
+    }
     x.title = (
-      <Accordion.Title key={`title-${index}`}>
+      <Accordion.Title key={`title-${index}`} index={index}>
         {element.title}
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>
     );
     x.content = (
       <Accordion.Content key={index}>
-        <FirstLevelContent element={element} />
+        {renderMenuItem(element, { className: 'item' })}
+        <FirstLevelContent
+          element={element}
+          renderMenuItem={renderMenuItem}
+          pathName={pathName}
+        />
       </Accordion.Content>
     );
     rootPanels.push(x);
   });
 
-  return <Accordion panels={rootPanels} />;
+  return <Accordion defaultActiveIndex={defaultIndex} panels={rootPanels} />;
 };
 
-function HeaderMenuPopUp({ menuItems, onClose, triggerRefs, activeItem }) {
+function HeaderMenuPopUp({
+  menuItems,
+  renderMenuItem,
+  pathName,
+  onClose,
+  triggerRefs,
+  activeItem,
+  visible,
+}) {
   const nodeRef = React.useRef();
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
 
@@ -212,29 +284,38 @@ function HeaderMenuPopUp({ menuItems, onClose, triggerRefs, activeItem }) {
   );
 
   return (
-    <div id="mega-menu" ref={nodeRef}>
-      <Container>
-        {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} />
-            )}
+    <Transition visible={visible} animation="slide down" duration={300}>
+      <div id="mega-menu" ref={nodeRef}>
+        <Container>
+          {menuItem && (
+            <div className="menu-content tablet hidden mobile hidden">
+              <h3 className="title">{renderMenuItem(menuItem)}</h3>
+              <Divider fitted />
+              {menuItem.title === 'Topics' ? (
+                <Topics menuItem={menuItem} renderMenuItem={renderMenuItem} />
+              ) : menuItem.title === 'Countries' ? (
+                <Countries
+                  menuItem={menuItem}
+                  renderMenuItem={renderMenuItem}
+                />
+              ) : (
+                <StandardMegaMenuGrid
+                  menuItem={menuItem}
+                  renderMenuItem={renderMenuItem}
+                />
+              )}
+            </div>
+          )}
+          <div className="tablet only mobile only">
+            <NestedAccordion
+              menuItems={menuItems}
+              renderMenuItem={renderMenuItem}
+              pathName={pathName}
+            />
           </div>
-        )}
-
-        <div className="tablet only mobile only">
-          <NestedAccordion menuItems={menuItems} />
-        </div>
-      </Container>
-    </div>
+        </Container>
+      </div>
+    </Transition>
   );
 }
 

package/theme/theme.config

@@ -77,23 +77,38 @@
 @main        : 'eea';
 @custom      : 'eea';
 /* EEA Design system custom components */
-@blockquote  : 'eea';
-@quote   : 'eea';
-@banner      : 'eea';
-@timeline    : 'eea';
-@footer      : 'eea';
-@header      : 'eea';
-@tag        : 'eea';
+@blockquote       : 'eea';
+@pullquote        : 'eea';
+@banner           : 'eea';
+@timeline         : 'eea';
+@footer           : 'eea';
+@header           : 'eea';
+@tag              : 'eea';
+@tags             : 'eea';
+@tagList          : 'eea';
 @inpageNavigation : 'eea';
-@testimonial : 'eea';
-@avatarGrid  : 'eea';
-@keyContent  : 'eea';
+@contextNavigation : 'eea';
+@avatar           : 'eea';
+@divider          : 'eea';
+@testimonial      : 'eea';
+@avatarGrid       : 'eea';
+@keyContent       : 'eea';
 @publicationCard  : 'eea';
+@contentBox       : 'eea';
+@reverseCardGrid  : 'eea';
+@relatedContent   : 'eea';
+@share            : 'eea';
+@faqContent       : 'eea';
+@reportCard       : 'eea';
+@faqFilter        : 'eea';
+@contentAccordion : 'eea';
 @downloadLabeledIcon :'eea';
 @newTabLabeledIcon : 'eea';
 @labeledIconGroup : 'eea';
 @languageLabeledIcon  : 'eea';
-@relatedContent  : 'eea';
+@callout : 'eea';
+@quote   : 'eea';
+@hero    : 'eea';
 
 /*******************************
             Folders