Rounded Card variation - refs #148723

src/components/Blocks/Teaser/CardRounded.jsx

@@ -0,0 +1,70 @@
+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 CardTemplate = (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 card rounded big')}>
+            {(href.hasPreviewImage || href.image_field || image) && (
+              <div className="image">
+                <img
+                  src={flattenToAppURL(getTeaserImageURL(href, image))}
+                  alt="a"
+                />
+              </div>
+            )}
+            <div className="content">
+              <div className="header">{data?.title}</div>
+              {!data.hide_description && (
+                <p className="description">{data?.description}</p>
+              )}
+            </div>
+          </div>
+        </MaybeWrap>
+      )}
+    </>
+  );
+};
+
+CardTemplate.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default CardTemplate;

src/components/Blocks/Teaser/index.js

@@ -1,4 +1,5 @@
-import TeaserCardTemplate from './Card';
+import CardTemplate from './Card';
+import CardRoundedTemplate from './CardRounded';
 import { StylingSchema } from './Schema';
 
 export default (config) => {
@@ -9,8 +10,14 @@ export default (config) => {
       {
         id: 'card',
         isDefault: true,
-        title: 'Card (top image)',
-        template: TeaserCardTemplate,
+        title: 'Card',
+        template: CardTemplate,
+      },
+      {
+        id: 'cardRounded',
+        isDefault: false,
+        title: 'Card (Rounded)',
+        template: CardRoundedTemplate,
       },
     ];
     config.blocks.blocksConfig.teaser.enableStyling = true;