@transferwise/components 0.0.0-experimental-5f3c456 → 0.0.0-experimental-b2dc1ea

package/src/header/Header.tsx

@@ -1,92 +1,158 @@
 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 React, { useEffect, useRef, FunctionComponent } from 'react';
 
 type ActionProps = AriaLabelProperty & {
   text: string;
 };
 
 type ButtonActionProps = ActionProps & ActionButtonProps;
-
 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';
+
+  /** Optional prop to specify classNames onto the Header */
+  className?: string;
+
+  /** Optional prop to specify the ID used for testing */
+  testId?: string;
+
+  /** Required prop to set the title of the Header. */
   title: string;
-};
 
-const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
-  const props = {
-    'aria-label': action['aria-label'],
-  };
+  /** Optional prop to specify the variant of the Header */
+  variant?: 'section' | 'group';
+}
+
+/**
+ * Renders a header action which can be either a button or a link.
+ *
+ * @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.
+ */
+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>
+      );
+    }
 
-  if ('href' in action) {
     return (
-      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
-        {action.text}
-      </Link>
+      <Button
+        ref={ref as React.Ref<HTMLButtonElement>}
+        className="np-header__button"
+        priority="tertiary"
+        size="sm"
+        aria-label={ariaLabel}
+        onClick={onClick}
+      >
+        {text}
+      </Button>
     );
-  }
-
-  return (
-    <Button
-      className="np-header__button"
-      priority="tertiary"
-      size="sm"
-      onClick={action.onClick}
-      {...props}
-    >
-      {action.text}
-    </Button>
-  );
-};
+  },
+);
 
 /**
+ * Header component
+ *
+ * The header component is used to render a section header with an optional action button or link.
+ * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.
  *
- * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
+ * @component
+ * @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'} [variant='group'] - Optional prop to specify the variant of the section header.
+ * @param {string} [className] - Optional prop to specify classNames onto the Header.
+ * @param {string} [testId] - Optional prop to specify the ID used for testing.
  *
+ * @example
+ * // Example usage:
+ * import Header from './Header';
+ *
+ * function App() {
+ *   return (
+ *     <Header title="Header" />
+ *   );
+ * }
  */
-export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
-  if (!action) {
-    return (
-      <Title
-        as={as}
-        type={Typography.TITLE_GROUP}
-        className={clsx('np-header', 'np-header__title', className)}
-      >
-        {title}
-      </Title>
-    );
-  }
+const Header: FunctionComponent<HeaderProps> = React.forwardRef(
+  (
+    { as = 'h5', action, className, testId, title, variant = 'group', ...props },
+    ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
+  ) => {
+    const internalRef = useRef<HTMLLegendElement>(null);
+    const variantTypography =
+      variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
+    const headerClasses = clsx('np-header', className, {
+      'np-header--section': variant === '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={variantTypography} {...commonProps} {...props}>
+          {title}
+        </Title>
+      );
+    }
 
-  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',
+    const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();
+
+    return (
+      <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>
+        <Title as={as} type={variantTypography} 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} className="np-header__title">
-        {title}
-      </Title>
-      <HeaderAction action={action} />
-    </div>
-  );
-};
+  },
+);
 
 export default Header;

package/src/header/index.ts

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

package/src/index.ts

@@ -28,6 +28,7 @@ export type { DecisionProps } from './decision/Decision';
 export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
 export type { DimmerProps } from './dimmer';
 export type { DrawerProps } from './drawer';
+export type { HeaderProps } from './header';
 export type { EmphasisProps } from './emphasis';
 export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';

package/src/link/Link.tsx

@@ -1,6 +1,6 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, forwardRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import { LinkLarge, LinkDefault } from '../common';
@@ -14,33 +14,35 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge
  *
  * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
  */
-const Link = ({
-  className,
-  children,
-  href,
-  target,
-  type,
-  'aria-label': ariaLabel,
-  onClick,
-  ...props
-}: Props) => {
-  const isBlank = target === '_blank';
+const Link = forwardRef<HTMLAnchorElement, Props>(
+  (
+    { className, children, href, target, type, 'aria-label': ariaLabel, onClick, ...props }: Props,
+    ref,
+  ) => {
+    const isBlank = target === '_blank';
 
-  const { formatMessage } = useIntl();
+    const { formatMessage } = useIntl();
 
-  return (
-    <a
-      href={href}
-      target={target}
-      className={clsx('np-link', type ? `np-text-${type}` : undefined, 'd-inline-flex', className)}
-      aria-label={ariaLabel}
-      rel={isBlank ? 'noreferrer' : undefined}
-      onClick={onClick}
-      {...props}
-    >
-      {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
-    </a>
-  );
-};
+    return (
+      <a
+        ref={ref}
+        href={href}
+        target={target}
+        className={clsx(
+          'np-link',
+          type ? `np-text-${type}` : undefined,
+          'd-inline-flex',
+          className,
+        )}
+        aria-label={ariaLabel}
+        rel={isBlank ? 'noreferrer' : undefined}
+        onClick={onClick}
+        {...props}
+      >
+        {children} {isBlank && <NavigateAwayIcon title={formatMessage(messages.opensInNewTab)} />}
+      </a>
+    );
+  },
+);
 
 export default Link;

package/src/main.css

@@ -2242,6 +2242,9 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   -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/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/typeahead/Typeahead.rtl.spec.tsx

@@ -25,30 +25,4 @@ describe('Typeahead', () => {
     );
     expect(screen.getAllByRole('group')[0]).toHaveAccessibleName(/^Tags/);
   });
-
-  describe('when no options are provided', () => {
-    it('does not render a dropdown when no options and no footer are provided', () => {
-      render(
-        <Field id="test" label="Tags">
-          <Typeahead id="test" name="test" options={[]} intl={intl} onChange={() => {}} />
-        </Field>,
-      );
-      expect(screen.queryByRole('menu')).not.toBeInTheDocument();
-    });
-    it('does render a dropdown when only a footer is provided', () => {
-      render(
-        <Field id="test" label="Tags">
-          <Typeahead
-            id="test"
-            name="test"
-            options={[]}
-            intl={intl}
-            footer={<p>hello</p>}
-            onChange={() => {}}
-          />
-        </Field>,
-      );
-      expect(screen.getByRole('menu')).toBeInTheDocument();
-    });
-  });
 });

package/src/typeahead/Typeahead.tsx

@@ -406,7 +406,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
         className={clsx('dropdown btn-group btn-block', { open: dropdownOpen })}
         id={`menu-${id}`}
       >
-        {(!!optionsToRender.length || footer) && (
+        {!!optionsToRender.length && (
           <ul className="dropdown-menu" role="menu">
             {optionsToRender.map((option, idx) => {
               const ref = React.createRef<HTMLLIElement>();
@@ -423,7 +423,7 @@ class Typeahead<T> extends Component<TypeaheadPropsWithInputAttributes<T>, Typea
                     this.onOptionSelected(event, option);
                   }}
                 />
-              );
+              )
             })}
             {footer}
           </ul>

package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -3,15 +3,14 @@ import { shallow } from 'enzyme';
 import { fakeEvent } from '../../common/fakeEvents';
 
 import TypeaheadOption from './TypeaheadOption';
-import Highlight from '../util/highlight';
 
 describe('Typeahead Option', () => {
   let props;
   let component;
 
-  const labelHighlight = () => component.find(Highlight);
+  const labelSpan = () => component.find('span:first-child');
   const noteSpan = () => component.find('.np-text-body-default.m-l-1');
-  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
+  const secondaryTextSpan = () => component.find('.np-text-body-default.text-ellipsis');
   const dropdownItem = () => component.find('.dropdown-item');
 
   beforeEach(() => {
@@ -27,7 +26,7 @@ describe('Typeahead Option', () => {
   it('renders a label', () => {
     const label = 'test';
     component.setProps({ option: { label } });
-    expect(labelHighlight().dive().text()).toStrictEqual(label);
+    expect(labelSpan().text()).toStrictEqual(label);
   });
 
   it('renders a note', () => {
@@ -41,7 +40,7 @@ describe('Typeahead Option', () => {
     const label = 'test';
     const secondary = 'test note';
     component.setProps({ option: { label, secondary } });
-    expect(secondaryTextHighlight().dive().text()).toStrictEqual(secondary);
+    expect(secondaryTextSpan().text()).toStrictEqual(secondary);
   });
 
   it('highlights when selected', () => {

package/src/typeahead/typeaheadOption/TypeaheadOption.tsx

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
 import { TypeaheadOption } from '../Typeahead';
-import Highlight from '../util/highlight';
+import highlight from '../util/highlight';
 
 export type TypeaheadOptionProps<T> = {
   option: TypeaheadOption<T>;
@@ -27,14 +27,10 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       })}
     >
       <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
-        <Highlight value={label} query={query} />
+        <span>{highlight(label, query)}</span>
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
-          <Highlight
-            className="np-text-body-default text-ellipsis"
-            value={secondary}
-            query={query}
-          />
+          <span className="np-text-body-default text-ellipsis">{highlight(secondary, query)}</span>
         )}
       </a>
     </li>

package/src/typeahead/util/highlight.spec.js

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 
-import Highlight from './highlight';
+import highlight from './highlight';
 
 describe('Typeahead input', () => {
   const highlighted = (node) => node.find('strong');
@@ -9,7 +9,7 @@ describe('Typeahead input', () => {
   it('highlights part of label that matches the query', () => {
     const query = 'test';
     const label = `this is a ${query} label`;
-    const result = mount(<Highlight value={label} query={query} />);
+    const result = mount(highlight(label, query));
 
     expect(highlighted(result).text()).toStrictEqual(query);
 
@@ -19,15 +19,15 @@ describe('Typeahead input', () => {
   it('does not change text if query is not present in it', () => {
     const query = 'test';
     const label = `this is a label`;
-    const result = mount(<Highlight value={label} query={query} />);
+    const result = highlight(label, query);
 
-    expect(result.text()).toBe(label);
+    expect(result).toBe(label);
   });
 
   it('highlights whole label that matches the query', () => {
     const query = 'test';
     const label = query;
-    const result = mount(<Highlight value={label} query={query} />);
+    const result = mount(highlight(label, query));
 
     expect(highlighted(result).text()).toStrictEqual(query);
   });

package/src/typeahead/util/highlight.tsx

@@ -1,22 +1,14 @@
-export default function Highlight({
-  className,
-  value,
-  query,
-}: {
-  className?: string;
-  value: string;
-  query: string;
-}) {
+export default function highlight(value: string, query: string) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
       return (
-        <span className={className}>
+        <>
           {value.slice(0, Math.max(0, highlightStart))}
           <strong>{value.slice(highlightStart, highlightEnd)}</strong>
           {value.slice(Math.max(0, highlightEnd))}
-        </span>
+        </>
       );
     }
   }