@transferwise/components 46.103.1 → 46.105.0

package/src/main.less

@@ -39,6 +39,7 @@
 @import "./image/Image.less";
 @import "./info/Info.less";
 @import "./inputs/Input.less";
+@import "./listItem/ListItem.less";
 @import "./field/Field.less";
 @import "./inputs/InputGroup.less";
 @import "./inputs/SelectInput.less";

package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx

@@ -1,10 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, userEvent } from '../../../test-utils';
 import PrimitiveAnchor from '..';
 
 describe('PrimitiveAnchor', () => {
   const defaultProps = {
     children: 'Click me',
-    href: 'https://example.com',
+    href: '#destination',
   };
 
   const renderAnchor = (props?: Partial<typeof defaultProps>) => {
@@ -15,7 +15,7 @@ describe('PrimitiveAnchor', () => {
     renderAnchor();
     expect(screen.getByRole('link')).toBeInTheDocument();
     expect(screen.getByRole('link')).toHaveTextContent('Click me');
-    expect(screen.getByRole('link')).toHaveAttribute('href', 'https://example.com');
+    expect(screen.getByRole('link')).toHaveAttribute('href', defaultProps.href);
   });
 
   it('applies the correct classes based on props', () => {
@@ -40,7 +40,7 @@ describe('PrimitiveAnchor', () => {
 
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('aria-disabled', 'true');
-    expect(link).not.toHaveAttribute('href', 'https://example.com');
+    expect(link).not.toHaveAttribute('href', defaultProps.href);
   });
 
   it('sets data-testid attribute', () => {
@@ -90,4 +90,15 @@ describe('PrimitiveAnchor', () => {
     const link = screen.getByRole('link');
     expect(link).toHaveStyle('color: red');
   });
+
+  it('should respect click handlers', async () => {
+    const props = {
+      ...defaultProps,
+      onClick: jest.fn(),
+    };
+
+    renderAnchor(props);
+    await userEvent.click(screen.getByRole('link'));
+    expect(props.onClick).toHaveBeenCalledTimes(1);
+  });
 });

package/src/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
+import React, { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,16 +25,29 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
     type?: TitleTypes;
   };
 
-function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
-  const mapping = titleTypeMapping[type];
-  const isTypeSupported = mapping !== undefined;
-
-  if (isTypeSupported) {
-    const HeaderTag = as ?? mapping;
-    return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
-  }
-  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
-  return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
-}
+const Title = React.forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
+  ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
+    const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
+    const isTypeSupported = mapping !== undefined;
+    if (isTypeSupported) {
+      const HeaderTag = as ?? mapping;
+      return (
+        <HeaderTag
+          ref={ref as React.Ref<any>}
+          {...props}
+          className={clsx(`np-text-${type}`, className)}
+        />
+      );
+    }
+    const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
+    return (
+      <HeaderTag
+        ref={ref as React.Ref<any>}
+        {...props}
+        className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
+      />
+    );
+  },
+);
 
 export default Title;