@transferwise/components 0.0.0-experimental-fb37b6d → 0.0.0-experimental-ad7e2f8

package/src/link/Link.tsx

@@ -1,6 +1,6 @@
 import { NavigateAway as NavigateAwayIcon } from '@transferwise/icons';
 import { clsx } from 'clsx';
-import { AnchorHTMLAttributes, forwardRef } from 'react';
+import { AnchorHTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
 
 import { LinkLarge, LinkDefault } from '../common';
@@ -14,35 +14,33 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & { type?: LinkLarge
  *
  * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
  */
-const Link = forwardRef<HTMLAnchorElement, Props>(
-  (
-    { className, children, href, target, type, 'aria-label': ariaLabel, onClick, ...props }: Props,
-    ref,
-  ) => {
-    const isBlank = target === '_blank';
+const Link = ({
+  className,
+  children,
+  href,
+  target,
+  type,
+  'aria-label': ariaLabel,
+  onClick,
+  ...props
+}: Props) => {
+  const isBlank = target === '_blank';
 
-    const { formatMessage } = useIntl();
+  const { formatMessage } = useIntl();
 
-    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>
-    );
-  },
-);
+  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>
+  );
+};
 
 export default Link;

package/src/main.css

@@ -2242,9 +2242,6 @@ 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/typeahead/typeaheadOption/TypeaheadOption.spec.js

@@ -8,7 +8,7 @@ describe('Typeahead Option', () => {
   let props;
   let component;
 
-  const labelSpan = () => component.find('span:first-child');
+  const labelSpan = () => component.find('span > span');
   const noteSpan = () => component.find('.np-text-body-default.m-l-1');
   const secondaryTextSpan = () => component.find('.np-text-body-default.text-ellipsis');
   const dropdownItem = () => component.find('.dropdown-item');

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

@@ -21,7 +21,7 @@ describe('Typeahead input', () => {
     const label = `this is a label`;
     const result = highlight(label, query);
 
-    expect(result).toBe(label);
+    expect(result).toStrictEqual(<span>{label}</span>);
   });
 
   it('highlights whole label that matches the query', () => {

package/src/typeahead/util/highlight.tsx

@@ -4,13 +4,13 @@ export default function highlight(value: string, query: string) {
     const highlightEnd = highlightStart + query.trim().length;
     if (highlightStart !== -1) {
       return (
-        <>
+        <span>
           {value.slice(0, Math.max(0, highlightStart))}
           <strong>{value.slice(highlightStart, highlightEnd)}</strong>
           {value.slice(Math.max(0, highlightEnd))}
-        </>
+        </span>
       );
     }
   }
-  return value;
+  return <span>{value}</span>;
 }