@eeacms/volto-clms-theme 1.0.71 → 1.0.74

package/CHANGELOG.md

@@ -4,8 +4,36 @@ 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.0.74](https://github.com/eea/volto-clms-theme/compare/1.0.73...1.0.74)
+
+- fix [`3d683f2`](https://github.com/eea/volto-clms-theme/commit/3d683f241799aaeb9034652f1839b34bc8662003)
+- add husky installer script to package.json [`071706f`](https://github.com/eea/volto-clms-theme/commit/071706f2c65333aba82c0ec9b545095479bb5348)
+- remove fullobjects and show images with generated url [`0bfbc00`](https://github.com/eea/volto-clms-theme/commit/0bfbc0080a6a9be4b63bfd3eb7ed8f65856382a2)
+- stop re-requesting on re-rendering of relatedListing view [`27bd33c`](https://github.com/eea/volto-clms-theme/commit/27bd33cdbb65686a37b0591e8a023aa155f2539d)
+- date format [`e61e6f1`](https://github.com/eea/volto-clms-theme/commit/e61e6f1a655914d5ecadc7b8cfe51cfa6d19a7cb)
+- fix related Listing block portal_type selector [`02228f9`](https://github.com/eea/volto-clms-theme/commit/02228f98e3032a9af436dedc6e5e6a5ac7d863fa)
+- feedback received on demo fixed [`52530c0`](https://github.com/eea/volto-clms-theme/commit/52530c0deea9ba855816350041cb285adde03035)
+
+#### [1.0.73](https://github.com/eea/volto-clms-theme/compare/1.0.72...1.0.73)
+
+> 23 February 2022
+
+- fix import [`#211`](https://github.com/eea/volto-clms-theme/pull/211)
+
+#### [1.0.72](https://github.com/eea/volto-clms-theme/compare/1.0.71...1.0.72)
+
+> 21 February 2022
+
+- Develop [`#210`](https://github.com/eea/volto-clms-theme/pull/210)
+- fix tests [`8d68b8d`](https://github.com/eea/volto-clms-theme/commit/8d68b8d9f013f469d6f1138f5301055175344ab6)
+- add edit button for editors at documents listing [`7e81f0b`](https://github.com/eea/volto-clms-theme/commit/7e81f0b920db84c47f3354a9a6d5736213746dea)
+- add default link if has no files to download [`f45842d`](https://github.com/eea/volto-clms-theme/commit/f45842d9a19cab1333cb31843fb5fe5b1e2b15db)
+
 #### [1.0.71](https://github.com/eea/volto-clms-theme/compare/1.0.70...1.0.71)
 
+> 21 February 2022
+
+- Taxonomy widget [`#209`](https://github.com/eea/volto-clms-theme/pull/209)
 - Taxonomy widget [`#208`](https://github.com/eea/volto-clms-theme/pull/208)
 - merge conflicts [`c714434`](https://github.com/eea/volto-clms-theme/commit/c714434f91ce01b9dc82014b32d2c9c34fbe1308)
 - add download link to technical library objects at listing [`455a6dc`](https://github.com/eea/volto-clms-theme/commit/455a6dc6c4cf38f5018582d11b90f156232f1d99)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-clms-theme",
-  "version": "1.0.71",
+  "version": "1.0.74",
   "description": "volto-clms-theme: Volto theme for CLMS site",
   "main": "src/index.js",
   "author": "CodeSyntax for the European Environment Agency",
@@ -121,6 +121,7 @@
     "cypress:run": "NODE_ENV=production CYPRESS_API=plone ../../../node_modules/cypress/bin/cypress run",
     "cypress:open": "NODE_ENV=production CYPRESS_API=plone ../../../node_modules/cypress/bin/cypress open",
     "precommit": "yarn stylelint && yarn prettier && yarn lint",
+    "husky": "husky install",
     "test": "docker run -it --rm -v $(pwd):/opt/frontend/my-volto-project/src/addons/volto-clms-theme -e GIT_NAME=volto-clms-theme -e NAMESPACE=@eeacms plone/volto-addon-ci"
   }
 }

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingEdit.jsx

@@ -9,7 +9,10 @@ const CclRelatedListingEdit = (props) => {
   const schema = config.blocks.blocksConfig['relatedListing'].blockSchema;
   const searchSubrequests = useSelector((state) => state.search.subrequests);
   const types = useSelector((state) => state.types.types);
-  const types_schema = types.map((type) => [type.title, type.title]);
+  const types_schema = types.map((type) => [
+    type['@id'].split('/').pop(),
+    type.title,
+  ]);
   let libraries = searchSubrequests?.[props.id]?.items || [];
   const variationsConfig =
     config.blocks.blocksConfig['relatedListing'].variations;

package/src/components/Blocks/CclRelatedListingBlock/CclRelatedListingView.jsx

@@ -3,13 +3,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import React from 'react';
 import config from '@plone/volto/registry';
 import { searchContent } from '@plone/volto/actions';
+import { Segment } from 'semantic-ui-react';
 
 const CclRelatedListingView = (props) => {
   const { data, id, properties, metadata } = props;
   const dispatch = useDispatch();
-  const searchSubrequests = useSelector((state) => state.search.subrequests);
+  const searchSubrequests = useSelector(
+    (state) => state.search.subrequests?.[props.id],
+  );
   const uid = metadata ? metadata['UID'] : properties['UID'];
-  let libraries = searchSubrequests?.[props.id]?.items || [];
+  let libraries = searchSubrequests?.items || [];
   const variationsConfig =
     config.blocks.blocksConfig['relatedListing'].variations;
   let TemplateView = '';
@@ -43,27 +46,31 @@ const CclRelatedListingView = (props) => {
 
   React.useEffect(() => {
     uid &&
+      !searchSubrequests?.loading &&
+      !searchSubrequests?.loaded &&
+      !searchSubrequests?.error &&
       dispatch(
         searchContent(
-          '',
+          '/',
           {
-            fullobjects: 1,
             portal_type: data.content_type || 'News Item',
-            path: '/',
             associated_products: uid,
+            metadata_fields: '_all',
           },
           id,
         ),
       );
-  }, [data, id, uid, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, id, uid, dispatch, searchSubrequests]);
 
   return (
     <>
-      {libraries.length > 0 ? (
+      {searchSubrequests?.loaded && libraries.length > 0 ? (
         <TemplateView items={libraries} variation={template_id} />
       ) : (
         <p>There are no related {data.content_type} items.</p>
       )}
+      {searchSubrequests?.loading && <Segment loading></Segment>}
     </>
   );
 };

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionEdit.jsx

@@ -0,0 +1,37 @@
+import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+import { SidebarPortal } from '@plone/volto/components';
+import { SubscriptionSchema } from './schema';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+
+const SubscriptionBlockEdit = (props) => {
+  const { block, data, onChangeBlock, selected } = props;
+
+  return (
+    <>
+      <div className="ccl-block-editor-header">
+        <legend
+          onClick={() => {
+            props.setSidebarTab(1);
+          }}
+          aria-hidden="true"
+        />
+      </div>
+      <SubscriptionView type={data.type || 'events'} />
+      <SidebarPortal selected={selected}>
+        <InlineForm
+          schema={SubscriptionSchema()}
+          title="Product card block"
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default SubscriptionBlockEdit;

package/src/components/Blocks/CclSubscriptionBlock/SubscriptionView.jsx

@@ -0,0 +1,9 @@
+import { SubscriptionView } from '@eeacms/volto-clms-theme/components/CLMSSubscriptionView';
+
+const SubscriptionBlockView = (props) => {
+  const { data } = props;
+
+  return <SubscriptionView type={data.type || 'events'} />;
+};
+
+export default SubscriptionBlockView;

package/src/components/Blocks/CclSubscriptionBlock/schema.js

@@ -0,0 +1,21 @@
+export const SubscriptionSchema = () => ({
+  title: 'Subscription block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['type'],
+    },
+  ],
+  properties: {
+    type: {
+      title: 'Subscription type',
+      choices: [
+        ['news', 'news'],
+        ['events', 'events'],
+        ['newsletter', 'newsletter'],
+      ],
+    },
+  },
+  required: ['product'],
+});

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards.jsx

@@ -4,6 +4,7 @@ import { ConditionalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import { useSelector } from 'react-redux';
 
 import CclCard from '@eeacms/volto-clms-theme/components/CclCard/CclCard';
 
@@ -11,7 +12,7 @@ const CclListingCards = (props) => {
   const { items, linkHref, linkTitle, isEditMode, variation = 'doc' } = props;
   let link = null;
   let href = linkHref?.[0]?.['@id'] || '';
-
+  const user = useSelector((state) => state.users.user);
   if (isInternalURL(href)) {
     link = (
       <ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
@@ -21,7 +22,6 @@ const CclListingCards = (props) => {
   } else if (href) {
     link = <a href={href}>{linkTitle || href}</a>;
   }
-
   let containerClass = '';
   if (['news', 'event'].includes(variation)) {
     containerClass = 'ccl-container';
@@ -33,7 +33,12 @@ const CclListingCards = (props) => {
       <div className={containerClass}>
         {items && items.length > 0
           ? items.map((item, index) => (
-              <CclCard key={index} type={variation} card={item} />
+              <CclCard
+                key={index}
+                type={variation}
+                card={item}
+                showEditor={user?.roles?.includes('Manager')}
+              />
             ))
           : 'There are no items to display'}
       </div>

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingCards.test.jsx

@@ -10,19 +10,26 @@ import configureStore from 'redux-mock-store';
 Enzyme.configure({ adapter: new Adapter() });
 
 const mockStore = configureStore();
+const store = mockStore({
+  content: {
+    create: {},
+    data: {},
+  },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+  users: {
+    user: {
+      roles: ['Manager'],
+    },
+  },
+});
+const internalLink = [{ '@id': '/news' }];
+const externalLink = [{ '@id': 'https://wwww.google.com' }];
 
 describe('CclListingCards', () => {
   it('News listing card internal link', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const items = [
       {
         title: 'Card Title',
@@ -33,7 +40,6 @@ describe('CclListingCards', () => {
         },
       },
     ];
-    const linkHref = [{ '@id': '/news' }];
     const linkTitle = 'More news';
     const isEditMode = true;
     const variation = 'CclCardsnews';
@@ -42,7 +48,7 @@ describe('CclListingCards', () => {
         <MemoryRouter>
           <CclListingCards
             items={items}
-            linkHref={linkHref}
+            linkHref={internalLink}
             linkTitle={linkTitle}
             isEditMode={isEditMode}
             variation={variation}
@@ -53,16 +59,6 @@ describe('CclListingCards', () => {
     expect(component).toBeDefined();
   });
   it('Line-color listing card external link', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const items = [
       {
         title: 'Card Title',
@@ -73,7 +69,6 @@ describe('CclListingCards', () => {
         },
       },
     ];
-    const linkHref = [{ '@id': 'https://wwww.google.com' }];
     const linkTitle = 'More line-color';
     const isEditMode = true;
     const variation = 'CclCardsline-color';
@@ -82,7 +77,7 @@ describe('CclListingCards', () => {
         <MemoryRouter>
           <CclListingCards
             items={items}
-            linkHref={linkHref}
+            linkHref={externalLink}
             linkTitle={linkTitle}
             isEditMode={isEditMode}
             variation={variation}
@@ -93,16 +88,6 @@ describe('CclListingCards', () => {
     expect(component).toBeDefined();
   });
   it('line listing card external link', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const items = [
       {
         title: 'Card Title',
@@ -113,7 +98,6 @@ describe('CclListingCards', () => {
         },
       },
     ];
-    const linkHref = [{ '@id': 'https://wwww.google.com' }];
     const linkTitle = 'More line';
     const isEditMode = true;
     const variation = 'CclCardsline';
@@ -122,7 +106,7 @@ describe('CclListingCards', () => {
         <MemoryRouter>
           <CclListingCards
             items={items}
-            linkHref={linkHref}
+            linkHref={externalLink}
             linkTitle={linkTitle}
             isEditMode={isEditMode}
             variation={variation}
@@ -133,16 +117,6 @@ describe('CclListingCards', () => {
     expect(component).toBeDefined();
   });
   it('without linkHref', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const items = [
       {
         title: 'Card Title',
@@ -169,16 +143,6 @@ describe('CclListingCards', () => {
     expect(component).toBeDefined();
   });
   it('internal link without linkTitle', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const items = [
       {
         title: 'Card Title',
@@ -189,7 +153,6 @@ describe('CclListingCards', () => {
         },
       },
     ];
-    const linkHref = [{ '@id': '/news' }];
     const isEditMode = true;
     const variation = 'CclCardsnews';
     const component = mount(
@@ -197,7 +160,7 @@ describe('CclListingCards', () => {
         <MemoryRouter>
           <CclListingCards
             items={items}
-            linkHref={linkHref}
+            linkHref={internalLink}
             isEditMode={isEditMode}
             variation={variation}
           ></CclListingCards>
@@ -207,16 +170,6 @@ describe('CclListingCards', () => {
     expect(component).toBeDefined();
   });
   it('External link without linkTitle', () => {
-    const store = mockStore({
-      content: {
-        create: {},
-        data: {},
-      },
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
     const items = [
       {
         title: 'Card Title',
@@ -227,7 +180,6 @@ describe('CclListingCards', () => {
         },
       },
     ];
-    const linkHref = [{ '@id': 'https://www.google.com' }];
     const isEditMode = true;
     const variation = 'CclCardsnews';
     const component = mount(
@@ -235,7 +187,7 @@ describe('CclListingCards', () => {
         <MemoryRouter>
           <CclListingCards
             items={items}
-            linkHref={linkHref}
+            linkHref={externalLink}
             isEditMode={isEditMode}
             variation={variation}
           ></CclListingCards>

package/src/components/Blocks/CustomTemplates/VoltoListingBlock/CclListingWorkOpportunities.jsx

@@ -7,15 +7,15 @@ import { Link } from 'react-router-dom';
 const messages = defineMessages({
   ProcurementNo: {
     id: 'ProcurementNo',
-    defaultMessage: 'Procurement No:',
+    defaultMessage: 'Procurement No: ',
   },
   ReferenceNo: {
     id: 'ReferenceNo',
-    defaultMessage: 'Reference No:',
+    defaultMessage: 'Reference No: ',
   },
   SubmissionDeadline: {
     id: 'SubmissionDeadline',
-    defaultMessage: 'Submission deadline:',
+    defaultMessage: 'Submission deadline: ',
   },
 });
 
@@ -50,7 +50,7 @@ const CclWorkOpportunity = (props) => {
         <span className="card-work-deadline-title">
           {intl.formatMessage(messages.SubmissionDeadline)}
         </span>
-        {new Date(item.submission_deadline).toLocaleDateString()}
+        {new Date(item.submission_deadline).toLocaleString()}
       </div>
     </div>
   );

package/src/components/Blocks/customBlocks.js

@@ -56,6 +56,8 @@ import RelatedListingSchema from '@eeacms/volto-clms-theme/components/Blocks/Ccl
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import TextLinkCarouselEdit from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselEdit';
 import TextLinkCarouselView from '@eeacms/volto-clms-theme/components/Blocks/CclTextLinkCarouselBlock/CclTextLinkCarouselView';
+import SubscriptionBlockView from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionView';
+import SubscriptionBlockEdit from '@eeacms/volto-clms-theme/components/Blocks/CclSubscriptionBlock/SubscriptionEdit';
 import cardSVG from '@plone/volto/icons/indent.svg';
 import containerSVG from '@plone/volto/icons/apps.svg';
 import customIdFieldSchema from '@eeacms/volto-clms-theme/components/Blocks/CustomTemplates/VoltoFormBlock/customIdFieldSchema';
@@ -85,7 +87,6 @@ function listingVariation(id, isDefault, title, template, isWO = false) {
       isWO ? CclListingWorkOpportunities : CclListingCards,
       template,
     ),
-    fullobjects: true,
   };
 }
 
@@ -443,6 +444,22 @@ const customBlocks = (config) => ({
       view: [], // Future proof (not implemented yet) view user role(s)
     },
   },
+  subscriptionBlock: {
+    id: 'subscriptionBlock', // The name (id) of the block
+    title: 'Subscription Block', // The display name of the block
+    icon: homeBand, // The icon used in the block chooser
+    group: 'ccl_blocks', // The group (blocks can be grouped, displayed in the chooser)
+    view: SubscriptionBlockView, // The view mode component
+    edit: SubscriptionBlockEdit, // The edit mode component
+    restricted: false, // If the block is restricted, it won't show in the chooser
+    mostUsed: false, // A meta group `most used`, appearing at the top of the chooser
+    blockHasOwnFocusManagement: false, // Set this to true if the block manages its own focus
+    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+    security: {
+      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
+      view: [], // Future proof (not implemented yet) view user role(s)
+    },
+  },
   form: {
     ...config.blocks.blocksConfig.form,
     fieldSchema: customIdFieldSchema,

package/src/components/CLMSDownloadableFileView/CLMSDownloadableFileView.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 
 import CclButton from '@eeacms/volto-clms-theme/components/CclButton/CclButton';
-import { getBreadcrumbs } from '../../../../../../node_modules/@plone/volto/src/actions';
+import { getBreadcrumbs } from '@plone/volto/actions';
 import { useDispatch } from 'react-redux';
 import { Label } from 'semantic-ui-react';
 

package/src/components/CLMSMeetingView/CLMSMeetingView.jsx

@@ -73,10 +73,6 @@ export const CLMSMeetingView = (props) => {
       id: 'meetingtype',
       defaultMessage: 'Type',
     },
-    meetinglevel: {
-      id: 'meetinglevel',
-      defaultMessage: 'Level',
-    },
     hosting_organisation: {
       id: 'hosting_organisation',
       defaultMessage: 'Hosting organisation',
@@ -330,19 +326,6 @@ export const CLMSMeetingView = (props) => {
           </>
         )}
 
-        {content.meeting_level && (
-          <>
-            <div className="dataset-info-field">
-              <div className="dataset-field-title">
-                <Header>{intl.formatMessage(messages.meetinglevel)}</Header>
-              </div>
-              <div className="dataset-field-description">
-                {content.meeting_level.title}
-              </div>
-            </div>
-          </>
-        )}
-
         {content.hosting_organisation && (
           <>
             <div className="dataset-info-field">

package/src/components/CLMSNewsItemView/CLMSNewsItemView.jsx

@@ -8,7 +8,7 @@ const CLMSNewsItemView = (props) => {
       <h1 className="page-title">{content.title}</h1>
       <div className="news-detail">
         <div className="news-detail-date">
-          {new Date(content?.effective).toLocaleDateString()}
+          {new Date(content?.effective).toLocaleString()}
         </div>
         {content?.image && (
           <figure className="news-detail-image">

package/src/components/CclCard/CclCard.jsx

@@ -1,7 +1,5 @@
 import './cards.less';
 
-import * as mime from 'react-native-mime-types';
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -9,15 +7,57 @@ import React from 'react';
 import { When } from '@plone/volto/components/theme/View/EventDatesInfo';
 import { Label } from 'semantic-ui-react';
 import { portal_types_labels } from '../Blocks/CustomTemplates/VoltoSearchBlock';
+import penSVG from '@plone/volto/icons/pen.svg';
+import { Icon } from '@plone/volto/components';
 
-function bytesToSize(bytes) {
-  var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-  if (bytes === 0) return '0 Byte';
-  var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-  return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
-}
+const CardImage = ({ card, size = 'preview' }) => {
+  return card?.image_field ? (
+    <img
+      src={`${card.getURL}/@@images/${card?.image_field}/${size}`}
+      alt={card?.image?.alt || 'Placeholder'}
+    />
+  ) : (
+    <img
+      src={
+        'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
+      }
+      alt={card?.image?.alt || 'Placeholder'}
+    />
+  );
+};
+
+const DocCard = ({ card, url, showEditor, children }) => {
+  return (
+    <>
+      <div className="card-doc-title">
+        {card?.Type === 'TechnicalLibrary' ? (
+          <a href={`${card['@id']}/@@download/file`}>{card?.title}</a>
+        ) : (
+          <Link to={url}>{card?.title}</Link>
+        )}
+        {card?.Type === 'TechnicalLibrary' && showEditor && (
+          <Link to={`${url}/edit`}>
+            <Icon
+              name={penSVG}
+              size="15px"
+              className="circled"
+              title={'Edit'}
+            />
+          </Link>
+        )}
+      </div>
+      <div className="card-doc-text">
+        <div className="doc-description">{card?.description}</div>
+        {card?.Type === 'TechnicalLibrary' && (
+          <div className="card-doc-size">{card.getObjSize || ''}</div>
+        )}
+        {children}
+      </div>
+    </>
+  );
+};
 function CclCard(props) {
-  const { type, children, card } = props;
+  const { type, children, card, showEditor = false } = props;
   let url = '/';
   let content_type = '';
   if (card) {
@@ -38,43 +78,27 @@ function CclCard(props) {
     >
       {conditional_types.includes(type) ? (
         <>
-          {(type === 'doc' || type === 'globalSearch') && (
+          {type === 'doc' && (
             <>
-              {type === 'globalSearch' && (
-                <Label ribbon="right" color="olive">
-                  {content_type}
-                </Label>
-              )}
-              <div className="card-doc-title">
-                {card?.file?.download ? (
-                  <a href={card.file.download}>{card?.title}</a>
-                ) : (
-                  card?.title
-                )}
-              </div>
-              <div className="card-doc-text">
-                <div className="doc-description">{card?.description}</div>
-                {card?.file && (
-                  <div className="card-doc-size">
-                    {mime.extension(card?.file?.['content-type']).toUpperCase()}{' '}
-                    {bytesToSize(card?.file?.size) || ''}
-                  </div>
-                )}
+              <DocCard card={card} url={url} showEditor={showEditor}>
                 {children}
-              </div>
+              </DocCard>
+            </>
+          )}
+          {type === 'globalSearch' && (
+            <>
+              <Label ribbon="right" color="olive">
+                {content_type}
+              </Label>
+              <DocCard card={card} url={url} showEditor={showEditor}>
+                {children}
+              </DocCard>
             </>
           )}
           {(type === 'block' || type === 'threeColumns') && (
             <>
               <div className={`card-${type}-image`}>
-                <img
-                  src={
-                    card?.image?.scales?.preview?.download ||
-                    card?.image?.download ||
-                    'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                  }
-                  alt={card?.image?.alt || 'Placeholder'}
-                />
+                <CardImage card={card} size={'preview'} />
               </div>
               <div className="card-text">
                 <div className="card-title">
@@ -88,21 +112,14 @@ function CclCard(props) {
           {type === 'news' && (
             <>
               <div className="card-news-image">
-                <img
-                  src={
-                    card?.image?.scales?.mini?.download ||
-                    card?.image?.download ||
-                    'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-                  }
-                  alt={card?.image?.alt || 'Placeholder'}
-                />
+                <CardImage card={card} size={'mini'} />
               </div>
               <div className="card-news-text">
                 <div className="card-news-title">
                   <Link to={url}>{card?.title || 'Card default title'}</Link>
                 </div>
                 <div className="card-news-date">
-                  {new Date(card?.effective).toLocaleDateString()}
+                  {new Date(card?.effective).toLocaleString()}
                 </div>
                 <p className="card-news-description">{card?.description}</p>
               </div>
@@ -117,19 +134,11 @@ function CclCard(props) {
                 <div className="card-event-when">
                   <FontAwesomeIcon icon={['far', 'calendar-alt']} />
                   <div className="card-event-when-text">
-                    {card.whole_day ? (
-                      <When
-                        start={card.start}
-                        end={card.start}
-                        whole_day={card.whole_day}
-                      />
-                    ) : (
-                      <When
-                        start={card.start}
-                        end={card.end}
-                        whole_day={card.whole_day}
-                      />
-                    )}
+                    <When
+                      start={card.start}
+                      end={card.whole_day ? card.start : card.end}
+                      whole_day={card.whole_day}
+                    />
                   </div>
                 </div>
                 {card?.location ? (
@@ -152,14 +161,7 @@ function CclCard(props) {
       ) : (
         <>
           <div className="card-image">
-            <img
-              src={
-                card?.image?.scales?.mini?.download ||
-                card?.image?.download ||
-                'https://eu-copernicus.github.io/copernicus-component-library/assets/images/image_placeholder.jpg'
-              }
-              alt={card?.image?.alt || 'Placeholder'}
-            />
+            <CardImage card={card} size={'mini'} />
           </div>
           <div className={'card-text'}>
             <div className="card-title">

package/src/index.js

@@ -40,7 +40,6 @@ const applyConfig = (config) => {
       ...config.contentTypesViews,
       DataSet: CLMSDatasetDetailView,
       'News Item': CLMSNewsItemView,
-      TechnicalLibrary: CLMSDownloadableFileView,
       File: CLMSDownloadableFileView,
       'eea.meeting': CLMSMeetingView,
       'eea.meeting.subscribers': CLMSMeetingSubscribersView,