@transferwise/components 0.0.0-experimental-ef26b66 → 0.0.0-experimental-d576f44

package/src/overlayHeader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OverlayHeader';
+export type { OverlayHeaderProps } from './OverlayHeader';

package/src/phoneNumberInput/PhoneNumberInput.story.tsx

@@ -19,6 +19,5 @@ export const Basic = {
     selectProps: {
       className: 'custom-class',
     },
-    onChange: () => {},
   },
 } satisfies Story;

package/src/uploadInput/UploadInput.story.tsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { StoryFn, Meta } from '@storybook/react';
+import { Story, Meta } from '@storybook/react';
 
 import { Status } from '../common';
 
@@ -14,8 +14,6 @@ const meta: Meta<typeof UploadInput> = {
 
 export default meta;
 
-type Story = StoryFn<UploadInputProps>;
-
 const files = [
   {
     id: 1,
@@ -63,46 +61,46 @@ const createDelayedPromise = async ({
   });
 
 const props = {
-  onUploadFile: async () => {
+  onUploadFile: async (formData: FormData) => {
     return createDelayedPromise();
   },
-  onDeleteFile: async () => {
+  onDeleteFile: async (id: string | number) => {
     return createDelayedPromise();
   },
 };
 
-const Template: Story = (args: UploadInputProps) => <UploadInput {...args} />;
+const Template: Story<UploadInputProps> = (args: UploadInputProps) => <UploadInput {...args} />;
 
-export const SingleFile: Story = Template.bind({});
+export const SingleFile: Story<UploadInputProps> = Template.bind({});
 SingleFile.args = { ...props };
 
-export const MultipleFiles: Story = Template.bind({});
+export const MultipleFiles: Story<UploadInputProps> = Template.bind({});
 MultipleFiles.args = { ...props, multiple: true };
 
-export const UploadInputWithDescriptionFromProps: Story = Template.bind({});
+export const UploadInputWithDescriptionFromProps: Story<UploadInputProps> = Template.bind({});
 UploadInputWithDescriptionFromProps.args = {
   ...props,
   multiple: true,
   description: 'Custom file description from prop',
 };
 
-export const Disabled: Story = Template.bind({});
+export const Disabled: Story<UploadInputProps> = Template.bind({});
 Disabled.args = { ...props, disabled: true };
 
-export const WithAnyFileType: Story = Template.bind({});
+export const WithAnyFileType: Story<UploadInputProps> = Template.bind({});
 WithAnyFileType.args = { ...props, fileTypes: '*' };
 
-export const WithSingleFileType: Story = Template.bind({});
+export const WithSingleFileType: Story<UploadInputProps> = Template.bind({});
 WithSingleFileType.args = { ...props, fileTypes: '.zip,application/zip' };
 
-export const WithMultipleExistingFiles: Story = Template.bind({});
+export const WithMultipleExistingFiles: Story<UploadInputProps> = Template.bind({});
 WithMultipleExistingFiles.args = {
   ...props,
   files,
   multiple: true,
 };
 
-export const WithFileErrors: Story = Template.bind({});
+export const WithFileErrors: Story<UploadInputProps> = Template.bind({});
 WithFileErrors.args = {
   ...props,
   files: [
@@ -145,7 +143,7 @@ WithFileErrors.args = {
   multiple: true,
 };
 
-export const WithoutDelete: Story = Template.bind({});
+export const WithoutDelete: Story<UploadInputProps> = Template.bind({});
 WithoutDelete.args = {
   ...props,
   files,
@@ -153,7 +151,7 @@ WithoutDelete.args = {
   multiple: true,
 };
 
-export const WithUploadFailed: Story = Template.bind({});
+export const WithUploadFailed: Story<UploadInputProps> = Template.bind({});
 WithUploadFailed.args = {
   ...props,
   files: files.slice(0),
@@ -161,7 +159,7 @@ WithUploadFailed.args = {
   multiple: true,
 };
 
-export const WithDeleteFailed: Story = Template.bind({});
+export const WithDeleteFailed: Story<UploadInputProps> = Template.bind({});
 WithDeleteFailed.args = {
   ...props,
   files: files.slice(0),
@@ -169,7 +167,7 @@ WithDeleteFailed.args = {
   multiple: true,
 };
 
-export const CustomConfirmMessage: Story = Template.bind({});
+export const CustomConfirmMessage: Story<UploadInputProps> = Template.bind({});
 CustomConfirmMessage.args = {
   ...props,
   files: files.slice(0),
@@ -184,21 +182,21 @@ CustomConfirmMessage.args = {
   },
 };
 
-export const withManualDownloadHandler: Story = Template.bind({});
+export const withManualDownloadHandler: Story<UploadInputProps> = Template.bind({});
 withManualDownloadHandler.args = {
   ...props,
   files,
   onDownload: action('Manual download handler'),
 };
 
-export const withFilesChangeHandler: Story = Template.bind({});
+export const withFilesChangeHandler: Story<UploadInputProps> = Template.bind({});
 withFilesChangeHandler.args = {
   ...props,
   files,
   onFilesChange: action('Files change handler'),
 };
 
-export const withMaxFilesToUploadLimit: Story = Template.bind({});
+export const withMaxFilesToUploadLimit: Story<UploadInputProps> = Template.bind({});
 withMaxFilesToUploadLimit.args = {
   ...props,
   multiple: true,
@@ -206,14 +204,14 @@ withMaxFilesToUploadLimit.args = {
   maxFilesErrorMessage: "Can't upload as maximum number of files allowed are already uploaded",
 };
 
-export const withFileSizeErrorMessage: Story = Template.bind({});
+export const withFileSizeErrorMessage: Story<UploadInputProps> = Template.bind({});
 withFileSizeErrorMessage.args = {
   ...props,
   sizeLimit: 1,
   sizeLimitErrorMessage: 'The file is oversized',
 };
 
-export const withCustomUploadButtonTitle: Story = Template.bind({});
+export const withCustomUploadButtonTitle: Story<UploadInputProps> = Template.bind({});
 withCustomUploadButtonTitle.args = {
   ...props,
   uploadButtonTitle: 'Upload the VAT receipts for FY 2022-23',

package/src/flowNavigation/backButton/BackButton.js

@@ -1,32 +0,0 @@
-import { ArrowLeft as ArrowLeftIcon } from '@transferwise/icons';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import Avatar, { AvatarType } from '../../avatar';
-
-const BackButton = ({ className, onClick, 'aria-label': ariaLabel }) => (
-  <Avatar type={AvatarType.ICON} size={40}>
-    <button
-      type="button"
-      aria-label={ariaLabel}
-      className={classNames('np-back-button', 'btn-unstyled', className)}
-      onClick={onClick}
-    >
-      <ArrowLeftIcon size={24} />
-    </button>
-  </Avatar>
-);
-
-BackButton.propTypes = {
-  'aria-label': PropTypes.string.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.element,
-  onClick: PropTypes.func,
-};
-
-BackButton.defaultProps = {
-  className: undefined,
-  label: undefined,
-};
-
-export default BackButton;

package/src/flowNavigation/backButton/BackButton.spec.js

@@ -1,16 +0,0 @@
-import { render } from '../../test-utils';
-import messages from '../FlowNavigation.messages';
-
-import BackButton from '.';
-
-const props = {
-  label: <>label</>,
-  className: 'className',
-  onClick: jest.fn(),
-  'aria-label': messages.back.defaultMessage,
-};
-describe('BackButton', () => {
-  it(`renders as expected`, () => {
-    expect(render(<BackButton {...props} />).container).toMatchSnapshot();
-  });
-});

package/src/flowNavigation/backButton/__snapshots__/BackButton.spec.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BackButton renders as expected 1`] = `
-<div>
-  <div
-    class="tw-avatar tw-avatar--40 tw-avatar--icon"
-  >
-    <div
-      class="tw-avatar__content"
-    >
-      <button
-        class="np-back-button btn-unstyled className"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="tw-icon tw-icon-arrow-left "
-          data-testid="arrow-left-icon"
-          role="presentation"
-        >
-          <svg
-            fill="currentColor"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-          >
-            <path
-              d="M22.286 11.316H4.629l7.114-7.114-1.2-1.2-8.572 8.571a.829.829 0 0 0 0 1.2l8.572 8.572 1.2-1.2-7.114-7.114h17.657v-1.715Z"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;

package/src/flowNavigation/backButton/index.js

@@ -1,3 +0,0 @@
-import BackButton from './BackButton';
-
-export default BackButton;

package/src/overlayHeader/index.js

@@ -1 +0,0 @@
-export { default } from './OverlayHeader';