@transferwise/components 46.30.2 → 46.32.0

package/src/field/Field.tsx

@@ -0,0 +1,70 @@
+import { useId } from '@radix-ui/react-id';
+import classNames from 'classnames';
+
+import { Sentiment } from '../common';
+import InlineAlert from '../inlineAlert/InlineAlert';
+import {
+  FieldLabelIdContextProvider,
+  InputDescribedByProvider,
+  InputIdContextProvider,
+  InputInvalidProvider,
+} from '../inputs/contexts';
+import { Label } from '../label/Label';
+
+export type FieldProps = {
+  /** `null` disables auto-generating the `id` attribute, falling back to nesting-based label association over setting `htmlFor` explicitly. */
+  id?: string | null;
+  label: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const Field = ({ id, label, hint, error, className, children }: FieldProps) => {
+  const hasError = Boolean(error);
+  const hasHint = Boolean(hint) && !hasError;
+
+  const labelId = useId();
+
+  const fallbackInputId = useId(); // TODO: Use `React.useId()` when react>=18
+  const inputId = id !== null ? id ?? fallbackInputId : undefined;
+
+  const descriptionId = useId(); // TODO: Use `React.useId()` when react>=18
+
+  return (
+    <FieldLabelIdContextProvider value={labelId}>
+      <InputIdContextProvider value={inputId}>
+        <InputDescribedByProvider value={hasError || hasHint ? descriptionId : undefined}>
+          <InputInvalidProvider value={hasError}>
+            <div
+              className={classNames(
+                'form-group d-block',
+                {
+                  'has-error': hasError,
+                  'has-info': hasHint,
+                },
+                className,
+              )}
+            >
+              <Label id={labelId} htmlFor={inputId}>
+                {label}
+                {children}
+              </Label>
+              {hasHint && (
+                <InlineAlert type={Sentiment.NEUTRAL} id={descriptionId}>
+                  {hint}
+                </InlineAlert>
+              )}
+              {hasError && (
+                <InlineAlert type={Sentiment.NEGATIVE} id={descriptionId}>
+                  {error}
+                </InlineAlert>
+              )}
+            </div>
+          </InputInvalidProvider>
+        </InputDescribedByProvider>
+      </InputIdContextProvider>
+    </FieldLabelIdContextProvider>
+  );
+};

package/src/index.ts

@@ -6,6 +6,7 @@ export type { ActionOptionProps } from './actionOption';
 export type { AlertAction, AlertProps, AlertType } from './alert';
 export type { AvatarProps } from './avatar';
 export type { BadgeProps } from './badge';
+export type { CarouselProps } from './carousel';
 export type { CircularButtonProps } from './circularButton';
 export type {
   BodyTypes,
@@ -21,6 +22,7 @@ export type { DateLookupProps } from './dateLookup';
 export type { DecisionProps } from './decision/Decision';
 export type { DimmerProps } from './dimmer';
 export type { EmphasisProps } from './emphasis';
+export type { FieldProps } from './field/Field';
 export type { InfoProps } from './info';
 export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputProps } from './inputs/Input';
@@ -37,6 +39,7 @@ export type {
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
 export type { InstructionsListProps } from './instructionsList';
+export type { LabelProps } from './label/Label';
 export type { LoaderProps } from './loader';
 export type { MarkdownProps } from './markdown';
 export type { ModalProps } from './modal';
@@ -82,6 +85,7 @@ export { default as AvatarWrapper } from './avatarWrapper';
 export { default as Badge } from './badge';
 export { default as Body } from './body';
 export { default as Button } from './button';
+export { default as Carousel } from './carousel';
 export { default as Card } from './card';
 export { default as Checkbox } from './checkbox';
 export { default as CheckboxButton } from './checkboxButton';
@@ -103,6 +107,7 @@ export { default as Drawer } from './drawer';
 export { default as DropFade } from './dropFade';
 export { default as Emphasis } from './emphasis';
 export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
+export { Field } from './field/Field';
 export { default as Header } from './header';
 export { default as Image } from './image';
 export { default as Info } from './info';
@@ -118,6 +123,7 @@ export {
 } from './inputs/SelectInput';
 export { TextArea } from './inputs/TextArea';
 export { default as InstructionsList } from './instructionsList';
+export { Label } from './label/Label';
 export { default as Link } from './link';
 export { default as ListItem } from './listItem';
 export { default as Loader } from './loader';

package/src/inputs/Input.tsx

@@ -3,9 +3,9 @@ import { forwardRef } from 'react';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { Merge } from '../utils';
-
+import { inputClassNameBase } from './_common';
+import { useInputAttributes } from './contexts';
 import { useInputPaddings } from './InputGroup';
-import { formControlClassNameBase } from './_common';
 
 export interface InputProps
   extends Merge<
@@ -21,17 +21,19 @@ export const Input = forwardRef(function Input(
   { size = 'auto', shape = 'rectangle', className, ...restProps }: InputProps,
   reference: React.ForwardedRef<HTMLInputElement>,
 ) {
+  const inputAttributes = useInputAttributes();
   const inputPaddings = useInputPaddings();
 
   return (
     <input
       ref={reference}
-      className={classNames(className, formControlClassNameBase({ size }), 'np-input', {
+      className={classNames(className, inputClassNameBase({ size }), 'np-input', {
         'np-input--shape-rectangle': shape === 'rectangle',
         'np-input--shape-pill': shape === 'pill',
       })}
       // eslint-disable-next-line react/forbid-dom-props
       style={inputPaddings}
+      {...inputAttributes}
       {...restProps}
     />
   );

package/src/inputs/SelectInput.spec.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
 import { SelectInput } from './SelectInput';
+import { Field } from '../field/Field';
 
 mockMatchMedia();
 mockResizeObserver();
@@ -227,4 +228,13 @@ describe('SelectInput', () => {
     const trigger = screen.getAllByRole('button')[0];
     expect(trigger).toHaveAttribute('id', 'custom');
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Currency">
+        <SelectInput items={[{ type: 'option', value: 'USD' }]} value="USD" />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Currency')).toHaveTextContent('USD');
+  });
 });

package/src/inputs/SelectInput.tsx

@@ -13,12 +13,13 @@ import { Breakpoint } from '../common/propsValues/breakpoint';
 import dateTriggerMessages from '../dateLookup/dateTrigger/DateTrigger.messages';
 import { Merge } from '../utils';
 
-import { InputGroup } from './InputGroup';
-import { SearchInput } from './SearchInput';
-import messages from './SelectInput.messages';
 import { BottomSheet } from './_BottomSheet';
 import { ButtonInput } from './_ButtonInput';
 import { Popover } from './_Popover';
+import { useInputAttributes } from './contexts';
+import { InputGroup } from './InputGroup';
+import { SearchInput } from './SearchInput';
+import messages from './SelectInput.messages';
 
 function searchableString(value: string) {
   return value.trim().replace(/\s+/gu, ' ').normalize('NFKC').toLowerCase();
@@ -221,7 +222,7 @@ function SelectInputClearButton({ className, onClick }: SelectInputClearButtonPr
 const noop = () => {};
 
 export function SelectInput<T = string, M extends boolean = false>({
-  id,
+  id: idProp,
   name,
   multiple,
   placeholder,
@@ -242,6 +243,9 @@ export function SelectInput<T = string, M extends boolean = false>({
   onClose,
   onClear,
 }: SelectInputProps<T, M>) {
+  const inputAttributes = useInputAttributes();
+  const id = idProp ?? inputAttributes.id;
+
   const [open, setOpen] = useState(false);
 
   const initialized = useRef(false);
@@ -308,6 +312,7 @@ export function SelectInput<T = string, M extends boolean = false>({
                     ref(node);
                     triggerRef.current = node;
                   },
+                  ...inputAttributes,
                   id,
                   ...mergeProps(
                     {

package/src/inputs/TextArea.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 
 import { Merge } from '../utils';
-
-import { formControlClassNameBase } from './_common';
+import { inputClassNameBase } from './_common';
+import { useInputAttributes } from './contexts';
 
 export interface TextAreaProps
   extends Merge<
@@ -17,10 +17,13 @@ export const TextArea = forwardRef(function TextArea(
   { className, ...restProps }: TextAreaProps,
   reference: React.ForwardedRef<HTMLTextAreaElement>,
 ) {
+  const inputAttributes = useInputAttributes();
+
   return (
     <textarea
       ref={reference}
-      className={classNames(className, formControlClassNameBase(), 'np-text-area')}
+      className={classNames(className, inputClassNameBase(), 'np-text-area')}
+      {...inputAttributes}
       {...restProps}
     />
   );

package/src/inputs/_ButtonInput.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 
 import { useInputPaddings } from './InputGroup';
-import { formControlClassNameBase } from './_common';
+import { inputClassNameBase } from './_common';
 
 export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
   size?: 'sm' | 'md' | 'lg';
@@ -18,7 +18,7 @@ export const ButtonInput = forwardRef(function ButtonInput(
     <button
       ref={ref}
       type="button"
-      className={classNames(className, formControlClassNameBase({ size }), 'np-button-input')}
+      className={classNames(className, inputClassNameBase({ size }), 'np-button-input')}
       // eslint-disable-next-line react/forbid-dom-props
       style={{ ...inputPaddings, ...style }}
       {...restProps}

package/src/inputs/_common.ts

@@ -2,11 +2,11 @@ import classNames from 'classnames';
 
 import { SizeLarge, SizeMedium, SizeSmall } from '../common';
 
-export type FormControlPropsBase = {
+export type InputPropsBase = {
   size?: 'auto' | SizeSmall | SizeMedium | SizeLarge;
 };
 
-export function formControlClassNameBase({ size = 'auto' }: FormControlPropsBase = {}) {
+export function inputClassNameBase({ size = 'auto' }: InputPropsBase = {}) {
   return classNames(
     'form-control', // TODO: Deprecate
     'np-form-control',

package/src/inputs/contexts.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext } from 'react';
+
+const FieldLabelIdContext = createContext<string | undefined>(undefined);
+export const FieldLabelIdContextProvider = FieldLabelIdContext.Provider;
+
+const InputIdContext = createContext<string | undefined>(undefined);
+export const InputIdContextProvider = InputIdContext.Provider;
+
+const InputDescribedByContext = createContext<string | undefined>(undefined);
+export const InputDescribedByProvider = InputDescribedByContext.Provider;
+
+const InputInvalidContext = createContext<boolean | undefined>(undefined);
+export const InputInvalidProvider = InputInvalidContext.Provider;
+
+interface UseInputAttributesArgs {
+  /** Set this to `true` if the underlying element is not directly [labelable as per the HTML specification](https://html.spec.whatwg.org/multipage/forms.html#category-label). */
+  nonLabelable?: boolean;
+}
+
+export function useInputAttributes({ nonLabelable }: UseInputAttributesArgs = {}) {
+  const labelId = useContext(FieldLabelIdContext);
+  return {
+    id: useContext(InputIdContext),
+    'aria-labelledby': nonLabelable ? labelId : undefined,
+    'aria-describedby': useContext(InputDescribedByContext),
+    'aria-invalid': useContext(InputInvalidContext),
+  } satisfies React.HTMLAttributes<HTMLElement>;
+}
+
+export interface WithInputAttributesProps {
+  inputAttributes: ReturnType<typeof useInputAttributes>;
+}
+
+export function withInputAttributes<T extends Partial<WithInputAttributesProps>>(
+  Component: React.ComponentType<T>,
+  args?: UseInputAttributesArgs,
+) {
+  function ComponentWithInputAttributes(props: Omit<T, keyof WithInputAttributesProps>) {
+    return <Component inputAttributes={useInputAttributes(args)} {...(props as T)} />;
+  }
+
+  ComponentWithInputAttributes.displayName = `withInputAttributes(${Component.displayName || Component.name || 'Component'})`;
+
+  return ComponentWithInputAttributes;
+}

package/src/label/Label.spec.tsx

@@ -0,0 +1,26 @@
+import { Input } from '../inputs/Input';
+import { render, screen } from '../test-utils';
+import { Label } from './Label';
+
+describe('Label', () => {
+  it('renders string labels', () => {
+    render(
+      <Label>
+        Phone number
+        <Input readOnly />
+      </Label>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+  });
+  it('renders node type labels', () => {
+    render(
+      <Label>
+        <span>Phone number</span>
+        <Input readOnly />
+      </Label>,
+    );
+
+    expect(screen.getByLabelText('Phone number')).toBeInTheDocument();
+  });
+});

package/src/label/Label.story.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+import Info from '../info/Info';
+import { Input } from '../inputs/Input';
+import { Label } from './Label';
+
+export default {
+  component: Label,
+  title: 'Label',
+};
+
+export const Basic = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Label>
+      Phone number
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};
+
+export const WithInfo = () => {
+  const [value, setValue] = useState<string | undefined>('This is some text');
+  return (
+    <Label>
+      <span className="d-flex">
+        Phone number{' '}
+        <Info
+          content="This is some help in popover"
+          aria-label="The aria label"
+          className="m-l-1"
+        />
+      </span>
+      <Input value={value} id="input" onChange={({ target }) => setValue(target.value)} />
+    </Label>
+  );
+};

package/src/label/Label.tsx

@@ -0,0 +1,20 @@
+import classNames from 'classnames';
+
+export type LabelProps = {
+  id?: string;
+  htmlFor?: string;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const Label = ({ id, htmlFor, className, children }: LabelProps) => {
+  return (
+    <label
+      id={id}
+      htmlFor={htmlFor}
+      className={classNames('control-label d-flex flex-column gap-y-1 m-b-0', className)}
+    >
+      {children}
+    </label>
+  );
+};

package/src/main.css

@@ -643,6 +643,141 @@ div.critical-comms .critical-comms-body {
   border-radius: 16px 16px 0 0;
   border-radius: var(--radius-medium) var(--radius-medium) 0 0;
 }
+.carousel-wrapper {
+  overflow: hidden;
+}
+.carousel {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: 16px;
+  gap: var(--size-16);
+  padding: 8px;
+  padding: var(--size-8);
+  margin: 8px;
+  margin: var(--size-8);
+}
+@media (max-width: 767px) {
+  .carousel {
+    gap: 8px;
+    gap: var(--size-8);
+  }
+}
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+}
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus,
+.carousel__card:focus-within {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  transition: none !important;
+  box-shadow: none !important;
+}
+.carousel__card {
+  display: block;
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s !important;
+}
+@media (min-width: 1200px) {
+  .carousel__card {
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
+  }
+}
+@media (max-width: 1199px) {
+  .carousel__card {
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
+  }
+}
+@media (max-width: 767px) {
+  .carousel__card {
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
+    scroll-snap-stop: always;
+  }
+}
+.carousel__card:focus,
+.carousel__card:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
+  outline-offset: var(--ring-outline-offset) !important;
+}
+.carousel__card:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card:focus {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card-content {
+  height: 100%;
+  font-weight: normal;
+  padding: 24px;
+  padding: var(--size-24);
+}
+.carousel__scroll-button {
+  width: 32px;
+  width: var(--size-32);
+  height: 32px;
+  height: var(--size-32);
+  align-items: center;
+  justify-content: center;
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.carousel__indicator {
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
+  border-radius: var(--size-8);
+  background: #c9cbce;
+  background: var(--color-interactive-secondary);
+  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: all 0.1s;
+}
+.carousel__indicator:hover {
+  width: 16px;
+  width: var(--size-16);
+}
+.carousel__indicator--selected,
+.carousel__indicator--selected:hover {
+  background: var(--color-interactive-primary);
+  width: 24px;
+  width: var(--size-24);
+}
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
   width: 24px;

package/src/main.less

@@ -5,6 +5,7 @@
 @import "./badge/Badge.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
+@import "./carousel/Carousel.less";
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -1,29 +1,23 @@
-import { select, boolean, object } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import PhoneNumberInput from './PhoneNumberInput';
 
-export default {
+const meta = {
   component: PhoneNumberInput,
   title: 'Forms/PhoneNumberInput',
-};
+  tags: ['autodocs'],
+} satisfies Meta<typeof PhoneNumberInput>;
 
-export const Basic = () => {
-  const disabled = boolean('disabled', false);
-  const required = boolean('required', false);
-  const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const selectProps = object('selectProps', {
-    className: 'custom-class',
-  });
+export default meta;
 
-  return (
-    <PhoneNumberInput
-      disabled={disabled}
-      required={required}
-      size={size}
-      selectProps={selectProps}
-      searchPlaceholder="searchPlaceholder"
-      placeholder="placeholder"
-      onChange={console.log}
-    />
-  );
-};
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    searchPlaceholder: 'searchPlaceholder',
+    placeholder: 'placeholder',
+    selectProps: {
+      className: 'custom-class',
+    },
+  },
+} satisfies Story;

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -28,7 +28,7 @@ export interface PhoneNumberInputProps {
   initialValue?: string;
   onChange: (value: string | null, prefix: string) => void;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: () => void;
   countryCode?: string;
   searchPlaceholder?: string;
   size?: SizeSmall | SizeMedium | SizeLarge;
@@ -73,6 +73,13 @@ const PhoneNumberInput = ({
   });
   const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
 
+  const [suffixDirty, setSuffixDirty] = useState(false);
+  useEffect(() => {
+    if (internalValue.suffix) {
+      setSuffixDirty(true);
+    }
+  }, [internalValue.suffix]);
+
   const countriesByPrefix = useMemo(
     () =>
       groupCountriesByPrefix(
@@ -168,6 +175,11 @@ const PhoneNumberInput = ({
             const country = prefix != null ? findCountryByPrefix(prefix) : null;
             setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
           }}
+          onClose={() => {
+            if (suffixDirty) {
+              onBlur?.();
+            }
+          }}
           {...selectProps}
         />
       </div>
@@ -186,7 +198,7 @@ const PhoneNumberInput = ({
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}
-            onBlur={onBlur}
+            onBlur={() => onBlur?.()}
           />
         </div>
       </div>

package/src/promoCard/PromoCard.story.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { StarFill } from '@transferwise/icons';
 
-import PromoCard, { PromoCardCheckedProps, PromoCardLinkProps } from './PromoCard';
+import PromoCard, { type PromoCardCheckedProps, type PromoCardLinkProps } from './PromoCard';
 
 const meta: Meta<typeof PromoCard> = {
   component: PromoCard,