@transferwise/components 0.0.0-experimental-693e956 → 0.0.0-experimental-d729abf

package/src/selectOption/SelectOption.story.tsx

@@ -0,0 +1,167 @@
+import type { StoryObj } from '@storybook/react';
+import { Flag } from '@wise/art';
+import SelectOption, { SelectOptionValue, SelectOptiopsGroup } from './SelectOption';
+import { Bank, BankTransfer, Card, Plus } from '@transferwise/icons';
+import { Field } from '../field/Field';
+import { lorem10 } from '../test-utils';
+
+export default {
+  title: 'Option/SelectOption',
+};
+
+type Story = StoryObj<typeof SelectOption>;
+
+type CustomData = { data?: string };
+
+const cardPaymentMethod: SelectOptionValue<CustomData> = {
+  media: <Card />,
+  title: 'Credit card',
+  content: (
+    <>
+      <div>Transfer the money to Wise using your bank account.</div>
+      <div>0.32 GBP in fees, should arrive in seconds</div>
+    </>
+  ),
+};
+
+const recentPaymentMethods: SelectOptionValue<CustomData>[] = [cardPaymentMethod];
+
+const allOtherPaymentMethods: SelectOptionValue<CustomData>[] = [
+  {
+    data: lorem10,
+    media: <Flag code="gbp" />,
+    title: 'Wise GBP balance',
+    content: (
+      <>
+        <span>300 GBP available</span>
+        <span>0 GBP in fees, should arrive in seconds</span>
+      </>
+    ),
+  },
+  cardPaymentMethod,
+  {
+    media: <Card />,
+    title: 'Debit card',
+    content: (
+      <>
+        <span>Send from your Visa or Mastercard.</span>
+        <span>0.74 GBP in fees, should arrive in seconds</span>
+      </>
+    ),
+  },
+  {
+    media: <Bank />,
+    title: 'Swift Transfer',
+    content: (
+      <>
+        <span>Send money internationally. Your bank will charge you extra fees.</span>
+        <span>0.32 GBP in fees, should arrive by Thursday</span>
+      </>
+    ),
+  },
+  {
+    media: <BankTransfer />,
+    title: 'Bank Transfer',
+    content: (
+      <>
+        <span>Transfer the money to Wise using your bank account.</span>
+        <span>0.32 GBP in fees, should arrive in seconds</span>
+      </>
+    ),
+  },
+  {
+    media: <BankTransfer />,
+    title: 'Withdraw from your U.S. bank account (ACH)',
+    content: (
+      <>
+        <span>1.63 USD in total fees.</span>
+        <span>
+          Pay with ACH using the bank account you’ve connected to Wise. Should arrive in seconds.
+        </span>
+      </>
+    ),
+  },
+];
+
+const optionsGroup: SelectOptiopsGroup<CustomData>[] = [
+  {
+    title: 'Recently used',
+    options: recentPaymentMethods,
+  },
+  {
+    // title: 'Payment methods',
+    options: allOtherPaymentMethods,
+  },
+];
+
+export const Basic: Story = {
+  render: (args) => {
+    function onChange(value: SelectOptionValue<CustomData>): void {
+      console.log(value);
+    }
+    return (
+      <div className="row">
+        <div className="col-md-8 col-md-offset-2">
+          <Field label={<>Payment method</>}>
+            <SelectOption<CustomData>
+              media={<Plus size={24} />}
+              options={optionsGroup}
+              optionsTitle="Payment methods"
+              title="No method selected"
+              action={{ label: 'Select' }}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+
+        <div className="col-md-6 col-md-offset-3">
+          <Field id="test-test" label={<>Payment method</>}>
+            <SelectOption<CustomData>
+              media={<Plus size={24} />}
+              title="No method selected"
+              options={optionsGroup}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+
+        <div className="col-md-6 col-md-offset-3">
+          <Field id="test-test" label={<>Payment method</>} hint="Nice hint message">
+            <SelectOption<CustomData>
+              media={<Plus size={24} />}
+              title="No method selected"
+              optionsTitle="Payment method"
+              options={optionsGroup}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+
+        <div className="col-md-6 col-md-offset-3">
+          <Field id="test-test" label={<>Payment method</>} error="Validation message">
+            <SelectOption<CustomData>
+              media={<Plus size={24} />}
+              title="No method selected"
+              optionsTitle="Payment method"
+              options={optionsGroup}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+
+        <div className="col-md-6 col-md-offset-3">
+          <Field label={<>Payment method</>} error="Validation message">
+            <SelectOption<CustomData>
+              disabled
+              media={<Plus size={24} />}
+              title="No method selected"
+              optionsTitle="Payment method"
+              options={optionsGroup}
+              onChange={onChange}
+            />
+          </Field>
+        </div>
+      </div>
+    );
+  },
+};

package/src/selectOption/SelectOption.tsx

@@ -0,0 +1,134 @@
+import { useRef, useState, ReactNode } from 'react';
+import ActionButton, { ActionButtonProps } from '../actionButton';
+import Chevron from '../chevron';
+import classNames from 'classnames';
+import Option from '../common/Option';
+import type { OptionProps } from '../common/Option/Option';
+import Panel from '../common/panel/Panel';
+import { Position } from '../common';
+import Section from '../section';
+import Header from '../header';
+import { useLayout } from '../common/hooks';
+import BottomSheet from '../common/bottomSheet';
+import { HeaderProps } from '../header/Header';
+import NavigationOption from '../navigationOption';
+import NavigationOptionsList from '../navigationOptionsList';
+import { useInputAttributes } from '../inputs/contexts';
+import messages from './SelectOption.messages';
+import { useIntl } from 'react-intl';
+
+export type SelectOptiopsGroup<T = unknown> = {
+  title?: HeaderProps['title'];
+  options: SelectOptionValue<T>[];
+};
+export type SelectOptionValue<T = unknown> = T & Pick<OptionProps, 'media' | 'title' | 'content'>;
+
+export type SelectOptionProps<T> = {
+  onChange: (selected: SelectOptionValue<T>) => void;
+  selected?: SelectOptionValue<T>;
+  optionsTitle?: HeaderProps['title'];
+  options: SelectOptiopsGroup<T>[];
+  action?: {
+    label?: ActionButtonProps['children'];
+  };
+} & Omit<OptionProps, 'as' | 'onClick' | 'onChange' | 'showMediaAtAllSizes' | 'decision'>;
+
+export default function SelectOption<T = unknown>({
+  selected: selectedValueProp = undefined,
+  optionsTitle,
+  options,
+  onChange,
+  action,
+  ...props
+}: SelectOptionProps<T>) {
+  const intl = useIntl();
+  const rootRef = useRef(null);
+  const [selected, setSelected] = useState(selectedValueProp);
+  const [showOptions, setShowOptions] = useState(false);
+  const inputAttributes = useInputAttributes();
+  function handleOnClick(showOptionsStatus: boolean) {
+    return () => {
+      setShowOptions(showOptionsStatus);
+    };
+  }
+  function handleOnChange(data: SelectOptionValue<T>) {
+    return () => {
+      setShowOptions(false);
+      setSelected(data);
+      onChange(data);
+    };
+  }
+  const isSelected = selected !== undefined;
+  const { isMobile } = useLayout();
+  function getOptionsContent(isMobileView = false) {
+    return (
+      <div className={classNames('np-select-option-list')}>
+        {options.map((optionsGroup) => (
+          // eslint-disable-next-line react/jsx-key
+          <Section className={classNames('np-select-option-group', { 'p-a-2': !isMobileView })}>
+            {optionsGroup.title && <Header title={optionsGroup.title} />}
+            <NavigationOptionsList>
+              {optionsGroup.options.map((option) => (
+                // eslint-disable-next-line react/jsx-key
+                <NavigationOption
+                  isContainerAligned={isMobileView}
+                  showMediaCircle
+                  showMediaAtAllSizes
+                  media={option.media}
+                  title={option.title}
+                  content={option.content}
+                  onClick={handleOnChange(option)}
+                />
+              ))}
+            </NavigationOptionsList>
+          </Section>
+        ))}
+      </div>
+    );
+  }
+  return (
+    <>
+      <Option
+        ref={rootRef}
+        {...props}
+        {...inputAttributes}
+        showMediaAtAllSizes
+        media={(isSelected ? selected : props).media}
+        title={(isSelected ? selected : props).title}
+        content={(isSelected ? selected : props).content}
+        className={classNames(
+          'np-select-option',
+          { 'np-select-option-selected': isSelected },
+          props.className,
+        )}
+        button={
+          isSelected ? (
+            <Chevron />
+          ) : (
+            <ActionButton disabled={props.disabled} onClick={handleOnClick(true)}>
+              {action?.label || intl.formatMessage(messages.actionLabel)}
+            </ActionButton>
+          )
+        }
+        onClick={isSelected ? handleOnClick(true) : undefined}
+      />
+      {isMobile ? (
+        <BottomSheet open={showOptions} onClose={handleOnClick(false)}>
+          {getOptionsContent(true)}
+        </BottomSheet>
+      ) : (
+        <Panel
+          anchorWidth
+          open={showOptions}
+          flip={false}
+          altAxis={false}
+          anchorRef={rootRef}
+          position={Position.BOTTOM}
+          onClose={handleOnClick(false)}
+        >
+          {getOptionsContent(false)}
+        </Panel>
+      )}
+    </>
+  );
+}

package/src/selectOption/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SelectOption';
+export type { SelectOptionProps, SelectOptionValue, SelectOptiopsGroup } from './SelectOption';

package/src/slidingPanel/SlidingPanel.spec.js

@@ -11,6 +11,7 @@ describe('SlidingPanel', () => {
     className: undefined,
     slidingPanelPositionFixed: false,
     showSlidingPanelBorder: false,
+    testId: undefined,
   };
 
   it('renders with right props', () => {
@@ -24,7 +25,7 @@ describe('SlidingPanel', () => {
 
     expect(cssTransition()).toHaveLength(1);
 
-    expect(cssTransition().props()).toStrictEqual({
+    expect(cssTransition().props()).toEqual({
       className: 'sliding-panel sliding-panel--open-left',
       children: null,
     });

package/src/slidingPanel/SlidingPanel.tsx

@@ -12,6 +12,7 @@ export interface SlidingPanelProps
   open: boolean;
   showSlidingPanelBorder?: boolean;
   slidingPanelPositionFixed?: boolean;
+  testId?: string;
 }
 
 const SlidingPanel = forwardRef(
@@ -23,6 +24,7 @@ const SlidingPanel = forwardRef(
       slidingPanelPositionFixed,
       className,
       children,
+      testId,
       ...rest
     }: Omit<SlidingPanelProps, 'ref'>,
     reference: React.ForwardedRef<HTMLDivElement | null>,
@@ -44,6 +46,7 @@ const SlidingPanel = forwardRef(
       >
         <div
           ref={localReference}
+          data-testid={testId}
           className={classNames(
             'sliding-panel',
             `sliding-panel--open-${position}`,

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,55 @@
-import { select, boolean } from '@storybook/addon-knobs';
+import type { Meta, StoryObj } from '@storybook/react';
 
+import React, { useState } from 'react';
 import Sticky from './Sticky';
 
-export default {
+const meta: Meta<typeof Sticky> = {
   component: Sticky,
   title: 'Other/Sticky',
+  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>
+    ),
+  },
 };
 
-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 {
+  /** Optional props that determines if the Sticky component is open or closed. Default value is `true`. */
   open?: boolean;
-  position?: `${Position.TOP | Position.BOTTOM}`;
+
+  /** Optional props that specifies the position of the Sticky component on the screen. Can be either `Position.TOP` or `Position.BOTTOM`. */
+  position?: `${Position.TOP}` | `${Position.BOTTOM}`;
+
+  /** Optional prop for children components to be rendered inside the Sticky component. */
   children?: React.ReactNode;
+
+  /** 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 {boolean} open - Determines if the Sticky component is open or closed.
+ * @param {('top'|'bottom')} position - Specifies the position.
+ * @param {ReactNode} children - Children content.
+ * @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> = ({
+  open = true,
+  position = Position.BOTTOM,
+  children,
+  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/uploadInput/UploadInput.css

@@ -26,9 +26,6 @@
   padding: 16px;
   padding: var(--padding-small);
 }
-.np-theme-personal .np-upload-input .np-upload-button .media {
-  align-items: start;
-}
 .np-theme-personal .np-upload-input .np-upload-input--square-top {
   border-top-right-radius: 0px;
   border-top-left-radius: 0px;
@@ -36,9 +33,6 @@
 .np-theme-personal .np-upload-input .np-upload-item__remove-button {
   border-radius: 0;
   border-radius: initial;
-  display: inline-flex;
-  padding-top: 16px;
-  padding-top: var(--padding-small);
 }
 .np-theme-personal .np-upload-input .np-upload-icon {
   color: var(--color-interactive-primary);
@@ -61,10 +55,6 @@
 .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

@@ -27,10 +27,6 @@
     .np-upload-button {
       border-radius: @small-border-minus-one;
       padding: var(--padding-small);
-
-      .media {
-        align-items: start;
-      }
     }
 
     .np-upload-input--square-top {
@@ -40,8 +36,6 @@
 
     .np-upload-item__remove-button {
       border-radius: unset;
-      display: inline-flex;
-      padding-top: var(--padding-small);
     }
 
     .np-upload-icon {
@@ -68,11 +62,6 @@
       }
     }
 
-    &-errors {
-      padding-left: 0;
-      list-style-position: inside;
-    }
-
     .status-circle {
       width: var(--size-x-small);
       height: var(--size-x-small);