@transferwise/components 0.0.0-experimental-b7e52e5 → 0.0.0-experimental-2442a28

package/src/header/Header.tsx

@@ -1,102 +1,146 @@
 import { clsx } from 'clsx';
 
-import { ActionButtonProps } from '../actionButton/ActionButton';
-import Button from '../button';
 import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
 import Link from '../link';
+import Button from '../button';
 import Title from '../title';
-import { HTMLAttributes } from 'react';
+import React, { useEffect, useRef, FunctionComponent } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
+  onClick?: () => void;
 };
 
-type ButtonActionProps = ActionProps & ActionButtonProps;
-
+type ButtonActionProps = ActionProps;
 type LinkActionProps = ActionProps & LinkProps;
 
-export type HeaderProps = CommonProps & {
+export interface HeaderProps extends CommonProps {
   /**
-   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
+   * Optional prop to define the action for the header. If the `href` property
+   * is provided, a `Link` will be rendered instead of an `ActionButton`.
    */
   action?: ButtonActionProps | LinkActionProps;
-  /**
-   * Override the heading element rendered for the title, useful to specify the semantics of your header.
-   *
-   * @default "h5"
-   */
+
+  /** Option prop to specify DOM render element of the title */
   as?: Heading | 'legend' | 'header';
+
+  /** Required prop to set the title of the Header. */
   title: string;
-} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
 
-const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
-  const props = {
-    'aria-label': action['aria-label'],
-  };
+  /** Optional prop to specify the level of the Header */
+  level?: 'section' | 'group';
 
-  if ('href' in action) {
-    return (
-      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
-        {action.text}
-      </Link>
-    );
-  }
-
-  return (
-    <Button
-      className="np-header__button"
-      priority="tertiary"
-      size="sm"
-      onClick={action.onClick}
-      {...props}
-    >
-      {action.text}
-    </Button>
-  );
-};
+  className?: string;
+  testId?: string;
+}
 
 /**
+ * Renders a header action which can be either a button or a link.
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
- *
+ * @param {Object} props - The properties object.
+ * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
+ * @returns {JSX.Element} The rendered header action component.
  */
-export const Header = ({
-  id,
-  action,
-  as = 'h5',
-  title,
-  className,
-  role = undefined,
-}: HeaderProps) => {
-  if (!action) {
+const HeaderAction = React.forwardRef(
+  (
+    { action }: { action: ButtonActionProps | LinkActionProps },
+    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
+  ) => {
+    const { 'aria-label': ariaLabel, text, onClick } = action;
+
+    if ('href' in action) {
+      const { href, target, onClick: linkOnClick } = action;
+      return (
+        <Link
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          target={target}
+          aria-label={ariaLabel}
+          onClick={linkOnClick}
+        >
+          {text}
+        </Link>
+      );
+    }
+
     return (
-      <Title
-        as={as}
-        id={id}
-        role={role}
-        type={Typography.TITLE_GROUP}
-        className={clsx('np-header', 'np-header__title', className)}
+      <Button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        className="np-header__button"
+        priority="tertiary"
+        size="sm"
+        aria-label={ariaLabel}
+        onClick={onClick}
       >
-        {title}
-      </Title>
+        {text}
+      </Button>
     );
-  }
+  },
+);
 
-  if (as === 'legend') {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'Legends should be the first child in a fieldset, and this is not possible when including an action',
+HeaderAction.displayName = 'HeaderAction';
+
+/**
+ * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
+ * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
+ * @param {string} title - Required prop to set the title of the section header.
+ * @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
+ * @param {string} [className]
+ * @param {string} [testId]
+ *
+ * @see {@link Header } for further information.
+ * @see {@link https://storybook.wise.design/?path=/docs/typography-header--docs|Storybook Wise Design}
+ */
+const Header: FunctionComponent<HeaderProps> = React.forwardRef(
+  (
+    { as = 'h5', action, className, testId, title, level = 'group', ...props },
+    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
+  ) => {
+    const internalRef = useRef<HTMLLegendElement>(null);
+    const levelTypography =
+      level === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
+    const headerClasses = clsx('np-header', className, {
+      'np-header--section': level === 'section',
+      'np-header__title': !action || as === 'legend',
+    });
+
+    const commonProps = {
+      className: headerClasses,
+      'data-testid': testId,
+    };
+
+    useEffect(() => {
+      if (as === 'legend' && internalRef.current) {
+        const { parentElement } = internalRef.current;
+        if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
+          console.warn(
+            'Legends should be the first child in a fieldset, and this is not possible when including an action',
+          );
+        }
+      }
+    }, [as]);
+
+    if (!action || as === 'legend') {
+      return (
+        <Title ref={internalRef} as={as} type={levelTypography} {...commonProps} {...props}>
+          {title}
+        </Title>
+      );
+    }
+
+    const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();
+
+    return (
+      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
+        <Title as={as} type={levelTypography} className="np-header__title">
+          {title}
+        </Title>
+        <HeaderAction ref={actionRef} action={action} />
+      </div>
     );
-  }
-
-  return (
-    <div className={clsx('np-header', className)}>
-      <Title as={as} type={Typography.TITLE_GROUP} id={id} className="np-header__title">
-        {title}
-      </Title>
-      <HeaderAction action={action} />
-    </div>
-  );
-};
+  },
+);
+
+Header.displayName = 'Header';
 
 export default Header;

package/src/header/index.ts

@@ -1 +1,2 @@
 export { default } from './Header';
+export type { HeaderProps } from './Header';

package/src/index.ts

@@ -32,6 +32,7 @@ export type { DefinitionListProps, DefinitionListDefinition } from './definition
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
 export type { DividerProps } from './divider';
+export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';

package/src/listItem/ListItem.tests.story.tsx

@@ -1,7 +1,7 @@
-import ListItem, { List } from '.';
-import { Button } from '../index';
-import AvatarView from '../avatarView';
 import { FastFlag } from '@transferwise/icons';
+import Button from '../button';
+import AvatarView from '../avatarView';
+import ListItem, { List, type ListItemProps } from '.';
 
 export default {
   component: ListItem,
@@ -9,22 +9,27 @@ export default {
 };
 
 export const LongText = () => {
+  const sharedProps: Partial<ListItemProps> = {
+    media: <AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />,
+    action: (
+      <Button v2 size="sm" onClick={() => {}}>
+        Action
+      </Button>
+    ),
+  };
+
   return (
     <div style={{ width: '35rem' }}>
       <List>
         <ListItem
-          title="Wise"
+          {...sharedProps}
+          title="Default behaviour"
           value="This is a test of a long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
-          media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
-          action={
-            <Button v2 size="sm" onClick={() => {}}>
-              Action
-            </Button>
-          }
         />
 
         <ListItem
-          title="Wise"
+          {...sharedProps}
+          title="Wrapping the long word with a 'span.text-word-break'"
           value={
             <>
               {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
@@ -34,12 +39,12 @@ export const LongText = () => {
               {' word.'}
             </>
           }
-          media={<AvatarView profileName="Super Pepa" badge={{ icon: <FastFlag /> }} />}
-          action={
-            <Button v2 size="sm" onClick={() => {}}>
-              Action
-            </Button>
-          }
+        />
+
+        <ListItem
+          {...sharedProps}
+          title="Using '&amp;shy;' HTML entitty"
+          value="This is a test of a a very long word dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
         />
       </List>
     </div>

package/src/main.css

@@ -2472,11 +2472,15 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   border-bottom: 1px solid var(--color-border-neutral);
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
+  width: 100%;
   -moz-column-gap: 24px;
        column-gap: 24px;
   -moz-column-gap: var(--size-24);
        column-gap: var(--size-24);
 }
+.np-header--section {
+  border-bottom: none;
+}
 .np-header__title {
   color: #5d7079;
   color: var(--color-content-secondary);

package/src/summary/Summary.tests.story.tsx

@@ -1,7 +1,6 @@
 import { Home as HomeIcon } from '@transferwise/icons';
 import { Status } from '../common';
-import Summary from './Summary';
-import { InfoPresentation } from '../info';
+import Summary, { type SummaryProps } from '.';
 
 export default {
   component: Summary,
@@ -9,46 +8,47 @@ export default {
 };
 
 export const LongText = () => {
+  const sharedProps: Partial<SummaryProps> = {
+    action: {
+      text: 'Change address',
+      href: '#change-address',
+      'aria-label': ' Click here to change address',
+    },
+    as: 'li',
+    icon: <HomeIcon size={24} />,
+    status: Status.NOT_DONE,
+    info: {
+      title: 'Title',
+    },
+  };
   return (
-    <ul style={{ width: '30rem' }}>
+    <ul style={{ width: '34rem' }}>
       <Summary
-        action={{
-          text: 'Change address',
-          href: '#change-address',
-          'aria-label': ' Click here to change address',
-        }}
-        as="li"
-        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
-        icon={<HomeIcon size={24} />}
-        title="Summary title"
-        status={Status.NOT_DONE}
-        info={{
-          title: 'Title',
-        }}
+        title="Default behaviour"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme word."
+        {...sharedProps}
       />
 
       <Summary
-        action={{
-          text: 'Change address',
-          href: '#change-address',
-          'aria-label': ' Click here to change address',
-        }}
-        as="li"
+        title="Wrapping the long word with a 'span.text-word-break'"
         description={
           <>
-            {'This is a test of a a very long word dontbreakme dontbreakme dontbreakme '}
+            {
+              'This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme '
+            }
             <span className="text-word-break">
               breakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakmebreakme
             </span>
             {' word.'}
           </>
         }
-        icon={<HomeIcon size={24} />}
-        title="Summary title"
-        status={Status.NOT_DONE}
-        info={{
-          title: 'Title',
-        }}
+        {...sharedProps}
+      />
+
+      <Summary
+        title="Using '&amp;shy;' HTML entitty"
+        description="This is a test of a a very long word dontbreakme dontbreakme dontbreakme dontbreakme dontbreakme break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me&shy;break&shy;me word."
+        {...sharedProps}
       />
     </ul>
   );

package/src/title/Title.tsx

@@ -1,5 +1,5 @@
 import { clsx } from 'clsx';
-import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
+import { forwardRef, LabelHTMLAttributes, LiHTMLAttributes } from 'react';
 
 import { TitleTypes, Typography, Heading } from '../common';
 
@@ -25,15 +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 = 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;

package/src/upload/Upload.spec.tsx

@@ -184,7 +184,9 @@ describe('Upload Component', () => {
 
     await waitForUpload();
 
-    expect(await screen.findByText(/File type not supported. Please try again with a different file/i)).toBeInTheDocument();
+    expect(
+      await screen.findByText(/File type not supported. Please try again with a different file/i),
+    ).toBeInTheDocument();
   });
 
   test('should handle canceling the upload', async () => {

package/src/upload/steps/processingStep/processingStep.spec.tsx

@@ -27,7 +27,7 @@ describe('ProcessingStep', () => {
       expect(processing).toBeInTheDocument();
     });
   });
-  
+
   test('renders ProcessIndicator with default status', () => {
     expect(screen.getByText(PROCESSING_STEP_PROPS.psProcessingText)).toBeInTheDocument();
   });

package/src/upload/steps/uploadImageStep/uploadImageStep.spec.tsx

@@ -66,11 +66,11 @@ describe('uploadImageStep', () => {
     const errorIconLabel = 'Error icon label';
     const errorMessage = 'Maximum filesize is 2MB.';
     const { container } = render(
-      <UploadImageStep 
-        {...UPLOADIMAGE_STEP_PROPS} 
+      <UploadImageStep
+        {...UPLOADIMAGE_STEP_PROPS}
         errorMessage={errorMessage}
-        errorIconLabel={errorIconLabel} 
-      />
+        errorIconLabel={errorIconLabel}
+      />,
     );
 
     expect(screen.getByLabelText(errorIconLabel)).toBeInTheDocument();