@eeacms/volto-eea-website-theme 1.6.0 → 1.6.2

package/CHANGELOG.md

@@ -4,11 +4,27 @@ 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.6.0](https://github.com/eea/volto-eea-website-theme/compare/1.5.1...1.6.0) - 17 January 2023
+### [1.6.2](https://github.com/eea/volto-eea-website-theme/compare/1.6.1...1.6.2) - 27 January 2023
+
+#### :bug: Bug Fixes
+
+- fix(banner): properly pass image source to banner [David Ichim - [`465e616`](https://github.com/eea/volto-eea-website-theme/commit/465e61651eeb3abd05ac1b8fda2d754b59d28faa)]
+- fix(cypress): use force click [nileshgulia1 - [`3c8db52`](https://github.com/eea/volto-eea-website-theme/commit/3c8db5271fea819fdeebda9773d376abf498759a)]
+- fix(eslint): remove warning [nileshgulia1 - [`d01a1da`](https://github.com/eea/volto-eea-website-theme/commit/d01a1da6b5fb10c8774fdfb962310be95f9a5690)]
+
+#### :nail_care: Enhancements
+
+- refactor(banner): sync storybook and Volto component #76 from eea/sync-page-banner-theme [ichim-david - [`fad29fb`](https://github.com/eea/volto-eea-website-theme/commit/fad29fb4581c640a27e14743803eadb63ff67334)]
+- change(banner): removed container wrapper since it was moved inside banner component [David Ichim - [`5cf9c3b`](https://github.com/eea/volto-eea-website-theme/commit/5cf9c3bc9f443ee45f234744a1a4c589420e3815)]
+- refactor(banner): sync storybook and Volto component [nileshgulia1 - [`d2d6a61`](https://github.com/eea/volto-eea-website-theme/commit/d2d6a617f5d270768448bc3f0637c5aea60d70f2)]
 
 #### :hammer_and_wrench: Others
 
-- Update dependency to design-system [Alin Voinea - [`f0c0b63`](https://github.com/eea/volto-eea-website-theme/commit/f0c0b6363da190b6512961560341077933195e86)]
+- remove(banner): shift banner title css to design system [nileshgulia1 - [`aff9f74`](https://github.com/eea/volto-eea-website-theme/commit/aff9f74f5e9ce858b4eeaf6b02cee9b5c61813a9)]
+### [1.6.1](https://github.com/eea/volto-eea-website-theme/compare/1.6.0...1.6.1) - 25 January 2023
+
+### [1.6.0](https://github.com/eea/volto-eea-website-theme/compare/1.5.1...1.6.0) - 17 January 2023
+
 ### [1.5.1](https://github.com/eea/volto-eea-website-theme/compare/1.5.0...1.5.1) - 13 January 2023
 
 #### :bug: Bug Fixes
@@ -20,6 +36,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - For some reasons types is a string [Alin Voinea - [`3769a09`](https://github.com/eea/volto-eea-website-theme/commit/3769a0981181d5b633f3498daebbe96be8b4b833)]
 - Fix(redirect): o.filter - refs #157627 [Alin Voinea - [`deb23da`](https://github.com/eea/volto-eea-website-theme/commit/deb23da846444cc96539697fd798429ae0abe89e)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`f1fffc5`](https://github.com/eea/volto-eea-website-theme/commit/f1fffc5db96725440863d545580b4e76cce4b796)]
 ### [1.5.0](https://github.com/eea/volto-eea-website-theme/compare/1.4.2...1.5.0) - 9 January 2023
 
 #### :hammer_and_wrench: Others
@@ -53,6 +70,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - Release 1.4.0 [Alin Voinea - [`bd42a0d`](https://github.com/eea/volto-eea-website-theme/commit/bd42a0d26e928cac5d99933194755da3db06b341)]
 - bump version to use as volto-eea-design-system [David Ichim - [`f4be047`](https://github.com/eea/volto-eea-website-theme/commit/f4be047328b46399b03b612d378b18aaf82e7dc1)]
+- Add Sonarqube tag using advisory-board-frontend addons list [EEA Jenkins - [`9b7cfef`](https://github.com/eea/volto-eea-website-theme/commit/9b7cfefb4d34fc1c948015e491feb370f9795bd8)]
 - test(Jenkins): Run tests and cypress with latest canary @plone/volto [Alin Voinea - [`df252a9`](https://github.com/eea/volto-eea-website-theme/commit/df252a9bfed0bb86cadf53c59dd1603b1e2cd822)]
 ### [1.3.2](https://github.com/eea/volto-eea-website-theme/compare/1.3.1...1.3.2) - 16 December 2022
 
@@ -62,6 +80,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using cca-frontend addons list [EEA Jenkins - [`a43c658`](https://github.com/eea/volto-eea-website-theme/commit/a43c658a7920c8df95e763b9a637f38ce77eba2c)]
 - Better razzle.config [Tiberiu Ichim - [`81dbf48`](https://github.com/eea/volto-eea-website-theme/commit/81dbf48815fb27facb4f82c9b764540fdf188b2e)]
 - Better razzle.config [Tiberiu Ichim - [`7bc9da2`](https://github.com/eea/volto-eea-website-theme/commit/7bc9da2cd837ab62a95cd29979cdd9b0055b7d67)]
 ### [1.3.1](https://github.com/eea/volto-eea-website-theme/compare/1.3.0...1.3.1) - 28 November 2022
@@ -70,6 +89,9 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - feat(Footer): Bring back footer contacts extra actions - refs #151856 [Alin Voinea - [`6c19413`](https://github.com/eea/volto-eea-website-theme/commit/6c194139420c9fd847692d180db1c1593e2483de)]
 
+#### :hammer_and_wrench: Others
+
+- yarn 3 [Alin Voinea - [`ea7a709`](https://github.com/eea/volto-eea-website-theme/commit/ea7a7094945312776e9b6f44e371178603e92139)]
 ### [1.3.0](https://github.com/eea/volto-eea-website-theme/compare/1.2.0...1.3.0) - 22 November 2022
 
 #### :rocket: New Features
@@ -110,6 +132,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Add subsite class to body [Tiberiu Ichim - [`74d700f`](https://github.com/eea/volto-eea-website-theme/commit/74d700fbfd6249a8604762a7e4e49cce857db0f3)]
 - Add subsite info to header [Tiberiu Ichim - [`47daf8b`](https://github.com/eea/volto-eea-website-theme/commit/47daf8bb6374a1222040626b19d4154df7ba1b83)]
 - fix eslint [Miu Razvan - [`eb8d0a7`](https://github.com/eea/volto-eea-website-theme/commit/eb8d0a790bc70c0aae256c6ff35f63c4885f338e)]
+- Add Sonarqube tag using circularity-frontend addons list [EEA Jenkins - [`cc578a4`](https://github.com/eea/volto-eea-website-theme/commit/cc578a413b205a8e61e091fab3a88f94cedefc89)]
 ### [1.1.0](https://github.com/eea/volto-eea-website-theme/compare/1.0.0...1.1.0) - 28 October 2022
 
 #### :nail_care: Enhancements
@@ -157,6 +180,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`33b56ac`](https://github.com/eea/volto-eea-website-theme/commit/33b56acb13fbaf0c5b79e8fc6e13c4b699c79c90)]
 ### [0.7.3](https://github.com/eea/volto-eea-website-theme/compare/0.7.2...0.7.3) - 22 September 2022
 
 #### :hammer_and_wrench: Others
@@ -424,6 +448,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Header refactor, add custom logo #5 [ichim-david - [`4950235`](https://github.com/eea/volto-eea-website-theme/commit/49502358105437cfeac3b144e6d301cb59aa2346)]
 - Update footer.config with new publication card component [ichim-david - [`2e38e9a`](https://github.com/eea/volto-eea-website-theme/commit/2e38e9a417f835009d60c80d4eb4b30229f55e45)]
 - feature(breadcrumbs): implement eea-design-system breadcrumb as Volto component #32 #7 [ichim-david - [`181af41`](https://github.com/eea/volto-eea-website-theme/commit/181af4125ce2b9ddac56dab4723cb11c26633221)]
+- Add Sonarqube tag using eea-website-frontend addons list [EEA Jenkins - [`da8ceb6`](https://github.com/eea/volto-eea-website-theme/commit/da8ceb68ea68bfbc9504e48ccd4d68277f11ab9a)]
 - use breadcrumbs from eea-design-system [nileshgulia1 - [`db2f9e9`](https://github.com/eea/volto-eea-website-theme/commit/db2f9e9a4327420a3cce9a9903cd88549b129eab)]
 - Update theme.config [ichim-david - [`8eca4f4`](https://github.com/eea/volto-eea-website-theme/commit/8eca4f40397a4aeca6d39029c92db78968d37064)]
 - Added keyContent component to theme.config [ichim-david - [`d86f202`](https://github.com/eea/volto-eea-website-theme/commit/d86f202d0274d839487a88b51cae9a0e899beb23)]
@@ -465,4 +490,5 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :hammer_and_wrench: Others
 
+- yarn bootstrap [Alin Voinea - [`6995e9e`](https://github.com/eea/volto-eea-website-theme/commit/6995e9e091f21fdbbdffa8a44fc0e2c626f6d46a)]
 - Initial commit [Alin Voinea - [`6a9c03a`](https://github.com/eea/volto-eea-website-theme/commit/6a9c03a7cebe71ca87e82cf58c42904063e9d8d3)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -22,7 +22,7 @@
     "url": "git@github.com:eea/volto-eea-website-theme.git"
   },
   "dependencies": {
-    "@eeacms/volto-eea-design-system": "^1.0.0-alpha.11",
+    "@eeacms/volto-eea-design-system": "^1.0.0-alpha.12",
     "volto-subsites": "*"
   },
   "devDependencies": {

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

@@ -5,10 +5,13 @@ import { withRouter } from 'react-router';
 import { defineMessages, injectIntl } from 'react-intl';
 import { startCase } from 'lodash';
 import qs from 'querystring';
-import { Container, Popup, Icon } from 'semantic-ui-react';
+import { Popup, Icon } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import Banner from './Banner';
-import { getImageSource, sharePage } from './Banner';
+import Banner from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
+import {
+  getImageSource,
+  sharePage,
+} from '@eeacms/volto-eea-design-system/ui/Banner/Banner';
 import Copyright from '@eeacms/volto-eea-design-system/ui/Copyright/Copyright';
 
 import './styles.less';
@@ -57,11 +60,6 @@ const friendlyId = (id) => {
   return startCase(id);
 };
 
-const ContainerWrapper = ({ fluid, children }) => {
-  if (fluid) return <React.Fragment>{children}</React.Fragment>;
-  return <Container>{children}</Container>;
-};
-
 const Title = ({ config = {}, properties }) => {
   const view = useMemo(() => {
     return config.view;
@@ -74,7 +72,7 @@ const Title = ({ config = {}, properties }) => {
 };
 
 const View = (props) => {
-  const { banner = {}, fluid, intl, location, types = [] } = props;
+  const { banner = {}, intl, location, types = [] } = props;
   const metadata = props.metadata || props.properties;
   const {
     info = [],
@@ -113,6 +111,7 @@ const View = (props) => {
     () => getDate(hideModificationDate, 'modified'),
     [getDate, hideModificationDate],
   );
+
   // Set image source
   const image = getImageSource(metadata['image']);
   // Get type
@@ -130,116 +129,106 @@ const View = (props) => {
   }, [types, metadata, parameters]);
 
   return (
-    <Banner {...props}>
-      <div
-        className={image ? 'image' : ''}
-        style={image ? { backgroundImage: `url(${image})` } : {}}
-      >
-        <div className="gradient">
-          <ContainerWrapper fluid={fluid}>
-            <Banner.Content
-              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={() => {}}
-                        />
-                      }
-                    />
-                  )}
-                  {!hideDownloadButton && (
-                    <Banner.Action
-                      icon="ri-download-2-fill"
-                      title={intl.formatMessage(messages.download)}
-                      className="download"
-                      onClick={() => {
-                        window.print();
-                      }}
-                    />
-                  )}
-                </>
-              }
-            >
-              <Title config={banner.title} properties={metadata} />
-              <Banner.Metadata>
-                <Banner.MetadataField
-                  type="type"
-                  hidden={hideContentType}
-                  // value={contentType || properties['@type'] || parameters.type}
-                  value={type}
-                />
-                <Banner.MetadataField
-                  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
-                    key={`header-info-${index}`}
-                    value={item.description}
+    <Banner {...props} image={image}>
+      <Banner.Content
+        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={() => {}}
                   />
-                ))}
-              </Banner.Metadata>
-              {copyright ? (
-                <Copyright copyrightPosition={copyrightPosition}>
-                  <Copyright.Icon>
-                    <Icon className={copyrightIcon} />
-                  </Copyright.Icon>
-                  <Copyright.Text>{copyright}</Copyright.Text>
-                </Copyright>
-              ) : (
-                ''
-              )}
-            </Banner.Content>
-          </ContainerWrapper>
-        </div>
-      </div>
+                }
+              />
+            )}
+            {!hideDownloadButton && (
+              <Banner.Action
+                icon="ri-download-2-fill"
+                title={intl.formatMessage(messages.download)}
+                className="download"
+                onClick={() => {
+                  window.print();
+                }}
+              />
+            )}
+          </>
+        }
+      >
+        <Title config={banner.title} properties={metadata} />
+        <Banner.Metadata>
+          <Banner.MetadataField
+            type="type"
+            hidden={hideContentType}
+            value={type}
+          />
+          <Banner.MetadataField
+            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
+              key={`header-info-${index}`}
+              value={item.description}
+            />
+          ))}
+        </Banner.Metadata>
+        {copyright ? (
+          <Copyright copyrightPosition={copyrightPosition}>
+            <Copyright.Icon>
+              <Icon className={copyrightIcon} />
+            </Copyright.Icon>
+            <Copyright.Text>{copyright}</Copyright.Text>
+          </Copyright>
+        ) : (
+          ''
+        )}
+      </Banner.Content>
     </Banner>
   );
 };

package/src/components/theme/Banner/styles.less

@@ -3,15 +3,6 @@
   padding-left: 1rem;
 }
 
-.eea.banner .documentFirstHeading {
-  border-bottom: none;
-  margin-bottom: 0;
-
-  &::before {
-    content: none;
-  }
-}
-
 .share-popup {
   .actions {
     display: flex;

package/src/index.js

@@ -139,6 +139,15 @@ const applyConfig = (config) => {
   // Custom block-style colors
   config.settings.available_colors = eea.colors;
 
+  // Site theme colors
+
+  config.settings.themeColors = [
+    { value: 'default', title: 'Default' },
+    { value: 'primary', title: 'Primary' },
+    { value: 'secondary', title: 'Secondary' },
+    { value: 'tertiary', title: 'Tertiary' },
+  ];
+
   // Custom block styles
   config.settings.previewText = '';
   config.settings.pluggableStyles = [

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

@@ -1,99 +0,0 @@
-import React from 'react';
-import { compose } from 'redux';
-import { connect } from 'react-redux';
-import { Icon, Button, Grid } from 'semantic-ui-react';
-import { formatDate } from '@plone/volto/helpers/Utils/Date';
-import config from '@plone/volto/registry';
-
-const socialPlatforms = {
-  facebook: {
-    shareLink: (url) => `https://facebook.com/sharer.php?u=${url}`,
-  },
-  twitter: {
-    shareLink: (url) => `https://www.twitter.com/share?url=${url}`,
-  },
-  linkedin: {
-    shareLink: (url) =>
-      `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
-  },
-  reddit: {
-    shareLink: (url, title) => `https://reddit.com/submit?url=${url}`,
-  },
-};
-
-export const getImageSource = (image) => {
-  if (image?.download) return image.download;
-  if (image?.encoding)
-    return `data:${image['content-type']};${image['encoding']},${image['data']}`;
-  return null;
-};
-
-export const sharePage = (url, platform) => {
-  if (!socialPlatforms[platform]) return;
-  const link = document.createElement('a');
-  link.setAttribute('href', socialPlatforms[platform].shareLink(url));
-  link.setAttribute('target', '_blank');
-  link.setAttribute('rel', 'noreferrer');
-  link.click();
-};
-
-const Banner = ({ children }) => {
-  return <div className="eea banner">{children}</div>;
-};
-
-Banner.Action = ({ title, icon, color, onClick, className }) => {
-  return (
-    <div className="action">
-      <Button className={className} basic icon inverted onClick={onClick}>
-        <Icon className={icon} color={color}></Icon>
-        <span className="mobile hidden">{title}</span>
-      </Button>
-    </div>
-  );
-};
-
-Banner.Content = ({ children, actions }) => {
-  return (
-    <div className="content">
-      <Grid>
-        <Grid.Column mobile={10} tablet={9} computer={9}>
-          {children}
-        </Grid.Column>
-        <Grid.Column mobile={2} tablet={3} computer={3} className="actions">
-          {actions}
-        </Grid.Column>
-      </Grid>
-    </div>
-  );
-};
-
-Banner.Title = ({ children }) => (
-  <h1 className="documentFirstHeading">{children}</h1>
-);
-Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
-Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
-  const locale = config.settings.dateLocale || 'en-gb';
-  if (hidden || !value) return '';
-  if (type === 'date' && value)
-    return (
-      <span className={`field ${type}`} title={title.replace('{}', value)}>
-        {label}{' '}
-        {formatDate({
-          date: value,
-          format: {
-            year: 'numeric',
-            month: 'short',
-            day: '2-digit',
-          },
-          locale: locale,
-        })}
-      </span>
-    );
-  return <span className={`field ${type}`}>{value}</span>;
-};
-
-export default compose(
-  connect((state) => ({
-    content: state.content.data,
-  })),
-)(Banner);