@transferwise/components 46.70.2 → 46.70.4

package/src/dateLookup/dateTrigger/DateTrigger.tsx

@@ -11,6 +11,7 @@ import { OverlayIdContext } from '../../provider/overlay/OverlayIdProvider';
 import Body from '../../body';
 
 interface DateTriggerProps {
+  ariaLabelledBy?: string;
   selectedDate: Date | null;
   size: SizeSmall | SizeMedium | SizeLarge;
   placeholder: string;
@@ -28,6 +29,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
   label,
   monthFormat,
   disabled,
+  ariaLabelledBy,
   onClick,
   onClear,
 }) => {
@@ -41,6 +43,7 @@ const DateTrigger: React.FC<DateTriggerProps> = ({
         aria-haspopup="dialog"
         aria-expanded={overlayId != null}
         aria-controls={overlayId}
+        aria-labelledby={ariaLabelledBy}
         className={`btn btn-${size} btn-input np-date-trigger`}
         disabled={disabled}
         type="button"

package/src/main.css

@@ -5449,6 +5449,12 @@ html:not([dir="rtl"]) .np-navigation-option {
 .tw-droppable-sm {
   min-height: 245px;
 }
+.tw-droppable-lg .btn:focus-visible,
+.tw-droppable-md .btn:focus-visible,
+.tw-droppable-sm .btn:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);

package/src/typeahead/Typeahead.rtl.spec.tsx

@@ -25,4 +25,30 @@ 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 && (
+        {(!!optionsToRender.length || footer) && (
           <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,14 +3,15 @@ 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 labelSpan = () => component.find('span:first-child');
+  const labelHighlight = () => component.find(Highlight);
   const noteSpan = () => component.find('.np-text-body-default.m-l-1');
-  const secondaryTextSpan = () => component.find('.np-text-body-default.text-ellipsis');
+  const secondaryTextHighlight = () => component.find('.np-text-body-default.text-ellipsis');
   const dropdownItem = () => component.find('.dropdown-item');
 
   beforeEach(() => {
@@ -26,7 +27,7 @@ describe('Typeahead Option', () => {
   it('renders a label', () => {
     const label = 'test';
     component.setProps({ option: { label } });
-    expect(labelSpan().text()).toStrictEqual(label);
+    expect(labelHighlight().dive().text()).toStrictEqual(label);
   });
 
   it('renders a note', () => {
@@ -40,7 +41,7 @@ describe('Typeahead Option', () => {
     const label = 'test';
     const secondary = 'test note';
     component.setProps({ option: { label, secondary } });
-    expect(secondaryTextSpan().text()).toStrictEqual(secondary);
+    expect(secondaryTextHighlight().dive().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,10 +27,14 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
       })}
     >
       <a className="dropdown-item" href="#" tabIndex={0} onClick={onClick}>
-        <span>{highlight(label, query)}</span>
+        <Highlight value={label} query={query} />
         {note && <span className="np-text-body-default m-l-1">{note}</span>}
         {secondary && (
-          <span className="np-text-body-default text-ellipsis">{highlight(secondary, query)}</span>
+          <Highlight
+            className="np-text-body-default text-ellipsis"
+            value={secondary}
+            query={query}
+          />
         )}
       </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(label, query));
+    const result = mount(<Highlight value={label} query={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 = highlight(label, query);
+    const result = mount(<Highlight value={label} query={query} />);
 
-    expect(result).toBe(label);
+    expect(result.text()).toBe(label);
   });
 
   it('highlights whole label that matches the query', () => {
     const query = 'test';
     const label = query;
-    const result = mount(highlight(label, query));
+    const result = mount(<Highlight value={label} query={query} />);
 
     expect(highlighted(result).text()).toStrictEqual(query);
   });

package/src/typeahead/util/highlight.tsx

@@ -1,14 +1,22 @@
-export default function highlight(value: string, query: string) {
+export default function Highlight({
+  className,
+  value,
+  query,
+}: {
+  className?: string;
+  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>
       );
     }
   }

package/src/upload/Upload.css

@@ -13,6 +13,12 @@
 .tw-droppable-sm {
   min-height: 245px;
 }
+.tw-droppable-lg .btn:focus-visible,
+.tw-droppable-md .btn:focus-visible,
+.tw-droppable-sm .btn:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);

package/src/upload/Upload.less

@@ -1,3 +1,5 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
 // This css is a quick workaround on the height of the upload container collapsing if UploadImageStep is
 // not rendered.
 .tw-droppable-lg {
@@ -20,6 +22,12 @@
   min-height: 245px;
 }
 
+.tw-droppable-lg, .tw-droppable-md, .tw-droppable-sm {
+  .btn:focus-visible {
+    .ring();
+  }
+}
+
 .upload-error-message {
   margin-top: var(--padding-medium);
   border-top: 1px solid var(--color-border-neutral);

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

@@ -68,6 +68,7 @@ export default class UploadImageStep extends PureComponent<UploadImageStepProps>
             className={`btn btn-primary btn-md ${usDisabled ? 'disabled' : ''}`}
             role="button"
             aria-disabled={usDisabled}
+            tabIndex={0}
           >
             {usButtonText ? (
               <span>{usButtonText}</span>