fix: wrong layout for external link indicator icon if objects are Plo…

…ne Links in anonimous view (#270) * fix: wrong layout for external link indicator icon if objects are Plone Links in anonimous view * fix: use external link color variable instead of white * fix: completeblocklinks show icon only if link and external, do not duplicate a tag for accessibility
RedTurtle · Aug 8, 2023 · 4bbb741 · 4bbb741
1 parent cfbdbc8
commit 4bbb741
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 1 deletion.
diff --git a/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/CompleteBlockLinksTemplate.jsx
@@ -15,6 +15,10 @@ import {
   ListingLinkMore,
   ListingImage,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+
+import config from '@plone/volto/registry';
 
 const CompleteBlockLinksTemplate = ({
   items,
@@ -61,13 +65,27 @@ const CompleteBlockLinksTemplate = ({
                     item={!isEditMode ? item : null}
                     href={isEditMode ? '#' : null}
                     data-element={id_lighthouse}
+                    className={'no-external-if-link'}
                   >
                     <div className="d-flex">
                       {image && <div className="image-container">{image}</div>}
                       <div>
                         <CardBody>
                           <CardTitle tag="h3" className="text-secondary">
                             {item.title}
+                            {item['@type'] === 'Link' &&
+                              !isInternalURL(
+                                item.remoteUrl || item.getRemoteUrl,
+                              ) &&
+                              config.settings.siteProperties
+                                .markSpecialLinks && (
+                                <Icon
+                                  icon="it-external-link"
+                                  title={title}
+                                  size="xs"
+                                  className="align-top ms-1 external-link"
+                                />
+                              )}
                           </CardTitle>
                           {show_description && (
                             <CardText tag="p" className="text-secondary">

diff --git a/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx b/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx
@@ -166,6 +166,7 @@ const SliderTemplate = ({
                         <UniversalLink
                           item={item}
                           title={intl.formatMessage(messages.viewImage)}
+                          className={'no-external-if-link'}
                         >
                           <div className="slide-title">
                             {full_width ? (

diff --git a/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx b/src/customizations/volto/components/manage/UniversalLink/UniversalLink.jsx
@@ -83,7 +83,6 @@ const UniversalLink = ({
     (!isExternal && url.includes('@@display-file')) || false;
 
   const checkedURL = URLUtils.checkAndNormalizeUrl(url);
-
   url = checkedURL.url;
   let tag = (
     <Link

diff --git a/src/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss b/src/theme/ItaliaTheme/Blocks/_completeBlockLinkstemplate.scss
@@ -45,9 +45,15 @@
     font-size: 1rem !important;
     font-weight: 700 !important;
     line-height: 1.44444rem;
+    .external-link {
+      fill: $external-link-fill-buttons !important;
+    }
   }
 
   .card:after {
     content: none;
   }
+  .no-external-if-link > .external-link {
+    display: none;
+  }
 }
diff --git a/src/theme/ItaliaTheme/Views/_slider.scss b/src/theme/ItaliaTheme/Views/_slider.scss
@@ -21,4 +21,7 @@
     padding: 0;
     margin: 0;
   }
+  .no-external-if-link > .external-link {
+    display: none;
+  }
 }