From 00e641f039399ecab52f2802cb227fa22af66522 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 13:14:42 +0100
Subject: [PATCH 01/10] Use function-as-child-component pattern for hover
 actions buttons

---
 .../components/card/article/ArticleBody.tsx   |  43 ++++---
 .../components/card/snapLink/SnapLinkCard.tsx |  42 ++++---
 .../src/components/feed/FeedItem.tsx          |  30 +++--
 .../inputs/HoverActionButtonWrapper.tsx       | 108 ++++++------------
 .../components/inputs/HoverActionButtons.tsx  |  41 ++++---
 .../inputs/__tests__/HoverActions.spec.tsx    |  61 ++++++----
 6 files changed, 170 insertions(+), 155 deletions(-)

diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
index 9c66dd2e877..a53213286dd 100644
--- a/fronts-client/src/components/card/article/ArticleBody.tsx
+++ b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -106,7 +106,7 @@ interface ArticleBodyProps {
   sectionName?: string;
   displayPlaceholders?: boolean;
   uuid: string;
-  onDelete?: () => void;
+  onDelete: () => void;
   onAddToClipboard?: () => void;
   isUneditable?: boolean;
   byline?: string;
@@ -321,22 +321,35 @@ const articleBodyDefault = React.memo(
         </ImageAndGraphWrapper>
         <HoverActionsAreaOverlay disabled={isUneditable}>
           <HoverActionsButtonWrapper
-            buttons={[
-              { text: 'View', component: HoverViewButton },
-              { text: 'Ophan', component: HoverOphanButton },
-              { text: 'Clipboard', component: HoverAddToClipboardButton },
-              { text: 'Delete', component: HoverDeleteButton },
-            ]}
-            buttonProps={{
-              isLive,
-              urlPath,
-              onDelete,
-              onAddToClipboard,
-            }}
             size={size}
             toolTipPosition={'top'}
-            toolTipAlign={'left'}
-          />
+            toolTipAlign={'right'}
+          >
+            {(props) => (
+              <>
+                <HoverViewButton
+                  hoverText="View"
+                  isLive={true}
+                  urlPath={urlPath}
+                  isSnapLink={true}
+                  {...props}
+                />
+                <HoverOphanButton {...props} hoverText="Ophan" />
+                {onAddToClipboard && (
+                  <HoverAddToClipboardButton
+                    onAddToClipboard={onAddToClipboard}
+                    hoverText="Clipboard"
+                    {...props}
+                  />
+                )}
+                <HoverDeleteButton
+                  onDelete={onDelete}
+                  hoverText="Delete"
+                  {...props}
+                />
+              </>
+            )}
+          </HoverActionsButtonWrapper>
         </HoverActionsAreaOverlay>
       </>
     );
diff --git a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
index 1a24e8cda48..7b047d68578 100644
--- a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
+++ b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
@@ -54,8 +54,8 @@ const SnapLinkURL = styled.p`
 interface ContainerProps {
   onDragStart?: (d: React.DragEvent<HTMLElement>) => void;
   onDrop?: (d: React.DragEvent<HTMLElement>) => void;
-  onDelete?: (uuid: string) => void;
-  onAddToClipboard?: (uuid: string) => void;
+  onDelete: () => void;
+  onAddToClipboard: () => void;
   onClick?: () => void;
   id: string;
   collectionId?: string;
@@ -192,23 +192,33 @@ const SnapLinkCard = ({
           justify={'space-between'}
         >
           <HoverActionsButtonWrapper
-            buttons={[
-              { text: 'View', component: HoverViewButton },
-              { text: 'Ophan', component: HoverOphanButton },
-              { text: 'Clipboard', component: HoverAddToClipboardButton },
-              { text: 'Delete', component: HoverDeleteButton },
-            ]}
-            buttonProps={{
-              isLive: true, // it should not be possible for a snap link to be anything other than live?
-              urlPath,
-              onAddToClipboard,
-              onDelete,
-              isSnapLink: true,
-            }}
             size={size}
             toolTipPosition={'top'}
             toolTipAlign={'right'}
-          />
+          >
+            {(props) => (
+              <>
+                <HoverViewButton
+                  hoverText="View"
+                  isLive={true}
+                  urlPath={urlPath}
+                  isSnapLink={true}
+                  {...props}
+                />
+                <HoverOphanButton {...props} hoverText="Ophan" />
+                <HoverAddToClipboardButton
+                  onAddToClipboard={onAddToClipboard}
+                  hoverText="Clipboard"
+                  {...props}
+                />
+                <HoverDeleteButton
+                  onDelete={onDelete}
+                  hoverText="Delete"
+                  {...props}
+                />
+              </>
+            )}
+          </HoverActionsButtonWrapper>
         </HoverActionsAreaOverlay>
       </SnapLinkBodyContainer>
       {children}
diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 9e179b98f86..3781a32854b 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -196,19 +196,27 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
         </FeedItemContainer>
         <HoverActionsAreaOverlay data-testid="hover-overlay">
           <HoverActionsButtonWrapper
-            buttons={[
-              { text: 'View', component: HoverViewButton },
-              { text: 'Ophan', component: HoverOphanButton },
-              { text: 'Clipboard', component: HoverAddToClipboardButton },
-            ]}
-            buttonProps={{
-              isLive,
-              urlPath: id,
-              onAddToClipboard,
-            }}
             toolTipPosition={'top'}
             toolTipAlign={'right'}
-          />
+          >
+            {(props) => (
+              <>
+                <HoverViewButton
+                  hoverText="View"
+                  isLive={isLive}
+                  urlPath={id}
+                  isSnapLink={true}
+                  {...props}
+                />
+                <HoverOphanButton {...props} hoverText="Ophan" />
+                <HoverAddToClipboardButton
+                  onAddToClipboard={onAddToClipboard}
+                  hoverText="Clipboard"
+                  {...props}
+                />
+              </>
+            )}
+          </HoverActionsButtonWrapper>
         </HoverActionsAreaOverlay>
       </Container>
     );
diff --git a/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx b/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
index 6ede456615a..600dc257c70 100644
--- a/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
+++ b/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { styled } from 'constants/theme';
 import ToolTip from './HoverActionToolTip';
 import { CardSizes } from 'types/Collection';
@@ -33,84 +33,50 @@ const ToolTipWrapper = styled.div<{
       : null};
 `;
 
-interface HoverButtonInterface {
-  text: string;
-  component: React.ComponentType<ButtonPropsFromWrapper>;
-}
-export interface ButtonPropsFromWrapper {
-  showToolTip: () => void;
+export interface ButtonProps {
+  showToolTip: (text: string) => void;
   hideToolTip: () => void;
-  isSnapLink?: boolean;
+  size?: CardSizes;
 }
-interface WrapperProps<ButtonProps> {
-  buttons: HoverButtonInterface[];
-  buttonProps: ButtonProps;
+
+interface WrapperProps {
   size?: CardSizes; // Article Component size
   toolTipPosition: 'top' | 'left' | 'bottom' | 'right';
   toolTipAlign: 'left' | 'center' | 'right';
+  children: (renderProps: ButtonProps) => JSX.Element;
 }
 
-interface WrapperState {
-  isToolTipVisible: boolean;
-  toolTipText: string;
-}
-
-class HoverActionsButtonWrapper<ButtonProps> extends React.Component<
-  WrapperProps<ButtonProps>,
-  WrapperState
-> {
-  constructor(props: WrapperProps<ButtonProps>) {
-    super(props);
-    this.state = {
-      isToolTipVisible: false,
-      toolTipText: '',
-    };
-  }
+export const HoverActionsButtonWrapper = ({
+  toolTipPosition,
+  toolTipAlign,
+  size,
+  children,
+}: WrapperProps) => {
+  const [toolTipText, setToolTipText] = useState<string | undefined>(undefined);
 
-  public render() {
-    const { buttons, buttonProps, toolTipPosition, toolTipAlign } = this.props;
-    const { isToolTipVisible, toolTipText } = this.state;
-
-    return (
-      <HoverActionsWrapper
-        size={this.props.size}
-        data-testid="hover-actions-wrapper"
-      >
-        {isToolTipVisible ? (
-          <ToolTipWrapper
-            toolTipPosition={toolTipPosition}
-            toolTipAlign={toolTipAlign}
-          >
-            <ToolTip text={toolTipText} />
-          </ToolTipWrapper>
-        ) : null}
-        {buttons.map((ButtonObj) => (
-          <ButtonObj.component
-            key={ButtonObj.text}
-            {...buttonProps}
-            showToolTip={() => {
-              this.showToolTip(ButtonObj.text);
-            }}
-            hideToolTip={() => {
-              this.hideToolTip();
-            }}
-          />
-        ))}
-      </HoverActionsWrapper>
-    );
-  }
-
-  private showToolTip = (text: string) =>
-    this.setState({
-      isToolTipVisible: true,
-      toolTipText: text,
-    });
+  const showToolTip = (text: string) => {
+    setToolTipText(text);
+  };
 
-  private hideToolTip = () => {
-    this.setState({
-      isToolTipVisible: false,
-    });
+  const hideToolTip = () => {
+    setToolTipText(undefined);
   };
-}
 
-export { HoverActionsButtonWrapper, HoverButtonInterface };
+  return (
+    <HoverActionsWrapper size={size} data-testid="hover-actions-wrapper">
+      {toolTipText !== undefined ? (
+        <ToolTipWrapper
+          toolTipPosition={toolTipPosition}
+          toolTipAlign={toolTipAlign}
+        >
+          <ToolTip text={toolTipText} />
+        </ToolTipWrapper>
+      ) : null}
+      {children({
+        showToolTip,
+        hideToolTip,
+        size: size,
+      })}
+    </HoverActionsWrapper>
+  );
+};
diff --git a/fronts-client/src/components/inputs/HoverActionButtons.tsx b/fronts-client/src/components/inputs/HoverActionButtons.tsx
index 38885618cfc..f734329388b 100644
--- a/fronts-client/src/components/inputs/HoverActionButtons.tsx
+++ b/fronts-client/src/components/inputs/HoverActionButtons.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ButtonCircular from './ButtonCircular';
 import Link from '../Link';
 import { getPaths } from '../../util/paths';
-import { ButtonPropsFromWrapper } from './HoverActionButtonWrapper';
+import { ButtonProps } from './HoverActionButtonWrapper';
 import {
   AddToClipboardHoverIcon,
   OphanHoverIcon,
@@ -32,24 +32,20 @@ ActionButton.defaultProps = {
   danger: false,
 };
 
-interface ButtonPropsFromArticle {
-  isLive?: boolean;
-  urlPath?: string;
-  onDelete?: () => void;
-  onAddToClipboard?: () => void;
-}
-
-type ButtonProps = ButtonPropsFromArticle & ButtonPropsFromWrapper;
+type ButtonPropsWithHoverText = ButtonProps & {
+  hoverText: string;
+};
 
 const HoverDeleteButton = ({
   showToolTip,
   hideToolTip,
   onDelete,
-}: ButtonProps) => (
+  hoverText,
+}: ButtonPropsWithHoverText & { onDelete: () => void }) => (
   <ActionButton
     danger
     data-testid={'delete-hover-button'}
-    onMouseEnter={showToolTip}
+    onMouseEnter={() => showToolTip(hoverText)}
     onMouseLeave={hideToolTip}
     onClick={(e: React.MouseEvent) => {
       e.stopPropagation();
@@ -64,10 +60,11 @@ const HoverAddToClipboardButton = ({
   showToolTip,
   hideToolTip,
   onAddToClipboard,
-}: ButtonProps) => (
+  hoverText,
+}: ButtonPropsWithHoverText & { onAddToClipboard: () => void }) => (
   <ActionButton
     data-testid={'add-to-clipboard-hover-button'}
-    onMouseEnter={showToolTip}
+    onMouseEnter={() => showToolTip(hoverText)}
     onMouseLeave={hideToolTip}
     onClick={(e: React.MouseEvent) => {
       e.stopPropagation();
@@ -84,7 +81,12 @@ const HoverViewButton = ({
   showToolTip,
   hideToolTip,
   isSnapLink = false,
-}: ButtonProps) => (
+  hoverText,
+}: ButtonPropsWithHoverText & {
+  isLive?: boolean;
+  urlPath?: string;
+  isSnapLink?: boolean;
+}) => (
   <Link
     onClick={(e: React.MouseEvent) => {
       e.stopPropagation();
@@ -99,7 +101,7 @@ const HoverViewButton = ({
   >
     <ActionButton
       tabIndex={-1}
-      onMouseEnter={showToolTip}
+      onMouseEnter={() => showToolTip(hoverText)}
       onMouseLeave={hideToolTip}
     >
       <ViewHoverIcon />
@@ -113,7 +115,12 @@ const HoverOphanButton = ({
   showToolTip,
   hideToolTip,
   isSnapLink = false,
-}: ButtonProps) =>
+  hoverText,
+}: ButtonPropsWithHoverText & {
+  isLive?: boolean;
+  urlPath?: string;
+  isSnapLink?: boolean;
+}) =>
   isLive ? (
     <Link
       onClick={(e: React.MouseEvent) => {
@@ -128,7 +135,7 @@ const HoverOphanButton = ({
     >
       <ActionButton
         tabIndex={-1}
-        onMouseEnter={showToolTip}
+        onMouseEnter={() => showToolTip(hoverText)}
         onMouseLeave={hideToolTip}
       >
         <OphanHoverIcon />
diff --git a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
index d954e60e186..3a720d0aa67 100644
--- a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
+++ b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
@@ -14,29 +14,27 @@ import {
 } from '../HoverActionButtons';
 import { ThemeProvider } from 'styled-components';
 import { theme } from '../../../constants/theme';
+import { noop } from 'lodash';
 
 afterEach(cleanup);
 
-// Mocks //
-const onDelete = () => {};
-const Buttons = [
-  { text: 'View', component: HoverViewButton },
-  { text: 'Ophan', component: HoverOphanButton },
-  { text: 'Delete', component: HoverDeleteButton },
-];
-
 const HoverWrapper = (
   <ThemeProvider theme={theme}>
-    <HoverActionsButtonWrapper
-      buttons={Buttons}
-      buttonProps={{
-        isLive: true,
-        urlPath: 'test-string',
-        onDelete,
-      }}
-      toolTipPosition={'top'}
-      toolTipAlign={'center'}
-    />
+    <HoverActionsButtonWrapper toolTipPosition={'top'} toolTipAlign={'center'}>
+      {(props) => (
+        <>
+          <HoverViewButton
+            hoverText="View"
+            isLive={true}
+            urlPath={'test-string'}
+            isSnapLink={true}
+            {...props}
+          />
+          <HoverOphanButton {...props} isLive={true} hoverText="Ophan" />
+          <HoverDeleteButton onDelete={noop} hoverText="Delete" {...props} />
+        </>
+      )}
+    </HoverActionsButtonWrapper>
   </ThemeProvider>
 );
 
@@ -56,15 +54,28 @@ describe('Hover Action Button Wrapper', () => {
     const { container } = render(
       <ThemeProvider theme={theme}>
         <HoverActionsButtonWrapper
-          buttons={Buttons}
-          buttonProps={{
-            isLive: false, // testing isLive
-            urlPath: 'test-string',
-            onDelete,
-          }}
           toolTipPosition={'top'}
           toolTipAlign={'center'}
-        />
+        >
+          {(props) => (
+            <>
+              <HoverViewButton
+                hoverText="View"
+                isLive={true}
+                urlPath={'test-string'}
+                isSnapLink={true}
+                {...props}
+              />
+              <HoverOphanButton isLive={false} {...props} hoverText="Ophan" />
+
+              <HoverDeleteButton
+                onDelete={noop}
+                hoverText="Delete"
+                {...props}
+              />
+            </>
+          )}
+        </HoverActionsButtonWrapper>
       </ThemeProvider>
     );
 

From e4a0e427ee6e503d94a52db658d0f797997e4ed0 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 13:51:53 +0100
Subject: [PATCH 02/10] Factor pathing logic out of buttons so we can reuse
 them in other cards

---
 .../components/card/article/ArticleBody.tsx   | 38 ++++++-----
 .../components/card/snapLink/SnapLinkCard.tsx | 13 ++--
 .../src/components/feed/FeedItem.tsx          | 15 +++--
 .../components/inputs/HoverActionButtons.tsx  | 63 +++++++------------
 .../inputs/__tests__/HoverActions.spec.tsx    | 17 ++---
 fronts-client/src/util/paths.ts               |  7 ++-
 6 files changed, 69 insertions(+), 84 deletions(-)

diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
index a53213286dd..deff58f87c4 100644
--- a/fronts-client/src/components/card/article/ArticleBody.tsx
+++ b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -33,6 +33,7 @@ import { ImageMetadataContainer } from 'components/image/ImageMetaDataContainer'
 import EditModeVisibility from 'components/util/EditModeVisibility';
 import PageViewDataWrapper from '../../PageViewDataWrapper';
 import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
+import { getPaths } from 'util/paths';
 
 const ThumbnailPlaceholder = styled(BasePlaceholder)`
   flex-shrink: 0;
@@ -106,7 +107,7 @@ interface ArticleBodyProps {
   sectionName?: string;
   displayPlaceholders?: boolean;
   uuid: string;
-  onDelete: () => void;
+  onDelete?: () => void;
   onAddToClipboard?: () => void;
   isUneditable?: boolean;
   byline?: string;
@@ -178,6 +179,7 @@ const articleBodyDefault = React.memo(
   }: ArticleBodyProps) => {
     const displayByline = size === 'default' && showByline && byline;
     const now = Date.now();
+    const paths = urlPath ? getPaths(urlPath) : undefined;
 
     return (
       <>
@@ -327,14 +329,20 @@ const articleBodyDefault = React.memo(
           >
             {(props) => (
               <>
-                <HoverViewButton
-                  hoverText="View"
-                  isLive={true}
-                  urlPath={urlPath}
-                  isSnapLink={true}
-                  {...props}
-                />
-                <HoverOphanButton {...props} hoverText="Ophan" />
+                {urlPath && (
+                  <HoverViewButton
+                    hoverText="View"
+                    href={isLive ? paths?.live : paths?.preview}
+                    {...props}
+                  />
+                )}
+                {isLive && (
+                  <HoverOphanButton
+                    {...props}
+                    href={isLive ? paths?.live : paths?.preview}
+                    hoverText="Ophan"
+                  />
+                )}
                 {onAddToClipboard && (
                   <HoverAddToClipboardButton
                     onAddToClipboard={onAddToClipboard}
@@ -342,11 +350,13 @@ const articleBodyDefault = React.memo(
                     {...props}
                   />
                 )}
-                <HoverDeleteButton
-                  onDelete={onDelete}
-                  hoverText="Delete"
-                  {...props}
-                />
+                {onDelete && (
+                  <HoverDeleteButton
+                    onDelete={onDelete}
+                    hoverText="Delete"
+                    {...props}
+                  />
+                )}
               </>
             )}
           </HoverActionsButtonWrapper>
diff --git a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
index 7b047d68578..347abd117d9 100644
--- a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
+++ b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
@@ -37,6 +37,7 @@ import { selectFeatureValue } from 'selectors/featureSwitchesSelectors';
 import ImageAndGraphWrapper from 'components/image/ImageAndGraphWrapper';
 import { ThumbnailCutout } from 'components/image/Thumbnail';
 import PageViewDataWrapper from 'components/PageViewDataWrapper';
+import { getPathsForSnap } from 'util/paths';
 
 const SnapLinkBodyContainer = styled(CardBody)`
   justify-content: space-between;
@@ -198,14 +199,14 @@ const SnapLinkCard = ({
           >
             {(props) => (
               <>
-                <HoverViewButton
-                  hoverText="View"
-                  isLive={true}
-                  urlPath={urlPath}
-                  isSnapLink={true}
+                {urlPath && (
+                  <HoverViewButton hoverText="View" href={urlPath} {...props} />
+                )}
+                <HoverOphanButton
                   {...props}
+                  hoverText="Ophan"
+                  href={urlPath && getPathsForSnap(urlPath).ophan}
                 />
-                <HoverOphanButton {...props} hoverText="Ophan" />
                 <HoverAddToClipboardButton
                   onAddToClipboard={onAddToClipboard}
                   hoverText="Clipboard"
diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 3781a32854b..3a7ac92bd36 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -20,6 +20,7 @@ import CircularIconContainer from 'components/icons/CircularIconContainer';
 import RefreshPeriodically from '../util/RefreshPeriodically';
 import { collectionArticlesPollInterval } from 'constants/polling';
 import RenderOffscreen from 'components/util/RenderOffscreen';
+import { getPaths } from 'util/paths';
 
 const Container = styled.div`
   display: flex;
@@ -136,6 +137,9 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
       handleDragStart,
     } = this.props;
 
+    const { preview, live } = getPaths(id);
+    const href = isLive ? live : preview;
+
     return (
       <Container
         data-testid="feed-item"
@@ -201,14 +205,13 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
           >
             {(props) => (
               <>
-                <HoverViewButton
-                  hoverText="View"
-                  isLive={isLive}
-                  urlPath={id}
-                  isSnapLink={true}
+                <HoverViewButton hoverText="View" href={href} {...props} />
+                <HoverOphanButton
                   {...props}
+                  isLive={isLive}
+                  href={href}
+                  hoverText="Ophan"
                 />
-                <HoverOphanButton {...props} hoverText="Ophan" />
                 <HoverAddToClipboardButton
                   onAddToClipboard={onAddToClipboard}
                   hoverText="Clipboard"
diff --git a/fronts-client/src/components/inputs/HoverActionButtons.tsx b/fronts-client/src/components/inputs/HoverActionButtons.tsx
index f734329388b..ff214509376 100644
--- a/fronts-client/src/components/inputs/HoverActionButtons.tsx
+++ b/fronts-client/src/components/inputs/HoverActionButtons.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import ButtonCircular from './ButtonCircular';
 import Link from '../Link';
-import { getPaths } from '../../util/paths';
 import { ButtonProps } from './HoverActionButtonWrapper';
 import {
   AddToClipboardHoverIcon,
@@ -76,28 +75,18 @@ const HoverAddToClipboardButton = ({
 );
 
 const HoverViewButton = ({
-  isLive,
-  urlPath = '',
   showToolTip,
   hideToolTip,
-  isSnapLink = false,
+  href,
   hoverText,
 }: ButtonPropsWithHoverText & {
-  isLive?: boolean;
-  urlPath?: string;
-  isSnapLink?: boolean;
+  href?: string;
 }) => (
   <Link
     onClick={(e: React.MouseEvent) => {
       e.stopPropagation();
     }}
-    href={
-      isSnapLink
-        ? urlPath
-        : isLive
-        ? getPaths(urlPath).live
-        : getPaths(urlPath).preview
-    }
+    href={href}
   >
     <ActionButton
       tabIndex={-1}
@@ -110,39 +99,29 @@ const HoverViewButton = ({
 );
 
 const HoverOphanButton = ({
-  isLive,
-  urlPath,
+  href,
   showToolTip,
   hideToolTip,
-  isSnapLink = false,
   hoverText,
 }: ButtonPropsWithHoverText & {
-  isLive?: boolean;
-  urlPath?: string;
-  isSnapLink?: boolean;
-}) =>
-  isLive ? (
-    <Link
-      onClick={(e: React.MouseEvent) => {
-        e.stopPropagation();
-      }}
-      href={
-        isSnapLink
-          ? urlPath && getPaths(urlPath).ophan
-          : getPaths(`https://www.theguardian.com/${urlPath}`).ophan
-      }
-      data-testid={'ophan-hover-button'}
+  href?: string;
+}) => (
+  <Link
+    onClick={(e: React.MouseEvent) => {
+      e.stopPropagation();
+    }}
+    href={href}
+    data-testid={'ophan-hover-button'}
+  >
+    <ActionButton
+      tabIndex={-1}
+      onMouseEnter={() => showToolTip(hoverText)}
+      onMouseLeave={hideToolTip}
     >
-      <ActionButton
-        tabIndex={-1}
-        onMouseEnter={() => showToolTip(hoverText)}
-        onMouseLeave={hideToolTip}
-      >
-        <OphanHoverIcon />
-      </ActionButton>
-    </Link>
-  ) : null;
-
+      <OphanHoverIcon />
+    </ActionButton>
+  </Link>
+);
 export {
   HoverDeleteButton,
   HoverViewButton,
diff --git a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
index 3a720d0aa67..cf9af472422 100644
--- a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
+++ b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
@@ -23,14 +23,8 @@ const HoverWrapper = (
     <HoverActionsButtonWrapper toolTipPosition={'top'} toolTipAlign={'center'}>
       {(props) => (
         <>
-          <HoverViewButton
-            hoverText="View"
-            isLive={true}
-            urlPath={'test-string'}
-            isSnapLink={true}
-            {...props}
-          />
-          <HoverOphanButton {...props} isLive={true} hoverText="Ophan" />
+          <HoverViewButton hoverText="View" href={'test-string'} {...props} />
+          <HoverOphanButton {...props} hoverText="Ophan" />
           <HoverDeleteButton onDelete={noop} hoverText="Delete" {...props} />
         </>
       )}
@@ -61,13 +55,10 @@ describe('Hover Action Button Wrapper', () => {
             <>
               <HoverViewButton
                 hoverText="View"
-                isLive={true}
-                urlPath={'test-string'}
-                isSnapLink={true}
+                href={'test-string'}
                 {...props}
               />
-              <HoverOphanButton isLive={false} {...props} hoverText="Ophan" />
-
+              <HoverOphanButton {...props} hoverText="Ophan" />
               <HoverDeleteButton
                 onDelete={noop}
                 hoverText="Delete"
diff --git a/fronts-client/src/util/paths.ts b/fronts-client/src/util/paths.ts
index ca6b9573509..6249ffdac1b 100644
--- a/fronts-client/src/util/paths.ts
+++ b/fronts-client/src/util/paths.ts
@@ -11,7 +11,10 @@ const liveURIFromPath = (path: string) => `https://www.theguardian.com/${path}`;
 const previewURIFromPath = (path: string) =>
   `https://preview.gutools.co.uk/${path}`;
 
-const getPaths = (uri: string) => {
+export const getPathsForSnap = (path: string) =>
+  getPaths(`https://www.theguardian.com/${path}`);
+
+export const getPaths = (uri: string) => {
   const path = /https:\/\/www\.theguardian.com(.+)/.test(uri)
     ? getPathFromUri(uri)
     : uri;
@@ -28,5 +31,3 @@ const getPaths = (uri: string) => {
         preview: undefined,
       };
 };
-
-export { getPaths };

From db60a767744026f3b2b3a13ed0a1d059b6def323 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 13:52:30 +0100
Subject: [PATCH 03/10] Remove test for presence of Ophan button

As we're now using that logic within the cards themselves
---
 .../inputs/__tests__/HoverActions.spec.tsx    | 35 -------------------
 1 file changed, 35 deletions(-)

diff --git a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
index cf9af472422..46095cdbace 100644
--- a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
+++ b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
@@ -43,41 +43,6 @@ describe('Hover Action Button Wrapper', () => {
     expect(getByTitle('ophan')).toBeTruthy();
     expect(getByTitle('delete')).toBeTruthy();
   });
-
-  it('should render Wrapper without Ophan Button when Draft', () => {
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <HoverActionsButtonWrapper
-          toolTipPosition={'top'}
-          toolTipAlign={'center'}
-        >
-          {(props) => (
-            <>
-              <HoverViewButton
-                hoverText="View"
-                href={'test-string'}
-                {...props}
-              />
-              <HoverOphanButton {...props} hoverText="Ophan" />
-              <HoverDeleteButton
-                onDelete={noop}
-                hoverText="Delete"
-                {...props}
-              />
-            </>
-          )}
-        </HoverActionsButtonWrapper>
-      </ThemeProvider>
-    );
-
-    const wrapper = container.firstChild as HTMLElement;
-    expect(wrapper.childNodes.length).toEqual(2);
-    // TODO explicitly check ophanButton is NOT rendered using queryByAltText - solve TS error in testing library
-    const ophanButton = wrapper.querySelector(
-      '[data-testid="ophan-hover-button"]'
-    );
-    expect(ophanButton).toBeFalsy();
-  });
 });
 
 describe('Hover Action Button ToolTip', () => {

From 96e9db9569f0173c4bf14a4ae26c2a1d917e50de Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 14:40:08 +0100
Subject: [PATCH 04/10] Correct Ophan link

---
 .../src/components/card/article/ArticleBody.tsx          | 2 +-
 fronts-client/src/components/feed/FeedItem.tsx           | 9 ++-------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
index deff58f87c4..e2eb2836d1f 100644
--- a/fronts-client/src/components/card/article/ArticleBody.tsx
+++ b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -339,7 +339,7 @@ const articleBodyDefault = React.memo(
                 {isLive && (
                   <HoverOphanButton
                     {...props}
-                    href={isLive ? paths?.live : paths?.preview}
+                    href={paths?.ophan}
                     hoverText="Ophan"
                   />
                 )}
diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 3a7ac92bd36..7c27b953ffd 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -137,7 +137,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
       handleDragStart,
     } = this.props;
 
-    const { preview, live } = getPaths(id);
+    const { preview, live, ophan } = getPaths(id);
     const href = isLive ? live : preview;
 
     return (
@@ -206,12 +206,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
             {(props) => (
               <>
                 <HoverViewButton hoverText="View" href={href} {...props} />
-                <HoverOphanButton
-                  {...props}
-                  isLive={isLive}
-                  href={href}
-                  hoverText="Ophan"
-                />
+                <HoverOphanButton {...props} href={ophan} hoverText="Ophan" />
                 <HoverAddToClipboardButton
                   onAddToClipboard={onAddToClipboard}
                   hoverText="Clipboard"

From 2f26cfa21247d0a8319724d29e7f0e343947ee05 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 14:46:34 +0100
Subject: [PATCH 05/10] Add leading slash to Ophan

Previously added by adding the guardian URL to the path and passing the URL through 'getPaths', which is unnecessary
---
 fronts-client/src/components/feed/FeedItem.tsx | 4 +++-
 fronts-client/src/util/__tests__/paths.spec.ts | 3 +--
 fronts-client/src/util/paths.ts                | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 7c27b953ffd..19999d915ed 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -206,7 +206,9 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
             {(props) => (
               <>
                 <HoverViewButton hoverText="View" href={href} {...props} />
-                <HoverOphanButton {...props} href={ophan} hoverText="Ophan" />
+                {isLive && (
+                  <HoverOphanButton {...props} href={ophan} hoverText="Ophan" />
+                )}
                 <HoverAddToClipboardButton
                   onAddToClipboard={onAddToClipboard}
                   hoverText="Clipboard"
diff --git a/fronts-client/src/util/__tests__/paths.spec.ts b/fronts-client/src/util/__tests__/paths.spec.ts
index 73fc15b9eda..acc99d3687c 100644
--- a/fronts-client/src/util/__tests__/paths.spec.ts
+++ b/fronts-client/src/util/__tests__/paths.spec.ts
@@ -1,11 +1,10 @@
 import { getPaths } from '../paths';
 
-const testURL = `https://www.theguardian.com/society/2018/oct/16/labour-seeks-to-force-publication-of-universal-credit-impact-analysis`;
 const testURLPath = `society/2018/oct/16/labour-seeks-to-force-publication-of-universal-credit-impact-analysis`;
 
 describe('getPaths', () => {
   it('creates correct ophan URI from URL', () => {
-    expect(getPaths(testURL).ophan).toEqual(
+    expect(getPaths(testURLPath).ophan).toEqual(
       'https://dashboard.ophan.co.uk/info?path=/society/2018/oct/16/labour-seeks-to-force-publication-of-universal-credit-impact-analysis'
     );
   });
diff --git a/fronts-client/src/util/paths.ts b/fronts-client/src/util/paths.ts
index 6249ffdac1b..db646a88184 100644
--- a/fronts-client/src/util/paths.ts
+++ b/fronts-client/src/util/paths.ts
@@ -4,7 +4,7 @@ const getPathFromUri = (uri: string): string | void => {
 };
 
 const ophanURIFromPath = (path: string) =>
-  `https://dashboard.ophan.co.uk/info?path=${path}`;
+  `https://dashboard.ophan.co.uk/info?path=/${path}`;
 
 const liveURIFromPath = (path: string) => `https://www.theguardian.com/${path}`;
 

From 6d9403f610fe6cf0756c4ecbd1357844134c9076 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 14:59:28 +0100
Subject: [PATCH 06/10] Add overlay buttons to Recipe container card

---
 .../src/components/card/recipe/RecipeCard.tsx | 41 ++++++++++++++++++-
 .../src/components/feed/ArticleFeedItem.tsx   |  2 +
 .../src/components/feed/FeedItem.tsx          |  6 ++-
 .../src/components/feed/RecipeFeedItem.tsx    |  2 +
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/fronts-client/src/components/card/recipe/RecipeCard.tsx b/fronts-client/src/components/card/recipe/RecipeCard.tsx
index 70bef5e7dbc..ad2001f0dd4 100644
--- a/fronts-client/src/components/card/recipe/RecipeCard.tsx
+++ b/fronts-client/src/components/card/recipe/RecipeCard.tsx
@@ -16,12 +16,20 @@ import { ThumbnailSmall } from 'components/image/Thumbnail';
 import CardMetaContent from '../CardMetaContent';
 import { upperFirst } from 'lodash';
 import { useSelector } from 'react-redux';
+import { HoverActionsAreaOverlay } from 'components/CollectionHoverItems';
+import { HoverActionsButtonWrapper } from 'components/inputs/HoverActionButtonWrapper';
+import {
+  HoverAddToClipboardButton,
+  HoverDeleteButton,
+  HoverViewButton,
+} from 'components/inputs/HoverActionButtons';
+import { getPaths } from 'util/paths';
 
 interface Props {
   onDragStart?: (d: React.DragEvent<HTMLElement>) => void;
   onDrop?: (d: React.DragEvent<HTMLElement>) => void;
-  onDelete?: (uuid: string) => void;
-  onAddToClipboard?: (uuid: string) => void;
+  onDelete: () => void;
+  onAddToClipboard: () => void;
   onClick?: () => void;
   id: string;
   collectionId?: string;
@@ -53,6 +61,9 @@ export const RecipeCard = ({
   const recipe = useSelector((state) =>
     recipeSelectors.selectById(state, card.id)
   );
+  const paths = recipe?.canonicalArticle
+    ? getPaths(recipe.canonicalArticle)
+    : undefined;
 
   return (
     <CardContainer {...rest}>
@@ -82,6 +93,32 @@ export const RecipeCard = ({
         <ImageAndGraphWrapper size={size}>
           <ThumbnailSmall url={recipe?.featuredImage.url} />
         </ImageAndGraphWrapper>
+        <HoverActionsAreaOverlay data-testid="hover-overlay">
+          <HoverActionsButtonWrapper
+            toolTipPosition={'top'}
+            toolTipAlign={'right'}
+          >
+            {(props) => (
+              <>
+                <HoverViewButton
+                  hoverText="View"
+                  href={paths?.live}
+                  {...props}
+                />
+                <HoverAddToClipboardButton
+                  onAddToClipboard={onAddToClipboard}
+                  hoverText="Clipboard"
+                  {...props}
+                />
+                <HoverDeleteButton
+                  hoverText="Delete"
+                  onDelete={onDelete}
+                  {...props}
+                />
+              </>
+            )}
+          </HoverActionsButtonWrapper>
+        </HoverActionsAreaOverlay>
       </CardBody>
     </CardContainer>
   );
diff --git a/fronts-client/src/components/feed/ArticleFeedItem.tsx b/fronts-client/src/components/feed/ArticleFeedItem.tsx
index 63dc1f54aed..8a868792342 100644
--- a/fronts-client/src/components/feed/ArticleFeedItem.tsx
+++ b/fronts-client/src/components/feed/ArticleFeedItem.tsx
@@ -20,6 +20,7 @@ import { insertCardWithCreate } from '../../actions/Cards';
 import { connect } from 'react-redux';
 import { FeedItem } from './FeedItem';
 import { ContentInfo } from './ContentInfo';
+import { CardTypesMap } from 'constants/cardTypes';
 
 const Tone = styled.span`
   font-weight: normal;
@@ -56,6 +57,7 @@ const ArticleFeedItemComponent = ({
 
   return (
     <FeedItem
+      type={CardTypesMap.ARTICLE}
       id={article.id}
       title={article.webTitle}
       liveUrl={getPaths(article.id).live}
diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 19999d915ed..71f0f3f44f5 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -21,6 +21,7 @@ import RefreshPeriodically from '../util/RefreshPeriodically';
 import { collectionArticlesPollInterval } from 'constants/polling';
 import RenderOffscreen from 'components/util/RenderOffscreen';
 import { getPaths } from 'util/paths';
+import { CardTypes, CardTypesMap } from 'constants/cardTypes';
 
 const Container = styled.div`
   display: flex;
@@ -99,6 +100,7 @@ const VideoIconContainer = styled(CircularIconContainer)`
 
 interface FeedItemProps {
   id: string;
+  type: CardTypes;
   title: string;
   liveUrl?: string;
   metaContent?: JSX.Element;
@@ -124,6 +126,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
   public render() {
     const {
       id,
+      type,
       title,
       liveUrl,
       isLive,
@@ -139,6 +142,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
 
     const { preview, live, ophan } = getPaths(id);
     const href = isLive ? live : preview;
+    const displayOphanLink = type === CardTypesMap.ARTICLE && isLive;
 
     return (
       <Container
@@ -206,7 +210,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
             {(props) => (
               <>
                 <HoverViewButton hoverText="View" href={href} {...props} />
-                {isLive && (
+                {displayOphanLink && (
                   <HoverOphanButton {...props} href={ophan} hoverText="Ophan" />
                 )}
                 <HoverAddToClipboardButton
diff --git a/fronts-client/src/components/feed/RecipeFeedItem.tsx b/fronts-client/src/components/feed/RecipeFeedItem.tsx
index ee4c4eb95fa..7d98255d9d0 100644
--- a/fronts-client/src/components/feed/RecipeFeedItem.tsx
+++ b/fronts-client/src/components/feed/RecipeFeedItem.tsx
@@ -10,6 +10,7 @@ import noop from 'lodash/noop';
 import { selectFeatureValue } from '../../selectors/featureSwitchesSelectors';
 import { connect } from 'react-redux';
 import { ContentInfo } from './ContentInfo';
+import { CardTypesMap } from 'constants/cardTypes';
 
 interface ComponentProps {
   recipe: Recipe;
@@ -32,6 +33,7 @@ export const RecipeFeedItemComponent = ({
 
   return (
     <FeedItem
+      type={CardTypesMap.RECIPE}
       id={recipe.id}
       title={recipe.title}
       thumbnail={recipe.featuredImage.url}

From 8ffd8ba4f719ae2b56b031e56c240213ae652113 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 17:06:03 +0100
Subject: [PATCH 07/10] Add clipboard callback to feed items

---
 .../src/components/feed/RecipeFeedItem.tsx    | 37 +++++++++++--------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/fronts-client/src/components/feed/RecipeFeedItem.tsx b/fronts-client/src/components/feed/RecipeFeedItem.tsx
index 7d98255d9d0..79c6e6511aa 100644
--- a/fronts-client/src/components/feed/RecipeFeedItem.tsx
+++ b/fronts-client/src/components/feed/RecipeFeedItem.tsx
@@ -1,26 +1,39 @@
 import { Recipe } from '../../types/Recipe';
 import { FeedItem } from './FeedItem';
-import React from 'react';
+import React, { useCallback } from 'react';
 import { State } from '../../types/State';
 import {
   dragOffsetX,
   dragOffsetY,
 } from '../FrontsEdit/CollectionComponents/ArticleDrag';
-import noop from 'lodash/noop';
 import { selectFeatureValue } from '../../selectors/featureSwitchesSelectors';
-import { connect } from 'react-redux';
 import { ContentInfo } from './ContentInfo';
 import { CardTypesMap } from 'constants/cardTypes';
+import { useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
+import { insertCardWithCreate } from 'actions/Cards';
 
 interface ComponentProps {
   recipe: Recipe;
-  shouldObscureFeed: boolean;
 }
 
-export const RecipeFeedItemComponent = ({
-  recipe,
-  shouldObscureFeed,
-}: ComponentProps) => {
+export const RecipeFeedItem = ({ recipe }: ComponentProps) => {
+  const shouldObscureFeed = useSelector<State, boolean>((state) =>
+    selectFeatureValue(state, 'obscure-feed')
+  );
+
+  const dispatch = useDispatch();
+
+  const onAddToClipboard = useCallback(() => {
+    dispatch<any>(
+      insertCardWithCreate(
+        { type: 'clipboard', id: 'clipboard', index: 0 },
+        { type: 'RECIPE', data: recipe },
+        'clipboard'
+      )
+    );
+  }, [recipe]);
+
   const handleDragStart = (
     event: React.DragEvent<HTMLDivElement>,
     dragNode: HTMLDivElement
@@ -41,15 +54,9 @@ export const RecipeFeedItemComponent = ({
       hasVideo={false}
       isLive={true} // We do not yet serve preview recipes
       handleDragStart={handleDragStart}
-      onAddToClipboard={noop}
+      onAddToClipboard={onAddToClipboard}
       shouldObscureFeed={shouldObscureFeed}
       metaContent={<ContentInfo>Recipe</ContentInfo>}
     />
   );
 };
-
-const mapStateToProps = (state: State) => ({
-  shouldObscureFeed: selectFeatureValue(state, 'obscure-feed'),
-});
-
-export const RecipeFeedItem = connect(mapStateToProps)(RecipeFeedItemComponent);

From 20a804b11b0fa21a9aff2f04d49f28e2be391439 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Tue, 7 May 2024 17:16:22 +0100
Subject: [PATCH 08/10] Move to specific render prop

---
 .../src/components/card/article/ArticleBody.tsx          | 5 ++---
 fronts-client/src/components/card/recipe/RecipeCard.tsx  | 5 ++---
 .../src/components/card/snapLink/SnapLinkCard.tsx        | 5 ++---
 fronts-client/src/components/feed/FeedItem.tsx           | 5 ++---
 .../src/components/inputs/HoverActionButtonWrapper.tsx   | 6 +++---
 .../components/inputs/__tests__/HoverActions.spec.tsx    | 9 +++++----
 6 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
index e2eb2836d1f..666b4191c85 100644
--- a/fronts-client/src/components/card/article/ArticleBody.tsx
+++ b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -326,8 +326,7 @@ const articleBodyDefault = React.memo(
             size={size}
             toolTipPosition={'top'}
             toolTipAlign={'right'}
-          >
-            {(props) => (
+            renderButtons={(props) => (
               <>
                 {urlPath && (
                   <HoverViewButton
@@ -359,7 +358,7 @@ const articleBodyDefault = React.memo(
                 )}
               </>
             )}
-          </HoverActionsButtonWrapper>
+          />
         </HoverActionsAreaOverlay>
       </>
     );
diff --git a/fronts-client/src/components/card/recipe/RecipeCard.tsx b/fronts-client/src/components/card/recipe/RecipeCard.tsx
index ad2001f0dd4..fb2c4dc00db 100644
--- a/fronts-client/src/components/card/recipe/RecipeCard.tsx
+++ b/fronts-client/src/components/card/recipe/RecipeCard.tsx
@@ -97,8 +97,7 @@ export const RecipeCard = ({
           <HoverActionsButtonWrapper
             toolTipPosition={'top'}
             toolTipAlign={'right'}
-          >
-            {(props) => (
+            renderButtons={(props) => (
               <>
                 <HoverViewButton
                   hoverText="View"
@@ -117,7 +116,7 @@ export const RecipeCard = ({
                 />
               </>
             )}
-          </HoverActionsButtonWrapper>
+          />
         </HoverActionsAreaOverlay>
       </CardBody>
     </CardContainer>
diff --git a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
index 347abd117d9..d442b4524f9 100644
--- a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
+++ b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
@@ -196,8 +196,7 @@ const SnapLinkCard = ({
             size={size}
             toolTipPosition={'top'}
             toolTipAlign={'right'}
-          >
-            {(props) => (
+            renderButtons={(props) => (
               <>
                 {urlPath && (
                   <HoverViewButton hoverText="View" href={urlPath} {...props} />
@@ -219,7 +218,7 @@ const SnapLinkCard = ({
                 />
               </>
             )}
-          </HoverActionsButtonWrapper>
+          />
         </HoverActionsAreaOverlay>
       </SnapLinkBodyContainer>
       {children}
diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 71f0f3f44f5..fb692377d65 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -206,8 +206,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
           <HoverActionsButtonWrapper
             toolTipPosition={'top'}
             toolTipAlign={'right'}
-          >
-            {(props) => (
+            renderButtons={(props) => (
               <>
                 <HoverViewButton hoverText="View" href={href} {...props} />
                 {displayOphanLink && (
@@ -220,7 +219,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
                 />
               </>
             )}
-          </HoverActionsButtonWrapper>
+          />
         </HoverActionsAreaOverlay>
       </Container>
     );
diff --git a/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx b/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
index 600dc257c70..d4f8c043336 100644
--- a/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
+++ b/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
@@ -43,14 +43,14 @@ interface WrapperProps {
   size?: CardSizes; // Article Component size
   toolTipPosition: 'top' | 'left' | 'bottom' | 'right';
   toolTipAlign: 'left' | 'center' | 'right';
-  children: (renderProps: ButtonProps) => JSX.Element;
+  renderButtons: (renderProps: ButtonProps) => JSX.Element;
 }
 
 export const HoverActionsButtonWrapper = ({
   toolTipPosition,
   toolTipAlign,
   size,
-  children,
+  renderButtons,
 }: WrapperProps) => {
   const [toolTipText, setToolTipText] = useState<string | undefined>(undefined);
 
@@ -72,7 +72,7 @@ export const HoverActionsButtonWrapper = ({
           <ToolTip text={toolTipText} />
         </ToolTipWrapper>
       ) : null}
-      {children({
+      {renderButtons({
         showToolTip,
         hideToolTip,
         size: size,
diff --git a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
index 46095cdbace..f7fa76330bf 100644
--- a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
+++ b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
@@ -20,19 +20,20 @@ afterEach(cleanup);
 
 const HoverWrapper = (
   <ThemeProvider theme={theme}>
-    <HoverActionsButtonWrapper toolTipPosition={'top'} toolTipAlign={'center'}>
-      {(props) => (
+    <HoverActionsButtonWrapper
+      toolTipPosition={'top'}
+      toolTipAlign={'center'}
+      renderButtons={(props) => (
         <>
           <HoverViewButton hoverText="View" href={'test-string'} {...props} />
           <HoverOphanButton {...props} hoverText="Ophan" />
           <HoverDeleteButton onDelete={noop} hoverText="Delete" {...props} />
         </>
       )}
-    </HoverActionsButtonWrapper>
+    />
   </ThemeProvider>
 );
 
-// Tests //
 describe('Hover Action Button Wrapper', () => {
   it('should render Wrapper with Buttons', () => {
     const { container, getByTitle } = render(HoverWrapper);

From 9e87c1a951d897596c5c11648c47442508c40c0e Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Thu, 9 May 2024 17:17:42 +0100
Subject: [PATCH 09/10] =?UTF-8?q?ID=20of=20feed=20item=20is=20actually=20h?=
 =?UTF-8?q?ref=20=E2=80=93=20correct=20in=20follow=20up=20PR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fronts-client/src/components/feed/RecipeFeedItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fronts-client/src/components/feed/RecipeFeedItem.tsx b/fronts-client/src/components/feed/RecipeFeedItem.tsx
index 79c6e6511aa..b3e3505947a 100644
--- a/fronts-client/src/components/feed/RecipeFeedItem.tsx
+++ b/fronts-client/src/components/feed/RecipeFeedItem.tsx
@@ -47,7 +47,7 @@ export const RecipeFeedItem = ({ recipe }: ComponentProps) => {
   return (
     <FeedItem
       type={CardTypesMap.RECIPE}
-      id={recipe.id}
+      id={recipe.canonicalArticle}
       title={recipe.title}
       thumbnail={recipe.featuredImage.url}
       liveUrl={`https://theguardian.com/${recipe.canonicalArticle}`}

From ba547e526bc4d15f58bf3e3a5f88cde3f8b2cf11 Mon Sep 17 00:00:00 2001
From: Jonathon Herbert <jonathon.herbert@guardian.co.uk>
Date: Thu, 9 May 2024 17:57:34 +0100
Subject: [PATCH 10/10] Add type for ChefFeedItem

---
 fronts-client/src/components/feed/ChefFeedItem.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/fronts-client/src/components/feed/ChefFeedItem.tsx b/fronts-client/src/components/feed/ChefFeedItem.tsx
index 21f8de34401..2709cec826b 100644
--- a/fronts-client/src/components/feed/ChefFeedItem.tsx
+++ b/fronts-client/src/components/feed/ChefFeedItem.tsx
@@ -10,6 +10,7 @@ import { selectFeatureValue } from '../../selectors/featureSwitchesSelectors';
 import { State } from '../../types/State';
 import { connect } from 'react-redux';
 import noop from 'lodash/noop';
+import { CardTypesMap } from 'constants/cardTypes';
 
 interface ComponentProps {
   chef: Chef;
@@ -33,6 +34,7 @@ export const ChefFeedItemComponent = ({
   return (
     <FeedItem
       id={chef.id}
+      type={CardTypesMap.CHEF}
       title={`${chef.firstName} ${chef.lastName}`}
       hasVideo={false}
       isLive={true}