@transferwise/components 45.12.0 → 45.14.0

package/src/promoCard/PromoCardGroup.story.tsx

@@ -0,0 +1,82 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import PromoCard from './PromoCard';
+import PromoCardGroup from './PromoCardGroup';
+
+const PromoCards = () => {
+  return (
+    <>
+      <PromoCard
+        title="Digital"
+        description="A card that lives online and works anywhere. Easy, secure, and always on hand."
+        type="radio"
+        value="digital"
+        id="digital"
+        imageAlt=""
+        indicatorLabel="Free"
+        imageSource="https://wise.com/web-art/assets/illustrations/digital-card-2-medium@2x.webp"
+      />
+      <PromoCard
+        title="Standard"
+        description="Spend and withdraw money around the world. In your wallet and on your side."
+        type="radio"
+        value="standard"
+        id="standard"
+        imageAlt=""
+        indicatorLabel="7 GBP"
+        imageSource="https://wise.com/web-art/assets/illustrations/personal-card-medium@2x.webp"
+      />
+      <PromoCard
+        title="Eco"
+        description="A debit card made to biodegrade — no toxic gases, no toxic fees."
+        type="radio"
+        value="eco"
+        id="eco"
+        imageAlt=""
+        indicatorLabel="9 GBP"
+        imageSource="https://wise.com/web-art/assets/illustrations/eco-card-medium@2x.webp"
+      />
+    </>
+  );
+};
+
+const meta: Meta<typeof PromoCardGroup> = {
+  component: PromoCardGroup,
+  title: 'Layouts/PromoCardGroup',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof PromoCardGroup>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <PromoCards />
+      </>
+    ),
+  },
+};
+
+export const DefaultChecked: Story = {
+  args: {
+    children: (
+      <>
+        <PromoCards />
+      </>
+    ),
+    defaultChecked: 'standard',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: (
+      <>
+        <PromoCards />
+      </>
+    ),
+    isDisabled: true,
+  },
+};

package/src/promoCard/PromoCardGroup.tsx

@@ -0,0 +1,131 @@
+import classNames from 'classnames';
+import React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';
+
+import { PromoCardProps } from './PromoCard';
+import PromoCardContext from './PromoCardContext';
+
+export type AriaRoleRadioGroup = 'radiogroup';
+
+export interface PromoCardGroupProps {
+  /**
+   * Optional class name(s) to add to the group container.
+   */
+  className?: string;
+  /**
+   * The PromoCard components to display inside the group.
+   */
+  children: ReactNode;
+  /**
+   * The default checked for the group.
+   */
+  defaultChecked?: string;
+  /**
+   * Optional ID to add to the group container.
+   */
+  id?: string;
+  /**
+   * Whether the group is disabled or not.
+   */
+  isDisabled?: boolean;
+  /**
+   * Optional label to display above the group.
+   */
+  label?: string;
+  /**
+   * Optional function to call when the group value changes.
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Optional ID to add to the group container for testing purposes.
+   */
+  testId?: string;
+}
+
+/**
+ * PromoCardGroup component.
+ *
+ * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more
+ * cards from a group. It can be used to display a set of related options, and can be customized with
+ * various props to suit different use cases.
+ *
+ * @param {ReactNode} children - The PromoCard components to display inside the group.
+ * @param {string} className - Optional class name(s) to add to the group container.
+ * @param {string} defaultChecked - The default value for the group.
+ * @param {string} id - Optional ID to add to the group container.
+ * @param {boolean} isDisabled=false - Whether the group is disabled or not.
+ * @param {string} label - Optional label to display above the group.
+ * @param {Function} onChange - Optional function to call when the group value changes.
+ * @param {string} testId - Optional ID to add to the group container for testing purposes.
+ * @returns {JSX.Element} - The PromoCardGroup component.
+ */
+const PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({
+  children,
+  className,
+  defaultChecked = '',
+  id,
+  isDisabled = false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChange = () => {},
+  testId,
+}) => {
+  const [state, setState] = useState<string>(defaultChecked);
+  const [containerRole, setContainerRole] = useState<string | null>(null);
+
+  /**
+   * The context value for the PromoCardGroup.
+   *
+   * The context value is an object that contains the current state of the
+   * group, whether the group is disabled or not, and a function to call when
+   * the group value changes. This value is used to provide context to child
+   * PromoCard components, allowing them to interact with the group and update
+   * its state.
+   */
+  const contextValue = useMemo(() => {
+    const handleOnChange = (value: string) => {
+      setState(value);
+      onChange(value);
+    };
+
+    return { state, isDisabled: isDisabled, onChange: handleOnChange };
+  }, [state, isDisabled, onChange]);
+
+  const commonClasses = classNames({
+    'np-CardGroup': true,
+    'is-disabled': isDisabled,
+    [`${className || ''}`]: className,
+  });
+
+  const commonProps = {
+    className: commonClasses,
+    id: id,
+    'data-testid': testId,
+    role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here
+  };
+
+  useEffect(() => {
+    setState(defaultChecked);
+
+    // Collect an array of types from the children PromoCard components
+    const types: ('radio' | 'checkbox')[] =
+      React.Children.map(children, (child) => {
+        if (React.isValidElement<PromoCardProps>(child) && child.props.type) {
+          return child.props.type;
+        }
+        return null;
+      })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];
+
+    // Check if all types are the same
+    const allTypesAreTheSame = types.every((type) => type === types[0]);
+
+    // If all types are the same and the type is 'radio', set the container role
+    setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);
+  }, [defaultChecked, children]);
+
+  return (
+    <PromoCardContext.Provider value={contextValue}>
+      <div {...commonProps}>{children}</div>
+    </PromoCardContext.Provider>
+  );
+};
+
+export default React.memo(PromoCardGroup);

package/src/promoCard/PromoCardIndicator.tsx

@@ -0,0 +1,74 @@
+import { ArrowRight, Check, Download } from '@transferwise/icons';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+
+import Body from '../body';
+import { Typography } from '../common';
+
+export type PromoCardIndicatorProps = {
+  /** Optional class name(s) to add to the indicator container. */
+  className?: string;
+
+  /** Optional label to display next to the indicator. */
+  label?: string;
+
+  /** Optional icon to display in the indicator. */
+  icon?: 'check' | 'arrow' | 'download';
+
+  /** Optional ID to add to the indicator container for testing purposes. */
+  testid?: string;
+
+  /** Optional children to display inside the indicator. */
+  children?: ReactNode;
+};
+
+/**
+ * PromoCardIndicator component.
+ *
+ * A PromoCardIndicator is a small component that can be used to display
+ * additional information or actions related to a PromoCard. It can be
+ * customized with various props to suit different use cases.
+ *
+ * @param {string} className - Optional class name(s) to add to the indicator container.
+ * @param {string} label - Optional label to display next to the indicator.
+ * @param {string} icon - Optional icon to display in the indicator.
+ * @param {string} testid - Optional ID to add to the indicator container for testing purposes.
+ * @param {ReactNode} children - Optional children to display inside the indicator.
+ * @returns {JSX.Element} - The PromoCardIndicator component.
+ * @example
+ * <PromoCardIndicator label="Download" icon="download" />
+ */
+const PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({
+  className,
+  children,
+  label,
+  icon,
+  testid,
+  ...rest
+}) => {
+  const IconComponent =
+    icon &&
+    {
+      check: Check,
+      arrow: ArrowRight,
+      download: Download,
+    }[icon];
+
+  return (
+    <div className={classNames('np-Card-indicator', className)} data-testid={testid} {...rest}>
+      {label && (
+        <Body as="span" type={Typography.BODY_LARGE_BOLD} className="np-Card-indicatorText">
+          {label}
+        </Body>
+      )}
+      {IconComponent && (
+        <span className="np-Card-indicatorIcon">
+          <IconComponent size={24} aria-hidden="true" />
+        </span>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default PromoCardIndicator;

package/src/promoCard/__snapshots__/PromoCard.spec.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PromoCard matches snapshot 1`] = `
+<div
+  class="np-Card np-Card--promoCard"
+  data-testid="test-promo-card"
+  id="test-promo-card"
+>
+  <h3
+    class="np-text-display-small text-primary np-Card-title"
+    id="test-promo-card-title"
+  >
+    Test Title
+  </h3>
+  <div
+    class="np-text-body-default np-Card-description"
+  >
+    Test Description
+  </div>
+  <div
+    class="np-Card-image"
+  >
+    <img
+      alt="Test Image"
+      class="tw-image tw-image__stretch tw-image__shrink"
+      src="test.jpg"
+    />
+  </div>
+  <div
+    class="np-Card-indicator"
+  >
+    <span
+      class="np-text-body-large-bold np-Card-indicatorText"
+    >
+      Test Indicator Label
+    </span>
+  </div>
+</div>
+`;

package/src/promoCard/__snapshots__/PromoCardGroup.spec.tsx.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PromoCardGroup matches snapshot 1`] = `
+<div
+  class="np-CardGroup"
+  data-testid="test-promo-card-group"
+  role="radiogroup"
+>
+  <div
+    aria-checked="false"
+    aria-describedby="radio-1-title"
+    class="np-Card np-Card--promoCard np-Card--checked"
+    data-testid="test-1"
+    data-value="radio-1"
+    id="radio-1"
+    role="radio"
+    tabindex="0"
+  >
+    <h3
+      class="np-text-display-small text-primary np-Card-title"
+      id="radio-1-title"
+    >
+      Test Card
+    </h3>
+    <div
+      class="np-text-body-default np-Card-description"
+    >
+      Test Description
+    </div>
+    <div
+      class="np-Card-image"
+    >
+      <img
+        alt=""
+        class="tw-image tw-image__stretch tw-image__shrink"
+        src="https://via.placeholder.com/150"
+      />
+    </div>
+    <div
+      class="np-Card-indicator"
+    />
+  </div>
+  <div
+    aria-checked="false"
+    aria-describedby="radio-2-title"
+    class="np-Card np-Card--promoCard np-Card--checked"
+    data-testid="test-2"
+    data-value="radio-2"
+    id="radio-2"
+    role="radio"
+    tabindex="0"
+  >
+    <h3
+      class="np-text-display-small text-primary np-Card-title"
+      id="radio-2-title"
+    >
+      Test Card
+    </h3>
+    <div
+      class="np-text-body-default np-Card-description"
+    >
+      Test Description
+    </div>
+    <div
+      class="np-Card-image"
+    >
+      <img
+        alt=""
+        class="tw-image tw-image__stretch tw-image__shrink"
+        src="https://via.placeholder.com/150"
+      />
+    </div>
+    <div
+      class="np-Card-indicator"
+    />
+  </div>
+</div>
+`;

package/src/promoCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from './PromoCard';
+export { default as PromoCardGroup } from './PromoCardGroup';

package/src/provider/Provider.js

@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import { IntlProvider } from 'react-intl';
+
+import { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';
+import en from '../i18n/en.json';
+
+import { DirectionProvider } from './direction';
+import { LanguageProvider } from './language';
+
+const Provider = ({ i18n, children }) => {
+  const { locale, messages, defaultRichTextElements } = i18n;
+  const adjustedLocale = adjustLocale(locale);
+  let intlConfig;
+
+  if (adjustedLocale === null) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,
+    );
+
+    intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };
+  } else {
+    intlConfig = { locale: adjustedLocale, messages };
+  }
+
+  return (
+    <DirectionProvider direction={getDirectionFromLocale(locale)}>
+      <LanguageProvider locale={locale}>
+        <IntlProvider
+          defaultLocale={DEFAULT_LOCALE}
+          locale={intlConfig.locale}
+          messages={intlConfig.messages}
+          defaultRichTextElements={defaultRichTextElements}
+        >
+          {children}
+        </IntlProvider>
+      </LanguageProvider>
+    </DirectionProvider>
+  );
+};
+
+Provider.propTypes = {
+  i18n: PropTypes.shape({
+    locale: PropTypes.string.isRequired,
+    messages: PropTypes.shape({}).isRequired,
+    defaultRichTextElements: PropTypes.shape({}),
+  }).isRequired,
+  children: PropTypes.node,
+};
+
+Provider.defaultProps = {
+  children: undefined,
+};
+
+export default Provider;

package/src/provider/Provider.spec.tsx

@@ -0,0 +1,99 @@
+import { render, waitFor, screen } from '@testing-library/react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import closeButtonMessages from '../common/closeButton/CloseButton.messages';
+
+import Provider from '.';
+
+describe('Provider', () => {
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+    jest.spyOn(console, 'error').mockImplementation(() => jest.fn());
+    jest.spyOn(console, 'warn').mockImplementation(() => jest.fn());
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('does not add any elements in the DOM', async () => {
+    const locale = 'en';
+    const messages = (await import(`../i18n/${locale}.json`)) as Record<string, string>;
+
+    const { container } = render(<Provider i18n={{ locale, messages }} />);
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it.each([
+    ['zh-HK', 'zh-HK'],
+    ['ru', 'ru'],
+    ['en-GB', 'en-GB'],
+    ['en-US', 'en-US'],
+    ['en_US', 'en-US'],
+    ['en_GB', 'en-GB'],
+    ['ja', 'ja'],
+    ['ja-JP', 'ja-JP'],
+    ['', 'en-GB'],
+    [' ', 'en-GB'],
+    [null, 'en-GB'],
+    [undefined, 'en-GB'],
+  ])('check locale value "%s"', (locale, expectedValue) => {
+    const TestComponent = () => {
+      const intl = useIntl();
+      return <>locale: {intl.locale}</>;
+    };
+    const { container } = render(
+      <Provider i18n={{ locale, messages: {} }}>
+        <TestComponent />
+      </Provider>,
+    );
+
+    expect(container).toHaveTextContent(`locale: ${expectedValue}`);
+  });
+
+  it.each([
+    ['ru', 'Закрыть'],
+    ['en', 'Close'],
+  ])('switching locale (%s)', async (locale, expectedMessage) => {
+    expect(document.body).toBeEmptyDOMElement();
+
+    const messages = (await import(`../i18n/${locale}.json`)) as Record<string, string>;
+
+    render(
+      <Provider i18n={{ locale, messages }}>
+        <FormattedMessage {...closeButtonMessages.ariaLabel} />
+      </Provider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('does not override passed in messages if parsing locale fails', async () => {
+    expect(document.body).toBeEmptyDOMElement();
+
+    const key = 'some.message.that.was.passed.in';
+    const translation = 'Boop';
+    const locale = 'en-GB';
+    const messages = { [key]: translation };
+
+    Object.defineProperty(Intl, 'Locale', {
+      value: undefined,
+    });
+
+    render(
+      <Provider i18n={{ locale, messages }}>
+        <span>
+          <FormattedMessage id={key} />
+        </span>
+        <span>
+          <FormattedMessage {...closeButtonMessages.ariaLabel} />
+        </span>
+      </Provider>,
+    );
+
+    expect(await screen.findByText(translation)).toBeInTheDocument();
+    expect(screen.getByText('Close')).toBeInTheDocument();
+  });
+});

package/src/provider/Provider.story.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FormattedMessage } from 'react-intl';
+
+import { Provider } from '..';
+import closeButtonMessages from '../common/closeButton/CloseButton.messages';
+
+export default {
+  component: Provider,
+  title: 'Other/Provider',
+} satisfies Meta<typeof Provider>;
+
+type Story = StoryObj<typeof Provider>;
+
+export const Basic: Story = {
+  render: () => (
+    <>
+      Translated message: <FormattedMessage {...closeButtonMessages.ariaLabel} />
+    </>
+  ),
+};

package/src/provider/direction/DirectionProvider.spec.tsx

@@ -0,0 +1,31 @@
+import { Direction } from '../../common';
+import { useDirection } from '../../common/hooks';
+import { render } from '../../test-utils';
+
+import { DirectionProvider } from '.';
+
+describe('DirectionProvider', () => {
+  beforeEach(() => {
+    document.documentElement.removeAttribute('dir');
+  });
+
+  it.each([
+    [Direction.LTR, false],
+    [Direction.RTL, true],
+  ])('store direction %s in React Context', (direction, isRTL) => {
+    let directionContext = null;
+    const TestComponent = () => {
+      directionContext = useDirection();
+      return <></>;
+    };
+    render(
+      <DirectionProvider direction={direction}>
+        <TestComponent />
+      </DirectionProvider>,
+    );
+
+    expect(directionContext).not.toBeNull();
+    expect(directionContext).toHaveProperty('direction', direction);
+    expect(directionContext).toHaveProperty('isRTL', isRTL);
+  });
+});

package/src/provider/direction/DirectionProvider.tsx

@@ -0,0 +1,11 @@
+import { createContext, ReactElement, PropsWithChildren } from 'react';
+
+import { LayoutDirection, Direction } from '../../common/direction';
+
+export const DirectionContext = createContext<LayoutDirection>(Direction.LTR);
+
+type Props = PropsWithChildren<{ direction: LayoutDirection }>;
+
+export const DirectionProvider = ({ direction, children }: Props): ReactElement => {
+  return <DirectionContext.Provider value={direction}>{children}</DirectionContext.Provider>;
+};

package/src/provider/direction/index.js

@@ -0,0 +1 @@
+export { DirectionProvider, DirectionContext } from './DirectionProvider';

package/src/provider/index.js

@@ -0,0 +1,3 @@
+export { DirectionProvider } from './direction';
+export { LanguageProvider } from './language';
+export { default } from './Provider';

package/src/provider/language/LanguageProvider.spec.tsx

@@ -0,0 +1,22 @@
+import { render } from '../../test-utils';
+
+import { LanguageProvider } from '.';
+
+describe('LanguageProvider', () => {
+  beforeEach(() => {
+    document.documentElement.removeAttribute('lang');
+  });
+
+  it.each([['en'], ['ru'], ['ja']])('store language %s in React Context', (locale) => {
+    const TestComponent = () => {
+      return <>locale: {locale}</>;
+    };
+    const { container } = render(
+      <LanguageProvider locale={locale}>
+        <TestComponent />
+      </LanguageProvider>,
+    );
+
+    expect(container).toHaveTextContent(`locale: ${locale}`);
+  });
+});

package/src/provider/language/LanguageProvider.tsx

@@ -0,0 +1,11 @@
+import { createContext, ReactElement, PropsWithChildren } from 'react';
+
+import { DEFAULT_LOCALE } from '../../common/locale';
+
+export const LanguageContext = createContext<string>(DEFAULT_LOCALE);
+
+type Props = PropsWithChildren<{ locale: string }>;
+
+export const LanguageProvider = ({ locale, children }: Props): ReactElement => {
+  return <LanguageContext.Provider value={locale}>{children}</LanguageContext.Provider>;
+};

package/src/provider/language/index.js

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