@transferwise/components 45.11.0 → 45.13.0

package/src/tabs/utils.js

@@ -0,0 +1,51 @@
+const MIN_SWIPE_DISTANCE = 50;
+const MIN_SWIPE_VELOCITY = 0.1;
+
+const swipedSignificantDistance = (difference) => Math.abs(difference) > MIN_SWIPE_DISTANCE;
+
+const swipedWithSignificantVelocity = (velocity) => velocity > MIN_SWIPE_VELOCITY;
+
+export const getSwipeVelocity = (start, end) => {
+  const timePassed = end.time - start.time;
+
+  return getSwipeDifference(start, end) / timePassed;
+};
+
+export const getSwipeDifference = (start, end, axis = 'x') => {
+  return Math.abs(start[axis] - end[axis]);
+};
+
+export const swipedLeftToRight = (start, end) => {
+  return end.x > start.x;
+};
+
+export const swipedRightToLeft = (start, end) => {
+  return start.x > end.x;
+};
+
+export const swipeShouldChangeTab = (start, end) => {
+  const difference = getSwipeDifference(start, end);
+  const velocity = getSwipeVelocity(start, end);
+
+  return swipedSignificantDistance(difference) && swipedWithSignificantVelocity(velocity);
+};
+
+export function getVelocity(coords) {
+  try {
+    const relevant = coords.slice(Math.max(coords.length - 5, 1));
+    const first = relevant[0];
+    const last = relevant[relevant.length - 1];
+
+    return Math.abs(first.x - last.x) / (last.time - first.time);
+  } catch {
+    return 0;
+  }
+}
+
+/*
+  `elasticDrag` is the translateX value, which slows down as the difference increases
+  `1 - Math.E ** (-0.005 * difference)` provides a % value of how far we want to translate (0.005 being the rate)
+  `Math.min(150, window.innerWidth / 3)` provides the maximum translate value
+*/
+export const getElasticDragDifference = (difference) =>
+  Math.min(150, window.innerWidth / 3) * (1 - Math.E ** (-0.005 * difference));

package/src/tabs/utils.spec.js

@@ -0,0 +1,123 @@
+import {
+  getElasticDragDifference,
+  swipedLeftToRight,
+  swipedRightToLeft,
+  getSwipeDifference,
+  swipeShouldChangeTab,
+  getVelocity,
+} from './utils';
+
+describe('Tabs Utility', () => {
+  let start;
+  let end;
+  let coords;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when the ending x axis is greater than the starting x axis', () => {
+    beforeEach(() => {
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 50, time: 1569538800300 };
+    });
+
+    it('determines that the swipe was left to right', () => {
+      expect(swipedLeftToRight(start, end)).toBe(true);
+      expect(swipedRightToLeft(start, end)).toBe(false);
+    });
+
+    it('calculates the correct swipe difference', () => {
+      expect(getSwipeDifference(start, end)).toBe(50);
+    });
+  });
+
+  describe('when the ending x axis is less than the starting x axis', () => {
+    beforeEach(() => {
+      start = { x: 50, time: 1569538800000 };
+      end = { x: 0, time: 1569538800300 };
+    });
+
+    it('determines that the swipe was right to left', () => {
+      expect(swipedRightToLeft(start, end)).toBe(true);
+      expect(swipedLeftToRight(start, end)).toBe(false);
+    });
+
+    it('calculates the correct swipe difference', () => {
+      expect(getSwipeDifference(start, end)).toBe(50);
+    });
+  });
+
+  describe('checking if a swipe should change tabs', () => {
+    it('should change tab when the difference and velocity are significant', () => {
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 100, time: 1569538800001 };
+      expect(swipeShouldChangeTab(start, end)).toBe(true);
+    });
+
+    it('should not change tab when the difference is small', () => {
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 1, time: 1569538800001 };
+      expect(swipeShouldChangeTab(start, end)).toBe(false);
+    });
+
+    it('should not change tab when the velocity is small', () => {
+      start = { x: 0, time: 1569538800000 };
+      end = { x: 100, time: 1569538900000 };
+      expect(swipeShouldChangeTab(start, end)).toBe(false);
+    });
+  });
+
+  describe('checking for velocity against an array of touches', () => {
+    beforeEach(() => {
+      coords = [
+        { x: 0, time: 1569538800000 },
+        { x: 100, time: 1569538825000 },
+        { x: 200, time: 1569538850000 },
+        { x: 300, time: 1569538875000 },
+        { x: 400, time: 1569538900000 },
+      ];
+    });
+
+    it('should return the difference in velocity between the first and last touch in an array', () => {
+      expect(getVelocity(coords)).toBe(0.004);
+    });
+
+    it('should only take into account the last 5 coordinates', () => {
+      coords.unshift({ x: 10000, time: 1569538800000 }, { x: 100000, time: 1569538800000 });
+      expect(getVelocity(coords)).toBe(0.004);
+    });
+
+    it('returns a default 0 if there are any issues with the touches passed in', () => {
+      expect(getVelocity([])).toBe(0);
+      expect(getVelocity([null, null, null])).toBe(0);
+    });
+  });
+
+  describe('applying elasticity to a drag event', () => {
+    it('gradually reduces the amount of difference returned toward a maximum distance', () => {
+      global.innerWidth = 375;
+      const maximumDraggableDistance = 125;
+
+      expect(getElasticDragDifference(0)).toBe(0);
+      expect(getApproximateElasticDragDifference(50)).toBe(28);
+      expect(getApproximateElasticDragDifference(100)).toBe(49);
+      expect(getApproximateElasticDragDifference(150)).toBe(66);
+      expect(getApproximateElasticDragDifference(200)).toBe(79);
+      expect(getApproximateElasticDragDifference(250)).toBe(89);
+      expect(getApproximateElasticDragDifference(300)).toBe(97);
+      expect(getApproximateElasticDragDifference(350)).toBe(103);
+
+      expect(getElasticDragDifference(10000)).toBe(maximumDraggableDistance);
+    });
+
+    it('limits the maximum dragable distance on larger screens', () => {
+      global.innerWidth = 1024;
+      const maximumDraggableDistance = 150;
+      expect(getElasticDragDifference(10000)).toBe(maximumDraggableDistance);
+    });
+  });
+});
+
+const getApproximateElasticDragDifference = (difference) =>
+  Math.round(getElasticDragDifference(difference));

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

@@ -0,0 +1,61 @@
+declare module '@storybook/types' {
+  interface Parameters {
+    /** Prefer using `storyConfig` for configuring variants */
+    variants?: ('default' | 'light' | 'dark' | 'rtl' | (string & Record<string, unknown>))[];
+    /** Used by Chromatic */
+    chromatic?: ChromaticParameters;
+    viewport?: {
+      viewports?: Record<string, unknown>;
+      defaultViewport?: string;
+    };
+  }
+}
+
+/**
+ * Derived from Chromatic's config type definitions
+ *
+ * @see https://github.com/chromaui/chromatic-cli/blob/main/storybook-addon.d.ts
+ */
+export interface ChromaticParameters {
+  /**
+   * Prefer using `storyConfig` for configuring viewports if possible.
+   *
+   * To set a viewport, specify one or more screen widths to the
+   * `chromatic.viewports` parameter. When left unspecified, Chromatic
+   * uses a default value of `[1200]`. Use `[414]` for 'Large mobile'
+   * viewport width.
+   *
+   * @default [1200]
+   */
+  viewports?: [414] | [414, 1200];
+
+  /**
+   * You can omit stories entirely from Chromatic testing using the disable story parameter.
+   */
+  disable?: boolean;
+
+  /**
+   * Chromatic will pause CSS animations and reset them to their beginning state.
+   *
+   * Some animations are used to "animate in" visible elements. To specify that Chromatic should pause the
+   * animation at the end, use the `pauseAnimationAtEnd` story parameter.
+   */
+  pauseAnimationAtEnd?: boolean;
+
+  /**
+   * Use story-level delay to ensure a minimum amount of time (in milliseconds) has passed before Chromatic takes a
+   * screenshot.
+   */
+  delay?: number;
+
+  /**
+   * The diffThreshold parameter allows you to fine tune the threshold for visual change between snapshots before
+   * they’re flagged by Chromatic. Sometimes you need assurance to the sub-pixel and other times you want to skip
+   * visual noise generated by non-deterministic rendering such as anti-aliasing.
+   *
+   * 0 is the most accurate. 1 is the least accurate.
+   *
+   * @default 0.063
+   */
+  diffThreshold?: number;
+}

package/src/test-utils/fake-data.ts

@@ -0,0 +1,14 @@
+export const lorem10 =
+  'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iste, architecto?';
+
+export const lorem40 =
+  'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo esse quod et iure deserunt facilis similique voluptatem reprehenderit mollitia inventore, ab voluptate dignissimos autem repellat accusamus perferendis sed pariatur tempore possimus ipsam praesentium ipsum? Nesciunt cumque repellendus impedit aliquam! Error?';
+
+export const lorem100 =
+  'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsum quisquam fuga dolore veritatis assumenda rerum, non, sint aliquam, excepturi architecto temporibus quis? Quo, deleniti nobis, illo necessitatibus accusamus commodi error fuga culpa sequi, incidunt voluptatum tempore quisquam quos eos modi impedit sit! Eveniet libero optio assumenda rem accusantium quod quas, recusandae, incidunt mollitia harum dolorum. Dolor porro hic mollitia accusantium vel commodi, ipsam a suscipit iusto placeat numquam excepturi amet nostrum aliquid aperiam sequi deleniti asperiores fugit cumque ipsa voluptatem culpa non libero iste. Placeat rem dolore quisquam aperiam, eligendi facere quos minima totam a ut corporis culpa! Veniam, illo!';
+
+export const lorem500 =
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi commodi eos placeat aut quidem et error ex qui. Reprehenderit animi officiis magnam dicta, alias eligendi facilis sit fuga suscipit qui voluptatibus, quam harum beatae omnis sint sapiente dolorum cum officia dignissimos ab ipsa, deleniti voluptates exercitationem tempore! Fugit consequuntur ullam, similique tenetur corporis laborum sed sint, necessitatibus natus voluptatem, eius eveniet placeat quos quaerat officia officiis magni reprehenderit eaque! Dolorum odio iste vitae magnam, voluptatum pariatur unde, quod at adipisci reprehenderit dignissimos id modi quaerat rerum et dolorem. Rerum ratione beatae, repudiandae temporibus ipsam accusamus deserunt! Maiores, eos nisi laboriosam soluta rem minus expedita repudiandae accusamus aperiam rerum facere ducimus voluptas! Rerum fugit eum quasi. At sapiente quaerat, similique inventore quia magni cupiditate molestias odio voluptate quasi culpa ullam sit unde veritatis ut dicta ad nihil veniam accusamus eveniet vel placeat minus numquam nostrum! Delectus quas adipisci debitis cumque doloremque, nobis, obcaecati dolorem commodi possimus nesciunt vero? Excepturi saepe explicabo dolorem facere itaque optio, totam tempore earum culpa fugit ullam officia maiores dolores facilis voluptate consequuntur a voluptas, asperiores obcaecati voluptatem. Rerum suscipit quod nulla harum illum sequi praesentium tenetur neque architecto, molestias earum! Necessitatibus, ullam molestiae voluptas, esse dolorem officiis aut, inventore dolore provident beatae error nesciunt incidunt neque quam molestias iusto minus rem nam. Eum, provident id. Molestias vitae ex sequi veritatis totam minima labore quasi eligendi nemo, ipsa accusamus eaque quae maiores eum ipsam inventore illo voluptatem sapiente velit, quos aspernatur commodi quibusdam. A expedita, adipisci aut voluptatum repellat fugit saepe accusamus debitis, quis dolorem, incidunt corrupti magni? Inventore nulla fugit quisquam dolorum temporibus corporis error voluptates? Impedit possimus provident a vero exercitationem doloribus est voluptatibus distinctio, ipsum iste sit repellat sapiente tenetur deleniti ullam dolorem soluta accusantium! Ab, placeat rerum explicabo corporis impedit quam quos veritatis expedita hic veniam harum qui dolor neque! Laboriosam officiis, dignissimos corporis, ducimus iure nemo quisquam pariatur molestias repellat aliquam tempore impedit dolore tempora eaque accusamus fugiat facilis dolor sint laborum molestiae sapiente deserunt quasi obcaecati! Veniam, doloribus! Unde, fugiat odit sunt facere maiores nobis tempora, natus quam consectetur deleniti nesciunt perferendis aut praesentium. Libero, neque cumque beatae recusandae qui repudiandae sunt quod dolorum nemo voluptates et culpa temporibus perferendis est expedita vel laboriosam! Accusamus incidunt consectetur delectus voluptate sunt repudiandae deleniti ut consequuntur, facilis assumenda nostrum soluta unde repellat reiciendis ipsum quidem quam numquam optio voluptates eius. Molestias quibusdam assumenda earum atque ullam delectus explicabo recusandae quasi aperiam, est placeat? Officia molestiae accusamus rem placeat adipisci officiis harum vel. Neque sit qui alias magni illum! Ipsam, necessitatibus unde sit possimus ipsum quis neque voluptate reprehenderit tempore nobis quo sunt molestiae atque rerum similique natus minus eum? Maiores aspernatur ut ullam eos vitae aperiam odit deleniti eveniet delectus totam harum iste, blanditiis ab laboriosam mollitia. Esse incidunt odit voluptate minus cum molestiae reprehenderit minima voluptatibus id. Molestias aliquid repellendus dolores cupiditate, nemo reiciendis ad facilis quo est, a error culpa similique libero dolor labore! Facere laborum cupiditate iste laboriosam culpa consectetur.';
+
+export const lorem1000 =
+  'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo placeat aliquid unde in, et tenetur odio voluptatum numquam possimus accusantium amet perferendis! Tempore obcaecati doloremque debitis quam nemo, non magni quaerat, ratione architecto officiis repellat, cum autem velit! Nisi nesciunt accusamus est distinctio voluptates voluptatem ducimus molestias! Cumque iure molestias corrupti sint maiores placeat delectus ratione veniam, laudantium enim id consequuntur alias minus dicta, aspernatur, non quis quam voluptatibus ut explicabo molestiae dolorem vitae beatae. In consequatur iste earum ipsam quaerat officiis, debitis rerum placeat harum sint natus delectus aut omnis, ullam voluptate aliquid dolorem rem velit minus asperiores molestiae! Totam consequuntur quis impedit! Deleniti eos assumenda commodi, dolor impedit nulla! Esse quas, magnam accusantium sit deserunt non culpa totam possimus voluptatem facilis. Sed aliquid sapiente assumenda, ipsa esse fugit necessitatibus soluta fugiat laudantium nulla cupiditate quod et iste nam ad veritatis, corrupti quae dolores, explicabo amet. Aspernatur, amet, illo vero impedit deleniti modi, minima quod totam atque quas ratione iste ea. Culpa, alias unde itaque fugit tempore consequuntur esse incidunt vitae illo maiores, tempora sit perspiciatis molestiae ex inventore. Aliquid beatae, natus delectus perferendis veritatis deserunt quo quae magni quaerat odio consequuntur quia, molestias quibusdam reiciendis voluptates, nemo repudiandae maxime! Tempora ipsum iusto, tempore at quaerat id ex quasi ducimus laboriosam unde ullam perspiciatis nemo voluptatum, odio consequatur dolorum eveniet praesentium! Fuga quidem voluptatum sed consectetur itaque nostrum, tempore omnis est facere quaerat dolores aut molestias facilis. Neque earum quaerat ipsum vel in accusantium, quia nihil, veritatis hic mollitia provident voluptates assumenda quis quo esse officiis repellendus vero eos? Quis praesentium magni, assumenda autem nesciunt voluptatibus sequi voluptate ea earum, molestiae tempore libero, pariatur blanditiis ab. Minus omnis necessitatibus, non aliquid fugiat ad ut, totam rerum deserunt similique iure cumque harum consectetur ducimus, molestiae consequatur libero! Inventore eveniet, quisquam est voluptates, rem commodi magnam veniam, eligendi aspernatur molestias esse nisi amet? Velit, possimus sint suscipit nostrum nihil ipsum perspiciatis consectetur, quo laboriosam sequi quasi quos repellendus veritatis nisi distinctio reiciendis at dignissimos id temporibus veniam beatae rerum? Accusantium sequi impedit deleniti ipsam? Laudantium, vitae necessitatibus laborum itaque recusandae hic, eum a fuga cumque quidem quasi. Omnis ut vitae incidunt, accusantium suscipit aut at reiciendis nisi voluptatum maxime consequuntur, minima accusamus nemo. Fugiat quos, consequuntur aspernatur sit labore doloribus enim. Tenetur, suscipit omnis asperiores non odio voluptas illo excepturi natus doloribus veniam dicta laborum distinctio reiciendis. Soluta saepe harum corrupti asperiores, labore temporibus nesciunt eligendi quia sit voluptatem libero perspiciatis laboriosam cupiditate id, iure non hic qui et voluptatum. Sint delectus voluptatem possimus, nam dicta pariatur optio molestiae explicabo. Neque, quia reiciendis minima ratione ipsa temporibus quas inventore nam, explicabo expedita, alias est sequi eius aliquid quod ex sapiente voluptas. Deserunt asperiores tempora, ad modi omnis velit ipsam dignissimos qui repellat? Optio fugiat tempora tenetur deleniti corrupti eaque officiis reiciendis in numquam pariatur voluptas, odio deserunt dolorum, nobis asperiores accusamus quod libero facere consectetur a iste at aut enim. Animi adipisci pariatur repellat asperiores aliquid facere sapiente excepturi nemo praesentium neque nobis possimus expedita amet reprehenderit quos, repellendus, molestias accusantium nesciunt eum, perspiciatis recusandae? Porro eum cum voluptas quibusdam necessitatibus autem adipisci illo inventore iusto consequuntur est ullam, quo reiciendis corrupti, voluptates molestiae laboriosam asperiores quae? Praesentium perferendis et minima, est, fugit possimus ipsam eum facilis impedit, voluptatibus repudiandae tenetur laboriosam magnam inventore vel tempore quasi nulla necessitatibus a dolores? Ratione molestias voluptates magnam quaerat error sequi dolorem ut facere exercitationem est voluptatum ipsam quae, alias dolores quisquam assumenda repudiandae ex eum modi praesentium culpa excepturi accusantium! Temporibus, praesentium tenetur quasi error quae sed aspernatur placeat? Nostrum itaque veritatis rerum deleniti aut optio perferendis illo, distinctio eveniet? Nostrum, ex iste voluptatum consequatur vitae voluptate quod nulla cupiditate modi ipsum enim, incidunt assumenda fugit sapiente distinctio porro quisquam quasi beatae asperiores expedita soluta vel. Odio illo odit sapiente? Natus culpa ipsam nostrum necessitatibus corporis optio cupiditate quia ullam saepe tempore eum odio cum quam dolor, doloremque beatae praesentium sapiente vel quos fuga iure? Inventore deserunt omnis numquam eligendi molestiae veritatis sequi ipsa ipsum iure ratione officiis corporis quam, iusto corrupti, quos dolor earum quasi, officia ex unde dicta ut? Veniam facere itaque aliquid obcaecati. Commodi pariatur amet magnam omnis recusandae, cumque ad. Assumenda facere, cupiditate dicta quisquam debitis repellat non officiis voluptatum doloribus itaque, quia quidem dolor modi illo. Animi a nisi autem explicabo corrupti ducimus! Est provident dolores hic, repellendus sequi reiciendis libero iure quaerat aliquam in voluptatem vitae debitis, placeat enim saepe ratione accusantium, eligendi rerum architecto quis nam animi omnis! Libero obcaecati cupiditate nulla id mollitia, enim nobis nemo rem quo dicta assumenda. Similique, id repudiandae. Sint eum repudiandae quam officiis ullam maiores, inventore explicabo mollitia quo ipsa velit commodi. Eos possimus omnis incidunt. Asperiores adipisci eos porro facilis consectetur dignissimos, quibusdam cupiditate nihil eius excepturi vero atque aperiam rerum repudiandae, in esse officiis dolorum magnam. Velit, reiciendis tempora. Sint sed dolorem praesentium incidunt eaque laudantium a laboriosam voluptates quo rem necessitatibus beatae nostrum temporibus quaerat obcaecati aperiam ratione nobis cumque eum, quibusdam voluptatum vitae odio earum! Consequuntur nihil in distinctio dolores magnam nisi aliquid minus possimus veniam obcaecati rem esse aspernatur, ipsa incidunt nam, blanditiis doloribus cumque molestiae animi commodi? Autem aut nam libero reiciendis non doloribus rerum sit impedit laboriosam vero ab possimus repellendus tenetur in dolores ullam ipsum quo necessitatibus harum, exercitationem magnam quod nostrum adipisci molestiae! Temporibus placeat sapiente necessitatibus eveniet veritatis minima quisquam deserunt tempore qui dolorum corporis provident, dolores illum. Recusandae quas ipsum placeat facere iure, id tempora minus tempore minima? Ducimus excepturi exercitationem quia hic, est iure pariatur nobis animi. Autem, quos. Nisi maxime, nemo voluptates voluptatum excepturi architecto assumenda non! Similique dolorum veniam, placeat fugit qui porro, earum aut odit minima obcaecati explicabo perspiciatis enim ex. Rem vitae ea, iusto modi illo sapiente, provident, aliquid quis doloremque blanditiis labore odio. Ipsum, sequi quod aspernatur rerum, quia quae aliquam, ex doloribus nostrum dicta dolor porro. Corporis, praesentium libero voluptas beatae odit rem labore ipsam accusantium, sapiente maxime placeat, itaque quia qui?';

package/src/test-utils/index.js

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+
+import { Provider } from '..';
+import { DEFAULT_LOCALE } from '../common/locale';
+import en from '../i18n/en.json';
+
+/**
+ * Custom `render` function which wraps passed elements in Provider component
+ * Source: https://testing-library.com/docs/example-react-intl/#creating-a-custom-render-function
+ *
+ */
+function customRender(ui, { locale = DEFAULT_LOCALE, messages = en, ...renderOptions } = {}) {
+  // eslint-disable-next-line react/prop-types
+  var Wrapper = ({ children }) => {
+    return <Provider i18n={{ locale, messages }}>{children}</Provider>;
+  };
+  return render(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+/**
+ * Custom `renderHook` function which wraps passed elements in Provider component
+ * For more info: https://react-hooks-testing-library.com/usage/advanced-hooks#context
+ *
+ */
+function customRenderHook(callback, { locale = DEFAULT_LOCALE, messages = en } = {}) {
+  return renderHook(callback, {
+    wrapper: ({ children }) => <Provider i18n={{ locale, messages }}>{children}</Provider>,
+  });
+}
+
+export * from './story-config';
+export * from './fake-data';
+export * from '@testing-library/react';
+export { userEvent };
+export { customRender as render, customRenderHook as renderHook };

package/src/test-utils/jest.setup.js

@@ -0,0 +1,28 @@
+const Adapter = require('@wojtekmaj/enzyme-adapter-react-17');
+const Enzyme = require('enzyme');
+
+global.fetch = require('jest-fetch-mock');
+Enzyme.configure({ adapter: new Adapter() });
+
+global.requestAnimationFrame = (callback) => callback();
+
+// https://github.com/esphen/jest-prop-type-error/blob/master/index.js
+// This mock will make tests fail when props error occurs.
+const { error, warn } = console;
+// eslint-disable-next-line no-console
+console.error = (message, ...args) => {
+  if (/(Invalid prop|Failed prop type)/gi.test(message)) {
+    throw new Error(message);
+  }
+
+  error.apply(console, [message, ...args]);
+};
+
+// eslint-disable-next-line no-console
+console.warn = (message, ...args) => {
+  if (/(Call to useTheme outside a ThemeProvider)/gi.test(message)) {
+    return;
+  }
+
+  warn.apply(console, [message, ...args]);
+};

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

@@ -0,0 +1,60 @@
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { StoryObj } from '@storybook/react';
+
+interface StoryConfig {
+  /**
+   * Creates variations of the component for the current story. Some
+   * padding is applied to the variants for spacing.
+   *
+   * - `default` adds just the story itself with some padding.
+   * - `light` adds a light theme variant.
+   * - `dark` adds a dark theme variant.
+   * - `rtl` adds a right-to-left writing mode variant.
+   * - `mobile` sets the default viewport for the Story with mobile
+   *   dimensions and uses those dimensions for snapshots.
+   *
+   * @default undefined
+   */
+  variants?: ('default' | 'light' | 'dark' | 'rtl' | 'mobile')[];
+}
+
+const getViewportWidth = (viewport: (typeof MINIMAL_VIEWPORTS)[keyof typeof MINIMAL_VIEWPORTS]) => {
+  if (viewport.styles && typeof viewport.styles === 'object') {
+    return parseInt(viewport.styles.width);
+  }
+  throw new Error('Unknown viewport styles');
+};
+
+/**
+ * The key to 'Large mobile' viewport {@link MINIMAL_VIEWPORTS.mobile2}
+ */
+const mobileViewportKey = 'mobile2';
+const mobileViewport = MINIMAL_VIEWPORTS[mobileViewportKey];
+const mobileViewportWidth = getViewportWidth(mobileViewport);
+
+/**
+ * Utility function for creating variants of a CSFv3 story.
+ */
+export const storyConfig = <Args>(
+  storyObject: StoryObj<Args>,
+  { variants }: StoryConfig,
+): StoryObj<Args> => {
+  const isMobile = variants?.includes('mobile') || undefined;
+
+  return {
+    ...storyObject,
+    parameters: {
+      ...storyObject.parameters,
+      variants,
+      chromatic: {
+        ...storyObject.parameters?.chromatic,
+        viewports: isMobile && [mobileViewportWidth],
+      },
+      viewport: {
+        ...storyObject.parameters?.viewport,
+        /** Set defaultViewport if 'mobile' variant is used */
+        defaultViewport: isMobile && mobileViewportKey,
+      },
+    },
+  };
+};

package/src/test-utils/style-mock.js

@@ -0,0 +1 @@
+module.exports = {};

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+
+import WithDisplayFormat from '../withDisplayFormat';
+
+const TextareaWithDisplayFormat = (props) => (
+  <WithDisplayFormat {...props} render={(renderProps) => <textarea {...renderProps} />} />
+);
+
+TextareaWithDisplayFormat.propTypes = {
+  displayPattern: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default TextareaWithDisplayFormat;

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -0,0 +1,15 @@
+import { shallow } from 'enzyme';
+
+import TextareaWithDisplayFormat from '.';
+
+describe('TextareaWithDisplayFormat', () => {
+  const props = { displayPattern: '**-**', onChange: jest.fn() };
+
+  it('should render input with value prop', () => {
+    const view = shallow(<TextareaWithDisplayFormat {...props} />)
+      .find('WithDisplayFormat')
+      .renderProp('render')({ value: 'test' });
+
+    expect(view.find('textarea').props('value')).toStrictEqual({ value: 'test' });
+  });
+});

package/src/textareaWithDisplayFormat/index.js

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

package/src/tile/Tile.css

@@ -0,0 +1 @@
+.np-tile{border-radius:10px;border-radius:var(--radius-small);min-width:120px;width:100%}.np-theme-personal .np-tile{background-color:#86a7bd1a;background-color:var(--color-background-neutral)}.np-theme-personal .np-tile .tw-avatar .tw-avatar__content{background-color:var(--color-contrast)}.np-tile.decision{border:1px solid #0000001a;border:1px solid var(--color-border-neutral);margin-top:0}.np-theme-personal .np-tile.decision{border:none}.np-theme-personal .np-tile.decision:hover{background-color:var(--color-background-neutral-hover)}.np-theme-personal .np-tile.decision:active{background-color:var(--color-background-neutral-active)}.np-theme-personal .np-tile.decision .np-text-body-default{color:#5d7079;color:var(--color-content-secondary)}.np-tile.np-decision__tile--fixed-width{width:300px}.np-tile__media{width:100%}.np-tile__description{display:inline-block}.np-tile--small.np-decision__tile--fixed-width{width:260px}.np-tile--small .np-tile__description{margin-top:4px;margin-top:var(--size-4)}.np-tile:hover .tw-avatar{pointer-events:none}.np-tile:hover .tw-avatar .tw-avatar__content{background-color:#fff;background-color:var(--color-background-screen)}.np-tile__description{color:#5d7079;color:var(--color-content-secondary);font-weight:400;font-weight:var(--font-weight-regular);line-height:1.5;line-height:var(--line-height-body);margin-top:12px;margin-top:var(--size-12)}

package/src/tile/Tile.js

@@ -0,0 +1,93 @@
+import { useTheme } from '@wise/components-theming';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import Body from '../body';
+import { Size, Key, Typography } from '../common';
+import Title from '../title';
+
+export const Tile = ({
+  className,
+  description,
+  disabled,
+  href,
+  target,
+  media,
+  onClick,
+  size,
+  title,
+}) => {
+  const isSmall = size === Size.SMALL;
+  const { isModern } = useTheme();
+  const Element = href ? 'a' : 'button';
+
+  return (
+    <Element
+      className={classNames(
+        'decision',
+        'flex-column',
+        'np-tile',
+        'text-no-decoration',
+        'text-xs-center',
+        className,
+        {
+          'p-a-3': !isSmall && isModern,
+          'p-y-5 p-x-4': !isSmall && !isModern,
+          'p-a-2': isSmall,
+          'np-tile--small': isSmall,
+          disabled,
+        },
+      )}
+      href={href}
+      target={target}
+      aria-label={title}
+      onClick={disabled ? null : onClick}
+      onKeyDown={
+        disabled
+          ? null
+          : ({ key }) => {
+              if (key === Key.ENTER || Key.SPACE.includes(key)) {
+                onClick();
+              }
+            }
+      }
+    >
+      <div className="np-tile__media d-flex justify-content-center">{media}</div>
+      <Title type={Typography.TITLE_SUBSECTION} className={classNames(isSmall ? 'm-t-1' : 'm-t-2')}>
+        {title}
+      </Title>
+      {isModern && description && (
+        <Body as="span" type={Typography.BODY_DEFAULT} className="m-t-1">
+          {description}
+        </Body>
+      )}
+      {!isModern && description && <div className="np-tile__description">{description}</div>}
+    </Element>
+  );
+};
+
+Tile.propTypes = {
+  /** Classes to apply to the Tile container */
+  className: PropTypes.string,
+  description: PropTypes.node,
+  disabled: PropTypes.bool,
+  href: PropTypes.string.isRequired,
+  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/tile/Tile.less

@@ -0,0 +1,77 @@
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
+
+.np-tile {
+  min-width: 120px;
+  border-radius: var(--radius-small);
+  width: 100%;
+
+  .np-theme-personal & {
+    background-color: var(--color-background-neutral);
+
+    .tw-avatar .tw-avatar__content {
+      background-color: var(--color-contrast);
+    }
+  }
+
+  &.decision {
+    margin-top: 0;
+    border: 1px solid var(--color-border-neutral);
+
+    .np-theme-personal & {
+      border: none;
+
+      &:hover {
+        background-color: var(--color-background-neutral-hover);
+      }
+
+      &:active {
+        background-color: var(--color-background-neutral-active);
+      }
+
+      .np-text-body-default {
+        color: var(--color-content-secondary);
+      }
+    }
+  }
+
+  &.np-decision__tile--fixed-width {
+    width: 300px;
+  }
+
+  &__media {
+    width: 100%;
+  }
+
+  &__description {
+    color: var(--color-content-secondary);
+    margin-top: var(--size-12);
+    display: inline-block;
+  }
+
+  &--small {
+    &.np-decision__tile--fixed-width {
+      width: 260px;
+    }
+
+    .np-tile__description {
+      margin-top: var(--size-4);
+    }
+  }
+
+  &:hover {
+    .tw-avatar {
+      pointer-events: none;
+
+      .tw-avatar__content {
+        background-color: var(--color-background-screen);
+      }
+    }
+  }
+}
+
+.np-tile__description {
+  color: var(--color-content-secondary);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body);
+  margin-top: var(--size-12);
+}