@eeacms/volto-eea-design-system 1.0.0-alpha.2 → 1.0.0-alpha.4

package/.github/workflows/node.js.yml

@@ -6,11 +6,6 @@ name: Storybook & Docusaurus CI deployment
 on:
   push:
     branches: [ develop ]
-    paths:
-      - src/**
-      - theme/**
-      - website/**
-      - templates/**
 
 jobs:
   build:
@@ -46,7 +41,7 @@ jobs:
           git commit -m "Autobuild of docusaurus docs"
           git push
 
-    - uses: convictional/trigger-workflow-and-wait@v1.3.0
+    - uses: convictional/trigger-workflow-and-wait@v1.6.5
       with:
         github_token: ${{ secrets.PAT_TOKEN }}
         owner: 'eea'

package/.project.eslintrc.js

@@ -1,7 +1,9 @@
 const fs = require('fs');
 const path = require('path');
 
-const projectRootPath = fs.realpathSync('./project');    // __dirname
+const projectRootPath = fs.existsSync('./project')
+  ? fs.realpathSync('./project')
+  : fs.realpathSync('./../../../');
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
 
@@ -23,6 +25,7 @@ const addonAliases = Object.keys(reg.packages).map(o => [
   reg.packages[o].modulePath,
 ]);
 
+
 module.exports = {
   extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
   settings: {
@@ -42,3 +45,4 @@ module.exports = {
     },
   },
 };
+

package/CHANGELOG.md

@@ -4,6 +4,103 @@ 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.0.0-alpha.4](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.3...1.0.0-alpha.4) - 22 November 2022
+
+#### :bug: Bug Fixes
+
+- fix(cards-storybook): load slick carousel css for arrow and pagination styles [David Ichim - [`1159b1b`](https://github.com/eea/volto-eea-design-system/commit/1159b1beea0d7f7e026f1f1181fea91b7ac38ffa)]
+
+#### :nail_care: Enhancements
+
+- change(utilities): added has text classes to the text alignment utilities [David Ichim - [`e6974c6`](https://github.com/eea/volto-eea-design-system/commit/e6974c634551fe0d19a9c9da269f5c6fbaefab7a)]
+- change(build): upgrade action to trigger workflow and wait to latest version [David Ichim - [`c63ad3f`](https://github.com/eea/volto-eea-design-system/commit/c63ad3fdae7972bb2c722dea3d046861fa0ac086)]
+- refactor(card): theming implementation to allow has theming classes #265 from eea/card-refactoring [ichim-david - [`24edc99`](https://github.com/eea/volto-eea-design-system/commit/24edc99d85c0c619fc763a8774a96f7208f529a5)]
+- change(utilities): modified class name for text align using has naming [David Ichim - [`579a0cb`](https://github.com/eea/volto-eea-design-system/commit/579a0cbe0f704eb9305119fdd162f4f29c8086d5)]
+- change(theme): ensure that only direct children of container have a default top and bottom margin [David Ichim - [`7f8b8dc`](https://github.com/eea/volto-eea-design-system/commit/7f8b8dcc72827004d366e1c531311cf8734053fc)]
+- change(theme): add slick-carousel dependency [David Ichim - [`f2eec7d`](https://github.com/eea/volto-eea-design-system/commit/f2eec7d7233adf86b9c4f61670eb87d9754ff94c)]
+- change(card): expect has classes on the card directly [David Ichim - [`6a9e38b`](https://github.com/eea/volto-eea-design-system/commit/6a9e38bcae0656685a99b47800d556813663d2ee)]
+- change(cards): allow rounded, inverted and theme parameter to be set by has classes [David Ichim - [`4b4ad89`](https://github.com/eea/volto-eea-design-system/commit/4b4ad893fc5d39629b4e8d874327f31ea2e7d885)]
+- change(cards): refactor cards theming implementation [David Ichim - [`d4e4542`](https://github.com/eea/volto-eea-design-system/commit/d4e454238d540ef306f4c1a4f8e9a94c7aa10189)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.4 [Alin Voinea - [`ec8938b`](https://github.com/eea/volto-eea-design-system/commit/ec8938b4847a2973c7a853896d609d2de0041019)]
+- Exclude mockups from npm package [Alin Voinea - [`634af8e`](https://github.com/eea/volto-eea-design-system/commit/634af8e3ddabec36a18597d8d7638888269875fc)]
+- Update eea.github.io on all commits in develop branch [Alin Voinea - [`3d0b8d7`](https://github.com/eea/volto-eea-design-system/commit/3d0b8d745138bd2e0219560c8c895ce2c56dbf04)]
+- Trigger re-build [Alin Voinea - [`3566dd2`](https://github.com/eea/volto-eea-design-system/commit/3566dd2b4d2cd12496e05b792c85a78de550dd50)]
+- fix rounded selector [David Ichim - [`1fa1544`](https://github.com/eea/volto-eea-design-system/commit/1fa15442f03d3f3d9ef59afa14075b061483cf3a)]
+- Back to dev. [Alin Voinea - [`ea47f6f`](https://github.com/eea/volto-eea-design-system/commit/ea47f6f10097f23f635d98f0c5483bebf8378fc4)]
+### [1.0.0-alpha.3](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.2...1.0.0-alpha.3) - 16 November 2022
+
+#### :rocket: New Features
+
+- feat(Header): Add subsite section styling #263 from eea/subsite [ichim-david - [`00398b8`](https://github.com/eea/volto-eea-design-system/commit/00398b8a6c5d83241c30d0ba85d95c115edf2480)]
+
+#### :bug: Bug Fixes
+
+- fix(search): position now changed by default to absolute from relative [David Ichim - [`51b08fc`](https://github.com/eea/volto-eea-design-system/commit/51b08fc217e25c1391a2bac0b42a8c3f7ae091c7)]
+- fix(megaMenu): remove paddings for buttons added by active class [Antonis Tarantilis - [`ec33ebf`](https://github.com/eea/volto-eea-design-system/commit/ec33ebfe23a6064c88383ab465bd45edee2dba9b)]
+
+#### :nail_care: Enhancements
+
+- change(mega-menu): hide home link and accordion content from mobile menu [David Ichim - [`1a69172`](https://github.com/eea/volto-eea-design-system/commit/1a691729b6d61c0daf46c5de035c1c55b0fda0d9)]
+- change(container): width from min width 1280px to 1365px max width [David Ichim - [`66e551e`](https://github.com/eea/volto-eea-design-system/commit/66e551e532da2cc5e9716e5179f943f172663be4)]
+- change(theme): modified wide width to point to 1320px as it's perfectly divisible by 4 [David Ichim - [`8f82573`](https://github.com/eea/volto-eea-design-system/commit/8f825737d6dafd595024bb4537eab624a47a9ad0)]
+- change(theme): modified wide width to point to 1368px as it's perfectly divisible by 4 [David Ichim - [`2349fee`](https://github.com/eea/volto-eea-design-system/commit/2349fee36ee72783665a0b101d684389f1fdf834)]
+- change(container): fullwidth now take into account devices without hover [David Ichim - [`5a35a65`](https://github.com/eea/volto-eea-design-system/commit/5a35a65ce4928972027325bd01265db3f046f0e8)]
+- change(container): ensure only the top level elements behave like containers [David Ichim - [`98b85d1`](https://github.com/eea/volto-eea-design-system/commit/98b85d1fb285919a8851454fa3007131b2a0ffc3)]
+- change(container): modified column-block grid to remove margin and padding when using full width class [David Ichim - [`35c1cee`](https://github.com/eea/volto-eea-design-system/commit/35c1cee7b3b35e7c361562ab7a430240f0117cc3)]
+- change(components): load overrides files for our defined semantic files [David Ichim - [`adde7a9`](https://github.com/eea/volto-eea-design-system/commit/adde7a9519f38fa779d8d038f3b6817281f0b4a2)]
+- change(container): story to avoid adding containerwidth property to container div [David Ichim - [`c13d83c`](https://github.com/eea/volto-eea-design-system/commit/c13d83cdbc8741bf4075cdfcd884f39f3f71d73c)]
+- change(container): story to add classes that modify the max width of the containers [David Ichim - [`37948f8`](https://github.com/eea/volto-eea-design-system/commit/37948f89ee797738bd8bbb0023bc5dca018d7331)]
+- change(container): renamed content-text-width to container-text-width [David Ichim - [`6f788c2`](https://github.com/eea/volto-eea-design-system/commit/6f788c282348292dd4b5deb47ffe83ca4573e5c8)]
+- change(container): removed app extras and view setting of layout sizes [David Ichim - [`f6dc1ee`](https://github.com/eea/volto-eea-design-system/commit/f6dc1ee602634df85140f6db75e41293b72eacf1)]
+- change(homepage): removed hiding of staging banner from homepage [David Ichim - [`4ba2cd7`](https://github.com/eea/volto-eea-design-system/commit/4ba2cd7fc17cdf1bf58381aa58e05acad0ac77ba)]
+- change(site): add a 1rem margin top and bottom on all styled classes [David Ichim - [`dabf6c1`](https://github.com/eea/volto-eea-design-system/commit/dabf6c1162fe23cef61a2053eefd7e687f649a56)]
+- change(container): use important flag for left and right margin [David Ichim - [`a49c83a`](https://github.com/eea/volto-eea-design-system/commit/a49c83abe9a045d28118a680558de5416a0516a3)]
+- change(views): moved narrow style bellow the default container width styles [David Ichim - [`72fa58d`](https://github.com/eea/volto-eea-design-system/commit/72fa58dce9ea03a1e4f409a9f9aab21b01efbfc8)]
+- change(view): set container width for view-viewview class as well [David Ichim - [`29dc324`](https://github.com/eea/volto-eea-design-system/commit/29dc324319d6dc2450dd0e906c1b4c93fd65ed56)]
+- change(listing): provide ui container fallback if no class is passed to default view [David Ichim - [`af9e94d`](https://github.com/eea/volto-eea-design-system/commit/af9e94ded1e301f4c811749badbcc1f59e6d0de5)]
+- change(narrow-view): re-added container class to page-document [David Ichim - [`56b44a6`](https://github.com/eea/volto-eea-design-system/commit/56b44a6e09d45f96c106dc471bb2e1cde58ef10f)]
+- change(container): unset values of page-document on 1200+ browser width [David Ichim - [`dd5bea3`](https://github.com/eea/volto-eea-design-system/commit/dd5bea37d414e2a8689eaf6cc99c7b3a3d4b0e08)]
+- change(container): affect only left and right margin of containers [David Ichim - [`183265b`](https://github.com/eea/volto-eea-design-system/commit/183265b7dd8d20359b6c3956ea05b62df6e70f75)]
+- change(containers): modified class names after layout checks [David Ichim - [`1dc3689`](https://github.com/eea/volto-eea-design-system/commit/1dc3689509001031f0afd30422f517de5316e47a)]
+- change(listing): removed container from default view page-document area [David Ichim - [`69f3d8f`](https://github.com/eea/volto-eea-design-system/commit/69f3d8f422e3cb95e89937929aaef48b5569bcdf)]
+- change(views): rename classes names to width_view and added app extras layout component [David Ichim - [`745b772`](https://github.com/eea/volto-eea-design-system/commit/745b7720839754d1e248795cb1263f8c02f5f3c2)]
+- change(container): add variables for edit and add section of containers [David Ichim - [`f2e2c33`](https://github.com/eea/volto-eea-design-system/commit/f2e2c335dc82c120d15d4c536c400ae742f68fe7)]
+- change(columns): implement narrow, container and wide width classes [David Ichim - [`9696b54`](https://github.com/eea/volto-eea-design-system/commit/9696b5457e50ba3186406a584da16f5248c14439)]
+- change(views): customized DefaultView to pass class into page-document area [David Ichim - [`91123aa`](https://github.com/eea/volto-eea-design-system/commit/91123aad429f4bb086110b4997e43e9809a97581)]
+- change(megamenu): set children to be appended to the right of the menu title [David Ichim - [`b69c23a`](https://github.com/eea/volto-eea-design-system/commit/b69c23a20ef2ded1f0382650ff8e85d1bead6941)]
+- refactor(sidemenu): add is_in_path and is_current attributes for an active example [Antonis Tarantilis - [`a3fe7fd`](https://github.com/eea/volto-eea-design-system/commit/a3fe7fd8da93db0a065d4408ce154c9d8c26b568)]
+- refactor(sidemenu): add third level list and items & update active indication [Antonis Tarantilis - [`e2d87da`](https://github.com/eea/volto-eea-design-system/commit/e2d87da9fddca2b867f3d065a007c0b921587a61)]
+- refactor(megaMenu): update padding variables [Antonis Tarantilis - [`c5f2583`](https://github.com/eea/volto-eea-design-system/commit/c5f25838ba9ec367a58c98c929921ebf09cd8ad8)]
+- refactor(megaMenu): update sub-title paddings [Antonis Tarantilis - [`992f919`](https://github.com/eea/volto-eea-design-system/commit/992f919bb5155c8e6fc169e43adf00dcae41f400)]
+- refactor(megaMenu): style sub-title and nav-description [Antonis Tarantilis - [`b2a48fd`](https://github.com/eea/volto-eea-design-system/commit/b2a48fd3588ffdc75f61f0b8d52284d13edf2d92)]
+- refactor(megaMenu): add nav_title and nav_description attributes [Antonis Tarantilis - [`0d7a568`](https://github.com/eea/volto-eea-design-system/commit/0d7a5686daab2ecec87d78728437d8f994606448)]
+- refactor(megaMenu): mobile - use buttons for menu section titles [Antonis Tarantilis - [`a7b632f`](https://github.com/eea/volto-eea-design-system/commit/a7b632fd29a8ac815d2e590509baa51f1279e659)]
+- refactor(megaMenu): desktop - use buttons for menu section titles and readjust content [Antonis Tarantilis - [`cb9315f`](https://github.com/eea/volto-eea-design-system/commit/cb9315f2b999193b7b64cec27c49fc8dda306899)]
+
+#### :house: Internal changes
+
+- style: load header/footer overrides [Miu Razvan - [`e5b5e0f`](https://github.com/eea/volto-eea-design-system/commit/e5b5e0fc00c61d81f45c12f119bd2f06a91b1b5c)]
+- style(megaMenu): restore item description color [Antonis Tarantilis - [`8a19bbb`](https://github.com/eea/volto-eea-design-system/commit/8a19bbb4866cdeb31d87b782587c499e621055b7)]
+- style(megaMenu): restore accordion content bottom padding [Antonis Tarantilis - [`8e0c5a7`](https://github.com/eea/volto-eea-design-system/commit/8e0c5a79f06247d353511b412b0122c6f614f5ec)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.0.0-alpha.3 [Alin Voinea - [`8fc86a7`](https://github.com/eea/volto-eea-design-system/commit/8fc86a7d0bf4ad06ab339b3066ff56ea61d48878)]
+- code cleanup [David Ichim - [`2cdc3e5`](https://github.com/eea/volto-eea-design-system/commit/2cdc3e590b6d36865f16890c45ce56d32963e1d0)]
+- Add subsite styling [kreafox - [`e79c0ed`](https://github.com/eea/volto-eea-design-system/commit/e79c0ed7931d6287dbeb3bab1e9155b8707481a3)]
+- test(estlint): Fix .project.eslintrc.js [Alin Voinea - [`aaeaa07`](https://github.com/eea/volto-eea-design-system/commit/aaeaa07b27491551daba29bbfdd7cab4a54b6bec)]
+- modified left value of full width classes with toolbars [David Ichim - [`70d82d4`](https://github.com/eea/volto-eea-design-system/commit/70d82d47fbc2c00a3a709de0d5c087c8443a1eae)]
+- WIP settings column grid width when using full size class [David Ichim - [`affc7ac`](https://github.com/eea/volto-eea-design-system/commit/affc7ac99527aa92d5a192d90dc8c9ec46a66404)]
+- fix eslint [Miu Razvan - [`30c52e4`](https://github.com/eea/volto-eea-design-system/commit/30c52e4eb443555ca44c1b35df064e73d52c0a8b)]
+- fix broken variable call for contentBox.variables introduced in previous commit by mistake [David Ichim - [`d249c11`](https://github.com/eea/volto-eea-design-system/commit/d249c1160d19bedb174a2fde3fdab48d9ce297d4)]
+- clean up [Miu Razvan - [`89f3cb3`](https://github.com/eea/volto-eea-design-system/commit/89f3cb33d70a14806a953f0acd1807e94169ee5c)]
+- Feature(container): flexible container size #260 from eea/feature-flexible-container [ichim-david - [`8f84c5b`](https://github.com/eea/volto-eea-design-system/commit/8f84c5b67afe9cbe01b2a44a8f92a9a554e1036a)]
+- removed console log from code [David Ichim - [`fad86ae`](https://github.com/eea/volto-eea-design-system/commit/fad86ae581dd81d0c29fc03d8528e57cadadd3fb)]
+- jslint fix [David Ichim - [`9846159`](https://github.com/eea/volto-eea-design-system/commit/98461593605344d0b6d8cba81f91d1cafc2653cd)]
+- feature(content): added NarrowView useful for modifying the containers from content-area [David Ichim - [`d937df7`](https://github.com/eea/volto-eea-design-system/commit/d937df7c262e8d8cc6e78eebec736e28263fc657)]
 ### [1.0.0-alpha.2](https://github.com/eea/volto-eea-design-system/compare/1.0.0-alpha.1...1.0.0-alpha.2) - 28 October 2022
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -23,6 +23,7 @@
     "@eeacms/volto-corsproxy": "*",
     "remixicon": "2.5.0",
     "react-slick": "^0.28.1",
+    "slick-carousel": "^1.8.1",
     "react-countup": "^6.3.0"
   },
   "devDependencies": {

package/src/index.js

@@ -3,6 +3,7 @@ const applyConfig = (config) => {
     ...(config.settings || {}),
     navDepth: 3,
   };
+
   return config;
 };
 

package/src/ui/Card/Card.stories.jsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Card, Image, Grid, Container, Icon, Button } from 'semantic-ui-react';
 import Slider from 'react-slick';
 
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
 const tabletBreakpoint = 835;
 const mobileBreakpoint = 480;
 

package/src/ui/Container/Container.stories.js

@@ -23,6 +23,26 @@ export default {
         },
       },
     },
+    containerWidth: {
+      control: {
+        type: 'inline-radio',
+        labels: {
+          narrow_width: 'Narrow',
+          container_width: 'Default',
+          wide_width: 'Wide',
+        },
+      },
+      options: ['narrow_width', 'container_width', 'wide_width'],
+      description: 'Container width',
+      table: {
+        type: {
+          summary: 'text',
+        },
+        defaultValue: {
+          summary: 'container_width',
+        },
+      },
+    },
     content: {
       description: 'container content',
       table: {
@@ -54,7 +74,20 @@ const content = (
   </p>
 );
 
-const Template = (args) => <Container {...args}></Container>;
+const Template = (args) => {
+  const { containerWidth, ...options } = args;
+  return (
+    <>
+      <div id={'main'}>
+        <Container
+          id={'page-document'}
+          {...options}
+          className={containerWidth || 'container_width'}
+        ></Container>
+      </div>
+    </>
+  );
+};
 
 export const Default = Template.bind({});
 Default.args = {

package/src/ui/ContextNavigation/ContextNavigation.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Icon } from 'semantic-ui-react';
+import { Container } from 'semantic-ui-react';
 
 const sidenavItems = [
   {
@@ -72,10 +72,30 @@ const sidenavItems = [
       {
         '@id': 'Articles',
         description: '',
-        items: [],
+        items: [
+          {
+            '@id': 'article-1',
+            description: '',
+            items: [],
+            review_state: null,
+            title: 'Summer 2022: Living in a state of multiple crises',
+            url: '/#',
+            is_current: true,
+          },
+          {
+            '@id': 'article-2',
+            description: '',
+            items: [],
+            review_state: null,
+            title:
+              'Interview — Prosumers and the energy crisis: citizens contributing to Europe’s energy transition',
+            url: '/#',
+          },
+        ],
         review_state: null,
         title: 'Articles',
         url: '/#',
+        is_in_path: true,
       },
       {
         '@id': 'Infographics-overview',
@@ -89,6 +109,7 @@ const sidenavItems = [
     review_state: null,
     title: 'Infographics',
     url: '/#',
+    is_in_path: true,
   },
 ];
 
@@ -96,14 +117,19 @@ function Template({ ...args }) {
   return (
     <Container>
       <nav className="context-navigation">
-        <div className="context-navigation-header">
-          <Icon className="ri-menu-2-line" /> {args.header}
-        </div>
+        <div className="context-navigation-header">{args.header}</div>
         <div role="list" className="ui list">
           {args.sidenavItems &&
             args.sidenavItems.map((element, index) => {
               return (
-                <div role="listitem" className="item level-1">
+                <div
+                  role="listitem"
+                  className={
+                    (element.is_current ? 'active ' : '') +
+                    (element.is_in_path ? 'in_path ' : '') +
+                    'item level-1'
+                  }
+                >
                   <div className="content">
                     <a
                       title={element.title}
@@ -116,7 +142,14 @@ function Template({ ...args }) {
                       element.items.map((subelement, index) => {
                         return (
                           <div className="list" role="list">
-                            <div role="listitem" className="item level-2">
+                            <div
+                              role="listitem"
+                              className={
+                                (subelement.is_current ? 'active ' : '') +
+                                (subelement.is_in_path ? 'in_path ' : '') +
+                                'item level-2'
+                              }
+                            >
                               <div className="content">
                                 <a
                                   title={subelement.title}
@@ -125,6 +158,33 @@ function Template({ ...args }) {
                                 >
                                   {subelement.title}
                                 </a>
+                                {subelement.items.length > 0 &&
+                                  subelement.items.map(
+                                    (subparelement, index) => {
+                                      return (
+                                        <div className="list" role="list">
+                                          <div
+                                            role="listitem"
+                                            className={
+                                              (subparelement.is_current
+                                                ? 'active '
+                                                : '') + 'item level-3'
+                                            }
+                                          >
+                                            <div className="content">
+                                              <a
+                                                title={subparelement.title}
+                                                className="contenttype-document"
+                                                href={subparelement.url}
+                                              >
+                                                {subparelement.title}
+                                              </a>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      );
+                                    },
+                                  )}
                               </div>
                             </div>
                           </div>

package/src/ui/Header/Header.jsx

@@ -4,6 +4,7 @@
  */
 
 import React from 'react'; // , { Component }
+import { useHistory } from 'react-router-dom';
 import cx from 'classnames';
 import { Container, Image, Menu, Grid, Dropdown } from 'semantic-ui-react'; // Dropdown,
 
@@ -107,6 +108,7 @@ const Main = ({
   transparency,
   inverted,
 }) => {
+  const history = useHistory();
   const [activeItem, setActiveItem] = React.useState(pathname);
   const [menuIsActive, setMenuIsActive] = React.useState(false);
   const [searchIsActive, setSearchIsActive] = React.useState(false);
@@ -169,7 +171,11 @@ const Main = ({
   const menuOnClick = (e, item) => {
     if (searchIsActive) setSearchIsActive(false);
     setActiveItem(item['@id'] || item.url);
-    setMenuIsActive(true);
+    if (item.items.length) {
+      setMenuIsActive(true);
+    } else {
+      history.push(item.url);
+    }
   };
 
   // React.useEffect(() => {

package/src/ui/Header/Header.stories.js

@@ -486,13 +486,72 @@ const menuItems = [
     url: '/#',
   },
   {
-    '@id': 'Data-and-publications',
-    items: [],
+    '@id': 'Analysis-and-data',
+    items: [
+      {
+        '@id': 'Reports',
+        nav_description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+        items: [],
+        review_state: null,
+        title: 'Briefings',
+        nav_title: 'Briefings nav',
+        url: '/#',
+      },
+      {
+        '@id': 'Briefings',
+        nav_description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+        items: [],
+        review_state: null,
+        title: 'Reports',
+        nav_title: 'Reports nav',
+        url: '/#',
+      },
+      {
+        '@id': 'Indicators',
+        nav_description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+        items: [],
+        review_state: null,
+        title: 'Indicators',
+        nav_title: 'Indicators nav',
+        url: '/#',
+      },
+      {
+        '@id': 'Datahub',
+        nav_description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+        items: [],
+        review_state: null,
+        title: 'Datahub',
+        nav_title: 'Datahub nav',
+        url: '/#',
+      },
+      {
+        '@id': 'Maps-and-charts',
+        nav_description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+        items: [],
+        review_state: null,
+        title: 'Maps and charts',
+        url: '/#',
+      },
+      {
+        '@id': 'Country-fact-sheets',
+        nav_description:
+          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+        items: [],
+        review_state: null,
+        title: 'Country fact sheets',
+        nav_title: '',
+        url: '/#',
+      },
+    ],
     review_state: null,
-    title: 'Data and publications',
+    title: 'Analysis and data',
     url: '/#',
   },
-
   {
     '@id': 'Countries',
     items: [
@@ -1332,23 +1391,34 @@ const Template = (args) => {
           renderMenuItem={(item, options = {}, props) => {
             const { onClick } = options;
             return (
-              <a
-                onClick={(e) => {
-                  const path = item['@id'] || item.url;
-                  setPathname(path);
-                  e.preventDefault();
-                  onClick && onClick(e, item);
-                }}
-                href={item['@id'] || item.url}
-                {...options}
-                className={cx(options?.className, {
-                  active: item['@id'] === pathname,
-                })}
-              >
-                {props?.iconPosition !== 'right' && props?.children}
-                <span>{item.title}</span>
-                {props?.iconPosition === 'right' && props?.children}
-              </a>
+              <>
+                <a
+                  onClick={(e) => {
+                    const path = item['@id'] || item.url;
+                    setPathname(path);
+                    e.preventDefault();
+                    onClick && onClick(e, item);
+                  }}
+                  href={item['@id'] || item.url}
+                  {...options}
+                  className={cx(options?.className, {
+                    active: item['@id'] === pathname,
+                  })}
+                >
+                  {/* nav_title ovverides title */}
+                  {item.nav_title && item.nav_title !== '' ? (
+                    <span>{item.nav_title}</span>
+                  ) : (
+                    <span>{item.title}</span>
+                  )}
+                  {/* Contains a string and an icon for the buttons */}
+                  {props?.children}
+                </a>
+                {/* Item description */}
+                {item.nav_description && (
+                  <p className="nav-description">{item.nav_description}</p>
+                )}
+              </>
             );
           }}
           renderGlobalMenuItem={(item, options = {}) => {

package/src/ui/Header/HeaderMenuPopUp.js

@@ -1,21 +1,12 @@
 import React from 'react';
 import { Transition } from 'semantic-ui-react';
-import {
-  Container,
-  Divider,
-  Grid,
-  List,
-  Icon,
-  Accordion,
-} from 'semantic-ui-react';
+import { Container, Grid, List, Icon, 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;
@@ -76,10 +67,28 @@ const Topics = ({ menuItem, renderMenuItem }) => (
       <React.Fragment key={index}>
         {section.title === 'At a glance' ? (
           <Grid.Column width={3} id="at-a-glance">
+            <div className="mega-menu-title">
+              {/* Inverted right labeled button as a category title,
+                    for topics the button goes inside the grid */}
+              {renderMenuItem(
+                menuItem,
+                { className: 'ui button inverted icon right labeled' },
+                {
+                  iconPosition: 'right',
+                  children: (
+                    <>
+                      {/* Add word overview to titles */}
+                      <span> overview</span>
+                      <Icon className={'arrow right icon'} alt={'Title icon'} />
+                    </>
+                  ),
+                },
+              )}
+            </div>
             <Item item={section} key={index} renderMenuItem={renderMenuItem} />
           </Grid.Column>
         ) : (
-          <Grid.Column width={9} key={index}>
+          <Grid.Column width={9} key={index} id="topics-right-column">
             <ItemGrid
               item={section}
               columns={4}
@@ -154,7 +163,7 @@ const FirstLevelContent = ({ element, renderMenuItem, pathName }) => {
             if (!item.items.length) {
               return (
                 <React.Fragment key={index}>
-                  {renderMenuItem(item, { className: 'item' })}
+                  {renderMenuItem(item, { className: 'item sub-title' })}
                 </React.Fragment>
               );
             }
@@ -267,10 +276,25 @@ const NestedAccordion = ({ menuItems, renderMenuItem, pathName }) => {
       </Accordion.Title>
     );
     let overview = cloneDeep(element);
-    overview.title = 'See all';
     x.content = (
       <Accordion.Content key={index}>
-        {renderMenuItem(overview, { className: 'item' })}
+        <div className="mega-menu-title">
+          {/* Inverted right labeled button as a category title - Mobile */}
+          {renderMenuItem(
+            overview,
+            { className: 'ui button inverted icon right labeled' },
+            {
+              iconPosition: 'right',
+              children: (
+                <>
+                  {/* Add word overview to titles */}
+                  <span> overview</span>
+                  <Icon className={'arrow right icon'} alt={'Title icon'} />
+                </>
+              ),
+            },
+          )}
+        </div>
         <FirstLevelContent
           element={element}
           renderMenuItem={renderMenuItem}
@@ -306,23 +330,29 @@ function HeaderMenuPopUp({
         <Container>
           {menuItem && (
             <div className="menu-content tablet hidden mobile hidden">
-              <h3 className="title">
-                {renderMenuItem(
-                  menuItem,
-                  { className: 'title-link' },
-                  {
-                    iconPosition: 'right',
-                    children: (
-                      <img
-                        src={linkArrowsSVG}
-                        className={'title-img'}
-                        alt={'Title icon'}
-                      />
-                    ),
-                  },
-                )}
-              </h3>
-              <Divider fitted />
+              {/* Inverted right labeled button as a category title,
+                  for topics the button goes inside the grid */}
+              {menuItem.title !== 'Topics' && (
+                <div className="mega-menu-title">
+                  {renderMenuItem(
+                    menuItem,
+                    { className: 'ui button inverted icon right labeled' },
+                    {
+                      iconPosition: 'right',
+                      children: (
+                        <>
+                          {/* Add word overview to titles */}
+                          <span> overview</span>
+                          <Icon
+                            className={'arrow right icon'}
+                            alt={'Title icon'}
+                          />
+                        </>
+                      ),
+                    },
+                  )}
+                </div>
+              )}
               {menuItem.title === 'Topics' ? (
                 <Topics menuItem={menuItem} renderMenuItem={renderMenuItem} />
               ) : menuItem.title === 'Countries' ? (