WIP search item

src/PreviewImage.js

@@ -41,16 +41,15 @@ function PreviewImage(props) {
     label,
     ...rest
   } = props;
-  const src =
-    preview_image_url || preview_image?.[0]
-      ? getSrc(preview_image[0], size)
-      : item.image_field
-      ? getSrc(item, size)
-      : DefaultImageSVG;
+  const src = preview_image?.[0]
+    ? getSrc(preview_image[0], size)
+    : item.image_field
+    ? getSrc(item, size)
+    : DefaultImageSVG;
 
   return (
     <Image
-      src={src}
+      src={preview_image_url || src}
       alt={item.title}
       {...rest}
       label={

src/blocks/Listing/SearchItemTemplate.jsx

@@ -0,0 +1,61 @@
+import cx from 'classnames';
+import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
+
+const BodyText = ({ item, hasDescription }) => {
+  return (
+    <div className="listing-body">
+      <h3 className={'listing-header'}>{item.title ? item.title : item.id}</h3>
+      {hasDescription && (
+        <p className={'listing-description'}>{item.description}</p>
+      )}
+    </div>
+  );
+};
+
+const getStyles = (props) => {
+  const { itemModel = {} } = props;
+  const res = {};
+  if (itemModel.maxDescription) {
+    res[`max-${itemModel.maxDescription}-lines`] = true;
+  }
+  return res;
+};
+
+const BasicItem = (props) => {
+  const { item, styles, className, itemModel = {} } = props;
+  const { hasImage, hasDate, hasDescription } = itemModel;
+
+  return (
+    <div
+      className={cx(
+        'u-item listing-item result-item',
+        styles?.theme,
+        getStyles(props),
+        className,
+      )}
+    >
+      <div className="wrapper">
+        <div className="slot-head">{item?.meta}</div>
+        <div className="slot-top">
+          <BodyText
+            item={item}
+            hasDescription={hasDescription}
+            hasDate={hasDate}
+          />
+          {hasImage && (
+            <PreviewImage
+              item={item}
+              style={{ marginLeft: 'auto' }}
+              preview_image_url={item.preview_image_url}
+            />
+          )}
+        </div>
+        <div className="slot-bottom">{item?.extra}</div>
+      </div>
+    </div>
+  );
+};
+
+export const SearchItemLayout = (props) => {
+  return <BasicItem {...props} />;
+};

src/blocks/Listing/index.js

@@ -9,6 +9,7 @@ import {
   RightImageCardLayout,
 } from './CardTemplates';
 import { DefaultItemLayout } from './ItemTemplates';
+import { SearchItemLayout } from './SearchItemTemplate';
 
 import { ListingStylingSchema } from './schema';
 
@@ -78,6 +79,12 @@ const applyConfig = (config) => {
         title: 'Basic Item',
         view: DefaultItemLayout,
       },
+      {
+        id: 'searchItem',
+        isDefault: false,
+        title: 'Search Item',
+        view: SearchItemLayout,
+      },
     ],
     cardTemplates: [
       {

src/less/listing-cards.less

@@ -61,6 +61,10 @@ each(range(5), {
 }
 
 .listing-item {
+  .wrapper {
+    width: 100%;
+  }
+
   // defaults in Volto
   .slot-top {
     display: flex;
@@ -89,3 +93,9 @@ each(range(5), {
     flex-direction: row-reverse;
   }
 }
+
+.result-item {
+  padding-bottom: 1.5em;
+  border-bottom: 1px solid #bcbec0;
+  margin-bottom: 1.5em !important;
+}