@eeacms/volto-eea-website-theme 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -4,8 +4,39 @@ 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.6.0](https://github.com/eea/volto-eea-website-theme/compare/0.5.4...0.6.0)
+
+- Cleanup [`415014b`](https://github.com/eea/volto-eea-website-theme/commit/415014b8399de5ffb5afaa9d6440b4ea5fe2bf2a)
+- Release 0.6.0 [`1253ebb`](https://github.com/eea/volto-eea-website-theme/commit/1253ebba2f1c88dbc6b77a135580f3a5d7752729)
+- fix(comments): Replace moment with formatRelativeDate helper from Volto core [`9b7974a`](https://github.com/eea/volto-eea-website-theme/commit/9b7974adb3d01065b80f61d7c3c1c09a93199ee6)
+- fix(seo): SSR Title block [`887edc2`](https://github.com/eea/volto-eea-website-theme/commit/887edc25e45c44bfe99b909ae87c7fb7a90278a6)
+- Remove quote block customization [`4d459f5`](https://github.com/eea/volto-eea-website-theme/commit/4d459f57265c5b0b1e6ff8472e4f0350a888ca04)
+
+#### [0.5.4](https://github.com/eea/volto-eea-website-theme/compare/0.5.3...0.5.4)
+
+> 17 May 2022
+
+- Release [`#25`](https://github.com/eea/volto-eea-website-theme/pull/25)
+- Add customization to volto-quote-block icons [`#23`](https://github.com/eea/volto-eea-website-theme/pull/23)
+- change (theme): added quote and callout components [`b691da2`](https://github.com/eea/volto-eea-website-theme/commit/b691da29236440a1096fcbf38d9d9e6cc6e69445)
+- change(banner): added icon class to banner  buttons [`7b641cf`](https://github.com/eea/volto-eea-website-theme/commit/7b641cfdc433fd638ff8ba2c3f4b9131a9f8142a)
+
+#### [0.5.3](https://github.com/eea/volto-eea-website-theme/compare/0.5.2...0.5.3)
+
+> 22 April 2022
+
+- Release [`#24`](https://github.com/eea/volto-eea-website-theme/pull/24)
+- Apply Draft bg only on View [`8910d78`](https://github.com/eea/volto-eea-website-theme/commit/8910d78baf0663d9eb820a3846ae24dea8eaa674)
+- lint fixes [`ffc9edd`](https://github.com/eea/volto-eea-website-theme/commit/ffc9edd7dd90033d9ed8ccbe17c5327e68128b6f)
+- change(buttons): customized Form, Sharing and ObjectBrowserWidget.jsx [`c307131`](https://github.com/eea/volto-eea-website-theme/commit/c307131f911dc05c2a9ef7d9c79357cd85de0fc4)
+- change(ModalForm): added circular class to modal action buttons [`c418021`](https://github.com/eea/volto-eea-website-theme/commit/c418021da30aee28113edecea53ebd9d2316dfcd)
+- Improved Title block banner + add social icons [`eeb049b`](https://github.com/eea/volto-eea-website-theme/commit/eeb049bb02146a48949b8ff5f5d09727e99fe192)
+
 #### [0.5.2](https://github.com/eea/volto-eea-website-theme/compare/0.5.1...0.5.2)
 
+> 8 April 2022
+
+- Release [`#22`](https://github.com/eea/volto-eea-website-theme/pull/22)
 - fix(banner): Friendly name for content-type if not available via RestAPI [`e9ea96f`](https://github.com/eea/volto-eea-website-theme/commit/e9ea96f3d74998e9d4e5ee9494183cdd40500666)
 - Small fix on replace all [`98fe72e`](https://github.com/eea/volto-eea-website-theme/commit/98fe72e4493aa322b704da1ddff91ee5021b66ce)
 - Make '@type' friendly in Page header [`9d15a78`](https://github.com/eea/volto-eea-website-theme/commit/9d15a78d445482ffe58b14839a2176b82c55bf71)

package/package.json

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

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -53,19 +53,18 @@ export const TitleBlockEdit = (props) => {
     onFocusNextBlock,
     block,
     blockNode,
-    properties,
-    metadata,
     data,
     detached,
     editable,
   } = props;
+  const metadata = props.metadata || props.properties;
 
   const editor = useMemo(() => withReact(createEditor()), []);
   const intl = useIntl();
 
   const disableNewBlocks = data.disableNewBlocks || detached;
 
-  const text = metadata?.['title'] || properties?.['title'] || '';
+  const text = metadata?.['title'] || '';
 
   const handleChange = useCallback(
     (value) => {

package/src/components/manage/Blocks/Title/View.jsx

@@ -15,7 +15,7 @@ import BannerView from '@eeacms/volto-eea-website-theme/components/theme/Banner/
  * @extends Component
  */
 const View = (props) => {
-  if (__SERVER__) return '';
+  if (__SERVER__) return <BannerView {...props} />;
   return (
     <Portal node={document.getElementById('page-header')}>
       <BannerView {...props} />

package/src/components/manage/Blocks/Title/schema.js

@@ -1,5 +1,5 @@
-const metadataSchema = {
-  title: 'Metadata',
+const infoSchema = {
+  title: 'Info',
   fieldsets: [
     {
       id: 'default',
@@ -27,7 +27,7 @@ export default {
         'hideCreationDate',
         'hidePublishingDate',
         'hideModificationDate',
-        'metadata',
+        'info',
       ],
     },
     {
@@ -66,10 +66,10 @@ export default {
       title: 'Hide download button',
       type: 'boolean',
     },
-    metadata: {
-      title: 'Extra metadata',
+    info: {
+      title: 'Extra info',
       widget: 'object_list',
-      schema: metadataSchema,
+      schema: infoSchema,
     },
     // contentType: {
     //   title: 'Type',

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import moment from 'moment';
 import { Icon, Button, Grid } from 'semantic-ui-react';
+import { formatDate } from '@plone/volto/helpers/Utils/Date';
 import config from '@plone/volto/registry';
 
 const socialPlatforms = {
@@ -16,6 +16,9 @@ const socialPlatforms = {
     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) => {
@@ -41,7 +44,7 @@ const Banner = ({ children }) => {
 Banner.Action = ({ title, icon, color, onClick, className }) => {
   return (
     <div className="action">
-      <Button className={className} basic inverted onClick={onClick}>
+      <Button className={className} basic icon inverted onClick={onClick}>
         <Icon className={icon} color={color}></Icon>
         <span className="mobile hidden">{title}</span>
       </Button>
@@ -69,15 +72,21 @@ Banner.Title = ({ children }) => (
 );
 Banner.Metadata = ({ children }) => <p className="metadata">{children}</p>;
 Banner.MetadataField = ({ hidden, type = 'text', label, value, title }) => {
-  moment.locale(config.settings.dateLocale || 'en-gb');
+  const locale = config.settings.dateLocale || 'en-gb';
   if (hidden || !value) return '';
   if (type === 'date' && value)
     return (
-      <span
-        className={`field ${type}`}
-        title={title.replace('{}', value.format('lll'))}
-      >
-        {label} {value.format('ll')}
+      <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>;

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

@@ -7,7 +7,6 @@ import { startCase } from 'lodash';
 import qs from 'querystring';
 import { Container, Popup } from 'semantic-ui-react';
 import { flattenToAppURL } from '@plone/volto/helpers';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import Banner from './Banner';
 import { getImageSource, sharePage } from './Banner';
 
@@ -74,17 +73,10 @@ const Title = ({ config = {}, properties }) => {
 };
 
 const View = (props) => {
+  const { banner = {}, fluid, intl, location, types = [] } = props;
+  const metadata = props.metadata || props.properties;
   const {
-    banner = {},
-    properties,
-    moment,
-    fluid,
-    intl,
-    location,
-    types = [],
-  } = props;
-  const {
-    metadata = [],
+    info = [],
     hideContentType,
     hideCreationDate,
     hidePublishingDate,
@@ -101,11 +93,9 @@ const View = (props) => {
   // Set dates
   const getDate = useCallback(
     (hidden, key) => {
-      return !hidden && properties[key]
-        ? moment.default(properties[key])
-        : null;
+      return !hidden && metadata[key] ? metadata[key] : null;
     },
-    [moment, properties],
+    [metadata],
   );
   const creationDate = useMemo(() => getDate(hideCreationDate, 'created'), [
     getDate,
@@ -120,20 +110,20 @@ const View = (props) => {
     [getDate, hideModificationDate],
   );
   // Set image source
-  const image = getImageSource(properties['image']);
+  const image = getImageSource(metadata['image']);
   // Get type
   const type = useMemo(() => {
     return (
       types.filter(
         (type) =>
           flattenToAppURL(type['@id']) ===
-          `/@types/${properties['@type'] || parameters.type}`,
+          `/@types/${metadata['@type'] || parameters.type}`,
       )[0]?.title ||
-      friendlyId(properties['@type']) ||
-      properties['@type'] ||
+      friendlyId(metadata['@type']) ||
+      metadata['@type'] ||
       parameters.type
     );
-  }, [types, properties, parameters]);
+  }, [types, metadata, parameters]);
 
   return (
     <Banner {...props}>
@@ -155,25 +145,30 @@ const View = (props) => {
                           <div className="actions">
                             <Banner.Action
                               icon="ri-facebook-fill"
-                              color="blue"
                               onClick={() => {
-                                sharePage(properties['@id'], 'facebook');
+                                sharePage(metadata['@id'], 'facebook');
                               }}
                             />
                             <Banner.Action
                               icon="ri-twitter-fill"
-                              color="blue"
                               onClick={() => {
-                                sharePage(properties['@id'], 'twitter');
+                                sharePage(metadata['@id'], 'twitter');
                               }}
                             />
                             <Banner.Action
                               icon="ri-linkedin-fill"
-                              color="blue"
                               onClick={() => {
-                                sharePage(properties['@id'], 'linkedin');
+                                sharePage(metadata['@id'], 'linkedin');
+                              }}
+                            />
+                            <Banner.Action icon="blogger b" />
+                            <Banner.Action
+                              icon="ri-reddit-line"
+                              onClick={() => {
+                                sharePage(metadata['@id'], 'reddit');
                               }}
                             />
+                            <Banner.Action icon="stumbleupon circle" />
                           </div>
                         </>
                       )}
@@ -202,7 +197,7 @@ const View = (props) => {
                 </>
               }
             >
-              <Title config={banner.title} properties={properties} />
+              <Title config={banner.title} properties={metadata} />
               <Banner.Metadata>
                 <Banner.MetadataField
                   type="type"
@@ -228,9 +223,9 @@ const View = (props) => {
                   value={modificationDate}
                   title={`${intl.formatMessage(messages.modified_on)} {}`}
                 />
-                {metadata.map((item, index) => (
+                {info.map((item, index) => (
                   <Banner.MetadataField
-                    key={`header-metadata-${index}`}
+                    key={`header-info-${index}`}
                     value={item.description}
                   />
                 ))}
@@ -245,10 +240,10 @@ const View = (props) => {
 
 export default compose(
   injectIntl,
-  injectLazyLibs(['moment']),
+  withRouter,
   connect((state) => {
     return {
       types: state.types.types,
     };
   }),
-)(withRouter(View));
+)(View);

package/src/components/theme/DraftBackground/draft.css

@@ -1,3 +1,3 @@
-body:not(.wf-state-published) {
+body.view-viewview:not(.wf-state-published) {
   background-image: url('draft.png') !important;
 }