@eeacms/volto-eea-design-system 0.7.2 → 0.7.6

package/CHANGELOG.md

@@ -4,8 +4,45 @@ 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).
 
+#### [0.7.6](https://github.com/eea/volto-eea-design-system/compare/0.7.5...0.7.6)
+
+- Autobuild of docusaurus docs [`03b82a6`](https://github.com/eea/volto-eea-design-system/commit/03b82a6a3e20731865de424d6cbce827f64d9504)
+- change(footer): fix missing key warning from react dev [`77f72d5`](https://github.com/eea/volto-eea-design-system/commit/77f72d5bdc719805a6314058c741387ee7155d28)
+- Autobuild of docusaurus docs [`f6930f5`](https://github.com/eea/volto-eea-design-system/commit/f6930f57c7a0b63de20f0fad757c6f1409e43ca2)
+- change(footer): Footer updates 147837 #222 [`32fed23`](https://github.com/eea/volto-eea-design-system/commit/32fed231f1209caeddb18e0bb75d670f20bafb88)
+- change(footer): set actions before thematic section on mobile [`db25f96`](https://github.com/eea/volto-eea-design-system/commit/db25f966a214c94677192215181453e9d59ca957)
+- refactor(footer): initial redesign of main section [`8e85617`](https://github.com/eea/volto-eea-design-system/commit/8e85617157cdc31a7470acfcd72b85d8fadd1bce)
+- refactor(footer): restructure theme sites logo columns [`dcba45a`](https://github.com/eea/volto-eea-design-system/commit/dcba45a0bfd832c7d5d1e092db8ea4040eceda57)
+
+#### [0.7.5](https://github.com/eea/volto-eea-design-system/compare/0.7.3...0.7.5)
+
+> 11 August 2022
+
+- change(megamenu): mobile improvements with See all links, active elements and non accordion children #224 [`6767b99`](https://github.com/eea/volto-eea-design-system/commit/6767b99fea3925b35e9dede0a67ea90242e5e730)
+- Update package.json [`e21e00d`](https://github.com/eea/volto-eea-design-system/commit/e21e00dc1e0b54daef2c71311a9da709bc1f7e6d)
+- Autobuild of docusaurus docs [`ca7c756`](https://github.com/eea/volto-eea-design-system/commit/ca7c75680763219f0acdc4c91d348c4520de13f4)
+- change(megamenu): mobile menu improvements #223 [`b3cabfe`](https://github.com/eea/volto-eea-design-system/commit/b3cabfe3ddc42c2ea39ae20d01bb6fd0db478ecc)
+- change(megamenu): enable active border only for items not titles [`fb0b869`](https://github.com/eea/volto-eea-design-system/commit/fb0b8696dd73cbf3083c3006a7cff5a1901a6bac)
+- change(megamenu): removed icon from at a change menu items and they are no longer bold as requested [`043e772`](https://github.com/eea/volto-eea-design-system/commit/043e77219979711d2f25845c6811b546e791fbf7)
+- change(megamenu): mobile menu design tweaks as seen in latest figma [`26d74dc`](https://github.com/eea/volto-eea-design-system/commit/26d74dc063f0b3f8d541c714a10038d79145047e)
+- change(megamenu): handle default active sub accordion [`6192a99`](https://github.com/eea/volto-eea-design-system/commit/6192a9938b53522682953cb73d7ccfc6ef9c1aec)
+- change(megamenu): fixed key error warnings [`075bf01`](https://github.com/eea/volto-eea-design-system/commit/075bf0167554869e9fc2f4938c972112e4afa2f7)
+- change(megamenu): reset first level panels after each item pass [`175351b`](https://github.com/eea/volto-eea-design-system/commit/175351bdc9bab5c2d02b2717c24071ba62d4b924)
+- change(megamenu): render accordion only if children have children [`be63ce2`](https://github.com/eea/volto-eea-design-system/commit/be63ce2a8e240eac26eedeff0ca104813afbc6b3)
+
+#### [0.7.3](https://github.com/eea/volto-eea-design-system/compare/0.7.2...0.7.3)
+
+> 4 August 2022
+
+- Release [`#218`](https://github.com/eea/volto-eea-design-system/pull/218)
+- Autobuild of docusaurus docs [`93ddb4d`](https://github.com/eea/volto-eea-design-system/commit/93ddb4d3c856adc4a99ad3260671d7c78615bd74)
+- change(megamenu): added icon on mega menu header section [`d0ad4d8`](https://github.com/eea/volto-eea-design-system/commit/d0ad4d80fc4941e0cdbd8a2d81415387f86efc1c)
+
 #### [0.7.2](https://github.com/eea/volto-eea-design-system/compare/0.7.1...0.7.2)
 
+> 3 August 2022
+
+- Develop [`#217`](https://github.com/eea/volto-eea-design-system/pull/217)
 - Search input focus [`#215`](https://github.com/eea/volto-eea-design-system/pull/215)
 - Make cypress tests work with both slate and draft selectors [`4d8e5b1`](https://github.com/eea/volto-eea-design-system/commit/4d8e5b1d7719637a46eac8232891fc5ed1f51b6f)
 - Autobuild of docusaurus docs [`580af5b`](https://github.com/eea/volto-eea-design-system/commit/580af5b9d1791804239db8bd40f740d7fafc8a2a)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "0.7.2",
+  "version": "0.7.6",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Footer/Contact.jsx

@@ -1,30 +1,34 @@
 import React from 'react';
-import { Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-const Contact = ({ children, contacts, header, address }) =>
+const Contact = ({ children, contacts }) =>
   children?.length ? (
     children
   ) : (
     <div className="contact-block">
-      <p className="header">{header}</p>
       {contacts?.map((contact, index) => (
         <div className="contact" key={index}>
-          <Link to={contact.link}>
-            <Icon className={contact.icon} size="big"></Icon>
+          <Link to={contact.link} className="bold">
             {contact.text}
           </Link>
+          {contact.children && (
+            <div className="subcontact">
+              {contact.children.map((child, index) => (
+                <Link to={child.link} key={index}>
+                  {child.text}
+                </Link>
+              ))}
+            </div>
+          )}
         </div>
       ))}
-      {address && <p className="address">{address}</p>}
     </div>
   );
 
 Contact.propTypes = {
   contacts: PropTypes.array,
   header: PropTypes.string,
-  address: PropTypes.string,
 };
 
 export default Contact;

package/src/ui/Footer/Footer.jsx

@@ -24,7 +24,7 @@ const Footer = (props) => {
   const { children } = props;
   return (
     <footer>
-      <div className="wrapper">
+      <div className="footer-wrapper">
         <Container>{children}</Container>
       </div>
     </footer>

package/src/ui/Footer/FooterActions.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Grid } from 'semantic-ui-react';
 
 const FooterActions = (props) => {
   if (props.children) {
@@ -8,13 +9,29 @@ const FooterActions = (props) => {
 
   return (
     <div className="menu">
-      {props.actions &&
-        props.actions.map((action, index) => (
-          <Link to={action.link} key={index}>
-            {action.copy && <>&copy;</>}
-            {action.title}
-          </Link>
-        ))}
+      <Grid>
+        <Grid.Column mobile={12} tablet={6} computer={6}>
+          <div className="actions">
+            {props.actions &&
+              props.actions.map((action, index) => (
+                <Link to={action.link} key={index}>
+                  {action.title}
+                </Link>
+              ))}
+          </div>
+        </Grid.Column>
+
+        <Grid.Column mobile={12} tablet={6} computer={6}>
+          <div className="copyright">
+            {props.copyright &&
+              props.copyright.map((copyright, index) => (
+                <Link to={copyright.link} key={index}>
+                  &copy; Copyright {new Date().getFullYear()} {copyright.site}
+                </Link>
+              ))}
+          </div>
+        </Grid.Column>
+      </Grid>
     </div>
   );
 };

package/src/ui/Footer/FooterHeader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const FooterHeader = (props) => {
   return (
-    <div className="theme-sites mobile hidden">
+    <div className="theme-sites">
       <p className="header text-center">{props.children}</p>
     </div>
   );

package/src/ui/Footer/FooterSites.jsx

@@ -3,23 +3,35 @@ import { Grid, Image } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 const Sites = (props) => {
+  const getLogoColumns = (logos) => {
+    let column = [];
+    for (let i = 0; i < logos.length; i += 2) {
+      const item = logos[i];
+      const nextItem = logos[i + 1];
+      column.push(
+        <Grid.Column className="logo" key={i}>
+          <a className="logo" href={item.link}>
+            <Image src={item.src} alt={item.alt}></Image>
+          </a>
+          <a className="logo" href={nextItem.link}>
+            <Image src={nextItem.src} alt={nextItem.alt}></Image>
+          </a>
+        </Grid.Column>,
+      );
+    }
+    return column;
+  };
+
   if (props.children) {
     return <div>{props.children}</div>;
   }
 
   //fallback to props
   return (
-    <div className="theme-sites mobile hidden">
+    <div className="theme-sites">
       <div className="logos">
-        <Grid columns={5}>
-          {props.sites &&
-            props.sites.map((site, index) => (
-              <Grid.Column className="logo" key={index}>
-                <a href={site.link}>
-                  <Image src={site.src} alt={site.alt}></Image>
-                </a>
-              </Grid.Column>
-            ))}
+        <Grid columns={5} stackable>
+          {getLogoColumns(props.sites)}
         </Grid>
       </div>
     </div>

package/src/ui/Footer/SubFooter.jsx

@@ -11,51 +11,55 @@ const SubFooter = (props) => {
   return (
     <div className={'subfooter'}>
       <Grid>
-        <Grid.Column mobile={12} tablet={5} computer={6}>
-          <div className="item">
-            <p className="header text-center logo-header">
-              {props.logosHeader}
-            </p>
+        {props.managedBy &&
+          props.managedBy.map((manager, index) => (
+            <Grid.Column
+              mobile={manager.columnSize.mobile}
+              tablet={manager.columnSize.tablet}
+              computer={manager.columnSize.computer}
+              key={index}
+              className="mobile hidden"
+            >
+              <div className="item">
+                <div className={manager.className}>
+                  <a href={manager.link}>
+                    <Image src={manager.src} alt={manager.alt}></Image>
+                  </a>
+                </div>
+              </div>
+            </Grid.Column>
+          ))}
 
-            <Grid>
-              {props.managedBy &&
-                props.managedBy.map((manager, index) => (
-                  <Grid.Column
-                    mobile={manager.columnSize.mobile}
-                    tablet={manager.columnSize.tablet}
-                    computer={manager.columnSize.computer}
-                    key={index}
-                  >
-                    <div className={manager.className}>
-                      <a href={manager.link}>
-                        <Image src={manager.src} alt={manager.alt}></Image>
-                      </a>
-                    </div>
-                  </Grid.Column>
-                ))}
-            </Grid>
-          </div>
-        </Grid.Column>
-        <Grid.Column
-          mobile={6}
-          tablet={2}
-          computer={2}
-          className="mobile hidden"
-        ></Grid.Column>
-        <Grid.Column mobile={12} tablet={5} computer={4}>
+        <Grid.Column mobile={12} tablet={4} computer={4}>
           <div className="item">
-            <Footer.Contact
-              contacts={props.contacts}
-              header={props.contactHeader}
-              address={props.address}
-            />
-            <Footer.Social social={props.social} />
+            <Footer.Contact contacts={props.contacts} />
           </div>
         </Grid.Column>
       </Grid>
+
       <Grid.Row>
-        <Footer.Actions actions={props.actions} />
+        <Footer.Social social={props.social} />
       </Grid.Row>
+
+      <Grid className="mobile only">
+        {props.managedBy &&
+          props.managedBy.map((manager, index) => (
+            <Grid.Column
+              mobile={manager.columnSize.mobile}
+              tablet={manager.columnSize.tablet}
+              computer={manager.columnSize.computer}
+              key={index}
+            >
+              <div className="item">
+                <div className={manager.className}>
+                  <a href={manager.link}>
+                    <Image src={manager.src} alt={manager.alt}></Image>
+                  </a>
+                </div>
+              </div>
+            </Grid.Column>
+          ))}
+      </Grid>
     </div>
   );
 };

package/src/ui/Header/HeaderMenuPopUp.js

@@ -9,9 +9,13 @@ import {
   Accordion,
 } from 'semantic-ui-react';
 
+import { cloneDeep } from 'lodash';
+
 import { Link } from 'react-router-dom';
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
+import linkArrowsSVG from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/Svg/arrow-double-right.svg';
+
 const createColumns = (item, length, renderMenuItem) => {
   let subArrays = [];
   let size = length;
@@ -72,13 +76,7 @@ const Topics = ({ menuItem, renderMenuItem }) => (
       <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"
-              key={index}
-              renderMenuItem={renderMenuItem}
-            />
+            <Item item={section} key={index} renderMenuItem={renderMenuItem} />
           </Grid.Column>
         ) : (
           <Grid.Column width={9} key={index}>
@@ -147,45 +145,62 @@ 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'] || item['url'];
-      if (pathName.indexOf(item.url) !== -1) {
-        defaultIndex = index;
-      }
-      x.title = (
-        <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}>
-          {renderMenuItem(item, { className: 'item title-item' })}
-          <SecondLevelContent element={item} renderMenuItem={renderMenuItem} />
-        </Accordion.Content>
-      );
-      firstLevelPanels.push(x);
-    });
-    content = (
-      <Accordion.Accordion
-        defaultActiveIndex={defaultIndex}
-        panels={firstLevelPanels}
-      />
-    );
-  } else {
-    content = (
-      <SecondLevelContent
-        element={element}
-        topics={true}
-        renderMenuItem={renderMenuItem}
-      />
-    );
-  }
-  return <>{content}</>;
+  return (
+    <>
+      {!topics ? (
+        <React.Fragment>
+          {element.items.map((item, index) => {
+            let firstLevelPanels = [];
+            if (!item.items.length) {
+              return (
+                <React.Fragment key={index}>
+                  {renderMenuItem(item, { className: 'item' })}
+                </React.Fragment>
+              );
+            }
+            let x = {};
+            x.key = item['@id'] || item['url'];
+            if (pathName.indexOf(item.url) !== -1) {
+              defaultIndex = index;
+            }
+            x.title = (
+              <Accordion.Title key={`title=${index}`}>
+                {item.title}
+                <Icon className="ri-arrow-down-s-line" size="small" />
+              </Accordion.Title>
+            );
+            let overflow_item = cloneDeep(item);
+            overflow_item.title = 'See all';
+            x.content = (
+              <Accordion.Content>
+                {renderMenuItem(overflow_item, {
+                  className: 'item title-item',
+                })}
+                <SecondLevelContent
+                  element={item}
+                  renderMenuItem={renderMenuItem}
+                />
+              </Accordion.Content>
+            );
+            firstLevelPanels.push(x);
+            return (
+              <Accordion.Accordion
+                panels={firstLevelPanels}
+                key={index}
+                defaultActiveIndex={defaultIndex === index ? 0 : -1}
+              />
+            );
+          })}
+        </React.Fragment>
+      ) : (
+        <SecondLevelContent
+          element={element}
+          topics={true}
+          renderMenuItem={renderMenuItem}
+        />
+      )}
+    </>
+  );
 };
 
 const SecondLevelContent = ({ element, topics = false, renderMenuItem }) => {
@@ -251,9 +266,11 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
         <Icon className="ri-arrow-down-s-line" size="small" />
       </Accordion.Title>
     );
+    let overview = cloneDeep(element);
+    overview.title = 'See all';
     x.content = (
       <Accordion.Content key={index}>
-        {renderMenuItem(element, { className: 'item' })}
+        {renderMenuItem(overview, { className: 'item' })}
         <FirstLevelContent
           element={element}
           renderMenuItem={renderMenuItem}
@@ -289,7 +306,22 @@ function HeaderMenuPopUp({
         <Container>
           {menuItem && (
             <div className="menu-content tablet hidden mobile hidden">
-              <h3 className="title">{renderMenuItem(menuItem)}</h3>
+              <h3 className="title">
+                {renderMenuItem(
+                  menuItem,
+                  { className: 'title-link' },
+                  {
+                    iconPosition: 'right',
+                    children: (
+                      <img
+                        src={linkArrowsSVG}
+                        className={'title-img'}
+                        alt={'Title icon'}
+                      />
+                    ),
+                  },
+                )}
+              </h3>
               <Divider fitted />
               {menuItem.title === 'Topics' ? (
                 <Topics menuItem={menuItem} renderMenuItem={renderMenuItem} />