Merge pull request #1695 from guardian/pinboard/expose-urlPath-per-ar…

…ticle-card-as-handle

add empty element per article card, to act as handle for Pinboard 📌 to attach to (using `urlPath` as data attribute)

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 && (

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

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

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

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 && (

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} />

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;

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"

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"

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};
 `;

fronts-client/src/components/inputs/HoverActionButtonWrapper.tsx

@@ -43,13 +43,15 @@ interface WrapperProps {
  size?: CardSizes; // Article Component size
  toolTipPosition: 'top' | 'left' | 'bottom' | 'right';
  toolTipAlign: 'left' | 'center' | 'right';
+ urlPath: string | undefined;
  renderButtons: (renderProps: ButtonProps) => JSX.Element;
 }
 
 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>
  );
 };

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} />

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,13 +66,15 @@ export const getCapiValuesForArticleFields = (
  trailText: '',
  byline: '',
  thumbnail: '',
+ urlPath: '',
  };
  }
  return {
  headline: article.fields.headline || '',
  trailText: article.fields.trailText || '',
  byline: article.fields.byline || '',
  thumbnail: article.fields.thumbnail,
+ urlPath: article.urlPath,
  };
 };