@eeacms/volto-cca-policy 0.1.82 → 0.1.83

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.83](https://github.com/eea/volto-cca-policy/compare/0.1.82...0.1.83) - 26 February 2024
+
+#### :hammer_and_wrench: Others
+
+- Refs #265786 - Fix go to contact info (in case of email vs website url). [GhitaB - [`38029dc`](https://github.com/eea/volto-cca-policy/commit/38029dc5bcb21423b8b9edea8aef9627cc06b8a5)]
+- Refs #265786 - Fix go to contact info (in case of email vs website url). [GhitaB - [`4a45be0`](https://github.com/eea/volto-cca-policy/commit/4a45be04c57305874fb38952a354c7fc2e630c10)]
+- Refs #265786 - Event cards listing: fix icon to stay on the same line. [GhitaB - [`d7c32ae`](https://github.com/eea/volto-cca-policy/commit/d7c32aed9d0a66cd618daeb38ae8a8bb9c400be4)]
+- Refs #265786 - Event cards listing: improve styles, add email info and subjects tags. [GhitaB - [`3c92d54`](https://github.com/eea/volto-cca-policy/commit/3c92d54ceb88a4dd28536e99398412e1e4532b8d)]
+- Refs #265786 - Event cards listing: improve styles, improve day display. [GhitaB - [`80b0fe0`](https://github.com/eea/volto-cca-policy/commit/80b0fe047f254483664e5528871e1d51c02830e1)]
+- Refs #265786 - Implement events cards listing variation to be used for listing events. [GhitaB - [`73a77f2`](https://github.com/eea/volto-cca-policy/commit/73a77f2430568f3b20749f77c986720c6a5dab81)]
+- Add Display customization, to avoid crash in homepage [Tiberiu Ichim - [`6e3196b`](https://github.com/eea/volto-cca-policy/commit/6e3196b4298c0ec6adfb73df682b9adfa3cd9fae)]
 ### [0.1.82](https://github.com/eea/volto-cca-policy/compare/0.1.81...0.1.82) - 24 February 2024
 
 #### :house: Internal changes
@@ -398,10 +409,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #260715 rast-block wip [Tripon Eugen - [`f19d54e`](https://github.com/eea/volto-cca-policy/commit/f19d54e0b9a6a86bf344eb85b6a1cda7f3de91bf)]
 - Refs #260715 rast-block wip [Tripon Eugen - [`2828537`](https://github.com/eea/volto-cca-policy/commit/2828537b6c084cd1a82162d552fb4ef025b71f9f)]
 - Refs #260715 rast-block updates [Tripon Eugen - [`1e803e5`](https://github.com/eea/volto-cca-policy/commit/1e803e5bd3d3fb7558f261c76c68866be7beb8b5)]
+- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`0a15e1b`](https://github.com/eea/volto-cca-policy/commit/0a15e1b2ad081233685e80d5b3c60a8663f6b896)]
+- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`9554e44`](https://github.com/eea/volto-cca-policy/commit/9554e44c92a621a52b2adb5a4830fb084ee5734b)]
 ### [0.1.49](https://github.com/eea/volto-cca-policy/compare/0.1.48...0.1.49) - 15 November 2023
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Refactor automated testing [valentinab25 - [`7b820a6`](https://github.com/eea/volto-cca-policy/commit/7b820a6369c2ddd5203b1a4abe352cb4bb43db7a)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`f0a8061`](https://github.com/eea/volto-cca-policy/commit/f0a8061c275c236deb00087c23fac9860a073106)]
 
 #### :hammer_and_wrench: Others
@@ -418,6 +432,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Refs #259267 - jenkins test [Tripon Eugen - [`cacd31e`](https://github.com/eea/volto-cca-policy/commit/cacd31e7b1afe0983674ed5c7632d2e1d7fa752e)]
 - Refs #259267 - jenkins [Tripon Eugen - [`5b3affe`](https://github.com/eea/volto-cca-policy/commit/5b3affee8401239de10097884c1b7f2349d15ec0)]
 - Refs #259267 - add When, lead image and title to files [Tripon Eugen - [`2cedb23`](https://github.com/eea/volto-cca-policy/commit/2cedb237f898af9057e13fba94b615ef71077204)]
+- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`4d607a5`](https://github.com/eea/volto-cca-policy/commit/4d607a576e9d0a5c34e48c41b409e7df616ee3d6)]
+- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`b7f74d5`](https://github.com/eea/volto-cca-policy/commit/b7f74d53513a6edbfbca5cb6d19687929bb1e5db)]
+- test: [JENKINS] Improve cypress time [valentinab25 - [`db65617`](https://github.com/eea/volto-cca-policy/commit/db656173391f65157098d95d388c25f6429753d8)]
 - Refs #259267 - cca event blocks attachments and check not mandatoty fields [Tripon Eugen - [`3138e5a`](https://github.com/eea/volto-cca-policy/commit/3138e5afb5bfbdbed14e27ed457b16867b7fa414)]
 - Refs #256681 - Fix error in CCA Event view menu. ([React Intl] An id must be provided to format a message.) [GhitaB - [`517eeb8`](https://github.com/eea/volto-cca-policy/commit/517eeb817264a47bbfd6b9b7d22aaf22d44ed224)]
 - Refs #161485 - Fix ECDE name conflict. [GhitaB - [`8bfd99f`](https://github.com/eea/volto-cca-policy/commit/8bfd99ff68bb82a04d1c0ed625fa514fcf46289e)]
@@ -634,6 +651,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
+- chore: [JENKINS] Remove alpha testing version [valentinab25 - [`ad1ced0`](https://github.com/eea/volto-cca-policy/commit/ad1ced0971ba116c13a3b5fcc039172cc915c919)]
 
 #### :hammer_and_wrench: Others
 
@@ -1114,6 +1132,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Refs #158294 - Update supported languages list. [GhitaB - [`0a4f91f`](https://github.com/eea/volto-cca-policy/commit/0a4f91f39b7edc367bd4c127d6a8f273c7788361)]
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`8f1f9ce`](https://github.com/eea/volto-cca-policy/commit/8f1f9ce6c22805670cc0800d3c779b6d619d0f31)]
 ### [0.1.1](https://github.com/eea/volto-cca-policy/compare/0.1.0...0.1.1) - 13 December 2022
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/index.js

@@ -0,0 +1 @@
+export BannerTitle from './theme/BannerTitle/BannerTitle';

package/src/components/manage/Blocks/Listing/EventCardsListingView.jsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import cx from 'classnames';
+import './styles.less';
+import { ConditionalLink } from '@plone/volto/components';
+import { Icon } from 'semantic-ui-react';
+import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
+import { Card, Grid } from 'semantic-ui-react';
+import { Label } from 'semantic-ui-react';
+
+const Separator = () => {
+  return <div className="sep">&nbsp;&nbsp;⎯&nbsp;&nbsp;</div>;
+};
+
+const StartDate = (start) => {
+  const start_date = new Date(start);
+
+  const day = start_date.getDate();
+  const monthIndex = start_date.getMonth();
+
+  const monthNames = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+  ];
+
+  const monthName = monthNames[monthIndex];
+
+  const dayOfWeek = start_date
+    .toLocaleDateString('en', { weekday: 'short' })
+    .substring(0, 2);
+
+  return (
+    <div className="start-date">
+      <p className="day">{dayOfWeek}</p>
+      <p className="date">
+        {day}.{monthName}.
+      </p>
+    </div>
+  );
+};
+
+const EventCardsListingView = ({ items, isEditMode, token }) => {
+  const go_to_contact = (contact_info) => {
+    if (contact_info.includes('@')) {
+      return `mailto:${contact_info}`;
+    }
+    return contact_info;
+  };
+
+  return (
+    <div className={cx('ui fluid eventCards')}>
+      {items.map((item, index) => (
+        <div
+          className={cx('u-item listing-item simple-listing-item')}
+          key={item['@id']}
+        >
+          <div className="wrapper">
+            <Card fluid>
+              <Card.Content>
+                <Grid stackable columns={12}>
+                  <Grid.Column width={2}>
+                    {!!item.start && StartDate(item.start)}
+                  </Grid.Column>
+                  <Grid.Column width={10}>
+                    <div className="event-details">
+                      <h3 className={'listing-header'}>
+                        <a href={item.event_url}>
+                          {item.title ? item.title : item.id}
+                        </a>
+                      </h3>
+                      <div className="listing-body-dates">
+                        {!!item.start && (
+                          <span className="event-date">
+                            <Icon className="ri-calendar-line" />
+                            <When
+                              start={item.start}
+                              end={item.end}
+                              whole_day={true}
+                              open_end={item.open_end}
+                            />
+                          </span>
+                        )}
+                      </div>
+                      <div className="listing-body-dates">
+                        {!!item['location'] && (
+                          <span className="event-date">
+                            <Icon className="map marker alternate" />
+                            {item['location']}
+                          </span>
+                        )}
+                      </div>
+                      {item.description && (
+                        <p className={'listing-description'}>
+                          {item.description}
+                        </p>
+                      )}
+                      <div className="bottom-info">
+                        {!!item.subjects && item.subjects.length > 0 && (
+                          <>
+                            <div className="subjects">
+                              {item.subjects.map((tag) => (
+                                <Label key={tag} size="small">
+                                  {tag}
+                                </Label>
+                              ))}
+                            </div>
+
+                            <Separator />
+                          </>
+                        )}
+                        <div className="source">
+                          <ConditionalLink item={item} condition={!isEditMode}>
+                            Climate Adapt page for this event
+                          </ConditionalLink>
+                        </div>
+                        {!!item.contact_email && (
+                          <>
+                            <Separator />
+                            <div className="email-info">
+                              <Icon className="mail" />
+                              <a
+                                className="contact_email"
+                                title=""
+                                href={go_to_contact(item.contact_email)}
+                                target="_blank"
+                                rel="noreferrer"
+                              >
+                                {item.contact_email}
+                              </a>
+                            </div>
+                          </>
+                        )}
+                      </div>
+                    </div>
+                  </Grid.Column>
+                </Grid>
+              </Card.Content>
+            </Card>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+EventCardsListingView.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default compose(
+  connect((state) => ({
+    token: state.userSession.token,
+  })),
+)(EventCardsListingView);

package/src/components/manage/Blocks/Listing/index.js

@@ -1,5 +1,6 @@
 import OrganisationCardsListingView from './OrganisationCardsListingView';
 import IndicatorCardsListingView from './IndicatorCardsListingView';
+import EventCardsListingView from './EventCardsListingView';
 
 export default function installListing(config) {
   config.blocks.blocksConfig.listing = {
@@ -20,6 +21,13 @@ export default function installListing(config) {
         isDefault: false,
         fullobjects: true,
       },
+      {
+        id: 'eventCards',
+        title: 'Event Cards',
+        template: EventCardsListingView,
+        isDefault: false,
+        fullobjects: true,
+      },
     ],
   };
 

package/src/components/manage/Blocks/Listing/styles.less

@@ -44,3 +44,58 @@ div.indicatorCards {
     margin-bottom: 1em !important;
   }
 }
+
+// Event Cards Listing
+div.eventCards {
+  div.simple-listing-item {
+    border-bottom: 1px solid #ddd !important;
+  }
+
+  a {
+    color: #006bb8 !important;
+  }
+
+  div.start-date {
+    max-width: 80px;
+
+    .day {
+      border-bottom: 3px solid #ef7000;
+      color: #ef7000;
+      font-size: 2.5em;
+      font-weight: 900;
+    }
+
+    .date {
+      font-size: 1.5em;
+      font-weight: 600;
+    }
+  }
+
+  div.bottom-info {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+
+    .sep {
+      position: relative;
+      top: -2px;
+      color: #ddd;
+    }
+
+    .email-info {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    div.subjects {
+      .label {
+        margin-right: 0.3em;
+        margin-bottom: 0.3em;
+        background: #eee;
+        color: #3d5265;
+      }
+    }
+  }
+}

package/src/components/theme/BannerTitle/BannerTitle.jsx

@@ -0,0 +1,38 @@
+import config from '@plone/volto/registry';
+
+const BannerTitle = (props) => {
+  const { content } = props;
+  const {
+    blocks: { blocksConfig },
+  } = config;
+  const TitleBlockView = blocksConfig?.title?.view;
+  const hasTitleBlock = content?.blocks
+    ? Object.keys(content?.blocks).find(
+        (id) => content?.blocks?.[id]?.['@type'] === 'title',
+      )
+    : null;
+  const isHomePage =
+    ['Subsite', 'LRF', 'Plone Site'].indexOf(content?.['@type']) > -1;
+
+  return !isHomePage ? (
+    <>
+      {!hasTitleBlock ? (
+        <TitleBlockView
+          {...props}
+          data={{
+            info: [{ description: '' }],
+            hideContentType: true,
+            hideCreationDate: true,
+            hideModificationDate: true,
+            hidePublishingDate: true,
+            hideDownloadButton: false,
+            hideShareButton: false,
+          }}
+          metadata={content}
+        />
+      ) : null}
+    </>
+  ) : null;
+};
+
+export default BannerTitle;

package/src/components/theme/Views/ProjectView.jsx

@@ -23,10 +23,10 @@ function ProjectView(props) {
         data={{
           info: [{ description: '' }],
           hideContentType: true,
-          hideCreationDate: true,
-          hideModificationDate: true,
-          hidePublishingDate: true,
-          hideDownloadButton: true,
+          hideCreationDate: false,
+          hideModificationDate: false,
+          hidePublishingDate: false,
+          hideDownloadButton: false,
           hideShareButton: false,
           subtitle: 'Project',
         }}

package/src/customizations/volto/components/manage/Display/Display.jsx

@@ -0,0 +1,266 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+import { getSchema, updateContent, getContent } from '@plone/volto/actions';
+import { getLayoutFieldname } from '@plone/volto/helpers';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { defineMessages, injectIntl } from 'react-intl';
+import config from '@plone/volto/registry';
+
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const messages = defineMessages({
+  Viewmode: {
+    id: 'Viewmode',
+    defaultMessage: 'View',
+  },
+});
+
+const Option = injectLazyLibs('reactSelect')((props) => {
+  const { Option } = props.reactSelect.components;
+  return (
+    <Option {...props}>
+      <div>{props.label}</div>
+      {props.isFocused && !props.isSelected && (
+        <Icon name={checkSVG} size="18px" color="#b8c6c8" />
+      )}
+      {props.isSelected && <Icon name={checkSVG} size="18px" color="#007bc1" />}
+    </Option>
+  );
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const { DropdownIndicator } = props.reactSelect.components;
+  return (
+    <DropdownIndicator {...props}>
+      {props.selectProps.menuIsOpen ? (
+        <Icon name={upSVG} size="24px" color="#007bc1" />
+      ) : (
+        <Icon name={downSVG} size="24px" color="#007bc1" />
+      )}
+    </DropdownIndicator>
+  );
+});
+
+const selectTheme = (theme) => ({
+  ...theme,
+  borderRadius: 0,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    border: 'none',
+    borderBottom: '2px solid #b8c6c8',
+    boxShadow: 'none',
+    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    boxShadow: 'none',
+    borderBottom: '2px solid #b8c6c8',
+  }),
+  menuList: (styles, state) => ({
+    ...styles,
+    maxHeight: '400px',
+  }),
+  indicatorSeparator: (styles) => ({
+    ...styles,
+    width: null,
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: 0,
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: null,
+    minHeight: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 12px',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    span: {
+      flex: '0 0 auto',
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};
+
+/**
+ * Display container class.
+ * @class Display
+ * @extends Component
+ */
+class DisplaySelect extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    getSchema: PropTypes.func.isRequired,
+    updateContent: PropTypes.func.isRequired,
+    getContent: PropTypes.func.isRequired,
+    loaded: PropTypes.bool.isRequired,
+    pathname: PropTypes.string.isRequired,
+    layouts: PropTypes.arrayOf(PropTypes.string),
+    layout: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    layouts: [],
+    layout: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    const name = config.views.layoutViewsNamesMapping?.[this.props.layout];
+    this.state = {
+      selectedOption: {
+        value: this.props.layout,
+        label:
+          (name &&
+            this.props.intl.formatMessage({
+              id: name,
+              defaultMessage: name,
+            })) ||
+          this.props.layout,
+      },
+    };
+  }
+
+  componentDidMount() {
+    this.props.getSchema(this.props.type);
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.pathname !== this.props.pathname) {
+      this.props.getSchema(nextProps.type);
+    }
+    if (!this.props.loaded && nextProps.loaded) {
+      this.props.getContent(nextProps.pathname);
+    }
+  }
+
+  /**
+   * On set layout handler
+   * @method setLayout
+   * @param {Object} event Event object
+   * @returns {undefined}
+   */
+  setLayout = (selectedOption) => {
+    this.props.updateContent(this.props.pathname, {
+      layout: selectedOption.value,
+    });
+    this.setState({ selectedOption });
+  };
+
+  selectValue = (option) => (
+    <Fragment>
+      <span className="Select-value-label">{option.label}</span>
+    </Fragment>
+  );
+
+  optionRenderer = (option) => (
+    <Fragment>
+      <span style={{ marginRight: 'auto' }}>{option.label}</span>
+      <Icon name={checkSVG} size="24px" />
+    </Fragment>
+  );
+
+  render() {
+    const { selectedOption } = this.state;
+    const Select = this.props.reactSelect.default;
+    const layoutsNames = config.views.layoutViewsNamesMapping;
+    const layoutOptions = this.props.layouts
+      .filter(
+        (layout) =>
+          Object.keys(config.views.contentTypesViews).includes(layout) ||
+          Object.keys(config.views.layoutViews).includes(layout),
+      )
+      .map((item) => ({
+        value: item,
+        label:
+          this.props.intl.formatMessage({
+            id: layoutsNames[item],
+            defaultMessage: layoutsNames[item],
+          }) || item,
+      }));
+
+    return layoutOptions?.length > 1 ? (
+      <FormFieldWrapper
+        id="display-select"
+        title={this.props.intl.formatMessage(messages.Viewmode)}
+        {...this.props}
+      >
+        <Select
+          name="display-select"
+          className="react-select-container"
+          classNamePrefix="react-select"
+          options={layoutOptions}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{ DropdownIndicator, Option }}
+          onChange={this.setLayout}
+          defaultValue={selectedOption}
+          isSearchable={false}
+        />
+      </FormFieldWrapper>
+    ) : null;
+  }
+}
+
+export default compose(
+  injectIntl,
+  injectLazyLibs('reactSelect'),
+  connect(
+    (state) => ({
+      loaded: state.content.update.loaded,
+      layouts: state.schema.schema ? state.schema.schema.layouts : [],
+      layout: state.content.data
+        ? state.content.data[getLayoutFieldname(state.content.data)]
+        : '',
+      layout_fieldname: state.content.data
+        ? getLayoutFieldname(state.content.data)
+        : '',
+      type: state.content.data ? state.content.data['@type'] : '',
+    }),
+    { getSchema, updateContent, getContent },
+  ),
+)(DisplaySelect);

package/src/customizations/volto/components/manage/Display/Readme.md

@@ -0,0 +1 @@
+Fixes https://github.com/plone/volto/issues/5802

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

@@ -7,13 +7,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { asyncConnect } from '@plone/volto/helpers';
+import { asyncConnect, Helmet } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container } from 'semantic-ui-react';
-import { Helmet } from '@plone/volto/helpers';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
-
+import { BannerTitle } from '@eeacms/volto-cca-policy/components';
 import { getNavigation } from '@plone/volto/actions';
 
 const messages = defineMessages({
@@ -97,13 +96,17 @@ class Sitemap extends Component {
       </ul>
     );
   };
+
   render() {
     const { items } = this.props;
+    const content = {
+      title: this.props.intl.formatMessage(messages.Sitemap),
+    };
     return (
       <div id="page-sitemap">
         <Helmet title={this.props.intl.formatMessage(messages.Sitemap)} />
+        <BannerTitle content={content} />
         <Container className="view-wrapper">
-          <h1>{this.props.intl.formatMessage(messages.Sitemap)} </h1>
           {items && this.renderItems(items)}
         </Container>
       </div>

package/src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -21,6 +21,7 @@ import { hasBlocksData, getBaseUrl } from '@plone/volto/helpers';
 import { useDispatch, useSelector } from 'react-redux';
 import { RenderBlocks } from '@plone/volto/components';
 import ContextNavigation from '@plone/volto/components/theme/Navigation/ContextNavigation';
+import { BannerTitle } from '@eeacms/volto-cca-policy/components';
 
 import { isEqual } from 'lodash';
 
@@ -83,6 +84,7 @@ const DefaultView = (props) => {
         <Container id="page-document">
           <Grid>
             <Grid.Column width={12 - gridColumns}>
+              <BannerTitle {...props} />
               <RenderBlocks {...props} path={path} />
             </Grid.Column>
             <Grid.Column width={gridColumns}>
@@ -101,6 +103,7 @@ const DefaultView = (props) => {
         </Container>
       ) : (
         <Container id="page-document">
+          <BannerTitle {...props} />
           <RenderBlocks {...props} path={path} />
         </Container>
       )

package/src/helpers/Utils.jsx

@@ -77,22 +77,20 @@ export const BannerTitle = (props) => {
   const TitleBlockView = blocksConfig?.title?.view;
 
   return (
-    <>
-      <TitleBlockView
-        {...props}
-        data={{
-          info: [{ description: '' }],
-          hideContentType: true,
-          hideCreationDate: true,
-          hideModificationDate: true,
-          hidePublishingDate: true,
-          hideDownloadButton: true,
-          hideShareButton: false,
-          subtitle: type,
-        }}
-        metadata={content}
-      />
-    </>
+    <TitleBlockView
+      {...props}
+      data={{
+        info: [{ description: '' }],
+        hideContentType: true,
+        hideCreationDate: false,
+        hideModificationDate: false,
+        hidePublishingDate: false,
+        hideDownloadButton: false,
+        hideShareButton: false,
+        subtitle: type,
+      }}
+      metadata={content}
+    />
   );
 };
 

package/theme/globals/site.overrides

@@ -120,7 +120,7 @@ div.geochars-field {
 }
 
 div.share-info {
-  margin-top: 1em;
+  margin-top: 2.5em;
   text-align: right;
 }
 
@@ -205,8 +205,8 @@ body.subsite {
 body.searchlib-page .searchlib-block {
   .ui.secondary.pointing.content-section-tabs.menu {
     .active.item .tab-icon .count {
-      background-color: @ccaGreenColor;
       border-color: @ccaGreenColor;
+      background-color: @ccaGreenColor;
     }
   }
 }
@@ -223,9 +223,9 @@ body.searchlib-page .searchlib-block {
 }
 
 #page-header .styled-group.has--useAsPageHeader--true {
-  margin-left: auto;
-  margin-right: auto;
   width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 #toolbar .toolbar-content {