@transferwise/components 46.104.0 → 46.105.1

package/src/main.css

@@ -2433,30 +2433,37 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   fill: var(--color-interactive-primary);
 }
 .np-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 24px;
+  grid-column-gap: var(--size-24);
+  -moz-column-gap: 24px;
+       column-gap: 24px;
+  -moz-column-gap: var(--size-24);
+       column-gap: var(--size-24);
+  align-items: center;
+  margin-bottom: 8px;
+  margin-bottom: var(--size-8);
   max-width: 100%;
   padding: 8px 0;
   padding: var(--size-8) 0;
+  width: 100%;
+}
+.np-header--group {
+  align-items: flex-end;
   border-bottom: 1px solid rgba(0,0,0,0.10196);
   border-bottom: 1px solid var(--color-border-neutral);
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-  -moz-column-gap: 24px;
-       column-gap: 24px;
-  -moz-column-gap: var(--size-24);
-       column-gap: var(--size-24);
 }
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);
+  margin: 0;
 }
-.np-header__button {
-  margin-inline: calc(16px * -1);
-  margin-inline: calc(var(--size-16) * -1);
-  margin-bottom: calc(4px * -1);
-  margin-bottom: calc(var(--size-4) * -1);
+.np-header__action {
+  margin: 0;
+  height: 20px;
+  display: flex;
+  align-items: center;
 }
 .tw-image {
   max-width: none;
@@ -2739,10 +2746,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     -o-object-position: bottom left;
        object-position: bottom left;
   }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl .wds-list-item-media {
-    margin-bottom: 12px;
-    margin-bottom: var(--size-12);
-  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-hasControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto auto auto;
@@ -2779,10 +2782,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-columns: 1fr;
     grid-template-areas: "media" "body" "control";
   }
-  .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl .wds-list-item-media {
-    margin-bottom: 12px;
-    margin-bottom: var(--size-12);
-  }
   .wds-list-item-gridWrapper.wds-list-item-hasMedia-noControl.wds-list-item-hasInfo-hasPrompt {
     grid-template-columns: auto auto;
     grid-template-rows: auto auto auto auto;
@@ -3324,6 +3323,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   margin-top: calc(4px * -1);
   margin-top: calc(var(--size-4) * -1);
 }
+.wds-list-item-additional-info button.np-link {
+  text-align: start;
+}
 .wds-list-item-control-wrapper {
   grid-area: control;
   align-content: center;

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/select/Select.story.tsx

@@ -9,7 +9,7 @@ import Select, { SelectItem, SelectOptionItem } from './Select';
 const meta: Meta<typeof Select> = {
   component: Select,
   title: 'Forms/Select',
-  tags: ['wds:deprecated'],
+  tags: ['deprecated'],
   argTypes: {
     id: { control: 'text' },
     size: { control: 'radio', options: ['sm', 'md', 'lg'] },

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;