@transferwise/components 46.36.1 → 46.38.0

package/src/sticky/Sticky.spec.tsx

@@ -0,0 +1,71 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import Sticky, { StickyProps } from './Sticky';
+
+describe('Sticky', () => {
+  const defaultProps = {
+    open: true,
+    children: <div>Test Content</div>,
+    position: 'bottom' as const,
+    testId: 'test-sticky-panel',
+  };
+
+  let rerenderSticky: (props?: StickyProps) => void;
+
+  beforeEach(() => {
+    const { rerender } = render(<Sticky {...defaultProps} />);
+
+    rerenderSticky = (props?: StickyProps) => {
+      rerender(<Sticky {...defaultProps} {...props} />);
+    };
+  });
+
+  test('renders with default props', () => {
+    expect(screen.getByTestId('test-sticky-panel')).toBeVisible();
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-bottom');
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+  });
+
+  test('renders with open `false`', async () => {
+    const props: StickyProps = {
+      ...defaultProps,
+      open: false, // Ensure the Sticky is initially open
+    };
+
+    expect(screen.getByTestId('test-sticky-panel')).toBeVisible();
+
+    // Change props to close the Sticky
+    rerenderSticky(props);
+
+    await waitFor(() => {
+      // Use queryByText instead of getByText for conditional presence checks
+      expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders new content', () => {
+    const props: StickyProps = {
+      ...defaultProps,
+      children: <div>New Test Content</div>,
+    };
+    expect(screen.getByText('Test Content')).toBeInTheDocument();
+
+    // Change props
+    rerenderSticky(props);
+
+    expect(screen.getByText('New Test Content')).toBeInTheDocument();
+  });
+
+  it('renders with position set to `top`', () => {
+    const props: StickyProps = {
+      ...defaultProps,
+      position: 'top',
+    };
+    expect(screen.getByTestId('test-sticky-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-bottom');
+
+    // Change props
+    rerenderSticky(props);
+
+    expect(screen.getByTestId('test-sticky-panel')).toHaveClass('sliding-panel--open-top');
+  });
+});

package/src/sticky/Sticky.story.tsx

@@ -1,22 +1,79 @@
-import { select, boolean } from '@storybook/addon-knobs';
-
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import Sticky from './Sticky';
+import { allModes } from '../../.storybook/modes';
 
-export default {
+const meta: Meta<typeof Sticky> = {
   component: Sticky,
-  title: 'Other/Sticky',
+  title: 'Dialogs/Sticky',
+  tags: ['autodocs'],
+  args: {
+    open: true,
+    position: 'bottom', // Default position
+    children: (
+      <div className="d-flex justify-content-start align-items-start flex-wrap p-x-4 p-y-4">
+        <p className="m-b-0">Default text for Sticky component.</p>
+      </div>
+    ),
+  },
+  parameters: {
+    chromatic: {
+      // 🔶 Test each story for Sticky
+      modes: {
+        ltr: allModes.ltr,
+        rtl: allModes.rtl,
+        light: allModes.light,
+        dark: allModes.dark,
+        brightGreen: allModes.brightGreen,
+        forestGreen: allModes.forestGreen,
+        desktop: allModes.desktop,
+        tablet: allModes.tablet,
+        largeMobile: allModes.largeMobile,
+        smallMobile: allModes.smallMobile,
+        zoom400: allModes.zoom400,
+      },
+    },
+    docs: {
+      canvas: {
+        layout: 'padded',
+      },
+    },
+  },
 };
 
-export const Basic = () => {
-  const open = boolean('open', false);
-  const position = select('position', ['top', 'bottom'], 'bottom');
-  return (
-    <Sticky open={open} position={position}>
-      <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
-        galley of type and scrambled it to
+export default meta;
+
+// Represents a story object for the `Sticky` component.
+type Story = StoryObj<typeof Sticky>;
+
+export const Default: Story = {}; // Default story with no additional props
+
+export const PositionTop: Story = {
+  args: {
+    position: 'top', // Set the position prop to 'top'
+  },
+};
+
+export const WithLongContent: Story = {
+  args: {
+    children: (
+      <div className="p-x-4 p-y-4">
+        <p>
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio ipsa rem fugiat
+          repellendus nisi dolorum, recusandae aperiam repudiandae natus quaerat, explicabo fugit!
+          Odit illum vero eius quasi, error soluta veritatis.
+        </p>
+        <p>
+          Recusandae a animi tenetur magni itaque optio in aut enim odio. Minima, veritatis error
+          dicta expedita aliquam officiis deleniti repellat rerum nam ad quam dolorum reiciendis
+          voluptas doloremque quis eveniet.
+        </p>
+        <p>
+          Adipisci nulla quos magnam blanditiis minima nesciunt odio mollitia, fuga ullam aliquid
+          qui iure delectus dolores corporis officiis autem iste quia at ea sint tempore,
+          repudiandae amet? Error, praesentium eaque.
+        </p>
       </div>
-    </Sticky>
-  );
+    ),
+  },
 };

package/src/sticky/Sticky.tsx

@@ -1,16 +1,60 @@
 import { Position } from '../common';
 import SlidingPanel from '../slidingPanel';
+import { FunctionComponent } from 'react';
 
 export interface StickyProps {
-  open?: boolean;
-  position?: `${Position.TOP | Position.BOTTOM}`;
+  /** Optional prop for children components to be rendered inside the Sticky component. */
   children?: React.ReactNode;
+
+  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */
+  open?: boolean;
+
+  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `top` or `bottom`. */
+  position?: `${Position.TOP}` | `${Position.BOTTOM}`;
+
+  /** Optional prop to specify the ID used for testing */
+  testId?: string;
 }
 
-export default function Sticky({ open = true, position = 'bottom', children }: StickyProps) {
+/**
+ * ### Sticky Component
+ *
+ * `<Sticky />` is a component that renders a `<SlidingPanel />` with specified props.
+ * It uses the `<SlidingPanel />` component to create a panel that can slide in and out of view,
+ * based on the `open` prop. It can be positioned at the top or bottom of the container,
+ * as specified by the `position` prop.
+ *
+ * @component
+ * @param {ReactNode} children - Children content.
+ * @param {boolean} open - Determines if the Sticky component is open or closed.
+ * @param {('top'|'bottom')} position - Specifies the position.
+ * @param {string} testId - ID used for testing.
+ * @returns {JSX.Element} The `SlidingPanel` component with applied props.
+ * @example
+ * <Button onClick={() => setOpen(!open)}>Open Sticky</Button>
+ * <Sticky open={open} position={'bottom'}>
+ *   <div>
+ *     <Button onClick={() => setOpen(!open)}>Close Sticky</Button>
+ *   </div>
+ * </Sticky>
+ */
+const Sticky: FunctionComponent<StickyProps> = ({
+  children,
+  open = true,
+  position = Position.BOTTOM,
+  testId,
+}: StickyProps) => {
   return (
-    <SlidingPanel open={open} position={position} slidingPanelPositionFixed showSlidingPanelBorder>
+    <SlidingPanel
+      testId={testId}
+      open={open}
+      position={position}
+      slidingPanelPositionFixed
+      showSlidingPanelBorder
+    >
       {children}
     </SlidingPanel>
   );
-}
+};
+
+export default Sticky;

package/src/switchOption/SwitchOption.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactChild } from 'react';
+import { MouseEvent } from 'react';
 
 import Option from '../common/Option';
 import Switch from '../switch';
@@ -6,15 +6,15 @@ import Switch from '../switch';
 export type SwitchOptionProps = {
   checked?: boolean;
   complex?: boolean;
-  content?: ReactChild;
+  content?: React.ReactNode;
   disabled?: boolean;
   showMediaCircle?: boolean;
   showMediaAtAllSizes?: boolean;
   isContainerAligned?: boolean;
   id?: string;
-  media?: ReactChild;
+  media?: React.ReactNode;
   onChange: (newValue: boolean) => void;
-  title: ReactChild;
+  title: React.ReactNode;
   'aria-label': string;
 };
 
@@ -22,9 +22,7 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
   if (event) {
     event.stopPropagation();
     event.preventDefault();
-    if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) {
-      event.nativeEvent.stopImmediatePropagation();
-    }
+    event.nativeEvent?.stopImmediatePropagation?.();
   }
 };
 

package/src/tabs/Tabs.js

@@ -3,7 +3,7 @@ import { Spring, SpringValue, animated } from '@react-spring/web';
 import classNames from 'classnames';
 import clamp from 'lodash.clamp';
 import PropTypes from 'prop-types';
-import { Component, createRef, Fragment, RefObject } from 'react';
+import { Component, createRef, Fragment } from 'react';
 
 import { Size, Width, Direction } from '../common';
 import { DirectionContext } from '../provider/direction';
@@ -27,7 +27,7 @@ const enabledTabsFilter = (tab) => !tab.disabled;
 const SpacerWidth = { default: 0, xs: 8, sm: 16, md: 24, lg: 32 };
 
 class Tabs extends Component {
-  /** @type {RefObject<HTMLDivElement>} */
+  /** @type {React.RefObject<HTMLDivElement | null>} */
   containerReference = createRef();
 
   constructor(props) {
@@ -576,7 +576,6 @@ Tabs.propTypes = {
     }),
   ).isRequired,
   selected: PropTypes.number.isRequired,
-  onTabSelect: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   animatePanelsOnClick: PropTypes.bool,
   changeTabOnSwipe: PropTypes.bool,
@@ -584,6 +583,7 @@ Tabs.propTypes = {
   transitionSpacing: PropTypes.oneOf(['default', 'xs', 'sm', 'md', 'lg']),
   headerWidth: PropTypes.oneOf(['auto', 'block']),
   id: PropTypes.string,
+  onTabSelect: PropTypes.func.isRequired,
 };
 
 Tabs.defaultProps = {

package/src/test-utils/Parameters.d.ts

@@ -58,4 +58,12 @@ export interface ChromaticParameters {
    * @default 0.063
    */
   diffThreshold?: number;
+
+  /**
+   * Modes for Chromatic testing.
+   *
+   * Specify the mode in which Chromatic should run tests. For example, 'light' for light mode,
+   * 'dark' for dark mode, or `rtl` for right to left content.
+   */
+  modes?: object;
 }

package/src/test-utils/story-config.ts

@@ -9,6 +9,11 @@ export const viewports = {
     styles: { height: '256px', width: '320px' },
     type: 'mobile',
   },
+  desktop: {
+    name: 'Desktop',
+    styles: { height: '1024px', width: '1280px' },
+    type: 'desktop',
+  },
 };
 
 interface StoryConfig {

package/src/tile/{Tile.spec.js → Tile.spec.tsx}

@@ -9,7 +9,7 @@ describe(Tile, () => {
     description: 'Receive money from friends and family like a local',
     href: '#href',
     media: <svg data-testid="illustration" />,
-    onClick: () => onClick(),
+    onClick,
     title: 'Receive money',
   };
 

package/src/tile/{Tile.js → Tile.tsx}

@@ -1,11 +1,26 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body';
 import { Size, Typography } from '../common';
 import Title from '../title';
 
-export const Tile = ({
+export interface TileProps {
+  /** Classes to apply to the Tile container */
+  className?: string;
+  description?: React.ReactNode;
+  disabled?: boolean;
+  href?: string;
+  target?: React.HTMLAttributeAnchorTarget;
+  /** Accepts only Avatar and images */
+  media: React.ReactNode;
+  /** Function called onClick or onKeyDown */
+  onClick?: (event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  /** The size applied to Tile */
+  size?: `${Size.SMALL | Size.MEDIUM}`;
+  title: React.ReactNode;
+}
+
+export default function Tile({
   className,
   description,
   disabled,
@@ -13,10 +28,10 @@ export const Tile = ({
   target,
   media,
   onClick,
-  size,
+  size = 'md',
   title,
-}) => {
-  const isSmall = size === Size.SMALL;
+}: TileProps) {
+  const isSmall = size === 'sm';
   const Element = href ? 'a' : 'button';
 
   return (
@@ -36,13 +51,13 @@ export const Tile = ({
       )}
       href={href}
       target={target}
-      onClick={disabled ? null : onClick}
+      onClick={disabled ? undefined : onClick}
       onKeyDown={
         disabled
-          ? null
+          ? undefined
           : ({ key }) => {
               if (key === 'Enter' || key === ' ') {
-                onClick();
+                onClick?.();
               }
             }
       }
@@ -58,30 +73,4 @@ export const Tile = ({
       ) : null}
     </Element>
   );
-};
-
-Tile.propTypes = {
-  /** Classes to apply to the Tile container */
-  className: PropTypes.string,
-  description: PropTypes.node,
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  /** Accepts only Avatar and images */
-  media: PropTypes.node.isRequired,
-  /** Function called onClick or onKeyDown */
-  onClick: PropTypes.func,
-  /** The size applied to Tile */
-  size: PropTypes.oneOf(['sm', 'md']),
-  title: PropTypes.node.isRequired,
-};
-
-Tile.defaultProps = {
-  className: '',
-  description: null,
-  disabled: false,
-  size: Size.MEDIUM,
-  target: undefined,
-};
-
-export default Tile;
+}

package/src/tooltip/Tooltip.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import classNames from 'classnames';
 import {
+  AriaAttributes,
   PropsWithChildren,
   ReactElement,
   ReactNode,
@@ -84,7 +85,7 @@ const Tooltip = ({
       onBlur={() => setOpen(false)}
     >
       {children
-        ? cloneElement(children as ReactElement, {
+        ? cloneElement(children as ReactElement<Pick<AriaAttributes, 'aria-describedby'>>, {
             'aria-describedby': `${tooltipId}-tooltip`,
           })
         : null}

package/src/uploadInput/UploadInput.css

@@ -1,46 +1,40 @@
-.np-upload-input {
-  border: 1px solid #c9cbce;
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: 10px;
-  border-radius: var(--radius-small);
-}
-.np-upload-input:has(:focus-visible) {
-  outline: var(--ring-outline-color) solid var(--ring-outline-width);
-  outline-offset: var(--ring-outline-offset);
-}
 .np-upload-input.form-control {
   height: auto;
   padding: 0;
   padding: initial;
 }
-.np-theme-personal .np-upload-input {
-  border-radius: 10px;
-  border-radius: var(--radius-small);
+.np-upload-input > div:first-child,
+.np-upload-input > div:first-child .np-upload-item--single-file,
+.np-upload-input > div:first-child .np-upload-item--link {
+  border-top-left-radius: 10px;
+  border-top-left-radius: var(--radius-small);
+  border-top-right-radius: 10px;
+  border-top-right-radius: var(--radius-small);
+}
+.np-upload-input > div:last-child {
+  border-bottom-left-radius: 10px;
+  border-bottom-left-radius: var(--radius-small);
+  border-bottom-right-radius: 10px;
+  border-bottom-right-radius: var(--radius-small);
 }
 .np-theme-personal .np-upload-input.disabled .btn {
   cursor: inherit;
 }
-.np-theme-personal .np-upload-input .np-upload-button {
-  border-radius: calc(10px - 1px);
-  border-radius: calc(var(--radius-small) - 1px);
-  padding: 16px;
-  padding: var(--padding-small);
-}
-.np-theme-personal .np-upload-input .np-upload-input--square-top {
-  border-top-right-radius: 0px;
-  border-top-left-radius: 0px;
-}
-.np-theme-personal .np-upload-input .np-upload-item__remove-button {
-  border-radius: 0;
-  border-radius: initial;
-}
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-upload-input .media-body {
+  padding-right: 32px;
+  padding-right: var(--size-32);
   color: var(--color-content-link);
   white-space: break-spaces;
 }
+@media (max-width: 320px) {
+  .np-theme-personal .np-upload-input .media-body {
+    padding-right: 64px;
+    padding-right: var(--size-64);
+  }
+}
 .np-theme-personal .np-upload-input .media-body .np-text-body-large-bold {
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -55,6 +49,10 @@
 .np-theme-personal .np-upload-input .media-body .text-negative {
   color: var(--color-sentiment-negative) !important;
 }
+.np-theme-personal .np-upload-input-errors {
+  padding-left: 0;
+  list-style-position: inside;
+}
 .np-theme-personal .np-upload-input .status-circle {
   width: 24px;
   width: var(--size-x-small);

package/src/uploadInput/UploadInput.less

@@ -3,49 +3,45 @@
 @import (reference) './uploadItem/UploadItem.less';
 
 .np-upload-input {
-  border: 1px solid var(--color-interactive-secondary);
-  border-radius: var(--radius-small);
-
-  &:has(:focus-visible) {
-    .ring();
-  }
-
   &.form-control {
     height: auto;
     padding: initial;
   }
+
+  & > div {
+    &:first-child,
+    &:first-child .np-upload-item--single-file,
+    &:first-child .np-upload-item--link {
+      border-top-left-radius: var(--radius-small);
+      border-top-right-radius: var(--radius-small);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--radius-small);
+      border-bottom-right-radius: var(--radius-small);
+    }
+  }
 }
 
 .np-theme-personal {
   .np-upload-input {
-    border-radius: var(--radius-small);
-
     &.disabled .btn {
       cursor: inherit;
     }
 
-    .np-upload-button {
-      border-radius: @small-border-minus-one;
-      padding: var(--padding-small);
-    }
-
-    .np-upload-input--square-top {
-      border-top-right-radius: 0px;
-      border-top-left-radius: 0px;
-    }
-
-    .np-upload-item__remove-button {
-      border-radius: unset;
-    }
-
     .np-upload-icon {
       color: var(--color-interactive-primary);
     }
 
     .media-body {
+      padding-right: var(--size-32);
       color: var(--color-content-link);
       white-space: break-spaces;
 
+      @media (--screen-400-zoom) {
+        padding-right: var(--size-64);
+      }
+
       .np-text-body-large-bold {
         text-decoration: underline;
         .link-underline();
@@ -62,6 +58,11 @@
       }
     }
 
+    &-errors {
+      padding-left: 0;
+      list-style-position: inside;
+    }
+
     .status-circle {
       width: var(--size-x-small);
       height: var(--size-x-small);