@eeacms/volto-eea-website-policy 0.2.3 → 0.2.4

package/CHANGELOG.md

@@ -4,8 +4,18 @@ 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.2.4](https://github.com/eea/volto-eea-website-policy/compare/0.2.3...0.2.4)
+
+- Fix listing block title: Listing (Content) [`cec2760`](https://github.com/eea/volto-eea-website-policy/commit/cec276082c3fc1b5486c996c3746a6958fb3a1a9)
+- Add theme to teaser stylewrapper [`60eeb28`](https://github.com/eea/volto-eea-website-policy/commit/60eeb28b7793708c59d0af73ffb09895e8f2c87d)
+- Fix className vs class warning [`fea1603`](https://github.com/eea/volto-eea-website-policy/commit/fea1603eefd628d57640a6b94ddbbb7edfb0d841)
+- Custom card view for teaser [`c8eded0`](https://github.com/eea/volto-eea-website-policy/commit/c8eded011b8317cce9f842526f5d86771f54797b)
+
 #### [0.2.3](https://github.com/eea/volto-eea-website-policy/compare/0.2.2...0.2.3)
 
+> 10 June 2022
+
+- Add Item block [`#9`](https://github.com/eea/volto-eea-website-policy/pull/9)
 - prettier fix [`c2a6d2d`](https://github.com/eea/volto-eea-website-policy/commit/c2a6d2d3b12ce771b9b4413c5a6db157ccd9d1fc)
 - Update index.js [`fb73895`](https://github.com/eea/volto-eea-website-policy/commit/fb7389509bc7e207942762c5e02a93d0168a6fba)
 - removed change from commit 719e3778 [`29e636b`](https://github.com/eea/volto-eea-website-policy/commit/29e636b34ab02992c67cc5960f4dc6b21b1b4e71)
@@ -14,7 +24,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Move Item block un components folder [`9fb6ab2`](https://github.com/eea/volto-eea-website-policy/commit/9fb6ab2fb02cc5c1a7e25367de5ebe7109bd3dc4)
 - Set default sizes for image & icon in Item block [`af22ec7`](https://github.com/eea/volto-eea-website-policy/commit/af22ec78b2c6fd1d033dc1acfec5e64f8926cd77)
 - Add helpers functions [`353581c`](https://github.com/eea/volto-eea-website-policy/commit/353581cc6602b5e573eee93c74a67656203c0968)
-- Add Item block [`617bfe2`](https://github.com/eea/volto-eea-website-policy/commit/617bfe2b827708ddb2c5eecd8fe1cc6fee37f60a)
 - Add Teaser block folder's structure [`9457dd4`](https://github.com/eea/volto-eea-website-policy/commit/9457dd4ffaa2631eceb46bfd1ec2d201e8b3d7a8)
 
 #### [0.2.2](https://github.com/eea/volto-eea-website-policy/compare/0.2.1...0.2.2)

package/package.json

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

package/src/components/Blocks/Teaser/Card.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Message } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getTeaserImageURL } from './utils';
+import { MaybeWrap } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
+import cx from 'classnames';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const TeaserCardTemplate = (props) => {
+  const { data, isEditMode } = props;
+  const intl = useIntl();
+  const href = data.href?.[0];
+  const image = data.preview_image?.[0];
+
+  return (
+    <>
+      {!href && isEditMode && (
+        <Message>
+          <div className="grid-teaser-item placeholder">
+            <img src={imageBlockSVG} alt="" />
+            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+          </div>
+        </Message>
+      )}
+      {href && (
+        <MaybeWrap
+          condition={!isEditMode}
+          as={UniversalLink}
+          href={href['@id']}
+          target={data.openLinkInNewTab ? '_blank' : null}
+        >
+          <div className={cx('ui fluid card', data?.styles?.theme)}>
+            {(href.hasPreviewImage || href.image_field || image) && (
+              <div className="image">
+                <img
+                  src={flattenToAppURL(getTeaserImageURL(href, image))}
+                  alt="a"
+                />
+              </div>
+            )}
+            <div className="content">
+              {data?.head_title && (
+                <div className="meta">{data?.head_title}</div>
+              )}
+              <div className="header">{data?.title}</div>
+              {!data.hide_description && (
+                <p className="description">{data?.description}</p>
+              )}
+            </div>
+          </div>
+        </MaybeWrap>
+      )}
+    </>
+  );
+};
+
+TeaserCardTemplate.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default TeaserCardTemplate;

package/src/components/Blocks/Teaser/Schema.js

@@ -0,0 +1,57 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  Type: {
+    id: 'Teaser',
+    defaultMessage: 'Teaser',
+  },
+  Theme: {
+    id: 'Theme',
+    defaultMessage: 'Theme',
+  },
+  ThemeHelp: {
+    id: 'Theme',
+    defaultMessage: 'Theme',
+  },
+  ThemeDefault: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  ThemePrimary: {
+    id: 'Primary',
+    defaultMessage: 'Primary',
+  },
+  ThemeSecondary: {
+    id: 'Secondary',
+    defaultMessage: 'Secondary',
+  },
+  ThemeTertiary: {
+    id: 'Tertiary',
+    defaultMessage: 'Tertiary',
+  },
+});
+
+export const StylingSchema = ({ intl }) => ({
+  title: intl.formatMessage(messages.Type),
+  block: 'teaserGrid',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['theme'],
+    },
+  ],
+  properties: {
+    theme: {
+      title: intl.formatMessage(messages.Theme),
+      description: intl.formatMessage(messages.ThemeHelp),
+      choices: [
+        ['', intl.formatMessage(messages.ThemeDefault)],
+        ['primary', intl.formatMessage(messages.ThemePrimary)],
+        ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+        ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+      ],
+    },
+  },
+  required: [],
+});

package/src/components/Blocks/Teaser/index.js

@@ -0,0 +1,26 @@
+import TeaserCardTemplate from './Card';
+import { StylingSchema } from './Schema';
+
+export default (config) => {
+  // Teaser
+  if (config.blocks.blocksConfig.teaser) {
+    config.blocks.blocksConfig.teaser.variations = [
+      ...(config.blocks.blocksConfig.teaser.variations || []),
+      {
+        id: 'card',
+        isDefault: true,
+        title: 'Card (top image)',
+        template: TeaserCardTemplate,
+      },
+    ];
+    config.blocks.blocksConfig.teaser.enableStyling = true;
+    config.blocks.blocksConfig.teaser.stylesSchema = StylingSchema;
+  }
+
+  // Teaser Grid
+  if (config.blocks.blocksConfig.teaserGrid) {
+    config.blocks.blocksConfig.teaserGrid.title = 'Teaser (Cards)';
+  }
+
+  return config;
+};

package/src/components/Blocks/Teaser/utils.js

@@ -0,0 +1,18 @@
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+export function getTeaserImageURL(href, image) {
+  const imageScale =
+    config.blocks.blocksConfig['teaser'].imageScale || 'preview';
+  if (image) {
+    if (isInternalURL(image['@id'])) {
+      return `${image['@id']}/@@images/image/${imageScale}`;
+    } else {
+      return image['@id'];
+    }
+  } else {
+    return `${href['@id']}/@@images/${
+      href.image_field || 'preview_image'
+    }/${imageScale}`;
+  }
+}

package/src/index.js

@@ -1,6 +1,7 @@
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import installCallout from 'volto-slate/editor/plugins/Callout';
 import installItemBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Item';
+import customizeTeaserBlock from '@eeacms/volto-eea-website-policy/components/Blocks/Teaser';
 
 const applyConfig = (config) => {
   // if (process.env.NODE_ENV === 'production') {
@@ -76,9 +77,6 @@ const applyConfig = (config) => {
   if (config.blocks.blocksConfig.teaser) {
     config.blocks.blocksConfig.teaser.restricted = true;
   }
-  if (config.blocks.blocksConfig.teaserGrid) {
-    config.blocks.blocksConfig.teaserGrid.title = 'Teaser (Cards)';
-  }
 
   // Divider
   if (config.blocks.blocksConfig.dividerBlock) {
@@ -95,8 +93,16 @@ const applyConfig = (config) => {
     config.blocks.blocksConfig.columnsBlock.mostUsed = true;
   }
 
+  // Listing
+  if (config.blocks.blocksConfig.listing) {
+    config.blocks.blocksConfig.listing.title = 'Listing (Content)';
+  }
+
   // Custom blocks
-  config = [installItemBlock].reduce((acc, apply) => apply(acc), config);
+  config = [installItemBlock, customizeTeaserBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
   config.blocks.blocksConfig.item.mostUsed = true;
 
   // Done