Merge branch 'us_49548_extra_tags_in_blocks' into slate

RedTurtle · Dec 15, 2023 · 9e43523 · 9e43523
2 parents 7f413ac + 2d4b4e6
commit 9e43523
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 32 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx b/src/components/ItaliaTheme/Blocks/HighlightedContent/Body.jsx
@@ -21,7 +21,10 @@ import {
   CardCategory,
   getItemIcon,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { viewDate } from 'design-comuni-plone-theme/helpers';
+import {
+  viewDate,
+  getComponentWithFallback,
+} from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const Body = (props) => {
@@ -33,6 +36,11 @@ const Body = (props) => {
   const { show_type = true, show_section } = block;
   const category = getCategory(content, show_type, show_section, props);
 
+  const BlockExtraTags = getComponentWithFallback({
+    name: 'BlockExtraTags',
+    dependencies: ['HighlightedContent', content['@type']],
+  }).component;
+
   return (
     <div className={`${block.bg_color ? 'bg-' + block.bg_color : ''}`}>
       <Row>
@@ -70,7 +78,7 @@ const Body = (props) => {
                 </ConditionalLink>
               </CardTitle>
               <CardText>{content.description}</CardText>
-
+              <BlockExtraTags {...props} item={content} itemIndex={0} />
               {content.tassonomia_argomenti &&
                 content.tassonomia_argomenti.length > 0 && (
                   <>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithImageTemplate.jsx
@@ -26,6 +26,7 @@ import {
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  getComponentWithFallback,
 } from 'design-comuni-plone-theme/helpers';
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 
@@ -98,6 +99,12 @@ const CardWithImageTemplate = (props) => {
               (index < imagesToShow || always_show_image) && image != null;
             const category = getCategory(item, show_type, show_section, props);
             const topics = show_topics ? item.tassonomia_argomenti : null;
+
+            const BlockExtraTags = getComponentWithFallback({
+              name: 'BlockExtraTags',
+              dependencies: ['CardWithImageTemplate', item['@type']],
+            }).component;
+
             return (
               <Col
                 lg={set_four_columns ? '3' : '4'}
@@ -165,7 +172,11 @@ const CardWithImageTemplate = (props) => {
                           {listingText}
                         </CardText>
                       )}
-
+                      <BlockExtraTags
+                        {...props}
+                        item={item}
+                        itemIndex={index}
+                      />
                       {topics?.length > 0 && (
                         <div
                           className={cx('', {

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx
@@ -5,7 +5,10 @@ import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { getCalendarDate } from 'design-comuni-plone-theme/helpers';
+import {
+  getCalendarDate,
+  getComponentWithFallback,
+} from 'design-comuni-plone-theme/helpers';
 import {
   ListingLinkMore,
   ListingCategory,
@@ -60,6 +63,11 @@ const CardWithSlideUpTextTemplate = (props) => {
               : getCalendarDate(item, rrule.rrulestr);
             const title = item?.title || '';
 
+            const BlockExtraTags = getComponentWithFallback({
+              name: 'BlockExtraTags',
+              dependencies: ['CardWithSlideUpTextTemplate', item['@type']],
+            }).component;
+
             return (
               <UniversalLink
                 item={!isEditMode ? item : null}
@@ -93,6 +101,7 @@ const CardWithSlideUpTextTemplate = (props) => {
                   {show_description && item.description && (
                     <p>{item.description}</p>
                   )}
+                  <BlockExtraTags {...props} item={item} itemIndex={index} />
                   <CardReadMore
                     iconName="it-arrow-right"
                     tag={UniversalLink}

diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -19,23 +19,25 @@ import {
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { getComponentWithFallback } from 'design-comuni-plone-theme/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 
 import config from '@plone/volto/registry';
 
-const CompleteBlockLinksTemplate = ({
-  items,
-  title,
-  isEditMode,
-  linkAlign,
-  linkTitle,
-  linkHref,
-  show_block_bg,
-  show_description = true,
-  id_lighthouse,
-  linkmore_id_lighthouse,
-  titleLine,
-}) => {
+const CompleteBlockLinksTemplate = (props) => {
+  const {
+    items,
+    title,
+    isEditMode,
+    linkAlign,
+    linkTitle,
+    linkHref,
+    // show_block_bg,
+    show_description = true,
+    id_lighthouse,
+    linkmore_id_lighthouse,
+    titleLine,
+  } = props;
   return (
     <div className="complete-block-links-template">
       <Container className="px-4">
@@ -56,6 +58,11 @@ const CompleteBlockLinksTemplate = ({
           {items.map((item) => {
             const image = ListingImage({ item, className: '', sizes: '60px' });
 
+            const BlockExtraTags = getComponentWithFallback({
+              name: 'BlockExtraTags',
+              dependencies: ['CompleteBlockLinksTemplate', item['@type']],
+            }).component;
+
             return (
               <Col md="6" lg="3" key={item['@id']} className="col-item">
                 <Card
@@ -95,6 +102,11 @@ const CompleteBlockLinksTemplate = ({
                               {item.description}
                             </CardText>
                           )}
+                          <BlockExtraTags
+                            {...props}
+                            item={item}
+                            itemIndex={index}
+                          />
                         </CardBody>
                       </div>
                     </div>

diff --git a/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/ContentInEvidenceTemplate.jsx
@@ -22,6 +22,7 @@ import { UniversalLink } from '@plone/volto/components';
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  getComponentWithFallback,
 } from 'design-comuni-plone-theme/helpers';
 import {
   ListingCategory,
@@ -32,19 +33,20 @@ import {
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
-const ContentInEvidenceTemplate = ({
-  items,
-  title,
-  isEditMode,
-  show_block_bg,
-  linkAlign,
-  linkTitle,
-  linkHref,
-  id_lighthouse,
-  linkmore_id_lighthouse,
-  titleLine,
-  rrule,
-}) => {
+const ContentInEvidenceTemplate = (props) => {
+  const {
+    items,
+    title,
+    isEditMode,
+    // show_block_bg,
+    // linkAlign,
+    linkTitle,
+    linkHref,
+    id_lighthouse,
+    // linkmore_id_lighthouse,
+    titleLine,
+    rrule,
+  } = props;
   const intl = useIntl();
 
   return (
@@ -65,6 +67,11 @@ const ContentInEvidenceTemplate = ({
           const listingText = <ListingText item={item} />;
           const image = ListingImage({ item, className: 'item-image' });
           const icon = getItemIcon(item);
+          const BlockExtraTags = getComponentWithFallback({
+            name: 'BlockExtraTags',
+            dependencies: ['ContentInEvidenceTemplate', item['@type']],
+          }).component;
+
           return (
             <Row key={item['@id']} className="content-in-evidence">
               {image && (
@@ -107,7 +114,7 @@ const ContentInEvidenceTemplate = ({
                           ))}
                         </>
                       )}
-
+                    <BlockExtraTags {...props} item={item} itemIndex={index} />
                     {eventRecurrenceMore}
                     {linkHref?.[0]?.['@id'] && (
                       <CardReadMore

diff --git a/src/components/ItaliaTheme/Blocks/Listing/RibbonCardTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/RibbonCardTemplate.jsx
@@ -26,6 +26,7 @@ import {
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  getComponentWithFallback,
 } from 'design-comuni-plone-theme/helpers';
 import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
 
@@ -91,6 +92,11 @@ const RibbonCardTemplate = (props) => {
               <ListingText item={item} />
             ) : null;
 
+            const BlockExtraTags = getComponentWithFallback({
+              name: 'BlockExtraTags',
+              dependencies: ['RibbonCardTemplate', item['@type']],
+            }).component;
+
             return (
               <Col lg={4} sm={12} key={index}>
                 <Card
@@ -127,7 +133,7 @@ const RibbonCardTemplate = (props) => {
                       </UniversalLink>
                     </CardTitle>
                     {listingText && <CardText>{listingText}</CardText>}
-
+                    <BlockExtraTags {...props} item={item} itemIndex={index} />
                     {eventRecurrenceMore}
                     {show_detail_link && (
                       <CardReadMore

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateDefault.jsx
@@ -27,6 +27,7 @@ import {
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  getComponentWithFallback,
 } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
@@ -190,6 +191,11 @@ const SimpleCardTemplateDefault = (props) => {
           const category = getCategory(item, show_type, show_section, props);
           const type = item['@type'];
 
+          const BlockExtraTags = getComponentWithFallback({
+            name: 'BlockExtraTags',
+            dependencies: ['SimpleCardTemplateDefault', type],
+          }).component;
+
           return (
             <Card
               className={`align-items-top rounded shadow ${getItemClass(item)}`}
@@ -246,6 +252,7 @@ const SimpleCardTemplateDefault = (props) => {
                       )}
                   </CardText>
                 )}
+                <BlockExtraTags {...props} item={item} itemIndex={index} />
                 {eventRecurrenceMore}
                 {show_detail_link && (
                   <CardReadMore

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow.jsx b/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/SimpleCardTemplateOneForRow.jsx
@@ -27,6 +27,7 @@ import {
 import {
   getCalendarDate,
   getEventRecurrenceMore,
+  getComponentWithFallback,
 } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
@@ -189,6 +190,11 @@ const SimpleCardTemplateDefaultOneForRow = (props) => {
           ) : null;
           const category = getCategory(item, show_type, show_section, props);
           const type = item['@type'];
+          const BlockExtraTags = getComponentWithFallback({
+            name: 'BlockExtraTags',
+            dependencies: ['SimpleCardTemplateOneForRow', type],
+          }).component;
+
           return (
             <Card
               className={`align-items-top rounded shadow ${getItemClass(
@@ -239,6 +245,7 @@ const SimpleCardTemplateDefaultOneForRow = (props) => {
                     )}
                   </CardText>
                 )}
+                <BlockExtraTags {...props} item={item} itemIndex={index} />
                 {eventRecurrenceMore}
                 {show_detail_link && (
                   <CardReadMore

diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
@@ -452,6 +452,12 @@ export default function applyConfig(voltoConfig) {
       (v) => v.id !== 'horizontalMenu',
     );
 
+  // COMPONENTS
+  config.components = {
+    ...config.components,
+    BlockExtraTags: { component: () => null },
+  };
+
   // REDUCERS
   config.addonReducers = {
     ...config.addonReducers,

diff --git a/src/helpers/index.js b/src/helpers/index.js
@@ -50,3 +50,5 @@ export {
 } from 'design-comuni-plone-theme/helpers/FormValidation/DataGridFormValidationHelpers';
 
 export { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers/Translations/searchBlockExtendedTranslations';
+
+export { getComponentWithFallback } from 'design-comuni-plone-theme/helpers/registry';
diff --git a/src/helpers/registry.js b/src/helpers/registry.js
@@ -0,0 +1,18 @@
+import config from '@plone/volto/registry';
+
+export function getComponentWithFallback(options) {
+  if (typeof options === 'object') {
+    const { name, dependencies = '' } = options;
+    if (dependencies && Array.isArray(dependencies)) {
+      const component = config.getComponent(options);
+      if (!component.component && dependencies.length > 0) {
+        const newDeps = [...dependencies];
+        newDeps.pop();
+        return getComponentWithFallback({ name, dependencies: newDeps });
+      } else {
+        return component;
+      }
+    }
+  }
+  return config.getComponent(options);
+}
diff --git a/src/helpers/registry.test.js b/src/helpers/registry.test.js
@@ -0,0 +1,45 @@
+import { getComponentWithFallback } from './registry';
+import config from '@plone/volto/registry';
+
+config.set('components', {
+  Test: { component: 'test' },
+  'Test|dep1': { component: 'test with dep1' },
+  'Test|dep1+dep2': { component: 'test with dep1 and dep2' },
+});
+
+describe('getComponentWithFallback', () => {
+  it('returns a component', () => {
+    const component = getComponentWithFallback({
+      name: 'Test',
+    });
+    expect(component.component).toEqual('test');
+  });
+  it('returns a component with one dependency', () => {
+    const component = getComponentWithFallback({
+      name: 'Test',
+      dependencies: ['dep1'],
+    });
+    expect(component.component).toEqual('test with dep1');
+  });
+  it('returns a component with two dependencies', () => {
+    const component = getComponentWithFallback({
+      name: 'Test',
+      dependencies: ['dep1', 'dep2'],
+    });
+    expect(component.component).toEqual('test with dep1 and dep2');
+  });
+  it('returns a component with one dependency if the second is not found', () => {
+    const component = getComponentWithFallback({
+      name: 'Test',
+      dependencies: ['dep1', 'dep3'],
+    });
+    expect(component.component).toEqual('test with dep1');
+  });
+  it('returns a component with no dependencies if none is found', () => {
+    const component = getComponentWithFallback({
+      name: 'Test',
+      dependencies: ['dep3'],
+    });
+    expect(component.component).toEqual('test');
+  });
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,3 +50,5 @@ export {
		} from 'design-comuni-plone-theme/helpers/FormValidation/DataGridFormValidationHelpers';

		export { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers/Translations/searchBlockExtendedTranslations';

		export { getComponentWithFallback } from 'design-comuni-plone-theme/helpers/registry';