@eeacms/volto-eea-design-system 1.21.1 → 1.22.1

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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).
 
+### [1.22.1](https://github.com/eea/volto-eea-design-system/compare/1.22.0...1.22.1) - 28 November 2023
+
+#### :bug: Bug Fixes
+
+- fix(header): wrong size of items on tablet and for the mobile menu button [David Ichim - [`868897c`](https://github.com/eea/volto-eea-design-system/commit/868897c9c85ee8c896f63c306d075d8aedb3e5db)]
+
+### [1.22.0](https://github.com/eea/volto-eea-design-system/compare/1.21.1...1.22.0) - 24 November 2023
+
+#### :rocket: New Features
+
+- feat(mega-menu): added ability to set a * option that would hold configuration for non specific layouts [David Ichim - [`11b4b8c`](https://github.com/eea/volto-eea-design-system/commit/11b4b8ca14741d2fac6b11a09ab6ad1af65264b2)]
+
+#### :nail_care: Enhancements
+
+- change(header): ensure header items are without large gaps when menu goes over 2 lines [David Ichim - [`f6aba05`](https://github.com/eea/volto-eea-design-system/commit/f6aba059320c608cadaf5563085ffa63d0812583)]
+
+#### :hammer_and_wrench: Others
+
+- Bump package version [David Ichim - [`4304cf6`](https://github.com/eea/volto-eea-design-system/commit/4304cf667fd63ac9ce13524dfaaa972bdd1dd009)]
 ### [1.21.1](https://github.com/eea/volto-eea-design-system/compare/1.21.0...1.21.1) - 21 November 2023
 
 #### :bug: Bug Fixes

package/package.json

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

package/src/ui/Header/HeaderMenuPopUp.js

@@ -345,10 +345,14 @@ function HeaderMenuPopUp({
     (current) => current.url === activeItem || current['@id'] === activeItem,
   );
 
+  // Get layout for current menu item and fallback to a * layout that can
+  // be used for all menu items that don't have a specific layout
   const layout =
-    !!menuItemsLayouts &&
-    Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
-    menuItemsLayouts[menuItem.url];
+    (!!menuItemsLayouts &&
+      Object.keys(menuItemsLayouts).includes(menuItem?.url) &&
+      menuItemsLayouts[menuItem.url]) ||
+    (!!menuItemsLayouts && menuItemsLayouts['*']) ||
+    {};
 
   return (
     <Transition visible={visible} animation="slide down" duration={300}>

package/src/ui/Tab/Tab.stories.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Tab, Container } from 'semantic-ui-react';
+import { Tab, Container, Menu, Icon } from 'semantic-ui-react';
+import cx from 'classnames';
+import './style.less';
 
 export default {
   title: 'Components/Tab',
@@ -216,3 +218,188 @@ Vertical.argTypes = {
     },
   },
 };
+
+function IconTabContent({
+  variant,
+  renderActive,
+  hideTabTitle,
+  iconPosition,
+  iconSize,
+}) {
+  const panes = [
+    {
+      menuItem: (
+        <Menu.Item>
+          <div
+            className={cx({
+              'asset-top': iconPosition === 'top',
+              'asset-left': iconPosition === 'left',
+              'asset-right': iconPosition === 'right',
+            })}
+          >
+            <Icon
+              className={cx('aligned ri-sun-line', iconSize)}
+              size={iconSize}
+              {...{
+                ...(hideTabTitle && {
+                  role: 'img',
+                  'aria-hidden': 'false',
+                  'aria-label': 'Ground level ozone',
+                }),
+              }}
+            />
+            {!hideTabTitle && <>Ground level ozone</>}
+          </div>
+        </Menu.Item>
+      ),
+      render: () => (
+        <Tab.Pane>
+          is not directly emitted into the atmosphere. Instead, it forms in the
+          atmosphere from a chain of chemical reactions following emissions of
+          certain precursor gases: NOX, carbon monoxide (CO) and NMVOCs and
+          methane (CH4).
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: (
+        <Menu.Item>
+          <div
+            className={cx({
+              'asset-top': iconPosition === 'top',
+              'asset-left': iconPosition === 'left',
+              'asset-right': iconPosition === 'right',
+            })}
+          >
+            <Icon
+              className={cx('aligned ri-moon-line', iconSize)}
+              size={iconSize}
+              {...{
+                ...(hideTabTitle && {
+                  role: 'img',
+                  'aria-hidden': 'false',
+                  'aria-label': 'Nitrogen oxides',
+                }),
+              }}
+            />
+            {!hideTabTitle && <>Nitrogen oxides</>}
+          </div>
+        </Menu.Item>
+      ),
+      render: () => (
+        <Tab.Pane>
+          are emitted during fuel combustion from industrial facilities and the
+          road transport sector. NOX is a group of gases comprising nitrogen
+          monoxide (NO) and nitrogen dioxide (NO2). NO makes up the majority of
+          NOX emissions. NOX contributes to the formation of ozone and
+          particulate matter.
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: (
+        <Menu.Item>
+          <div
+            className={cx({
+              'asset-top': iconPosition === 'top',
+              'asset-left': iconPosition === 'left',
+              'asset-right': iconPosition === 'right',
+            })}
+          >
+            <Icon
+              className={cx('aligned ri-flashlight-line', iconSize)}
+              size={iconSize}
+              {...{
+                ...(hideTabTitle && {
+                  role: 'img',
+                  'aria-hidden': 'false',
+                  'aria-label': 'Particulate matter',
+                }),
+              }}
+            />
+            {!hideTabTitle && <>Particulate matter</>}
+          </div>
+        </Menu.Item>
+      ),
+      render: () => (
+        <Tab.Pane>
+          is a mixture of aerosol particles (solid and liquid) covering a wide
+          range of sizes and chemical compositions. PM is either directly
+          emitted as primary particles or it forms in the atmosphere from
+          emissions of certain precursor pollutants such as SO2, NOX, NH3 and
+          NMVOCs. PM is emitted from many anthropogenic sources, including both
+          combustion and non-combustion sources. Natural emissions of PM also
+          occur, including from sea salt and windblown Saharan dust.
+        </Tab.Pane>
+      ),
+    },
+  ];
+
+  return (
+    <Tab
+      panes={panes}
+      renderActiveOnly={renderActive}
+      menu={{
+        secondary: true,
+        pointing: true,
+        fluid: true,
+        className: variant,
+        tabIndex: 0,
+      }}
+    ></Tab>
+  );
+}
+
+const IconTabTemplate = (args) => (
+  <Container>
+    <IconTabContent {...args}></IconTabContent>
+  </Container>
+);
+
+export const MenuIcon = IconTabTemplate.bind({});
+
+MenuIcon.args = {
+  renderActive: true,
+  hideTabTitle: false,
+  iconPosition: 'top',
+  iconSize: 'small',
+  variant: 'secondary',
+};
+
+MenuIcon.argTypes = {
+  hideTabTitle: {
+    description: 'hide label',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+  iconPosition: {
+    control: {
+      type: 'inline-radio',
+      options: ['top', 'left', 'right'],
+    },
+    description: 'icon position',
+    type: { name: 'string' },
+    table: {
+      defaultValue: { summary: '""' },
+    },
+  },
+  iconSize: {
+    control: { type: 'inline-radio' },
+    options: ['mini', 'tiny', 'small', 'big', 'massive'],
+    description: 'icon size',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: 'large',
+      },
+    },
+  },
+};

package/src/ui/Tab/style.less

@@ -0,0 +1,20 @@
+.ui.menu .asset-top,
+.ui.menu .asset-left,
+.ui.menu .asset-right {
+  display: flex;
+  align-items: center;
+  gap: 0.6em;
+}
+
+.ui.menu .asset-top {
+  flex-direction: column;
+  text-align: center;
+}
+
+.ui.menu .asset-left {
+  flex-direction: row;
+}
+
+.ui.menu .asset-right {
+  flex-direction: row-reverse;
+}

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

@@ -347,7 +347,6 @@
   overflow: auto;
   width: 100%;
   min-height: @mobilePopUpHeight;
-  align-items: @searchBoxAlignItems;
   background: @searchBoxBackgroundGradient;
 
   .ui.container {
@@ -444,6 +443,7 @@
   align-items: center;
   justify-content: center;
   border: none;
+  flex-shrink: 0;
   background-color: @burgerActionBackgroundColor;
   cursor: pointer;
 }
@@ -456,6 +456,7 @@
 
 .search-action {
   display: flex;
+  flex-shrink: 0;
   width: @mobileActionsBoxWidth;
   height: @mobileMainSectionHeight;
   align-items: center;
@@ -648,11 +649,11 @@
 
       .ui.text.menu {
         display: flex;
-        width: 88%;
         max-height: 100%;
         flex-wrap: wrap;
-        justify-content: space-between;
+        justify-content: end;
         margin: 0;
+        padding-left: 0;
 
         .item {
           padding: @mainMenuItemPadding;
@@ -681,6 +682,7 @@
   /* Search box */
   #search-box {
     min-height: @computerPopUpHeight;
+    align-items: @searchBoxAlignItems;
 
     .wrapper {
       margin: @searchBoxComputerPopupMarginTop 0;
@@ -692,10 +694,20 @@
   }
 }
 
+//@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largestSmallMonitor) {
+//}
 @media only screen and (min-width: @largestSmallMonitor) {
   .eea.header .subsite-logo {
     left: calc(100% + calc(@subsiteFlexGap / 2));
   }
+
+  .main-menu {
+    gap: 0 @mainMenuGap;
+  }
+  .main.bar .ui.text.menu {
+    gap: 0 @mainMenuGap;
+  }
+
 }
 
 /************************

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

@@ -115,6 +115,7 @@
 @computerLogoMarginTop                : @rem-space-5;
 
 /* Main menu */
+@mainMenuGap                          : @component-padding;
 @mainMenuItemColor                    : @primaryColor;
 @mainMenuItemInvertedColor            : @white;
 @mainMenuItemFontSize                 : ~"min(max(0.875rem, 1.5vw), 1.125rem)";

package/theme/themes/eea/tokens/sizes.less

@@ -104,3 +104,7 @@
 @size-12:  @size-11 +  @space-20; // 240px
 @size-13:  @size-12 +  @space-20; // 320px
 @size-14:  @size-13 +  @size-11;  // 480px
+
+// start of variables to use instead of direct tokens
+@component-padding: @rem-space-5;
+@component-separator: @rem-space-8;