@eeacms/volto-eea-website-theme 1.11.3 → 1.12.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ 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.12.0](https://github.com/eea/volto-eea-website-theme/compare/1.11.3...1.12.0) - 24 March 2023
+
+#### :nail_care: Enhancements
+
+- change(banner): modified title of share buttons [David Ichim - [`c6dcbb5`](https://github.com/eea/volto-eea-website-theme/commit/c6dcbb534d26155d82d8a2729c454fbe3e2b312b)]
+- change(banner): use custom-made Popup for better accessibility [David Ichim - [`955abf1`](https://github.com/eea/volto-eea-website-theme/commit/955abf1c525841577b7cc737871e9640c64a10dc)]
+- change(banner): removed title parameter from MetadataField [David Ichim - [`aff3b6a`](https://github.com/eea/volto-eea-website-theme/commit/aff3b6a8302be165c6bce5cc20d3da734c81fc87)]
+
+#### :hammer_and_wrench: Others
+
+- Release 1.12.0 [Alin Voinea - [`4f77af8`](https://github.com/eea/volto-eea-website-theme/commit/4f77af895d6ba9952fa54b1928bbb9f56543765d)]
+- (feat):Page Header Banner accessibility #119 from eea/banner-accesibility [ichim-david - [`3102129`](https://github.com/eea/volto-eea-website-theme/commit/3102129fe6e1416c566522d7da90fd1f118726d5)]
+- delete id [Dobricean Ioan Dorian - [`500727f`](https://github.com/eea/volto-eea-website-theme/commit/500727f87b93dc2c1498c1ed1861d93e464532f4)]
+- final version [Dobricean Ioan Dorian - [`f26adf4`](https://github.com/eea/volto-eea-website-theme/commit/f26adf4fb584a1f7f31a177852bfbde1a15ebd4f)]
+- popup accesibility [Dobricean Ioan Dorian - [`14961bd`](https://github.com/eea/volto-eea-website-theme/commit/14961bdf6bdfcd2a83c53f8fbca83671833217f7)]
 ### [1.11.3](https://github.com/eea/volto-eea-website-theme/compare/1.11.2...1.11.3) - 24 March 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/theme/Banner/View.jsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import { startCase } from 'lodash';
 import qs from 'querystring';
-import { Popup, Icon } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
+import Popup from '@eeacms/volto-eea-design-system/ui/Popup/Popup';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import {
@@ -33,26 +34,14 @@ const messages = defineMessages({
     id: 'Created',
     defaultMessage: 'Created',
   },
-  created_on: {
-    id: 'Created on',
-    defaultMessage: 'Created on',
-  },
   published: {
     id: 'Published',
     defaultMessage: 'Published',
   },
-  published_on: {
-    id: 'Published on',
-    defaultMessage: 'Published on',
-  },
   modified: {
     id: 'Modified',
     defaultMessage: 'Modified',
   },
-  modified_on: {
-    id: 'Modified on',
-    defaultMessage: 'Modified on',
-  },
 });
 
 const friendlyId = (id) => {
@@ -74,6 +63,7 @@ const Title = ({ config = {}, properties }) => {
 const View = (props) => {
   const { banner = {}, intl, location, types = [] } = props;
   const metadata = props.metadata || props.properties;
+  const popupRef = useRef(null);
   const {
     info = [],
     hideContentType,
@@ -134,44 +124,50 @@ const View = (props) => {
         actions={
           <>
             {!hideShareButton && (
-              <Popup
-                className="share-popup"
-                content={() => (
-                  <>
-                    <p>{intl.formatMessage(messages.share_to)}</p>
-                    <div className="actions">
-                      <Banner.Action
-                        icon="ri-facebook-fill"
-                        onClick={() => {
-                          sharePage(metadata['@id'], 'facebook');
-                        }}
-                      />
-                      <Banner.Action
-                        icon="ri-twitter-fill"
-                        onClick={() => {
-                          sharePage(metadata['@id'], 'twitter');
-                        }}
-                      />
-                      <Banner.Action
-                        icon="ri-linkedin-fill"
-                        onClick={() => {
-                          sharePage(metadata['@id'], 'linkedin');
-                        }}
-                      />
-                    </div>
-                  </>
-                )}
-                position="bottom center"
-                size="small"
-                trigger={
-                  <Banner.Action
-                    icon="ri-share-fill"
-                    title={intl.formatMessage(messages.share)}
-                    className="share"
-                    onClick={() => {}}
-                  />
-                }
-              />
+              <>
+                <Popup
+                  className={'share-popup'}
+                  trigger={
+                    <Banner.Action
+                      icon="ri-share-fill"
+                      title={intl.formatMessage(messages.share)}
+                      className="share"
+                      onClick={() => {}}
+                    />
+                  }
+                  content={
+                    <>
+                      <p>{intl.formatMessage(messages.share_to)}</p>
+                      <div className="actions" ref={popupRef}>
+                        <Banner.Action
+                          icon="ri-facebook-fill"
+                          title={'Share page to Facebook'}
+                          titleClass={'hiddenStructure'}
+                          onClick={() => {
+                            sharePage(metadata['@id'], 'facebook');
+                          }}
+                        />
+                        <Banner.Action
+                          icon="ri-twitter-fill"
+                          title={'Share page to Twitter'}
+                          titleClass={'hiddenStructure'}
+                          onClick={() => {
+                            sharePage(metadata['@id'], 'twitter');
+                          }}
+                        />
+                        <Banner.Action
+                          icon="ri-linkedin-fill"
+                          title={'Share page to Linkedin'}
+                          titleClass={'hiddenStructure'}
+                          onClick={() => {
+                            sharePage(metadata['@id'], 'linkedin');
+                          }}
+                        />
+                      </div>
+                    </>
+                  }
+                />
+              </>
             )}
             {!hideDownloadButton && (
               <Banner.Action
@@ -197,19 +193,16 @@ const View = (props) => {
             type="date"
             label={intl.formatMessage(messages.created)}
             value={creationDate}
-            title={`${intl.formatMessage(messages.created_on)} {}`}
           />
           <Banner.MetadataField
             type="date"
             label={intl.formatMessage(messages.published)}
             value={publishingDate}
-            title={`${intl.formatMessage(messages.published_on)} {}`}
           />
           <Banner.MetadataField
             type="date"
             label={intl.formatMessage(messages.modified)}
             value={modificationDate}
-            title={`${intl.formatMessage(messages.modified_on)} {}`}
           />
           {info.map((item, index) => (
             <Banner.MetadataField