@eeacms/volto-eea-design-system 0.7.1 → 0.7.5

package/CHANGELOG.md

@@ -4,8 +4,44 @@ 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.5](https://github.com/eea/volto-eea-design-system/compare/0.7.3...0.7.5)
+
+- 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)
+- fix(contentBox): z-index of content hidden by bg when using content-box-inner [`c5a7dac`](https://github.com/eea/volto-eea-design-system/commit/c5a7dac923d648d8fe9c9a9cbb8001969d32aea2)
+- Autobuild of docusaurus docs [`2438b3e`](https://github.com/eea/volto-eea-design-system/commit/2438b3ef8035ffa2ad50c0d36bfac281fe7e5d68)
+- Set focus on search input field in the popup on click [`d12c051`](https://github.com/eea/volto-eea-design-system/commit/d12c05106d9b95df1885ffa12cb284a0e50e0dfd)
+
 #### [0.7.1](https://github.com/eea/volto-eea-design-system/compare/0.7.0...0.7.1)
 
+> 1 August 2022
+
+- Release [`#214`](https://github.com/eea/volto-eea-design-system/pull/214)
 - Replace useLayoutEffect with useEffect, less notifications [`#213`](https://github.com/eea/volto-eea-design-system/pull/213)
 - Autobuild of docusaurus docs [`d763e15`](https://github.com/eea/volto-eea-design-system/commit/d763e15196988c7224fd79be9cbab1034caa0920)
 

package/package.json

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

package/src/ui/Header/Header.jsx

@@ -101,6 +101,7 @@ const Main = ({
   const [menuIsActive, setMenuIsActive] = React.useState(false);
   const [searchIsActive, setSearchIsActive] = React.useState(false);
   const [burger, setBurger] = React.useState('');
+  const searchInputRef = React.useRef(null);
 
   React.useEffect(() => {
     setMenuIsActive(false);
@@ -112,6 +113,12 @@ const Main = ({
     }
   }, [pathname]);
 
+  React.useEffect(() => {
+    if (searchIsActive) {
+      searchInputRef.current && searchInputRef.current.focus();
+    }
+  }, [searchIsActive]);
+
   const searchOnClick = (e, x) => {
     if (menuIsActive === true) {
       setBurger('');
@@ -237,6 +244,7 @@ const Main = ({
       {searchIsActive && (
         <HeaderSearchPopUp
           onClose={searchOnClick}
+          searchInputRef={searchInputRef}
           triggerRefs={[searchButtonRef]}
         />
       )}

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} />

package/src/ui/Header/HeaderSearchPopUp.js

@@ -3,7 +3,7 @@ import { Container, Input } from 'semantic-ui-react';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
-function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
+function HeaderSearchPopUp({ onClose, searchInputRef, triggerRefs = [] }) {
   const nodeRef = React.useRef();
 
   useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose });
@@ -13,6 +13,7 @@ function HeaderSearchPopUp({ onClose, triggerRefs = [] }) {
       <Container>
         <div className="wrapper">
           <Input
+            ref={searchInputRef}
             className="search"
             icon={{ className: 'ri-search-line', link: true }}
             placeholder="Search..."

package/theme/themes/eea/assets/images/Svg/arrow-double-right.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.81846 5.50017L-3.83247e-07 1.66422L1.09077 0.568456L6 5.50017L1.09077 10.4319L-4.78974e-08 9.33612L3.81846 5.50017Z" fill="white"/>
+<path d="M9.81846 5.50017L6 1.66422L7.09077 0.568456L12 5.50017L7.09077 10.4319L6 9.33612L9.81846 5.50017Z" fill="white"/>
+</svg>

package/theme/themes/eea/extras/contentBox.less

@@ -27,6 +27,8 @@
   .content-box-inner {
     padding-top: @contentBoxContainerMarginTop;
     padding-bottom: @contentBoxContainerMarginBottom;
+    position: relative;
+    z-index: 1;
   }
 
   &.primary {

package/theme/themes/eea/extras/header.less

@@ -543,6 +543,9 @@
   .title {
     font-size: @megaMenuTitleFontSize;
     font-weight: @megaMenuTitleFontWeight;
+    .title-img {
+      margin-left: @megaMenuTitleImgMarginLeft;
+    }
   }
 
   .sub-title {
@@ -562,7 +565,11 @@
     }
   }
 }
-#mega-menu .ui.list .item {
+
+#mega-menu .ui.list {
+  margin: 0;
+}
+#mega-menu .item {
   display: flex;
   font-size: @megaMenuListItemFontSize;
   font-weight: @megaMenuListItemFontWeight;
@@ -571,6 +578,10 @@
 
 #mega-menu  a.item {
   color: @megaMenuTextColor;
+  display: @megaMenuTextDisplay;
+  &:hover {
+    text-decoration: @megaMenuTextHoverDecoration;
+  }
 
   i.icon {
     color: @megaMenuTextColor;
@@ -583,7 +594,7 @@
   // To override the grid column paddings
   padding: @megaMenuGlancePaddingLeft !important;
 
-  .ui.list .item {
+  .item {
     font-size: @megaMenuGlanceListItemFontSize;
     font-weight: @megaMenuGlanceListItemFontWeight;
     margin: @megaMenuGlanceListItemMargin;
@@ -604,8 +615,9 @@
   padding-top: @megaMenuContentPaddingTop;
 }
 
-#mega-menu .active > span {
-  border-bottom: 2px solid #FFF;
+#mega-menu .active:not(.title-link) > span {
+  border-left: @megaMenuListItemActiveBorder;
+  padding-left: @megaMenuListItemActivePadding;
 }
 
 /*Mega Menu Accordion - Tablet & Mobile */

package/theme/themes/eea/extras/header.variables

@@ -133,7 +133,9 @@
 /* Mega menu */
 @mobileMegaMenuWidth: 94%;
 @megaMenuBackgroundColor: @darkMidnightBlue;
+@megaMenuTextDisplay: flex;
 @megaMenuTextColor: @white;
+@megaMenuTextHoverDecoration: underline;
 @mobileMegaMenuPadding: @rem-space-4 0;
 @tabletMegaMenuPadding: @rem-space-9;
 @computerMegaMenuPadding: @rem-space-10 0 0 0;
@@ -142,6 +144,7 @@
 /* Title */
 @megaMenuTitleFontSize: @font-size-4;
 @megaMenuTitleFontWeight: @font-weight-7;
+@megaMenuTitleImgMarginLeft: 4px;
 
 /* Sub Title */
 @megaMenuSubTitleFontSize: @font-size-2;
@@ -151,14 +154,15 @@
 @megaMenuListItemFontSize: @font-size-1;
 @megaMenuListItemFontWeight: @font-weight-4;
 @megaMenuListItemPadding: @rem-space-2 0;
-@megaMenuListItemActiveBorder: 2px solid #FFF;
+@megaMenuListItemActiveBorder: 4px solid #FFF;
+@megaMenuListItemActivePadding: 8px;
 
 /* At a glance */
 @megaMenuGlanceBackgroundColor: @secondaryColor;
 @megaMenuGlancePaddingLeft:  @rem-space-8 @rem-space-5;
 @megaMenuGlanceListItemFontSize: @font-size-2;
-@megaMenuGlanceListItemFontWeight: @font-weight-6;
-@megaMenuGlanceListItemMargin: @rem-space-6 0;
+@megaMenuGlanceListItemFontWeight: @font-weight-4;
+@megaMenuGlanceListItemMargin: @rem-space-4 0;
 
 /* Accordion */
 @megaMenuAccordionTitleFontSize: @font-size-3;