@eeacms/volto-clms-theme 1.0.46 → 1.0.50

package/CHANGELOG.md

@@ -4,8 +4,56 @@ 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.50](https://github.com/eea/volto-clms-theme/compare/1.0.49...1.0.50)
+
+- cart icon with 0 items [`477f1ef`](https://github.com/eea/volto-clms-theme/commit/477f1efa39d6d5e4adede1b3c4f15e2b524dbcf5)
+- add routing to dataset view [`e65a730`](https://github.com/eea/volto-clms-theme/commit/e65a7304fc338b3262b7f9dad9b5c5029391f3c1)
+- add option without routing [`9675773`](https://github.com/eea/volto-clms-theme/commit/9675773a9531a98cee7f9735b09ebc6c3cfcd6fe)
+
+#### [1.0.49](https://github.com/eea/volto-clms-theme/compare/1.0.48...1.0.49)
+
+> 17 December 2021
+
+- DataSet Metadata view [`#157`](https://github.com/eea/volto-clms-theme/pull/157)
+- labels and conformity pass [`59be2fd`](https://github.com/eea/volto-clms-theme/commit/59be2fd5034fdfed211c4e0b0872504432e254e9)
+- image [`47cc7dc`](https://github.com/eea/volto-clms-theme/commit/47cc7dc37974848f2d90cdf6a035970620489cf8)
+
+#### [1.0.48](https://github.com/eea/volto-clms-theme/compare/1.0.47...1.0.48)
+
+> 16 December 2021
+
+- Develop [`#156`](https://github.com/eea/volto-clms-theme/pull/156)
+- dataset view [`38faa9d`](https://github.com/eea/volto-clms-theme/commit/38faa9d291e22c92a1c9049c7241555b2300f830)
+- tab editor [`cfbcf74`](https://github.com/eea/volto-clms-theme/commit/cfbcf742b370cc665c689a2480a09d3b640dc318)
+- remove required to description in proptypes [`9f6da1d`](https://github.com/eea/volto-clms-theme/commit/9f6da1d9c2125865c329a263d0a7b3e771baa287)
+- map keys [`6be4246`](https://github.com/eea/volto-clms-theme/commit/6be424624a61f867f85b6d914811111405ebeb98)
+- add resolutions to package.json volto-slate and react-slick [`54460ad`](https://github.com/eea/volto-clms-theme/commit/54460addb4c4644a03e6af2f94e5c75ee5154bf3)
+- check if items is not null [`26b4399`](https://github.com/eea/volto-clms-theme/commit/26b439981ca354b0f372bdf09a112a58482f2d4b)
+- fix subtab functionality and show subtab in editor [`ece4408`](https://github.com/eea/volto-clms-theme/commit/ece4408bd557a1d2f2868733e1560e2853da1822)
+
+#### [1.0.47](https://github.com/eea/volto-clms-theme/compare/1.0.46...1.0.47)
+
+> 16 December 2021
+
+- Develop [`#155`](https://github.com/eea/volto-clms-theme/pull/155)
+- use smaller images in Cards [`#147`](https://github.com/eea/volto-clms-theme/pull/147)
+- Demo modifications [`#154`](https://github.com/eea/volto-clms-theme/pull/154)
+- Geonetwork fields [`#153`](https://github.com/eea/volto-clms-theme/pull/153)
+- Sub tab option created [`#152`](https://github.com/eea/volto-clms-theme/pull/152)
+- add Role label [`ae98fda`](https://github.com/eea/volto-clms-theme/commit/ae98fdac159d385554a67d3a0690ba17b5dfa244)
+- show all the fields of geonetwork [`9eae556`](https://github.com/eea/volto-clms-theme/commit/9eae55614a26e84613dd747451e9a3fb864a6ac4)
+- if parent tab is clicked sub tab is opened [`5cc5d1c`](https://github.com/eea/volto-clms-theme/commit/5cc5d1c93691985965640499951e0a905da8acbb)
+- add the content url to the simple line listing template [`6ad396f`](https://github.com/eea/volto-clms-theme/commit/6ad396fdaf1850a3d509f4f640e421278341b74b)
+- pretier fix on text carousel [`5e18334`](https://github.com/eea/volto-clms-theme/commit/5e183349cf13b6f2739dbbfbbd48617bc6c9c34c)
+- SubTab style set [`73d9fa8`](https://github.com/eea/volto-clms-theme/commit/73d9fa85b05055b180409927583b71dc0a562f0f)
+- remove default image from New and Event view [`0ef541d`](https://github.com/eea/volto-clms-theme/commit/0ef541dbede5316c46f48585b9728a672f03b7ad)
+- use smaller images [`a545b9e`](https://github.com/eea/volto-clms-theme/commit/a545b9ed547fa124903b66987e6d7b3e46c17146)
+
 #### [1.0.46](https://github.com/eea/volto-clms-theme/compare/1.0.45...1.0.46)
 
+> 15 December 2021
+
+- Develop [`#151`](https://github.com/eea/volto-clms-theme/pull/151)
 - volto-form-block style [`#150`](https://github.com/eea/volto-clms-theme/pull/150)
 - Bugs n improvements [`#149`](https://github.com/eea/volto-clms-theme/pull/149)
 - Develop [`#148`](https://github.com/eea/volto-clms-theme/pull/148)

package/README.md

@@ -1,7 +1,18 @@
 # volto-clms-theme
+
 [![Releases](https://img.shields.io/github/v/release/eea/volto-clms-theme)](https://github.com/eea/volto-clms-theme/releases)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-clms-theme%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-clms-theme/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-master)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-clms-theme%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-clms-theme/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-clms-theme-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-clms-theme-develop)
 
 [Volto](https://github.com/plone/volto) add-on
 
@@ -46,6 +57,81 @@ Demo GIF
 
 1. Happy editing!
 
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
+
+```
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-clms-theme/blob/master/DEVELOP.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.46",
+  "version": "1.0.50",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -29,6 +29,10 @@
     "volto-form-block",
     "@eeacms/volto-taxonomy"
   ],
+  "resolutions": {
+    "volto-slate": "4.2.1",
+    "react-slick": "0.28.1"
+  },
   "dependencies": {
     "@eeacms/volto-tabs-block": "1.2.7",
     "@eeacms/volto-accordion-block": "3.4.7",
@@ -101,6 +105,8 @@
   },
   "scripts": {
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:theme": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'theme/**/*.{css,less}'",

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -1,12 +1,14 @@
+import './fontawesome';
+
+import { NavLink, Route } from 'react-router-dom';
+
 import React from 'react';
-import { connect } from 'react-redux';
+import { RenderBlocks } from '@plone/volto/components';
 import { compose } from 'redux';
+import { connect } from 'react-redux';
+import cx from 'classnames';
 import { withRouter } from 'react-router';
-import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import './fontawesome';
-import cx from 'classnames';
-import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalTabsView = (props) => {
   const { metadata = {}, tabsList = [], ExtraComponent = null } = props;
@@ -47,16 +49,28 @@ const CclVerticalTabsView = (props) => {
               setActiveTab = () => {},
             } = props;
             const title = tabs[tab].title;
+            const subTab = tabs[tab]?.subTab?.subtab || false;
             const tabIndex = index + 1;
+            const nextTabIndex = index + 2;
+            const nextSubTab =
+              tabs[tabsList[tabIndex]]?.subTab?.subtab || false;
             const defaultTitle = `Tab ${tabIndex}`;
             return (
               <div
                 key={index}
                 id={tabIndex}
-                className={cx('card', tab === activeTab && 'active')}
+                className={cx(
+                  'card',
+                  tab === activeTab && 'active',
+                  subTab && 'subcard',
+                )}
               >
                 <NavLink
-                  to={'#tab' + tabIndex}
+                  to={
+                    subTab === false && nextSubTab !== false
+                      ? '#tab' + nextTabIndex
+                      : '#tab' + tabIndex
+                  }
                   className="collapsed"
                   onClick={(e) => {
                     if (activeTab !== tab) {

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget.jsx

@@ -1,23 +1,28 @@
-import React from 'react';
-import { v4 as uuid } from 'uuid';
+import './fontawesome';
+
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Grid, Header } from 'semantic-ui-react';
+import { faExternalLinkAlt, faIcons } from '@fortawesome/free-solid-svg-icons';
 import { omit, without } from 'lodash';
-import move from 'lodash-move';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+
 import { DragDropList } from '@plone/volto/components';
-import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import React from 'react';
+import { SidebarPopup } from '@plone/volto/components';
 import { StyleWrapperEdit } from '@eeacms/volto-block-style/StyleWrapper';
+import clearSVG from '@plone/volto/icons/clear.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
+import { emptyTab } from '@eeacms/volto-tabs-block/helpers';
+import { fontAwesomeSchema } from './fontAwesomeSchema';
+import leftMenuSVG from '@plone/volto/icons/nav.svg';
+import move from 'lodash-move';
+import plusSVG from '@plone/volto/icons/circle-plus.svg';
+import rightSVG from '@plone/volto/icons/right-key.svg';
+import { subTabSchema } from './subTabSchema';
 import themeSVG from '@plone/volto/icons/theme.svg';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faIcons, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import plusSVG from '@plone/volto/icons/circle-plus.svg';
-import { SidebarPopup } from '@plone/volto/components';
-import { fontAwesomeSchema } from './fontAwesomeSchema';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import './fontawesome';
-import { Header, Grid } from 'semantic-ui-react';
+import { v4 as uuid } from 'uuid';
 
 export function moveColumn(formData, source, destination) {
   return {
@@ -36,6 +41,7 @@ const TabsWidget = (props) => {
   const [blockStyleVisible, setBlockStyleVisible] = React.useState(false);
   const [activeTabId, setActiveTabId] = React.useState(0);
   const [activeFontAwesomePopup, setActiveFontAwesomePopup] = React.useState(0);
+  const [activeSubTabPopup, setActiveSubTabPopup] = React.useState(0);
 
   const { value = {}, id, onChange } = props;
   const { blocks = {} } = value;
@@ -83,7 +89,18 @@ const TabsWidget = (props) => {
                     <Icon name={dragSVG} size="18px" />
                   </div>
                   <div className="tab-area">
-                    <div className="label">
+                    <div
+                      className="label"
+                      style={{
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        maxWidth: '65%',
+                      }}
+                    >
+                      {child.subTab?.subtab === true && (
+                        <Icon name={rightSVG} size="18px" />
+                      )}
                       {child.title || `Tab ${index + 1}`}
                     </div>
                     <button
@@ -190,6 +207,52 @@ const TabsWidget = (props) => {
                       />
                     </SidebarPopup>
 
+                    <button
+                      onClick={() => {
+                        setActiveTabId(childId);
+                        setActiveSubTabPopup(true);
+                      }}
+                      title="Sub Tab"
+                    >
+                      <Icon size={'24px'} name={leftMenuSVG} />
+                    </button>
+                    <SidebarPopup open={activeSubTabPopup}>
+                      <InlineForm
+                        schema={subTabSchema()}
+                        title={
+                          <>
+                            {subTabSchema().title}
+                            <button
+                              onClick={() => {
+                                setActiveSubTabPopup(false);
+                              }}
+                              style={{ float: 'right' }}
+                            >
+                              <Icon name={clearSVG} size="24px" />
+                            </button>
+                          </>
+                        }
+                        formData={{
+                          ...activeTabData?.subTab,
+                        }}
+                        onChangeField={(idTab, formValue) => {
+                          onChange(id, {
+                            ...value,
+                            blocks: {
+                              ...value.blocks,
+                              [activeTabId]: {
+                                ...(activeTabData || {}),
+                                subTab: {
+                                  ...activeTabData?.subTab,
+                                  [idTab]: formValue,
+                                },
+                              },
+                            },
+                          });
+                        }}
+                      />
+                    </SidebarPopup>
+
                     {value.blocks_layout?.items?.length > 1 ? (
                       <button
                         onClick={() => {

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/custom.less

@@ -76,3 +76,8 @@ p.styled-slate {
     margin-top: -4rem;
   }
 }
+
+div.tabs-block.edit a.item.active p.menu-item-text {
+  border-style: none none solid none;
+  font-weight: bold;
+}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/subTabSchema.js

@@ -0,0 +1,19 @@
+export const subTabSchema = () => ({
+  title: 'Vertical tab block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['subtab'],
+    },
+  ],
+  properties: {
+    subtab: {
+      title: 'Is subtab',
+      description: 'Define if this tab is a subTab',
+      type: 'boolean',
+      default: false,
+    },
+  },
+  required: [],
+});

package/src/components/CLMSDatasetDetailView/BoundingBoxComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const BoundingBoxComponent = (props) => {
+  const { north, south, east, west } = props.bbox;
+
+  return (
+    <div className="bounding-box-container">
+      <h3>Bounding Box</h3>
+      <div className="bounding-box-item">
+        {east && <div className="bounding-box-item">East: {east}</div>}
+        {west && <div className="bounding-box-item">West: {west}</div>}
+        {north && <div className="bounding-box-item">North: {north}</div>}
+        {south && <div className="bounding-box-item">South: {south}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default BoundingBoxComponent;

package/src/components/CLMSDatasetDetailView/CLMSDatasetDetailView.jsx

@@ -125,36 +125,30 @@ const CLMSDatasetDetailView = ({ content, token }) => {
                           this dataset.
                           <br />
                           <br />
-                          {item.type === 'EEA' && (
-                            <a
-                              target="_blank"
-                              rel="noreferrer"
-                              href={
-                                'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
-                                item.id
-                              }
-                            >
+                          <a
+                            target="_blank"
+                            rel="noreferrer"
+                            href={
+                              item.type === 'EEA'
+                                ? 'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
+                                  item.id
+                                : 'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
+                                  item.id
+                            }
+                          >
+                            {item.type === 'EEA' && (
                               <FormattedMessage
                                 id="EEA Geonetwork element"
                                 defaultMessage="EEA Geonetwork element"
                               />
-                            </a>
-                          )}
-                          {item.type === 'VITO' && (
-                            <a
-                              target="_blank"
-                              rel="noreferrer"
-                              href={
-                                'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
-                                item.id
-                              }
-                            >
+                            )}
+                            {item.type === 'VITO' && (
                               <FormattedMessage
                                 id="VITO Geonetwork element"
                                 defaultMessage="VITO Geonetwork element"
                               />
-                            </a>
-                          )}
+                            )}
+                          </a>
                         </div>
                         <CclButton
                           onClick={() => {
@@ -196,7 +190,7 @@ const CLMSDatasetDetailView = ({ content, token }) => {
             })}
           </Segment.Group>
         )}
-      <CclTabs>
+      <CclTabs routing={true}>
         <div tabTitle="General Info">{DataSetInfoContent(content)}</div>
         <div tabTitle="Metadata">{MetadataContent(content)}</div>
 

package/src/components/CLMSDatasetDetailView/ContactComponent.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+const ContactComponent = (props) => {
+  const {
+    organisationName,
+    deliveryPoint,
+    city,
+    administrativeArea,
+    postalCode,
+    country,
+    electronicMailAddress,
+    url,
+    urlTitle,
+    roleCode,
+  } = props.contact;
+
+  return (
+    <div className="contact-container">
+      <h3>Contact</h3>
+      <div className="contact-item">
+        {city && <div className="contact-item">{city}</div>}
+        {organisationName && (
+          <div className="contact-item">{organisationName}</div>
+        )}
+        {deliveryPoint && <div className="contact-item">{deliveryPoint}</div>}
+        {city && <div className="contact-item">{city}</div>}
+        {administrativeArea && (
+          <div className="contact-item">{administrativeArea}</div>
+        )}
+        {postalCode && <div className="contact-item">{postalCode}</div>}
+        {country && <div className="contact-item">{country}</div>}
+        {electronicMailAddress && (
+          <div className="contact-item">{electronicMailAddress}</div>
+        )}
+        {url && <div className="contact-item">{url}</div>}
+        {urlTitle && <div className="contact-item">{urlTitle}</div>}
+        {roleCode && <div className="contact-item">Role: {roleCode}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default ContactComponent;

package/src/components/CLMSDatasetDetailView/DistributionInfoComponent.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const DistributionInfoComponent = (props) => {
+  const { resourceLocator, services } = props.resource;
+
+  return (
+    <div className="distribution-info-container">
+      <h3>Resource</h3>
+      <div className="distribution-info-item">
+        {resourceLocator && (
+          <div className="distribution-info-item">{resourceLocator}</div>
+        )}
+        {services && <div className="distribution-info-item">{services}</div>}
+      </div>
+      <br />
+    </div>
+  );
+};
+
+export default DistributionInfoComponent;

package/src/components/CLMSDatasetDetailView/MetadataContent.jsx

@@ -1,29 +1,27 @@
-import React from 'react';
-import { CclInfoDescription, CclInfoContainer } from '../CclInfoDescription';
+import { CclInfoContainer, CclInfoDescription } from '../CclInfoDescription';
+
+import BoundingBoxComponent from './BoundingBoxComponent';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
+import ContactComponent from './ContactComponent';
+import DistributionInfoComponent from './DistributionInfoComponent';
+import { Label } from 'semantic-ui-react';
+import React from 'react';
 import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 const MetadataContent = (data) => {
   return (
     <>
-      {data.geonetwork_identifiers?.items.map((item) => {
-        return item.type === 'EEA' ? (
-          <CclButton
-            className="ccl-button ccl-button--default download-dataset-metadata"
-            url={
-              'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
-              item.id
-            }
-            download={true}
-          >
-            Download metadata: {item.title}
-          </CclButton>
-        ) : (
+      {data?.geonetwork_identifiers?.items.map((item, key) => {
+        return (
           <CclButton
+            key={key}
             className="ccl-button ccl-button--default download-dataset-metadata"
             url={
-              'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
-              item.id
+              item.type === 'EEA'
+                ? 'https://sdi.eea.europa.eu/catalogue/srv/eng/catalog.search#/metadata/' +
+                  item.id
+                : 'https://land.copernicus.vgt.vito.be/geonetwork/srv/eng/catalog.search#/metadata/' +
+                  item.id
             }
             download={true}
           >
@@ -34,90 +32,221 @@ const MetadataContent = (data) => {
 
       <CclInfoContainer>
         <h2>Data identification</h2>
-        <CclInfoDescription
-          title="Resource title"
-          tooltip="Name by which the cited resource is known"
-          description={data.dataResourceTitle}
-        />
+        {data?.dataResourceTitle && (
+          <CclInfoDescription
+            title="Resource title"
+            tooltip="Name by which the cited resource is known"
+            description={data?.dataResourceTitle}
+          />
+        )}
+        {data?.resourceEffective && (
+          <CclInfoDescription
+            title="Date of publication"
+            tooltip=""
+            description={new Date(data?.resourceEffective).toLocaleDateString()}
+          />
+        )}
+        {data?.resourceModified && (
+          <CclInfoDescription
+            title="Revision date"
+            tooltip=""
+            description={new Date(data?.resourceModified).toLocaleDateString()}
+          />
+        )}
         <CclInfoDescription
           title="Resource abstract"
           tooltip="Brief narrative summary of the content of the resource(s) with coverage, main attributes, data sources, important of the work, etc."
           description={
-            <StringToHTML string={data.dataResourceAbstract?.data || ''} />
+            <StringToHTML string={data?.dataResourceAbstract?.data || ''} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Classification of spatial data</h2>
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Geographic reference</h2>
-        <CclInfoDescription
-          title="Coordinate Reference System"
-          tooltip="CRS of the resource"
-          description={data.coordinateReferenceSystem}
-        />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Temporal reference</h2>
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Quality and validity</h2>
-        <CclInfoDescription
-          title="Lineage"
-          tooltip="General explanation of the data produce knowledge's about the lineage of a dataset"
-          description={<StringToHTML string={data.qualityLineage?.data} />}
-        />
+        {data?.keywords && data?.keywords?.length > 0 && (
+          <CclInfoDescription
+            title="Keywords"
+            tooltip=""
+            description={
+              <Label.Group>
+                {data?.keywords.map((keyword, key) => {
+                  return (
+                    <Label key={key} color="olive">
+                      {keyword}
+                    </Label>
+                  );
+                })}
+              </Label.Group>
+            }
+          />
+        )}
+        {data?.geographicCoverage?.geolocation && (
+          <CclInfoDescription
+            title="Geographic coverage"
+            tooltip=""
+            description={
+              <Label.Group>
+                {data?.geographicCoverage?.geolocation.map((location, key) => {
+                  return (
+                    <Label key={key} color="olive">
+                      {location.label}
+                    </Label>
+                  );
+                })}
+              </Label.Group>
+            }
+          />
+        )}
+        {data?.accessAndUseLimitationPublic_line && (
+          <CclInfoDescription
+            title="Limitation of public access"
+            tooltip=""
+            description={data?.accessAndUseLimitationPublic_line}
+          />
+        )}
         <CclInfoDescription
-          title="Spatial resolution"
-          tooltip="A set of zero to many resolution distances (typically for gridded data and imagery-derived products) or equivalent scales (typically for maps or map-derived products)"
+          title="Conditions applying to access and use"
+          tooltip=""
           description={
-            <StringToHTML string={data.qualitySpatialResolution?.data} />
+            <StringToHTML string={data?.accessAndUseConstraints?.data || ''} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Conformity</h2>
         <CclInfoDescription
-          title="Specification"
-          tooltip="A citation of the implementing rules adopted under Article 7(1) of Directive 2007/2/EC or other specification to which a particular resource conforms"
-          description={
-            <StringToHTML string={data.conformitySpecification?.data} />
-          }
+          title="Spatial Resolution"
+          tooltip=""
+          description={data?.qualitySpatialResolution_line}
         />
+        {data?.classificationTopicCategory && (
+          <CclInfoDescription
+            title="Topic of Category"
+            tooltip=""
+            description={
+              <Label.Group>
+                {data?.classificationTopicCategory &&
+                  data?.classificationTopicCategory.map((topic, key) => {
+                    return (
+                      <Label key={key} color="olive">
+                        {topic.title}
+                      </Label>
+                    );
+                  })}
+              </Label.Group>
+            }
+          />
+        )}
+        {data?.geographicBoundingBox?.items?.length > 0 && (
+          <CclInfoDescription
+            title="Bounding Boxes"
+            tooltip=""
+            description={data?.geographicBoundingBox?.items.map((bbox, key) => {
+              return <BoundingBoxComponent key={key} bbox={bbox} />;
+            })}
+          />
+        )}
+        {data?.temporalCoverage && (
+          <CclInfoDescription
+            title="Temporal Extent"
+            tooltip=""
+            description={
+              <Label.Group>
+                {data?.temporalCoverage &&
+                  data?.temporalCoverage.map((year, key) => {
+                    return (
+                      <Label key={key} color="olive">
+                        {year}
+                      </Label>
+                    );
+                  })}
+              </Label.Group>
+            }
+          />
+        )}
       </CclInfoContainer>
+      {data?.dataResourceType && (
+        <CclInfoContainer>
+          <h2>Hierarchy Level</h2>
+          <CclInfoDescription
+            title="Resource Type"
+            tooltip=""
+            description={data?.dataResourceType}
+          />
+        </CclInfoContainer>
+      )}
+      {data?.responsiblePartyWithRole?.items &&
+        data?.responsiblePartyWithRole?.items?.length > 0 && (
+          <CclInfoContainer>
+            <h2>Contacts</h2>
+            <CclInfoDescription
+              title="Responsible Party with Role"
+              tooltip=""
+              description={data?.responsiblePartyWithRole?.items.map(
+                (item, key) => {
+                  return <ContactComponent key={key} contact={item} />;
+                },
+              )}
+            />
+          </CclInfoContainer>
+        )}
+      {data?.coordinateReferenceSystemList &&
+        data?.coordinateReferenceSystemList.length > 0 && (
+          <CclInfoContainer>
+            <h2>Reference system info</h2>
+            <CclInfoDescription
+              title="Coordinate Reference System"
+              tooltip="CRS of the resource"
+              description={
+                <Label.Group>
+                  {data?.coordinateReferenceSystemList &&
+                    data?.coordinateReferenceSystemList.map(
+                      (reference, key) => {
+                        return (
+                          <Label key={key} color="olive">
+                            {reference}
+                          </Label>
+                        );
+                      },
+                    )}
+                </Label.Group>
+              }
+            />
+          </CclInfoContainer>
+        )}
       <CclInfoContainer>
-        <h2>Constraints related to access and use</h2>
-        <CclInfoDescription
-          title="Conditions applying to access and use"
-          tooltip="Restriction on the access and use of a resource or metadata"
-          description={
-            <StringToHTML string={data.accessAndUseConstraints?.data} />
-          }
-        />
+        <h2>Data quality info</h2>
         <CclInfoDescription
-          title="Limitation of public access"
-          tooltip="Limitation and other reason for public access"
+          title="Specification"
+          tooltip="A citation of the implementing rules adopted under Article 7(1) of Directive 2007/2/EC or other specification to which a particular resource conforms"
           description={
-            <StringToHTML string={data.accessAndUseLimitationPublic?.data} />
+            <StringToHTML string={data?.conformitySpecification?.data} />
           }
         />
-      </CclInfoContainer>
-      <CclInfoContainer>
-        <h2>Responsible organisation</h2>
+        {data?.conformityPass?.title && (
+          <CclInfoDescription
+            title="Pass"
+            tooltip=""
+            description={data?.conformityPass?.title}
+          />
+        )}
         <CclInfoDescription
-          title="Responsible party"
-          tooltip="Organisation associated with the resource. Organisation name, contact information (email)."
-          description={<StringToHTML string={data.owners?.data} />}
-        />
-        <CclInfoDescription
-          title="Responsible party role"
-          tooltip="Function performed by the party"
-          description={
-            <StringToHTML string={data.responsiblePartyRole?.data} />
-          }
+          title="Lineage"
+          tooltip="General explanation of the data produce knowledge's about the lineage of a dataset"
+          description={<StringToHTML string={data?.qualityLineage?.data} />}
         />
       </CclInfoContainer>
+      {data?.distributionInfo?.items &&
+        data?.distributionInfo?.items?.length > 0 && (
+          <CclInfoContainer>
+            <h2>Distribution info</h2>
+            <CclInfoDescription
+              title="Resource Locator and Services"
+              tooltip=""
+              description={data?.distributionInfo?.items.map(
+                (resource, key) => {
+                  return (
+                    <DistributionInfoComponent key={key} resource={resource} />
+                  );
+                },
+              )}
+            />
+          </CclInfoContainer>
+        )}
     </>
   );
 };

package/src/components/CLMSEventView/CLMSEventView.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from 'react';
+import { StringToHTML } from '@eeacms/volto-clms-theme/components/CclUtils';
 
 export const CLMSEventView = (props) => {
   const { content } = props;
@@ -12,17 +12,19 @@ export const CLMSEventView = (props) => {
         <div className="event-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure className="news-detail-image">
-          <img
-            src={
-              content?.image
-                ? content?.image?.download
-                : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-            }
-            alt={content?.image ? content?.image?.filename : 'Placeholder'}
-          />
-          <figcaption>{content?.image_caption}</figcaption>
-        </figure>
+        {content?.image && (
+          <figure className="news-detail-image">
+            <img
+              src={
+                content?.image
+                  ? content?.image?.download
+                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+              }
+              alt={content?.image ? content?.image?.filename : 'Placeholder'}
+            />
+            <figcaption>{content?.image_caption}</figcaption>
+          </figure>
+        )}
         <div className="event-detail-when">
           <FontAwesomeIcon icon={['far', 'calendar-alt']} />
           <div className="event-detail-when-text">

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -10,17 +10,19 @@ const CLMSNewsItemView = (props) => {
         <div className="news-detail-date">
           {new Date(content?.effective).toLocaleDateString()}
         </div>
-        <figure className="news-detail-image">
-          <img
-            src={
-              content?.image
-                ? content?.image?.download
-                : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-            }
-            alt={content?.image ? content?.image?.filename : 'Placeholder'}
-          />
-          <figcaption>{content?.image_caption}</figcaption>
-        </figure>
+        {content?.image && (
+          <figure className="news-detail-image">
+            <img
+              src={
+                content?.image
+                  ? content?.image?.download
+                  : 'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+              }
+              alt={content?.image ? content?.image?.filename : 'Placeholder'}
+            />
+            <figcaption>{content?.image_caption}</figcaption>
+          </figure>
+        )}
         <div className="news-detail-content">
           <StringToHTML string={content.text?.data || ''} />
         </div>

package/src/components/CclCard/CclCard.jsx

@@ -1,10 +1,12 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
 import './cards.less';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import * as mime from 'react-native-mime-types';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import React from 'react';
+
 function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes === 0) return '0 Byte';
@@ -26,7 +28,7 @@ function CclCard(props) {
           {type === 'doc' && (
             <>
               <div className="card-doc-title">
-                <a href={card?.file?.download || '#'}>
+                <a href={card?.file?.download || url}>
                   {card?.title || 'Card default title'}
                 </a>
               </div>
@@ -47,6 +49,7 @@ function CclCard(props) {
               <div className="card-block-image">
                 <img
                   src={
+                    card?.image?.scales?.preview?.download ||
                     card?.image?.download ||
                     'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
                   }

package/src/components/CclInfoDescription/CclInfoDescription.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import React from 'react';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
 /**
@@ -16,14 +16,16 @@ import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
       </CclInfoDescription>
  * 
  */
-function CclInfoDescription({ title, description, tooltip = 'Info' }) {
+function CclInfoDescription({ title, description, tooltip }) {
   return (
     <div className="dataset-info-field">
       <div className="dataset-field-title">
         <h3>{title}</h3>
-        <span className="info-icon" tooltip={tooltip} direction="up">
-          <FontAwesomeIcon icon={faInfoCircle} />
-        </span>
+        {tooltip && (
+          <span className="info-icon" tooltip={tooltip} direction="up">
+            <FontAwesomeIcon icon={faInfoCircle} />
+          </span>
+        )}
       </div>
       <div className="dataset-field-description">{description}</div>
     </div>
@@ -32,7 +34,6 @@ function CclInfoDescription({ title, description, tooltip = 'Info' }) {
 
 CclInfoDescription.propTypes = {
   title: PropTypes.string.isRequired,
-  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-    .isRequired,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 export default CclInfoDescription;

package/src/components/CclTab/CclTab.jsx

@@ -1,28 +1,28 @@
-import React from 'react';
+import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import React from 'react';
+import cx from 'classnames';
 
 function CclTab(props) {
-  let { activeTab, tabTitle, onClick } = props;
+  let { activeTab, tabTitle, onClick, tabId, routing } = props;
 
   function onTabClick() {
-    onClick(tabTitle);
-  }
-
-  let className = 'card';
-
-  if (activeTab === tabTitle) {
-    className += ' active';
+    onClick(tabId);
   }
-
   return (
     <div
-      className={className}
+      className={cx('card', activeTab === tabId && 'active')}
       onClick={onTabClick}
       onKeyDown={onTabClick}
       tabIndex="0"
       role="button"
+      id={tabId}
     >
-      <li className="collapsed">{tabTitle}</li>
+      {routing ? (
+        <NavLink to={'#' + tabId}>{tabTitle}</NavLink>
+      ) : (
+        <NavLink to={'#'}>{tabTitle}</NavLink>
+      )}
     </div>
   );
 }

package/src/components/CclTab/CclTabs.jsx

@@ -1,7 +1,9 @@
+import './CclTabs.less';
+
 import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+
 import CclTab from './CclTab';
-import './CclTabs.less';
+import PropTypes from 'prop-types';
 
 /**
  * Tabs component documentation.
@@ -19,31 +21,50 @@ import './CclTabs.less';
  * 
  */
 const CclTabs = (props) => {
-  let { children } = props;
-  let [activeTab, setActiveTab] = useState(props.children[0].props.tabTitle);
+  let { children, routing = false } = props;
+  let [activeTab, setActiveTab] = useState(
+    props.children[0].props.tabId ||
+      props.children[0].props.tabTitle.replace(' ', ''),
+  );
 
   function onClickTabItem(tab) {
     setActiveTab(tab);
   }
+  React.useEffect(() => {
+    const hash = window.location.hash.substring(1) || '';
+    if (routing) {
+      if (hash) {
+        setActiveTab(hash);
+      } else {
+        setActiveTab(
+          children
+            .filter((item) => !!item.props.tabTitle)[0]
+            .props?.tabTitle?.replace(' ', ''),
+        );
+      }
+    }
+  }, [children, routing]);
 
   return (
     <div className="ccl-container-flex">
       <div className="left-content cont-w-25">
-        <ul className="left-menu">
+        <nav className="left-menu">
           {children
             .filter((item) => !!item.props.tabTitle)
-            .map((child) => {
+            .map((child, key) => {
               const { tabTitle } = child.props;
               return (
                 <CclTab
                   activeTab={activeTab}
-                  key={tabTitle}
+                  key={key}
+                  routing={routing}
+                  tabId={tabTitle.replace(' ', '')}
                   tabTitle={tabTitle}
                   onClick={onClickTabItem}
                 />
               );
             })}
-        </ul>
+        </nav>
 
         {/* Check if underPanel element exist and render */}
         {children
@@ -59,7 +80,7 @@ const CclTabs = (props) => {
           {children
             .filter((item) => !!item.props.tabTitle)
             .map((child, index) => {
-              return child.props.tabTitle !== activeTab ? (
+              return child.props.tabTitle.replace(' ', '') !== activeTab ? (
                 <div key={index} className="deactivate-content">
                   {child.props.children}
                 </div>

package/src/customizations/volto/components/theme/Header/Header.jsx

@@ -5,33 +5,32 @@
  * @module components/theme/Header/Header
  */
 
-import React, { Component, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { connect, useSelector, useDispatch } from 'react-redux';
+import '@eeacms/volto-clms-theme/../theme/clms/css/header.css';
 
+import { FormattedMessage, injectIntl } from 'react-intl';
 import { Logo, Navigation, SearchWidget } from '@plone/volto/components';
-import jwtDecode from 'jwt-decode';
-import { getUser } from '@plone/volto/actions';
-import { compose } from 'redux';
+import React, { Component, useEffect } from 'react';
+import { connect, useDispatch, useSelector } from 'react-redux';
 
 import { BodyClass } from '@plone/volto/helpers';
-
 import CclLanguageSelector from '@eeacms/volto-clms-theme/components/CclLanguageSelector/CclLanguageSelector';
+import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/CclLoginModal';
 import CclTopMainMenu from '@eeacms/volto-clms-theme/components/CclTopMainMenu/CclTopMainMenu';
-
-import { FormattedMessage, injectIntl } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { compose } from 'redux';
 // import { CART_SESSION_KEY } from '@eeacms/volto-clms-theme/utils/useCartState';
 import { getCartItems } from '@eeacms/volto-clms-utils/actions';
-import '@eeacms/volto-clms-theme/../theme/clms/css/header.css';
-import { Link } from 'react-router-dom';
-import CclLoginModal from '@eeacms/volto-clms-theme/components/CclLoginModal/CclLoginModal';
+import { getUser } from '@plone/volto/actions';
+import jwtDecode from 'jwt-decode';
+
 // import useCartState from '@eeacms/volto-clms-theme/utils/useCartState';
 
 const CartIconCounter = (props) => {
   const { cart_items, users, intl } = useSelector((state) => state);
 
-  const cart = cart_items.items;
+  const cart = cart_items.items || [];
   const user_id = users.user.id;
 
   const dispatch = useDispatch();
@@ -39,7 +38,6 @@ const CartIconCounter = (props) => {
     dispatch(getCartItems(user_id));
   }, [user_id, dispatch]);
   return (
-    cart?.length !== 0 &&
     cart && (
       <>
         <span>
@@ -248,6 +246,7 @@ class Header extends Component {
                   {(this.props.user.id && (
                     <>
                       <li>
+                        <CartIconCounter />
                         <Link
                           to={`/${this.props.locale}/profile`}
                           className="header-login-link"
@@ -280,6 +279,8 @@ class Header extends Component {
                     </>
                   )) || (
                     <li>
+                      <CartIconCounter />
+
                       <Link
                         to={`/${this.props.locale}/login`}
                         className="header-login-link"

package/theme/clms/css/menu.css

@@ -208,6 +208,10 @@
   background-color: #a0b128;
 }
 
+.left-menu .subcard {
+  margin-left: 1rem;
+}
+
 .left-menu a {
   display: inline-block;
   width: 100%;