@transferwise/components 0.0.0-experimental-1ea2b9d → 0.0.0-experimental-9cf367b

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>

package/src/utilities/deprecatedProperty/{deprecatedProperty.ts → deprecatedProperty.js}

@@ -1,22 +1,6 @@
 import { logActionRequired } from '../logActionRequired';
 
-type DeprecatedMessageType = {
-  component: string;
-  propName: string;
-  message: string;
-  expiryDate?: Date;
-};
-
-type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
-
-type DeprecatedOptionsType = {
-  component: string;
-  message?: string;
-  newProp?: string | null;
-  expiryDate?: Date;
-};
-
-const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
+const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -37,11 +21,8 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }: Depreca
 };
 
 const deprecated =
-  (
-    validator: ValidatorType,
-    { component, message = '', newProp: newProperty = null, expiryDate }: DeprecatedOptionsType,
-  ) =>
-  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
+  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
+  (props, propertyName, ...rest) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
     if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
@@ -54,8 +35,6 @@ const deprecated =
         }),
       );
     }
-
-    // Fix: include `componentName` when calling the validator
     return validator(props, propertyName, ...rest);
   };
 

package/src/utilities/{logActionRequired.ts → logActionRequired.js}

@@ -1,11 +1,11 @@
-export function logActionRequired(message: string) {
+export function logActionRequired(message) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message: string, conditional: boolean) {
+export function logActionRequiredIf(message, conditional) {
   if (conditional) {
     logActionRequired(message);
   }

package/build/types/common/fakeEvents.d.ts

@@ -1,23 +0,0 @@
-export declare const fakeEvent: () => {
-    nativeEvent: {
-        stopImmediatePropagation(): void;
-    };
-    stopPropagation(): void;
-    preventDefault(): void;
-};
-export declare const fakeKeyDownEventForKey: (key: string) => {
-    key: string;
-    nativeEvent: {
-        stopImmediatePropagation(): void;
-    };
-    stopPropagation(): void;
-    preventDefault(): void;
-};
-export declare const fakeKeyDownEvent: (eventAttribute?: {}) => {
-    nativeEvent: {
-        stopImmediatePropagation(): void;
-    };
-    stopPropagation(): void;
-    preventDefault(): void;
-};
-//# sourceMappingURL=fakeEvents.d.ts.map

package/build/types/common/fakeEvents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fakeEvents.d.ts","sourceRoot":"","sources":["../../../src/common/fakeEvents.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS;;;;;;CAIpB,CAAC;AAEH,eAAO,MAAM,sBAAsB,QAAS,MAAM;;;;;;;CAGhD,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;CAG3B,CAAC"}

package/build/types/common/requirements.d.ts

@@ -1,47 +0,0 @@
-import { PrimitiveType } from 'react-intl';
-type ValidationMessages = Record<string, string>;
-type Value = {
-    label?: string;
-    title?: string;
-    name?: string;
-    value?: PrimitiveType;
-    code?: string | number;
-    key?: PrimitiveType;
-};
-type Field = {
-    name?: string;
-    title?: string;
-    type?: string;
-    control?: string;
-    format?: string;
-    pattern?: string;
-    minimum?: number;
-    maximum?: number;
-    max?: number;
-    min?: number;
-    width?: string;
-    example?: string;
-    placeholder?: string;
-    info?: string;
-    tooltip?: string;
-    help?: {
-        message: string;
-    };
-    valuesAllowed?: Value[];
-    values?: Value[];
-    default?: Value;
-    value?: Value;
-    validationMessages?: ValidationMessages;
-    validationRegexp?: string;
-    properties: Record<string, Field>;
-    hidden?: boolean;
-    key?: string;
-    fields?: Field[];
-    groups?: Field[];
-    [otherKey: string]: any;
-};
-type FieldMapType = Record<string, Field>;
-declare const prepFields: (fields: Field[], model?: any, validationMessages?: any) => FieldMapType;
-declare const getControlType: (field: Field) => string;
-export { prepFields, getControlType };
-//# sourceMappingURL=requirements.d.ts.map

package/build/types/common/requirements.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"requirements.d.ts","sourceRoot":"","sources":["../../../src/common/requirements.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,KAAK,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;IACjB,CAAC,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC;CACzB,CAAC;AAEF,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAmD1C,QAAA,MAAM,UAAU,WAAY,KAAK,EAAE,UAAU,GAAG,uBAAuB,GAAG,KAAG,YAc5E,CAAC;AAkUF,QAAA,MAAM,cAAc,UAAW,KAAK,WAsBnC,CAAC;AAqDF,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -1,78 +0,0 @@
-import { userEvent, within, fn } from '@storybook/test';
-
-import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
-import { Field, FieldProps } from '../field/Field';
-import { Meta, type StoryObj } from '@storybook/react';
-
-type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
-
-const meta = {
-  title: 'Forms/InputWithDisplayFormat',
-  component: InputWithDisplayFormat,
-  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
-    return (
-      <Field label={label} id={args.id}>
-        <InputWithDisplayFormat id={args.id} {...args} />
-      </Field>
-    );
-  },
-  args: {
-    onFocus: fn(),
-    onBlur: fn(),
-    onChange: fn(),
-  },
-} satisfies Meta<typeof InputWithDisplayFormat>;
-export default meta;
-
-export const Basic: Story = {
-  args: {
-    label: 'Sort Code',
-    placeholder: '**-**-**',
-    displayPattern: '**-**-**',
-  },
-};
-
-export const CardNumber: Story = {
-  args: {
-    label: 'Card Number',
-    placeholder: '**** **** **** **** ***',
-    displayPattern: '**** **** **** **** ***',
-  },
-};
-
-export const CVC: Story = {
-  args: {
-    label: 'CVC',
-    placeholder: '***',
-    displayPattern: '***',
-    value: '',
-  },
-};
-
-export const ExpiryDate: Story = {
-  args: {
-    label: 'Expiry Date',
-    placeholder: '** / **',
-    displayPattern: '** / **',
-  },
-};
-
-export const SecurityPin: Story = {
-  args: {
-    label: 'Security Pin',
-    placeholder: '*-*-*-*-*-*',
-    displayPattern: '*-*-*-*-*-*',
-  },
-};
-
-export const SecurityPinPlay: Story = {
-  args: {
-    label: 'Security Pin Play',
-    placeholder: '*-*-*-*-*-*',
-    displayPattern: '*-*-*-*-*-*',
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-  },
-};