@transferwise/components 45.12.0 → 45.14.0

package/src/header/Header.story.tsx

@@ -0,0 +1,53 @@
+import Header from './Header';
+
+export default {
+  component: Header,
+  title: 'Typography/Header',
+};
+
+export const Basic = () => {
+  return <Header title="Header title" />;
+};
+
+export const WithAction = () => {
+  return (
+    <Header
+      title="Header title"
+      action={{
+        'aria-label': 'Magic',
+        text: 'Click me!',
+        onClick: () => alert('Action!'),
+      }}
+    />
+  );
+};
+
+export const WithActionAsLink = () => {
+  return (
+    <Header
+      title="Header title"
+      action={{
+        text: 'This is a link',
+        href: 'https://wise.com',
+      }}
+    />
+  );
+};
+
+export const WithActionAsLinkPreventingNavigationWithTracking = () => {
+  return (
+    <Header
+      title="Header title"
+      action={{
+        text: 'This is a link',
+        href: 'https://wise.com',
+        onClick: (event: React.MouseEvent<HTMLElement>) => {
+          alert('Running onClick handler');
+
+          // we can stop the navigation from happening as onClick will always run before href redirect
+          event.preventDefault();
+        },
+      }}
+    />
+  );
+};

package/src/header/Header.tsx

@@ -0,0 +1,79 @@
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+
+import ActionButton, { ActionButtonProps } from '../actionButton/ActionButton';
+import Button from '../button';
+import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
+import Link from '../link';
+import Title from '../title';
+
+type ActionProps = AriaLabelProperty & {
+  text: string;
+};
+
+type ButtonActionProps = ActionProps & ActionButtonProps;
+
+type LinkActionProps = ActionProps & LinkProps;
+
+export type HeaderProps = CommonProps & {
+  /**
+   * When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
+   */
+  action?: ButtonActionProps | LinkActionProps;
+  /**
+   * Override the heading element rendered for the title, useful to specify the semantics of your header.
+   *
+   * @default "h5"
+   */
+  as?: Heading;
+  title: string;
+};
+
+const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
+  const { isModern } = useTheme();
+  const props = {
+    'aria-label': action['aria-label'],
+  };
+
+  if ('href' in action) {
+    return (
+      <Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
+        {action.text}
+      </Link>
+    );
+  }
+
+  return isModern ? (
+    <Button
+      className="np-header__button"
+      priority="tertiary"
+      size="sm"
+      onClick={action.onClick}
+      {...props}
+    >
+      {action.text}
+    </Button>
+  ) : (
+    <ActionButton onClick={action.onClick} {...props}>
+      {action.text}
+    </ActionButton>
+  );
+};
+
+/**
+ *
+ * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
+ *
+ */
+export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
+  return (
+    <div className={classNames('np-header', className)}>
+      <Title as={as} type={Typography.TITLE_GROUP} className="np-header__title">
+        {title}
+      </Title>
+      {action && <HeaderAction action={action} />}
+    </div>
+  );
+};
+
+export default Header;

package/src/header/index.ts

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

package/src/i18n/index.ts

@@ -0,0 +1,37 @@
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import hu from './hu.json';
+import id from './id.json';
+import it from './it.json';
+import ja from './ja.json';
+import pl from './pl.json';
+import pt from './pt.json';
+import ro from './ro.json';
+import ru from './ru.json';
+import th from './th.json';
+import tr from './tr.json';
+import uk from './uk.json';
+import zh from './zh.json';
+
+const translations: Record<string, Record<string, string>> = {
+  de,
+  en,
+  es,
+  fr,
+  hu,
+  id,
+  it,
+  ja,
+  pl,
+  pt,
+  ro,
+  ru,
+  th,
+  tr,
+  uk,
+  zh,
+};
+
+export default translations;

package/src/image/Image.css

@@ -0,0 +1 @@
+.tw-image{max-width:none;min-width:-moz-min-content;min-width:min-content;width:auto}.tw-image__shrink{max-width:100%;min-width:auto}.tw-image__stretch{width:100%}

package/src/image/Image.less

@@ -0,0 +1,15 @@
+.tw-image {
+  max-width: none;
+  width: auto;
+  // This prevents content to shrink when shrink=false and stretch=true due to width: 100%
+  min-width: min-content;
+
+  &__shrink {
+    max-width: 100%;
+    min-width: auto;
+  }
+
+  &__stretch {
+    width: 100%;
+  }
+}

package/src/image/Image.spec.tsx

@@ -0,0 +1,94 @@
+import '@testing-library/jest-dom';
+import * as useHasIntersectedUtils from '../common/hooks/useHasIntersected/useHasIntersected';
+import { render, fireEvent, screen } from '../test-utils';
+
+import { EmptyTransparentImage, ImageProps } from './Image';
+
+import Image from '.';
+
+const props: ImageProps = {
+  id: 'id',
+  src: 'https://www.a-valid-src.png/',
+  alt: 'test',
+  className: 'className',
+  loading: 'lazy',
+  onLoad: jest.fn(),
+  onError: jest.fn(),
+  shrink: false,
+  stretch: false,
+};
+
+describe('Image', () => {
+  describe('when lazy loading is not enabled', () => {
+    it(`renders image`, () => {
+      render(<Image {...props} loading="eager" />);
+
+      const image: HTMLImageElement = screen.getByRole('img');
+
+      expect(image).toBeInTheDocument();
+      expect(image.src).toStrictEqual(props.src);
+      expect(image.id).toStrictEqual(props.id);
+      expect(image.alt).toStrictEqual(props.alt);
+    });
+  });
+
+  describe('when lazy loading is enabled', () => {
+    it('renders the image with EmptyTransparentImage if element is not visible', () => {
+      jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
+      render(<Image {...props} />);
+
+      const image: HTMLImageElement = screen.getByRole('img');
+
+      expect(image).toBeInTheDocument();
+      expect(image.src).toStrictEqual(EmptyTransparentImage);
+    });
+
+    it('renders the image with src if element is visible', () => {
+      jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([true]);
+
+      render(<Image {...props} />);
+
+      const image: HTMLImageElement = screen.getByRole('img');
+
+      expect(image).toBeInTheDocument();
+      expect(image.src).toStrictEqual(props.src);
+    });
+
+    it(`calls onload only if image has intersected`, () => {
+      jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([false]);
+      const { rerender } = render(<Image {...props} />);
+      const image = screen.getByRole('img');
+
+      fireEvent.load(image);
+      expect(props.onLoad).not.toHaveBeenCalled();
+
+      jest.spyOn(useHasIntersectedUtils, 'useHasIntersected').mockReturnValue([true]);
+      rerender(<Image {...props} />);
+
+      fireEvent.load(image);
+      expect(props.onLoad).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it(`when shrink is true it has shrink class`, () => {
+    const { rerender } = render(<Image {...props} />);
+    const image = screen.getByRole('img');
+
+    expect(image).not.toHaveClass('tw-image__shrink');
+
+    rerender(<Image {...props} shrink />);
+
+    expect(image).toHaveClass('tw-image__shrink');
+  });
+
+  it(`when stretch is true it has stretch class`, () => {
+    const { rerender } = render(<Image {...props} />);
+    const image = screen.getByRole('img');
+
+    expect(image).not.toHaveClass('tw-image__stretch');
+
+    rerender(<Image {...props} stretch />);
+
+    expect(image).toHaveClass('tw-image__stretch');
+  });
+});

package/src/image/Image.story.tsx

@@ -0,0 +1,62 @@
+import { action } from '@storybook/addon-actions';
+import { text, select, boolean } from '@storybook/addon-knobs';
+
+import Image from './Image';
+
+export default {
+  component: Image,
+  title: 'Content/Image',
+};
+
+export const Basic = () => {
+  const source = text('src', 'https://wise.com/web-art/assets/illustrations/bell-medium@2x.webp');
+  const shrink = boolean('shrink', true);
+  const stretch = boolean('stretch', true);
+  const loading = select(
+    'loading',
+
+    {
+      lazy: 'lazy',
+      eager: 'eager',
+    },
+    'lazy',
+  );
+
+  return (
+    <>
+      <Image
+        alt="test"
+        src={source}
+        id="id1"
+        loading={loading}
+        className="m-t-5"
+        shrink={shrink}
+        stretch={stretch}
+        onLoad={action('load 1')}
+        onError={action('error')}
+      />
+      <Image
+        alt="test"
+        src={source}
+        id="id2"
+        loading={loading}
+        className="m-t-5"
+        shrink={shrink}
+        stretch={stretch}
+        onLoad={action('load 2')}
+        onError={action('error')}
+      />
+      <Image
+        alt="test"
+        src={source}
+        id="id3"
+        loading={loading}
+        className="m-t-5"
+        shrink={shrink}
+        stretch={stretch}
+        onLoad={action('load 3')}
+        onError={action('error')}
+      />
+    </>
+  );
+};

package/src/image/Image.tsx

@@ -0,0 +1,65 @@
+import classnames from 'classnames';
+import { useRef } from 'react';
+
+import { useHasIntersected } from '../common/hooks';
+
+export interface ImageProps {
+  alt: string;
+  src: string;
+  id?: string;
+  onLoad?: () => void;
+  onError?: () => void;
+  className?: string;
+  loading?: 'lazy' | 'eager';
+  stretch?: boolean;
+  role?: string;
+  shrink?: boolean;
+}
+
+export const EmptyTransparentImage =
+  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+const Image = ({
+  id,
+  src,
+  alt,
+  onLoad,
+  onError,
+  className,
+  loading,
+  stretch = true,
+  role,
+  shrink = true,
+}: ImageProps) => {
+  const elementReference = useRef<HTMLImageElement>(null);
+  const [hasIntersected] = useHasIntersected({ elRef: elementReference, loading });
+  let imageSource = src;
+  let imageOnLoad = onLoad;
+
+  if (loading === 'lazy' && !hasIntersected) {
+    imageSource = EmptyTransparentImage;
+    imageOnLoad = undefined;
+  }
+
+  return (
+    <img
+      ref={elementReference}
+      id={id}
+      alt={alt}
+      src={imageSource}
+      className={classnames([
+        'tw-image',
+        {
+          'tw-image__stretch': stretch,
+          'tw-image__shrink': shrink,
+        },
+        className,
+      ])}
+      role={role}
+      onLoad={imageOnLoad}
+      onError={onError}
+    />
+  );
+};
+
+export default Image;

package/src/image/index.ts

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

package/src/index.ts

@@ -0,0 +1,161 @@
+/**
+ * Types
+ */
+export type { InputProps } from './inputs/Input';
+export type { InputGroupProps } from './inputs/InputGroup';
+export type { TextAreaProps } from './inputs/TextArea';
+export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
+export type { ModalProps } from './modal';
+export type {
+  LayoutDirection,
+  TypographyTypes,
+  TitleTypes,
+  BodyTypes,
+  LinkTypes,
+  DisplayTypes,
+} from './common';
+
+/**
+ * Components
+ */
+export { default as Title } from './title';
+export { default as Body } from './body';
+export { default as Accordion } from './accordion';
+export { default as ActionButton } from './actionButton';
+export { default as ActionOption } from './actionOption';
+export { default as Alert } from './alert';
+export { default as Avatar } from './avatar';
+export { default as AvatarWrapper } from './avatarWrapper';
+export { default as Badge } from './badge';
+export { default as BottomSheet } from './common/bottomSheet';
+export { default as Button } from './button';
+export { default as Card } from './card';
+export { default as BaseCard } from './common/card';
+export { default as Checkbox } from './checkbox';
+export { default as CheckboxButton } from './checkboxButton';
+export { default as CheckboxOption } from './checkboxOption';
+export { default as Chevron } from './chevron';
+export { default as Chips, Chip } from './chips';
+export { default as CircularButton } from './circularButton';
+export { default as DateInput } from './dateInput';
+export { default as DateLookup } from './dateLookup';
+export { default as Decision } from './decision';
+export { default as DefinitionList } from './definitionList';
+export { default as Dimmer } from './dimmer';
+export { default as Display } from './display';
+export { default as Drawer } from './drawer';
+export { default as DropFade } from './dropFade';
+export { default as DynamicFieldDefinitionList } from './dynamicFieldDefinitionList';
+export { default as Emphasis } from './emphasis';
+export { default as FlowNavigation } from './flowNavigation/FlowNavigation';
+export { default as Header } from './header';
+export { default as Image } from './image';
+export { default as Info } from './info';
+export { default as InlineAlert } from './inlineAlert';
+export { Input } from './inputs/Input';
+export { InputGroup } from './inputs/InputGroup';
+export { TextArea } from './inputs/TextArea';
+export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
+export { default as InstructionsList } from './instructionsList';
+export { default as Link } from './link';
+export { default as Loader } from './loader';
+export { default as Logo } from './logo';
+export { default as Markdown } from './markdown';
+export { default as Modal } from './modal';
+export { default as Money } from './money';
+export { default as MoneyInput } from './moneyInput';
+export { default as NavigationOption } from './navigationOption';
+export { default as NavigationOptionsList } from './navigationOptionsList';
+export { default as Nudge } from './nudge';
+export { default as Option } from './common/Option';
+export { default as OverlayHeader } from './overlayHeader';
+export { default as PhoneNumberInput } from './phoneNumberInput';
+export { default as Popover } from './popover';
+export { default as ProcessIndicator } from './processIndicator';
+export { default as ProgressBar } from './progressBar';
+export { default as Progress } from './progress';
+export { default as PromoCard } from './promoCard';
+export { default as PromoCardGroup } from './promoCard';
+export { default as Provider, DirectionProvider, LanguageProvider } from './provider';
+export { default as Radio } from './radio';
+export { default as RadioGroup } from './radioGroup';
+export { default as RadioOption } from './radioOption';
+export { default as Section } from './section';
+export { default as Select } from './select';
+export { default as SlidingPanel } from './slidingPanel';
+export { default as SnackbarPortal } from './snackbar/Snackbar';
+export { default as SnackbarProvider } from './snackbar/SnackbarProvider';
+export { default as StatusIcon } from './statusIcon/StatusIcon';
+export { default as Stepper } from './stepper/Stepper';
+export { default as Sticky } from './sticky';
+export { default as Summary } from './summary';
+export { default as Switch } from './switch';
+export { default as SwitchOption } from './switchOption';
+export { default as Tabs } from './tabs';
+export { default as TextareaWithDisplayFormat } from './textareaWithDisplayFormat';
+export { default as Tooltip } from './tooltip';
+export { default as Typeahead } from './typeahead';
+export { default as Upload } from './upload';
+export { default as UploadInput } from './uploadInput';
+export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
+export { default as CriticalCommsBanner } from './criticalBanner';
+export { default as ListItem } from './listItem';
+
+/**
+ * Hooks
+ */
+export { default as useSnackbar } from './snackbar/useSnackbar';
+export { useDirection, useLayout } from './common/hooks';
+
+/**
+ * Enums
+ */
+export {
+  Direction,
+  Size,
+  Width,
+  Sentiment,
+  Priority,
+  ControlType,
+  Type,
+  Theme,
+  DateMode,
+  MonthFormat,
+  Position,
+  Scroll,
+  ProfileType,
+  Breakpoint,
+  Layout,
+  Status,
+  MarkdownNodeType,
+  Typography,
+  Variant,
+} from './common';
+export { AvatarType } from './avatar';
+export { InfoPresentation } from './info';
+export { UploadStep } from './upload';
+export { DecisionPresentation, DecisionType } from './decision';
+export { AlertArrowPosition } from './alert/withArrow';
+export { LogoType } from './logo';
+export { FileType } from './common';
+
+/**
+ * Utils
+ */
+export {
+  adjustLocale,
+  DEFAULT_LANG,
+  DEFAULT_LOCALE,
+  getCountryFromLocale,
+  getDirectionFromLocale,
+  getLangFromLocale,
+  isBrowser,
+  isServerSide,
+  RTL_LANGUAGES,
+  SUPPORTED_LANGUAGES,
+} from './common';
+
+/**
+ * Translations
+ */
+export { default as translations } from './i18n';

package/src/info/Info.css

@@ -0,0 +1 @@
+.np-info{color:var(--color-interactive-primary);height:16px;line-height:1;vertical-align:middle}.np-info [data-toggle=popover]:not(.btn),.np-info button{--ring-outline-offset:0;display:inline-block;height:16px;overflow:hidden}.np-info__large{height:24px}.np-info__large [data-toggle=popover]:not(.btn),.np-info__large button{display:inline-block;height:24px}.np-info .tw-icon{color:var(--color-interactive-primary);cursor:pointer;display:inline-block}.np-info [data-toggle=popover]:not(.btn){border-bottom:none!important}.np-info [data-toggle=popover]:not(.btn):focus{outline:revert}

package/src/info/Info.less

@@ -0,0 +1,43 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+
+.np-info {
+  height: 16px;
+  line-height: 1;
+  vertical-align: middle;
+  color: var(--color-interactive-primary);
+
+  button,
+  [data-toggle="popover"]:not(.btn) {
+    .ring-offset-0();
+
+    height: 16px;
+    overflow: hidden;
+    display: inline-block;
+  }
+
+  &__large {
+    height: 24px;
+
+    button,
+    [data-toggle="popover"]:not(.btn) {
+      height: 24px;
+      display: inline-block;
+    }
+  }
+
+  .tw-icon {
+    cursor: pointer;
+    color: var(--color-interactive-primary);
+    display: inline-block;
+  }
+
+  [data-toggle="popover"]:not(.btn) {
+    // Bootstrap popover has !important dotted border bottom
+    // This doesn't make sense on a help icon
+    border-bottom: none !important;
+
+    &:focus {
+      outline: revert;
+    }
+  }
+}

package/src/info/Info.spec.js

@@ -0,0 +1,68 @@
+import { act, render, fireEvent, waitFor, screen } from '../test-utils';
+
+import Info, { InfoPresentation } from '.';
+
+describe('Info', () => {
+  const props = {
+    content: 'content',
+    className: 'className',
+    title: 'title',
+    'aria-label': 'aria-label',
+  };
+
+  it('calls onClick on click event', async () => {
+    const fn = jest.fn();
+    await act(async () => {
+      render(<Info {...props} onClick={fn} />);
+    });
+    await act(async () => {
+      fireEvent.click(getTriggerButton());
+    });
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  describe(`when in ${InfoPresentation.POPOVER} mode`, () => {
+    it('renders help button trigger', async () => {
+      await waitFor(() => {
+        render(<Info {...props} />);
+      });
+      expect(getTriggerButton()).toBeInTheDocument();
+    });
+    it('opens popover onClick', async () => {
+      await waitFor(() => {
+        render(<Info {...props} />);
+      });
+      expect(getPopover()).not.toBeInTheDocument();
+      await openPopover();
+      expect(getPopover()).toBeInTheDocument();
+    });
+  });
+
+  describe(`when in ${InfoPresentation.MODAL} mode`, () => {
+    it('renders help button trigger', async () => {
+      await waitFor(() => {
+        render(<Info {...props} />);
+      });
+
+      expect(getTriggerButton()).toBeInTheDocument();
+    });
+    it('opens modal onClick', () => {
+      render(<Info {...props} presentation={InfoPresentation.MODAL} />);
+
+      expect(getModal()).not.toBeInTheDocument();
+
+      fireEvent.click(getTriggerButton());
+
+      expect(getModal()).toBeInTheDocument();
+    });
+  });
+
+  const getTriggerButton = () => screen.queryByLabelText('aria-label');
+  const getSvgIcon = () => document.querySelector('.tw-icon-help-circle > svg');
+  const getPopover = () => screen.queryByRole('tooltip');
+  const getModal = () => screen.queryByRole('dialog');
+
+  const openPopover = async () => {
+    await waitFor(() => fireEvent.click(getTriggerButton()));
+  };
+});