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

package/CHANGELOG.md

@@ -4,11 +4,25 @@ 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.1](https://github.com/eea/volto-eea-website-theme/compare/1.6.0...1.6.1) - 25 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
 
-- Upgrade design system dependency to alpha 12 [Alin Voinea - [`2166893`](https://github.com/eea/volto-eea-website-theme/commit/2166893112f85f6965a4eafc694ec0e2f21cda57)]
+- 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "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

@@ -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);