@transferwise/components 0.0.0-experimental-79c0fba → 0.0.0-experimental-75135c1

package/src/i18n/th.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "อัพโหลดไฟล์อื่นหรือไม่",
   "neptune.Upload.csFailureText": "การอัปโหลดล้มเหลว กรุณาลองอีกครั้ง",
   "neptune.Upload.csSuccessText": "อัปโหลดเสร็จสมบูรณ์!",
-  "neptune.Upload.csTooLargeMessage": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า 5MB",
+  "neptune.Upload.csTooLargeMessage": "กรุณาใช้ไฟล์ที่มีขนาดเล็กกว่า {maxSize}MB",
   "neptune.Upload.csWrongTypeMessage": "ไม่รองรับประเภทไฟล์ โปรดลองอีกครั้งโดยใช้ไฟล์อื่น",
   "neptune.Upload.psButtonText": "ยกเลิก",
   "neptune.Upload.psProcessingText": "กำลังอัปโหลด...",
   "neptune.Upload.usButtonText": "หรือเลือกไฟล์",
   "neptune.Upload.usDropMessage": "วางไฟล์เพื่อเริ่มการอัปโหลด",
-  "neptune.Upload.usPlaceholder": "ลากและวางไฟล์ที่มีขนาดไม่เกิน 5MB",
+  "neptune.Upload.usPlaceholder": "ลากและวางไฟล์ที่มีขนาดไม่เกิน {maxSize}MB",
   "neptune.UploadButton.allFileTypes": "ไฟล์ทุกประเภท",
   "neptune.UploadButton.dropFiles": "วางไฟล์เพื่อเริ่มการอัปโหลด",
   "neptune.UploadButton.instructions": "{fileTypes} น้อยกว่า {size}MB",

package/src/i18n/tr.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "Başka bir dosya yükleyin?",
   "neptune.Upload.csFailureText": "Yükleme başarısız. Lütfen yine deneyin",
   "neptune.Upload.csSuccessText": "Yükleme tamamlandı!",
-  "neptune.Upload.csTooLargeMessage": "Lütfen 5 MB'den hüçük bir dosya sağlayın",
+  "neptune.Upload.csTooLargeMessage": "Lütfen {maxSize} MB'den hüçük bir dosya sağlayın",
   "neptune.Upload.csWrongTypeMessage": "Desteklenmeyen dosya biçimi. Lütfen başka bir dosyayla tekrar deneyin",
   "neptune.Upload.psButtonText": "İptal edin",
   "neptune.Upload.psProcessingText": "Yükleniyor...",
   "neptune.Upload.usButtonText": "Veya bir dosya seçin",
   "neptune.Upload.usDropMessage": "Yüklemeyi başlatmak için dosyayı bırakın",
-  "neptune.Upload.usPlaceholder": "5 MB'den küçük bir dosya sürükleyin ve bırakın",
+  "neptune.Upload.usPlaceholder": "{maxSize} MB'den küçük bir dosya sürükleyin ve bırakın",
   "neptune.UploadButton.allFileTypes": "Tüm belge tipleri",
   "neptune.UploadButton.dropFiles": "Yüklemeyi başlatmak için dosyayı bırakın",
   "neptune.UploadButton.instructions": "{fileTypes}, en fazla {size}MB",

package/src/i18n/zh-CN.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "上传另一个文件？",
   "neptune.Upload.csFailureText": "上传失败。请重试",
   "neptune.Upload.csSuccessText": "上传完毕！",
-  "neptune.Upload.csTooLargeMessage": "请提供小于 5MB 的文件",
+  "neptune.Upload.csTooLargeMessage": "请提供小于 {maxSize}MB 的文件",
   "neptune.Upload.csWrongTypeMessage": "不支持该文件类型，请试试其他文件",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "正在上传…",
   "neptune.Upload.usButtonText": "或选择文件",
   "neptune.Upload.usDropMessage": "拖放文件开始上传",
-  "neptune.Upload.usPlaceholder": "拖放小于 5MB 的文件",
+  "neptune.Upload.usPlaceholder": "拖放小于 {maxSize}MB 的文件",
   "neptune.UploadButton.allFileTypes": "所有文件类型",
   "neptune.UploadButton.dropFiles": "拖放文件开始上传",
   "neptune.UploadButton.instructions": "{fileTypes}，小于 {size} MB",

package/src/i18n/zh-HK.json

@@ -29,13 +29,13 @@
   "neptune.Upload.csButtonText": "上載另一個檔案？",
   "neptune.Upload.csFailureText": "上載失敗，請重試。",
   "neptune.Upload.csSuccessText": "上載完成！",
-  "neptune.Upload.csTooLargeMessage": "請提供小於5MB的檔案",
+  "neptune.Upload.csTooLargeMessage": "請提供小於{maxSize}MB的檔案",
   "neptune.Upload.csWrongTypeMessage": "不支持檔案類型，請使用其他檔案重試",
   "neptune.Upload.psButtonText": "取消",
   "neptune.Upload.psProcessingText": "上載中...",
   "neptune.Upload.usButtonText": "或者選擇一個檔案",
   "neptune.Upload.usDropMessage": "拖放檔案以開始上載",
-  "neptune.Upload.usPlaceholder": "拖放不超過5MB的檔案",
+  "neptune.Upload.usPlaceholder": "拖放不超過{maxSize}MB的檔案",
   "neptune.UploadButton.allFileTypes": "所有檔案類型",
   "neptune.UploadButton.dropFiles": "拖放檔案以開始上載",
   "neptune.UploadButton.instructions": "{fileTypes}，小於{size}MB",

package/src/index.ts

@@ -28,7 +28,6 @@ export type { RadioGroupProps, RadioGroupRadio } from './radioGroup';
 export type { RadioOptionProps } from './radioOption';
 export type { SnackbarProps } from './snackbar/Snackbar';
 export type { SnackbarContextType } from './snackbar/SnackbarContext';
-export type { StickyProps } from './sticky';
 export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { MarkdownProps } from './markdown';
@@ -39,7 +38,6 @@ export type {
   CurrencyOptionItem,
   MoneyInputProps,
 } from './moneyInput';
-export type { SlidingPanelProps } from './slidingPanel';
 export type {
   LayoutDirection,
   TypographyTypes,

package/src/select/Select.spec.js

@@ -278,7 +278,7 @@ describe('Select', () => {
 
     const bottomSheet = await screen.findByRole('dialog');
 
-    expect(bottomSheet).toBeInTheDocument();
+    expect(bottomSheet).toHaveClass('np-bottom-sheet');
   });
 
   it('show list of options in Drawer when on mobile and search in enabled', async () => {

package/src/slidingPanel/SlidingPanel.js

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { forwardRef, RefObject, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
+import { CSSTransition } from 'react-transition-group';
+
+export const EXIT_ANIMATION = 350;
+
+const SlidingPanel = forwardRef(
+  (
+    {
+      children,
+      className,
+      open,
+      position,
+      showSlidingPanelBorder,
+      slidingPanelPositionFixed,
+      ...rest
+    },
+    reference,
+  ) => {
+    /** @type {RefObject<HTMLDivElement>} */
+    const localReference = useRef(null);
+
+    return (
+      <CSSTransition
+        {...rest}
+        key={`sliding-panel--open-${position}`}
+        nodeRef={localReference}
+        in={open}
+        // Wait for animation to finish before unmount.
+        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
+        classNames={classNames(
+          `sliding-panel--open-${position}`,
+          showSlidingPanelBorder && `sliding-panel--border-${position}`,
+          {
+            'sliding-panel--fixed': slidingPanelPositionFixed,
+          },
+          'sliding-panel',
+        )}
+        appear
+        unmountOnExit
+      >
+        <div
+          ref={mergeRefs([reference, localReference])}
+          className={classNames('sliding-panel', `sliding-panel--open-${position}`, className)}
+        >
+          {children}
+        </div>
+      </CSSTransition>
+    );
+  },
+);
+
+SlidingPanel.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  open: PropTypes.bool,
+  position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  showSlidingPanelBorder: PropTypes.bool,
+  slidingPanelPositionFixed: PropTypes.bool,
+};
+
+SlidingPanel.defaultProps = {
+  children: null,
+  className: undefined,
+  open: false,
+  position: 'left',
+  showSlidingPanelBorder: false,
+  slidingPanelPositionFixed: false,
+};
+
+export default SlidingPanel;

package/src/slidingPanel/SlidingPanel.spec.js

@@ -24,7 +24,17 @@ describe('SlidingPanel', () => {
 
     expect(cssTransition()).toHaveLength(1);
 
-    expect(cssTransition().props()).toStrictEqual({
+    expect(cssTransition().props()).toMatchObject({
+      in: true,
+      appear: true,
+      timeout: {
+        enter: 0,
+        exit: EXIT_ANIMATION,
+      },
+      classNames: 'sliding-panel--open-left sliding-panel',
+      unmountOnExit: true,
+    });
+    expect(cssTransition().props().children.props).toStrictEqual({
       className: 'sliding-panel sliding-panel--open-left',
       children: null,
     });
@@ -32,24 +42,24 @@ describe('SlidingPanel', () => {
 
   it('adds fixed class', () => {
     component = shallow(<SlidingPanel {...props} slidingPanelPositionFixed />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-left sliding-panel--fixed',
+    expect(cssTransition().prop('classNames')).toBe(
+      'sliding-panel--open-left sliding-panel--fixed sliding-panel',
     );
   });
 
   it('adds border classes if showSlidingPanelBorder is set to true', () => {
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-left sliding-panel--border-left',
+    expect(cssTransition().prop('classNames')).toBe(
+      'sliding-panel--open-left sliding-panel--border-left sliding-panel',
     );
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder={false} position="left" />);
-    expect(cssTransition().prop('className')).toBe('sliding-panel sliding-panel--open-left');
+    expect(cssTransition().prop('classNames')).toBe('sliding-panel--open-left sliding-panel');
 
     component = shallow(<SlidingPanel {...props} showSlidingPanelBorder position="top" />);
-    expect(cssTransition().prop('className')).toBe(
-      'sliding-panel sliding-panel--open-top sliding-panel--border-top',
+    expect(cssTransition().prop('classNames')).toBe(
+      'sliding-panel--open-top sliding-panel--border-top sliding-panel',
     );
   });
 
-  const cssTransition = () => component.find('div');
+  const cssTransition = () => component.find('CSSTransition');
 });

package/src/slidingPanel/index.js

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

package/src/sticky/Sticky.js

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+import SlidingPanel from '../slidingPanel';
+
+const Sticky = ({ open, position, children }) => (
+  <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
+    {children}
+  </SlidingPanel>
+);
+
+Sticky.propTypes = {
+  open: PropTypes.bool,
+  position: PropTypes.oneOf(['top', 'bottom']),
+  children: PropTypes.node,
+};
+
+Sticky.defaultProps = {
+  open: true,
+  position: 'bottom',
+  children: null,
+};
+
+export default Sticky;

package/src/sticky/Sticky.spec.js

@@ -25,6 +25,7 @@ describe('Sticky', () => {
 
     expect(slidingPanel.props()).toStrictEqual({
       children: null,
+      className: undefined,
       open: true,
       position: 'bottom',
       showSlidingPanelBorder: true,

package/src/sticky/{Sticky.story.tsx → Sticky.story.js}

@@ -9,9 +9,10 @@ export default {
 
 export const Basic = () => {
   const open = boolean('open', false);
-  const position = select('position', ['top', 'bottom'], 'bottom');
+  const position = select('position', ['top', 'right', 'bottom', 'left'], 'bottom');
+  const fullParentWidth = boolean('fullParentWidth', true);
   return (
-    <Sticky open={open} position={position}>
+    <Sticky open={open} position={position} fullParentWidth={fullParentWidth}>
       <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
         been the industry standard dummy text ever since the 1500s, when an unknown printer took a

package/src/sticky/index.js

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

package/src/upload/Upload.js

@@ -47,7 +47,10 @@ class Upload extends Component {
     switch (status) {
       case 413:
         return (
-          this.props.csTooLargeMessage || this.props.intl.formatMessage(messages.csTooLargeMessage)
+          this.props.csTooLargeMessage ||
+          this.props.intl.formatMessage(messages.csTooLargeMessage, {
+            maxSize: this.props.maxSize / 1000000,
+          })
         );
       case 415:
         return (
@@ -92,31 +95,26 @@ class Upload extends Component {
   onAnimationCompleted = async (status) => {
     const { response, isProcessing, fileName } = this.state;
     // Success.
-    const { animationDelay } = this.props;
     if (isProcessing && status === Status.SUCCEEDED) {
       const { onSuccess } = this.props;
-      this.timeouts = setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          () => (onSuccess ? onSuccess(response, fileName) : {}),
-        );
-      }, animationDelay);
+      this.setState(
+        {
+          isProcessing: false,
+          isComplete: true,
+        },
+        () => (onSuccess ? onSuccess(response, fileName) : {}),
+      );
     }
     // Failure.
     if (isProcessing && status === Status.FAILED) {
       const { onFailure } = this.props;
-      this.timeouts = setTimeout(() => {
-        this.setState(
-          {
-            isProcessing: false,
-            isComplete: true,
-          },
-          () => (onFailure ? onFailure(response) : {}),
-        );
-      }, animationDelay);
+      this.setState(
+        {
+          isProcessing: false,
+          isComplete: true,
+        },
+        () => (onFailure ? onFailure(response) : {}),
+      );
     }
   };
 
@@ -312,7 +310,10 @@ class Upload extends Component {
             usDisabled={usDisabled}
             usHelpImage={usHelpImage}
             usLabel={usLabel}
-            usPlaceholder={usPlaceholder || intl.formatMessage(messages.usPlaceholder)}
+            usPlaceholder={
+              usPlaceholder ||
+              intl.formatMessage(messages.usPlaceholder, { maxSize: this.props.maxSize / 1000000 })
+            }
           />
         )}
 
@@ -403,7 +404,7 @@ Upload.propTypes = {
 };
 
 Upload.defaultProps = {
-  animationDelay: 700,
+  animationDelay: 0,
   csButtonText: undefined,
   csFailureText: undefined,
   csSuccessText: undefined,

package/src/upload/Upload.messages.js

@@ -15,7 +15,7 @@ export default defineMessages({
   },
   csTooLargeMessage: {
     id: 'neptune.Upload.csTooLargeMessage',
-    defaultMessage: 'Please provide a file smaller than 5MB',
+    defaultMessage: 'Please provide a file smaller than {maxSize}MB',
   },
   csWrongTypeMessage: {
     id: 'neptune.Upload.csWrongTypeMessage',
@@ -39,6 +39,6 @@ export default defineMessages({
   },
   usPlaceholder: {
     id: 'neptune.Upload.usPlaceholder',
-    defaultMessage: 'Drag and drop a file less than 5MB',
+    defaultMessage: 'Drag and drop a file less than {maxSize}MB',
   },
 });

package/src/upload/Upload.story.js

@@ -10,7 +10,7 @@ export default {
 
 export const Basic = () => {
   const size = select('size', ['sm', 'md', 'lg'], 'md');
-  const maxSize = number('max file size', 5000000);
+  const maxSize = number('max file size', 4000000);
   const usAccept = text('accepted format', '*');
   const usDisabled = boolean('disabled', false);
   const psButtonDisabled = boolean('psButtonDisabled', false);

package/src/upload/steps/processingStep/processingStep.js

@@ -1,6 +1,5 @@
-import { useTheme } from '@wise/components-theming';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { useEffect } from 'react';
 
 import Button from '../../../button';
 import { Status, Size, Typography } from '../../../common';
@@ -19,8 +18,6 @@ const ProcessingStep = (props) => {
     psButtonDisabled,
   } = props;
 
-  const { isModern } = useTheme();
-
   let processStatus = Status.PROCESSING;
   if (isError) {
     processStatus = Status.FAILED;
@@ -29,24 +26,17 @@ const ProcessingStep = (props) => {
     processStatus = Status.SUCCEEDED;
   }
 
+  useEffect(() => {
+    if (processStatus !== Status.PROCESSING) {
+      onAnimationCompleted(processStatus);
+    }
+  }, [processStatus, onAnimationCompleted]);
+
   return (
     <div className="droppable-processing-card droppable-card" aria-hidden={isComplete}>
       <div className="droppable-card-content">
-        <ProcessIndicator
-          size={Size.Small}
-          status={processStatus}
-          onAnimationCompleted={(status) => onAnimationCompleted(status)}
-        />
-        <Title
-          className={classNames({
-            'm-t-3': !isModern,
-            'm-b-3': !isModern,
-            'm-t-2': isModern,
-            'm-b-2': isModern,
-          })}
-          type={Typography.TITLE_BODY}
-          aria-live="polite"
-        >
+        <ProcessIndicator size={Size.SMALL} status={processStatus} />
+        <Title className="m-t-2 m-b-2" type={Typography.TITLE_BODY} aria-live="polite">
           {psProcessingText}
         </Title>
         {psButtonText && (

package/src/slidingPanel/SlidingPanel.tsx

@@ -1,62 +0,0 @@
-import classNames from 'classnames';
-import { forwardRef, useRef } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { CSSTransition } from 'react-transition-group';
-
-import { Position } from '../common';
-
-export const EXIT_ANIMATION = 350;
-
-export interface SlidingPanelProps
-  extends Pick<React.ComponentPropsWithRef<'div'>, 'ref' | 'className' | 'children'> {
-  position?: `${Position.TOP | Position.RIGHT | Position.BOTTOM | Position.LEFT}`;
-  open: boolean;
-  showSlidingPanelBorder?: boolean;
-  slidingPanelPositionFixed?: boolean;
-}
-
-const SlidingPanel = forwardRef(
-  (
-    {
-      position = 'left',
-      open,
-      showSlidingPanelBorder,
-      slidingPanelPositionFixed,
-      className,
-      children,
-      ...rest
-    }: Omit<SlidingPanelProps, 'ref'>,
-    reference: React.ForwardedRef<HTMLDivElement>,
-  ) => {
-    const localReference = useRef<HTMLDivElement>(null);
-
-    return (
-      <CSSTransition
-        {...rest}
-        key={`sliding-panel--open-${position}`}
-        nodeRef={localReference}
-        in={open}
-        // Wait for animation to finish before unmount.
-        timeout={{ enter: 0, exit: EXIT_ANIMATION }}
-        classNames="sliding-panel"
-        appear
-        unmountOnExit
-      >
-        <div
-          ref={mergeRefs([reference, localReference])}
-          className={classNames(
-            'sliding-panel',
-            `sliding-panel--open-${position}`,
-            showSlidingPanelBorder && `sliding-panel--border-${position}`,
-            slidingPanelPositionFixed && 'sliding-panel--fixed',
-            className,
-          )}
-        >
-          {children}
-        </div>
-      </CSSTransition>
-    );
-  },
-);
-
-export default SlidingPanel;

package/src/slidingPanel/index.ts

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

package/src/sticky/Sticky.tsx

@@ -1,16 +0,0 @@
-import { Position } from '../common';
-import SlidingPanel from '../slidingPanel';
-
-export interface StickyProps {
-  open?: boolean;
-  position?: `${Position.TOP | Position.BOTTOM}`;
-  children?: React.ReactNode;
-}
-
-export default function Sticky({ open = true, position = 'bottom', children }: StickyProps) {
-  return (
-    <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
-      {children}
-    </SlidingPanel>
-  );
-}

package/src/sticky/index.ts

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