Merge branch 'main' into add-basic-form-block-styles

Author: danalvrz

frontend/packages/volto-light-theme/news/+cardLinkIcon.feature

@@ -0,0 +1 @@
+Add link icon to Card component @Tishasoumya-02

frontend/packages/volto-light-theme/news/879.bugfix

@@ -0,0 +1 @@
+Fix icon in search @iRohitSingh

frontend/packages/volto-light-theme/src/primitives/LinkIconButton.tsx

@@ -0,0 +1,52 @@
+import { useSelector } from 'react-redux';
+import { useLocation, useHistory } from 'react-router-dom';
+import type { ObjectBrowserItem, GetSiteResponse } from '@plone/types';
+import linkSVG from '@plone/volto/icons/link.svg';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Button } from '@plone/components';
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+
+type FormState = {
+  site: { data: GetSiteResponse };
+};
+
+const useLinkIconNavigation = (item?: Partial<ObjectBrowserItem>) => {
+  const location = useLocation();
+  const history = useHistory();
+
+  const handleLinkIconClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const targetUrl = item?.['@id'];
+    if (targetUrl) {
+      const flattenedTargetUrl = flattenToAppURL(targetUrl);
+      const searchParams = new URLSearchParams();
+      searchParams.set('return_to', location.pathname);
+
+      history.push({
+        pathname: flattenedTargetUrl,
+        search: searchParams.toString(),
+      });
+    }
+  };
+  return handleLinkIconClick;
+};
+const LinkIconButton = ({ item }: { item?: Partial<ObjectBrowserItem> }) => {
+  const site = useSelector<FormState, GetSiteResponse>(
+    (state) => state.site?.data,
+  );
+  const hideProfileLinks = site?.['kitconcept.disable_profile_links'];
+  const handleLinkIconClick = useLinkIconNavigation(item);
+  return (
+    hideProfileLinks && (
+      <div className="card-link-icon">
+        <Button aria-label="link" onClick={handleLinkIconClick}>
+          <Icon name={linkSVG} size="33px" />
+        </Button>
+      </div>
+    )
+  );
+};
+
+export default LinkIconButton;

frontend/packages/volto-light-theme/src/theme/_search-page.scss

@@ -74,6 +74,7 @@
         }
       }
       svg {
+        display: inline;
         margin-right: 5px;
         vertical-align: bottom;
       }

frontend/packages/volto-light-theme/src/theme/card.scss

@@ -79,6 +79,30 @@
       }
     }
   }
+
+  // Common styles for link icon overlay
+  .card-link-icon {
+    position: absolute;
+    z-index: 10;
+    top: 0px;
+    right: 0px;
+    filter: drop-shadow(3px 3px 12px rgba(0, 0, 0, 0.5));
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    button {
+      border: none;
+      border-radius: 50%;
+      background: rgba(236, 235, 235, 0.75);
+      cursor: pointer;
+    }
+  }
+
+  &:hover .card-link-icon,
+  &:focus-within .card-link-icon {
+    opacity: 1;
+  }
+
   // Additional links within the card
   a:not(.card-primary-link) {
     position: relative;
@@ -165,6 +189,12 @@
   }
 }
 
+// Hides the link icon in edit and add page
+#page-edit .card-link-icon,
+#page-add .card-link-icon {
+  display: none;
+}
+
 // Cards in columns
 @container (min-width: #{$largest-mobile-screen}) {
   .card {