@eeacms/volto-eea-design-system 1.15.0 → 1.16.0

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,13 +1,19 @@
-import React, { useState, useEffect } from 'react';
-import { Transition } from 'semantic-ui-react';
-import { Container, Grid, List, Icon, Accordion } from 'semantic-ui-react';
+import React, { useEffect, useState } from 'react';
+import {
+  Accordion,
+  Container,
+  Grid,
+  Icon,
+  List,
+  Transition,
+} from 'semantic-ui-react';
 
 import { cloneDeep } from 'lodash';
 
 import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers';
 
 const createColumns = (item, renderMenuItem, item_id) => {
-  const itemList = item.items.map((item, index) => (
+  return item.items.map((item, index) => (
     <React.Fragment key={index}>
       {renderMenuItem(item, {
         className: 'item',
@@ -16,16 +22,23 @@ const createColumns = (item, renderMenuItem, item_id) => {
       })}
     </React.Fragment>
   ));
-  return itemList;
 };
 
-const ItemGrid = ({ sectionTitle, item, columns, renderMenuItem }) => {
+const ItemGrid = ({
+  item,
+  columns,
+  renderMenuItem,
+  hideChildrenFromNavigation,
+}) => {
   const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
   return (
     <>
       {renderMenuItem(item, { className: 'sub-title', id: item_id })}
-      {item.items.length ? (
-        <List aria-labelledby={item_id} style={{ columns: `${columns}` }}>
+      {item.items.length && !hideChildrenFromNavigation ? (
+        <List
+          aria-labelledby={item_id}
+          className={columns && columns > 1 ? `has--${columns}--columns` : ''}
+        >
           {createColumns(item, renderMenuItem, item_id)}
         </List>
       ) : null}
@@ -33,7 +46,13 @@ const ItemGrid = ({ sectionTitle, item, columns, renderMenuItem }) => {
   );
 };
 
-const Item = ({ item, icon = false, iconName, renderMenuItem }) => {
+const Item = ({
+  item,
+  icon = false,
+  iconName,
+  renderMenuItem,
+  hideChildrenFromNavigation,
+}) => {
   const item_id = item.title.toLowerCase().replaceAll(' ', '-') + '-sub-title';
   return (
     <>
@@ -41,97 +60,93 @@ const Item = ({ item, icon = false, iconName, renderMenuItem }) => {
         className: 'sub-title',
         id: item_id,
       })}
-      <List className="menu-list" aria-labelledby={item_id}>
-        {item.items.map((listItem, index) => (
-          <React.Fragment key={index}>
-            {renderMenuItem(
-              listItem,
-              {
-                className: 'item',
-                key: index,
-              },
-              { children: icon && <Icon className={iconName} /> },
-            )}
-          </React.Fragment>
-        ))}
-      </List>
+      {!hideChildrenFromNavigation && (
+        <List className="menu-list" aria-labelledby={item_id}>
+          {item.items.map((listItem, index) => (
+            <React.Fragment key={index}>
+              {renderMenuItem(
+                listItem,
+                {
+                  className: 'item',
+                  key: index,
+                },
+                { children: icon && <Icon className={iconName} /> },
+              )}
+            </React.Fragment>
+          ))}
+        </List>
+      )}
     </>
   );
 };
 
-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} key={index} renderMenuItem={renderMenuItem} />
-          </Grid.Column>
-        ) : (
-          <Grid.Column width={9} key={index} id="topics-right-column">
-            <ItemGrid
-              sectionTitle={section.title}
-              item={section}
-              columns={4}
-              key={index}
-              renderMenuItem={renderMenuItem}
-            />
-          </Grid.Column>
-        )}
-      </React.Fragment>
-    ))}
-  </Grid>
-);
+const RenderItem = ({ layout, section, renderMenuItem, index }) => {
+  const hideChildrenFromNavigation =
+    layout.hideChildrenFromNavigation === undefined
+      ? true
+      : layout.hideChildrenFromNavigation;
+  return !layout.menuItemChildrenListColumns ||
+    layout.menuItemChildrenListColumns[index] === 1 ? (
+    <Item
+      item={section}
+      renderMenuItem={renderMenuItem}
+      hideChildrenFromNavigation={hideChildrenFromNavigation}
+    />
+  ) : (
+    <ItemGrid
+      item={section}
+      columns={layout.menuItemChildrenListColumns[index]}
+      renderMenuItem={renderMenuItem}
+      hideChildrenFromNavigation={hideChildrenFromNavigation}
+    />
+  );
+};
+
+export const StandardMegaMenuGrid = ({ menuItem, renderMenuItem, layout }) => {
+  const menuItemColumns = layout && layout.menuItemColumns;
+  const menuItemColumnsLength =
+    (menuItemColumns && menuItemColumns.length - 1) || 0;
+
+  const renderColumnContent = (section, columnIndex) => (
+    <RenderItem
+      layout={layout}
+      section={section}
+      renderMenuItem={renderMenuItem}
+      index={columnIndex}
+    />
+  );
 
-const Countries = ({ menuItem, renderMenuItem }) => (
-  <Grid>
-    <Grid.Column width={8}>
+  const renderColumns = () => (
+    <Grid>
+      {menuItemColumns.map((section, columnIndex) => (
+        <div className={layout.menuItemColumns[columnIndex]} key={columnIndex}>
+          {columnIndex !== menuItemColumnsLength
+            ? renderColumnContent(menuItem.items[columnIndex], columnIndex)
+            : menuItem.items
+                .slice(menuItemColumnsLength)
+                .map((section, _idx) =>
+                  renderColumnContent(section, columnIndex),
+                )}
+        </div>
+      ))}
+    </Grid>
+  );
+
+  const renderDefaultColumns = () => (
+    <div className={layout?.gridContainerClass || 'ui four column grid'}>
       {menuItem.items.map((section, index) => (
-        <React.Fragment key={index}>
-          {index === 0 && (
-            <ItemGrid
-              sectionTitle={section.title}
-              item={section}
-              columns={5}
-              renderMenuItem={renderMenuItem}
-            />
-          )}
-        </React.Fragment>
+        <Grid.Column key={index}>
+          {renderColumnContent(section, index)}
+        </Grid.Column>
       ))}
-    </Grid.Column>
-    <Grid.Column width={4}>
-      <Grid columns={1} className="nested-grid">
-        {menuItem.items.map((section, index) => (
-          <React.Fragment key={index}>
-            {index !== 0 && (
-              <Grid.Column>
-                <ItemGrid
-                  sectionTitle={section.title}
-                  item={section}
-                  columns={2}
-                  renderMenuItem={renderMenuItem}
-                />
-              </Grid.Column>
-            )}
-          </React.Fragment>
-        ))}
-      </Grid>
-    </Grid.Column>
-  </Grid>
-);
+    </div>
+  );
 
-const StandardMegaMenuGrid = ({ menuItem, renderMenuItem }) => (
-  <Grid columns={4}>
-    {menuItem.items.map((section, index) => (
-      <Grid.Column key={index}>
-        <Item item={section} renderMenuItem={renderMenuItem} />
-      </Grid.Column>
-    ))}
-  </Grid>
-);
+  return menuItemColumns ? renderColumns() : renderDefaultColumns();
+};
 
 const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
-  const topics = element.title === 'Topics' ? true : false;
+  const topics = element.title === 'Topics';
   let defaultIndex = -1;
 
   return (
@@ -308,6 +323,7 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
 
 function HeaderMenuPopUp({
   menuItems,
+  menuItemsLayouts,
   renderMenuItem,
   pathName,
   onClose,
@@ -322,6 +338,11 @@ function HeaderMenuPopUp({
     (current) => current.url === activeItem || current['@id'] === activeItem,
   );
 
+  const layout =
+    !!menuItemsLayouts &&
+    Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
+    menuItemsLayouts[menuItem.url];
+
   return (
     <Transition visible={visible} animation="slide down" duration={300}>
       <div id="mega-menu" ref={nodeRef}>
@@ -351,19 +372,11 @@ function HeaderMenuPopUp({
                   )}
                 </div>
               )}
-              {menuItem.title === 'Topics' ? (
-                <Topics menuItem={menuItem} renderMenuItem={renderMenuItem} />
-              ) : menuItem.title === 'Countries' ? (
-                <Countries
-                  menuItem={menuItem}
-                  renderMenuItem={renderMenuItem}
-                />
-              ) : (
-                <StandardMegaMenuGrid
-                  menuItem={menuItem}
-                  renderMenuItem={renderMenuItem}
-                />
-              )}
+              <StandardMegaMenuGrid
+                menuItem={menuItem}
+                renderMenuItem={renderMenuItem}
+                layout={layout}
+              />
             </div>
           )}
           <div className="tablet only mobile only">

package/src/ui/Popup/Popup.jsx

@@ -1,8 +1,5 @@
-/* Simplified popup with several options found in the semantic ui implementation
- * https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/modules/Popup/Popup.js
- *  */
-import React from 'react';
-import { createPopper } from '@popperjs/core';
+import React, { useEffect, useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
 import EventStack from '@semantic-ui-react/event-stack';
 import cx from 'classnames';
 
@@ -10,106 +7,106 @@ export const positionsMapping = {
   'top center': 'top',
   'top left': 'top-start',
   'top right': 'top-end',
-
   'bottom center': 'bottom',
   'bottom left': 'bottom-start',
   'bottom right': 'bottom-end',
-
   'right center': 'right',
   'left center': 'left',
 };
 
-class Popup extends React.Component {
-  constructor(props) {
-    super(props);
+function Popup(props) {
+  const triggerRef = useRef(null);
+  const popupRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
 
-    this.triggerRef = React.createRef();
-    this.popupRef = React.createRef();
+  const options = {
+    placement: positionsMapping[props.position] || 'bottom-end',
+    strategy: props.positionFixed || 'absolute',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: props.offset,
+        },
+      },
+      ...props.popperModifiers,
+    ],
+  };
 
-    this.state = {
-      isOpen: false,
-    };
+  const { styles, attributes } = usePopper(
+    triggerRef.current,
+    popupRef.current,
+    options,
+  );
 
-    this.togglePopup = this.togglePopup.bind(this);
-    this.closeOnEscape = this.closeOnEscape.bind(this);
-  }
+  const handleClickOutside = (event) => {
+    if (
+      popupRef.current &&
+      !popupRef.current.contains(event.target) &&
+      !triggerRef.current.contains(event.target)
+    ) {
+      if (isOpen) {
+        setIsOpen(false);
+      }
+    }
+  };
 
-  componentDidMount() {
-    this.popper = createPopper(this.triggerRef.current, this.popupRef.current, {
-      placement: positionsMapping[this.props.position] || 'bottom-end',
-      strategy: this.props.positionFixed || 'absolute',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: this.props.offset,
-          },
-        },
-        ...this.props.popperModifiers,
-      ],
-    });
-  }
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
 
-  componentWillUnmount() {
-    this.popper && this.popper.destroy();
-  }
+  const togglePopup = () => {
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+  };
 
-  togglePopup() {
-    this.setState(
-      (state) => {
-        return {
-          isOpen: !state.isOpen,
-        };
-      },
-      () => {
-        this.popper.forceUpdate();
-      },
-    );
-  }
-  closeOnEscape(e) {
+  const closeOnEscape = (e) => {
     if (e.key === 'Escape') {
-      this.setState((state) => {
-        return {
-          isOpen: !state.isOpen,
-        };
-      });
+      setIsOpen((prevIsOpen) => !prevIsOpen);
     }
-  }
+  };
 
-  render() {
-    const { trigger, className, size, position, basic, content } = this.props;
-    const event = this.props.on;
-    const onEvent = 'on' + event.charAt(0).toUpperCase() + event.slice(1);
-    return (
-      <React.Fragment>
-        {trigger &&
-          React.cloneElement(trigger, {
-            [onEvent]: this.togglePopup,
-            ref: this.triggerRef,
-          })}
+  const { trigger, className, size, position, basic, content, on } = props;
 
-        <div className="popup-container" ref={this.popupRef}>
-          {this.state.isOpen && (
-            <EventStack name="keydown" on={this.closeOnEscape} />
-          )}
-          <React.Fragment>
-            <div
-              className={cx(
-                'ui popup transition',
-                className,
-                size,
-                position,
-                basic ? 'basic' : '',
-                this.state.isOpen ? 'visible' : '',
-              )}
-            >
-              {content}
-            </div>
-          </React.Fragment>
+  const onEvent = 'on' + on.charAt(0).toUpperCase() + on.slice(1);
+
+  return (
+    <React.Fragment>
+      {trigger && (
+        <div className="popup-trigger" ref={triggerRef}>
+          {React.cloneElement(trigger, {
+            [onEvent]: togglePopup,
+          })}
         </div>
-      </React.Fragment>
-    );
-  }
+      )}
+
+      <div
+        className="popup-container"
+        ref={popupRef}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        {isOpen && <EventStack name="keydown" on={closeOnEscape} />}
+        <React.Fragment>
+          <div
+            className={cx(
+              'ui popup transition',
+              className,
+              size,
+              position,
+              basic ? 'basic' : '',
+              isOpen ? 'visible' : '',
+            )}
+          >
+            {content}
+          </div>
+        </React.Fragment>
+      </div>
+    </React.Fragment>
+  );
 }
 
 Popup.defaultProps = {
@@ -122,14 +119,6 @@ Popup.defaultProps = {
   wide: false,
   on: 'click',
   popperModifiers: [],
-  // disabled,
-  // flowing,
-  // header,
-  // inverted,
-  // pinned,
-  // popper,
-  // popperDependencies,
-  // style,
 };
 
 export default Popup;

package/src/ui/Popup/Popup.stories.jsx

@@ -59,7 +59,7 @@ export default {
 };
 
 export const ButtonPopup = (args) => (
-  <Segment placeholder>
+  <Segment placeholder className={'flex-row flex-items-center'}>
     <Popup
       {...args}
       trigger={

package/theme/plugins.js

@@ -1,5 +1,187 @@
+function toHSL(color) {
+  if (color.toHSL) {
+    return color.toHSL();
+  } else {
+    throw new Error('Argument cannot be evaluated to a color');
+  }
+}
+
 module.exports = {
   install(less, pluginManager, functions) {
+    const darken = less.functions.functionRegistry.get('darken');
+    const lighten = less.functions.functionRegistry.get('lighten');
+    const saturate = less.functions.functionRegistry.get('saturate');
+    const desaturate = less.functions.functionRegistry.get('desaturate');
+
+    functions.add('darken', function (
+      color,
+      amount = new less.tree.Dimension(0),
+      method,
+    ) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return darken(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[2] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '-',
+                [
+                  color.args[2],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (color.name === 'var') {
+          if (color.args[1]) {
+            color.args[1] = functions.get('darken')(
+              color.args[1],
+              amount,
+              method,
+            );
+          }
+          return color;
+        } else {
+          throw err;
+        }
+      }
+    });
+
+    functions.add('lighten', function (color, amount, method) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return lighten(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[2] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '+',
+                [
+                  color.args[2],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (color.name === 'var') {
+          if (color.args[1]) {
+            color.args[1] = functions.get('lighten')(
+              color.args[1],
+              amount,
+              method,
+            );
+          }
+          return color;
+        } else {
+          throw err;
+        }
+      }
+    });
+
+    functions.add('saturate', function (color, amount, method) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return saturate(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[1] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '+',
+                [
+                  color.args[1],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (!color.rgb || color.name === 'var') {
+          if (color.name === 'var' && color.args[1]) {
+            color.args[1] = functions.get('saturate')(
+              color.args[1],
+              amount,
+              method,
+            );
+            return color;
+          }
+          return null;
+        } else {
+          throw err;
+        }
+      }
+    });
+
+    functions.add('desaturate', function (color, amount, method) {
+      try {
+        const hsl = toHSL(color);
+
+        if (hsl) {
+          return desaturate(color, amount, method);
+        }
+      } catch (err) {
+        if (['hsl', 'hsla'].includes(color.name)) {
+          if (amount?.value) {
+            color.args[1] = new less.tree.Call('calc', [
+              new less.tree.Operation(
+                '-',
+                [
+                  color.args[1],
+                  new less.tree.Dimension(
+                    amount.value,
+                    new less.tree.Unit(null, null, '%'),
+                  ),
+                ],
+                true,
+              ),
+            ]);
+          }
+
+          return color;
+        } else if (color.name === 'var') {
+          if (color.args[1]) {
+            color.args[1] = functions.get('desaturate')(
+              color.args[1],
+              amount,
+              method,
+            );
+          }
+          return color;
+        } else {
+          throw err;
+        }
+      }
+    });
+
     functions.add('vw', function (percentage) {
       return new less.tree.Call('calc', [
         new less.tree.Operation(