@transferwise/components 0.0.0-experimental-26e4e3f → 0.0.0-experimental-45041bc

package/src/promoCard/PromoCard.tsx

@@ -4,15 +4,15 @@ import React, { forwardRef, FunctionComponent, useEffect, useId, useState } from
 
 import Body from '../body';
 import { Typography } from '../common';
-import Card, { CardProps } from '../common/card';
+import Card, { type CardProps } from '../common/card';
 import Display from '../display';
 import Image from '../image/Image';
 import Title from '../title';
 
 import { usePromoCardContext } from './PromoCardContext';
-import PromoCardIndicator, { PromoCardIndicatorProps } from './PromoCardIndicator';
+import PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';
 
-export type ReferenceType = React.Ref<HTMLInputElement>;
+export type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;
 export type RelatedTypes =
   | ''
   | 'alternate'
@@ -67,6 +67,9 @@ export interface PromoCardCommonProps {
   /** Specify an onClick event handler */
   onClick?: () => void;
 
+  /** Specify an onKeyDown event handler */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+
   /** Optional prop to specify the ID used for testing */
   testId?: string;
 
@@ -75,6 +78,8 @@ export interface PromoCardCommonProps {
 
   /** Set to false to use body font style for the title   */
   useDisplayFont?: boolean;
+
+  ref?: ReferenceType;
 }
 
 export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {
@@ -90,6 +95,14 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   /** Optionally specify the language of the linked URL */
   hrefLang?: string;
 
+  /** Optional property that can be pass a ref for the anchor. */
+  anchorRef?: React.Ref<HTMLAnchorElement>;
+
+  /**
+   * Optional prop to specify the ID of the anchor element which can be useful when using a ref.
+   */
+  anchorId?: string;
+
   /**
    * Relationship between the PromoCard href URL and the current page. See
    * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
@@ -104,7 +117,7 @@ export interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps
   isChecked?: never;
   tabIndex?: never;
   type?: never;
-  reference?: never;
+  ref?: ReferenceType;
   value?: never;
 }
 
@@ -119,7 +132,7 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   tabIndex?: number;
 
   /** Optional property to provide component Ref */
-  reference?: ReferenceType;
+  ref?: ReferenceType;
 
   /** Optional prop to specify the input type of the PromoCard  */
   type?: 'checkbox' | 'radio';
@@ -130,6 +143,8 @@ export interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardPr
   /** Only applies to <a />s */
   download?: never;
   href?: never;
+  anchorRef?: never;
+  anchorId?: never;
   hrefLang?: never;
   rel?: never;
   target?: never;
@@ -201,6 +216,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       isChecked,
       isDisabled,
       onClick,
+      onKeyDown,
       rel,
       tabIndex,
       target,
@@ -210,9 +226,11 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       value,
       isSmall,
       useDisplayFont = true,
+      anchorRef,
+      anchorId,
       ...props
     },
-    reference,
+    ref: ReferenceType,
   ) => {
     // Set the `checked` state to the value of `defaultChecked` if it is truthy,
     // or the value of `isChecked` if it is truthy, or `false` if neither
@@ -275,7 +293,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
       id: componentId,
       isDisabled: isDisabled || contextIsDisabled,
       onClick,
-      ref: reference,
+      onKeyDown,
+      ref,
       'data-testid': testId,
       isSmall,
     };
@@ -290,6 +309,8 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
             hrefLang,
             rel,
             target,
+            ref: anchorRef,
+            id: anchorId,
           }
         : {};
 
@@ -310,7 +331,7 @@ const PromoCard: FunctionComponent<PromoCardProps> = forwardRef(
                 handleClick();
               }
             },
-            ref: reference,
+            ref,
             tabIndex: 0,
           }
         : {};