From 3784bf1d77001c75459ee29a000337c33c9c1aec Mon Sep 17 00:00:00 2001
From: Tom Richards <tom.richards@guardian.co.uk>
Date: Fri, 4 Oct 2024 21:51:47 +0100
Subject: [PATCH 1/2] add empty `pinboard-article-button` elements per article,
 as a handle for pinboard to attach itself (distinguished by the
 `data-url-path` attribute) and optionally expanded with draggable images if
 `data-with-draggable-thumbs-of-ratio` attribute is set with the ratio of the
 container

---
 .../components/card/article/ArticleBody.tsx   |  1 +
 .../src/components/card/chef/ChefCard.tsx     |  2 +-
 .../feastCollection/FeastCollectionCard.tsx   |  1 +
 .../src/components/card/recipe/RecipeCard.tsx |  1 +
 .../components/card/snapLink/SnapLinkCard.tsx |  1 +
 .../src/components/feed/FeedItem.tsx          |  1 +
 .../src/components/form/ArticleMetaForm.tsx   | 22 ++++++++++++++-----
 .../inputs/HoverActionButtonWrapper.tsx       | 11 ++++++++++
 .../inputs/__tests__/HoverActions.spec.tsx    |  1 +
 fronts-client/src/util/form.ts                |  3 +++
 10 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/fronts-client/src/components/card/article/ArticleBody.tsx b/fronts-client/src/components/card/article/ArticleBody.tsx
index b086fbf3224..8f395c8db70 100644
--- a/fronts-client/src/components/card/article/ArticleBody.tsx
+++ b/fronts-client/src/components/card/article/ArticleBody.tsx
@@ -358,6 +358,7 @@ const articleBodyDefault = React.memo(
 						size={size}
 						toolTipPosition={'top'}
 						toolTipAlign={'right'}
+						urlPath={urlPath}
 						renderButtons={(props) => (
 							<>
 								{urlPath && (
diff --git a/fronts-client/src/components/card/chef/ChefCard.tsx b/fronts-client/src/components/card/chef/ChefCard.tsx
index dbd16880672..a2575528fb4 100644
--- a/fronts-client/src/components/card/chef/ChefCard.tsx
+++ b/fronts-client/src/components/card/chef/ChefCard.tsx
@@ -61,7 +61,6 @@ export const ChefCard = ({
 	const chef = useSelector((state: State) =>
 		chefsSelectors.selectChefFromCard(state, card.uuid),
 	);
-
 	return (
 		<CardContainer {...rest}>
 			<CardBody data-testid="snap" size={size} fade={fade}>
@@ -115,6 +114,7 @@ export const ChefCard = ({
 					<HoverActionsButtonWrapper
 						toolTipPosition={'top'}
 						toolTipAlign={'right'}
+						urlPath={undefined}
 						renderButtons={(props) => (
 							<>
 								<HoverViewButton
diff --git a/fronts-client/src/components/card/feastCollection/FeastCollectionCard.tsx b/fronts-client/src/components/card/feastCollection/FeastCollectionCard.tsx
index bc3d087ec11..5c78deddc15 100644
--- a/fronts-client/src/components/card/feastCollection/FeastCollectionCard.tsx
+++ b/fronts-client/src/components/card/feastCollection/FeastCollectionCard.tsx
@@ -132,6 +132,7 @@ export const FeastCollectionCard = ({
 						<HoverActionsButtonWrapper
 							toolTipPosition={'top'}
 							toolTipAlign={'right'}
+							urlPath={undefined}
 							renderButtons={(props) => (
 								<>
 									<HoverAddToClipboardButton
diff --git a/fronts-client/src/components/card/recipe/RecipeCard.tsx b/fronts-client/src/components/card/recipe/RecipeCard.tsx
index a2b6d522872..3372d25bf49 100644
--- a/fronts-client/src/components/card/recipe/RecipeCard.tsx
+++ b/fronts-client/src/components/card/recipe/RecipeCard.tsx
@@ -108,6 +108,7 @@ export const RecipeCard = ({
 					<HoverActionsButtonWrapper
 						toolTipPosition={'top'}
 						toolTipAlign={'right'}
+						urlPath={paths?.live}
 						renderButtons={(props) => (
 							<>
 								<HoverViewButton
diff --git a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
index 736b0b6ac37..a5d1c6717cf 100644
--- a/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
+++ b/fronts-client/src/components/card/snapLink/SnapLinkCard.tsx
@@ -196,6 +196,7 @@ const SnapLinkCard = ({
 						size={size}
 						toolTipPosition={'top'}
 						toolTipAlign={'right'}
+						urlPath={urlPath}
 						renderButtons={(props) => (
 							<>
 								{urlPath && (
diff --git a/fronts-client/src/components/feed/FeedItem.tsx b/fronts-client/src/components/feed/FeedItem.tsx
index 0290a27e0f3..d1a8c1733f4 100644
--- a/fronts-client/src/components/feed/FeedItem.tsx
+++ b/fronts-client/src/components/feed/FeedItem.tsx
@@ -220,6 +220,7 @@ export class FeedItem extends React.Component<FeedItemProps, {}> {
 					<HoverActionsButtonWrapper
 						toolTipPosition={'top'}
 						toolTipAlign={'right'}
+						urlPath={liveUrl}
 						renderButtons={(props) => (
 							<>
 								<HoverViewButton hoverText="View" href={href} {...props} />
diff --git a/fronts-client/src/components/form/ArticleMetaForm.tsx b/fronts-client/src/components/form/ArticleMetaForm.tsx
index 1f384b8235e..941d420af02 100644
--- a/fronts-client/src/components/form/ArticleMetaForm.tsx
+++ b/fronts-client/src/components/form/ArticleMetaForm.tsx
@@ -537,6 +537,8 @@ class FormComponent extends React.Component<Props, FormComponentState> {
 						groupSizeId &&
 						groupSizeId > 0)));
 
+		const cardCriteria = this.determineCardCriteria();
+
 		return (
 			<FormContainer
 				data-testid="edit-form"
@@ -735,9 +737,7 @@ class FormComponent extends React.Component<Props, FormComponentState> {
 										component={InputImage}
 										disabled={imageHide || coverCardImageReplace}
 										criteria={
-											isEditionsMode
-												? editionsCardImageCriteria
-												: this.determineCardCriteria()
+											isEditionsMode ? editionsCardImageCriteria : cardCriteria
 										}
 										frontId={frontId}
 										defaultImageUrl={
@@ -847,7 +847,7 @@ class FormComponent extends React.Component<Props, FormComponentState> {
 									frontId={frontId}
 									component={RenderSlideshow}
 									change={change}
-									criteria={this.determineCardCriteria()}
+									criteria={cardCriteria}
 									slideshowHasAtLeastTwoImages={slideshowHasAtLeastTwoImages}
 								/>
 							</SlideshowRowContainer>
@@ -904,6 +904,15 @@ class FormComponent extends React.Component<Props, FormComponentState> {
 						</RowContainer>
 					)}
 				</FormContent>
+				{articleCapiFieldValues.urlPath && (
+					// the below tag is empty and meaningless to the fronts tool itself, but serves as a handle for
+					// Pinboard to attach itself via, identified/distinguished by the urlPath data attribute
+					// @ts-ignore
+					<pinboard-article-button
+						data-url-path={articleCapiFieldValues.urlPath}
+						data-with-draggable-thumbs-of-ratio={`${cardCriteria.widthAspectRatio}:${cardCriteria.heightAspectRatio}`}
+					/>
+				)}
 				<FormButtonContainer>
 					<Button onClick={this.handleCancel} type="button" size="l">
 						Cancel
@@ -988,7 +997,10 @@ class FormComponent extends React.Component<Props, FormComponentState> {
 	private getHeadlineLabel = () =>
 		this.props.snapType === 'html' ? 'Content' : 'Headline';
 
-	private determineCardCriteria = (): Criteria => {
+	private determineCardCriteria = (): Criteria & {
+		widthAspectRatio: number;
+		heightAspectRatio: number;
+	} => {
 		const { collectionType } = this.props;
 		if (!collectionType) {
 			return landScapeCardImageCriteria;
diff --git a/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx b/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
index da028b39e70..bcd51fd5e6e 100644
--- a/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
+++ b/fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx
@@ -43,6 +43,7 @@ interface WrapperProps {
 	size?: CardSizes; // Article Component size
 	toolTipPosition: 'top' | 'left' | 'bottom' | 'right';
 	toolTipAlign: 'left' | 'center' | 'right';
+	urlPath: string | undefined;
 	renderButtons: (renderProps: ButtonProps) => JSX.Element;
 }
 
@@ -50,6 +51,7 @@ export const HoverActionsButtonWrapper = ({
 	toolTipPosition,
 	toolTipAlign,
 	size,
+	urlPath,
 	renderButtons,
 }: WrapperProps) => {
 	const [toolTipText, setToolTipText] = useState<string | undefined>(undefined);
@@ -77,6 +79,15 @@ export const HoverActionsButtonWrapper = ({
 				hideToolTip,
 				size,
 			})}
+			{urlPath && (
+				// the below tag is empty and meaningless to the fronts tool itself, but serves as a handle for
+				// Pinboard to attach itself via, identified/distinguished by the urlPath data attribute
+				// @ts-ignore
+				<pinboard-article-button
+					style={{ verticalAlign: 'top', marginLeft: '2px' }}
+					data-url-path={urlPath}
+				/>
+			)}
 		</HoverActionsWrapper>
 	);
 };
diff --git a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
index bc7d8df92f7..bdd4820e480 100644
--- a/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
+++ b/fronts-client/src/components/inputs/__tests__/HoverActions.spec.tsx
@@ -23,6 +23,7 @@ const HoverWrapper = (
 		<HoverActionsButtonWrapper
 			toolTipPosition={'top'}
 			toolTipAlign={'center'}
+			urlPath={undefined}
 			renderButtons={(props) => (
 				<>
 					<HoverViewButton hoverText="View" href={'test-string'} {...props} />
diff --git a/fronts-client/src/util/form.ts b/fronts-client/src/util/form.ts
index 78c089848f6..a26d114974d 100644
--- a/fronts-client/src/util/form.ts
+++ b/fronts-client/src/util/form.ts
@@ -49,6 +49,7 @@ export interface CapiFields {
 	trailText: string;
 	byline: string;
 	thumbnail?: string | void;
+	urlPath: string;
 }
 
 export const strToInt = (str: string | void) =>
@@ -65,6 +66,7 @@ export const getCapiValuesForArticleFields = (
 			trailText: '',
 			byline: '',
 			thumbnail: '',
+			urlPath: '',
 		};
 	}
 	return {
@@ -72,6 +74,7 @@ export const getCapiValuesForArticleFields = (
 		trailText: article.fields.trailText || '',
 		byline: article.fields.byline || '',
 		thumbnail: article.fields.thumbnail,
+		urlPath: article.urlPath,
 	};
 };
 

From 0cf072efcc6132d229c8a2a03dab9375d3acf0f9 Mon Sep 17 00:00:00 2001
From: Tom Richards <tom.richards@guardian.co.uk>
Date: Mon, 14 Oct 2024 15:52:52 +0100
Subject: [PATCH 2/2] remove seemingly unnecessary margin-bottom from the
 article form

---
 fronts-client/src/components/form/ChefMetaForm.tsx    |  2 +-
 .../src/components/form/FeastCollectionMetaForm.tsx   |  2 +-
 fronts-client/src/components/form/FormContent.tsx     | 11 +++++++----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/fronts-client/src/components/form/ChefMetaForm.tsx b/fronts-client/src/components/form/ChefMetaForm.tsx
index 6138af4fc56..c637a873b3d 100644
--- a/fronts-client/src/components/form/ChefMetaForm.tsx
+++ b/fronts-client/src/components/form/ChefMetaForm.tsx
@@ -83,7 +83,7 @@ const Form = ({
 					{`This collection has been edited since you started editing this article. Your changes have not been saved. Please refresh the page to get the latest data.`}
 				</CollectionEditedError>
 			)}
-			<FormContent size={size}>
+			<FormContent size={size} marginBottom="40px">
 				<TextOptionsInputGroup>
 					<Field
 						name="bio"
diff --git a/fronts-client/src/components/form/FeastCollectionMetaForm.tsx b/fronts-client/src/components/form/FeastCollectionMetaForm.tsx
index c8f4086a4d6..f264245e244 100644
--- a/fronts-client/src/components/form/FeastCollectionMetaForm.tsx
+++ b/fronts-client/src/components/form/FeastCollectionMetaForm.tsx
@@ -78,7 +78,7 @@ const Form = ({
 					{`This collection has been edited since you started editing this article. Your changes have not been saved. Please refresh the page to get the latest data.`}
 				</CollectionEditedError>
 			)}
-			<FormContent size={size}>
+			<FormContent size={size} marginBottom="40px">
 				<TextOptionsInputGroup>
 					<Field
 						name="title"
diff --git a/fronts-client/src/components/form/FormContent.tsx b/fronts-client/src/components/form/FormContent.tsx
index d03039345ce..e6be299863d 100644
--- a/fronts-client/src/components/form/FormContent.tsx
+++ b/fronts-client/src/components/form/FormContent.tsx
@@ -1,10 +1,13 @@
 import { styled } from 'constants/theme';
 import { CardSizes } from 'types/Collection';
 
-export const FormContent = styled.div`
+interface FormContentProps {
+	size?: CardSizes;
+	marginBottom?: string;
+}
+export const FormContent = styled.div<FormContentProps>`
 	flex: 3;
 	display: flex;
-	flex-direction: ${(props: { size?: CardSizes }) =>
-		props.size !== 'wide' ? 'column' : 'row'};
-	margin-bottom: 40px;
+	flex-direction: ${({ size }) => (size !== 'wide' ? 'column' : 'row')};
+	margin-bottom: ${({ marginBottom }) => marginBottom ?? 0};
 `;