@wise/art 2.5.0-beta.8 → 2.6.0-beta.1

package/dist/index.d.ts

@@ -1,9 +1,10 @@
-export { Flag } from './flags';
-export { default as Illustration } from './illustrations';
-export { default as Illustration3d } from './illustrations3d';
-export { Assets } from './illustrations';
-export { Sizes } from './common';
-export type { FlagProps } from './flags';
-export type { IllustrationNames, IllustrationProps } from './illustrations';
-export type { Illustration3dNames, Illustration3dProps } from './illustrations3d';
-export { is3dIllustrationSupported } from './illustrations3d';
+export { Flag } from './flags';
+export { default as Illustration } from './illustrations';
+export { default as Illustration3d } from './illustrations3d';
+export { Assets } from './illustrations';
+export { Sizes } from './common';
+export type { FlagProps } from './flags';
+export type { IllustrationNames, IllustrationProps } from './illustrations';
+export type { Illustration3dNames, Illustration3dProps } from './illustrations3d';
+export { is3dIllustrationSupported } from './illustrations3d';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAC5E,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,2 +1,22 @@
-var e=require("./index-b62ef291.js");require("react"),require("classnames"),Object.defineProperty(exports,"Assets",{enumerable:!0,get:function(){return e.Assets}}),exports.Flag=e.Flag,exports.Illustration=e.Illustration,exports.Illustration3d=e.Illustration3d,Object.defineProperty(exports,"Sizes",{enumerable:!0,get:function(){return e.Sizes}}),exports.is3dIllustrationSupported=e.is3dIllustrationSupported;
+'use strict';
+
+var index = require('./index-322e874c.js');
+require('react');
+require('react/jsx-runtime');
+require('clsx');
+
+
+
+Object.defineProperty(exports, 'Assets', {
+	enumerable: true,
+	get: function () { return index.Assets; }
+});
+exports.Flag = index.Flag;
+exports.Illustration = index.Illustration;
+exports.Illustration3d = index.Illustration3d;
+Object.defineProperty(exports, 'Sizes', {
+	enumerable: true,
+	get: function () { return index.Sizes; }
+});
+exports.is3dIllustrationSupported = index.is3dIllustrationSupported;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -0,0 +1,5 @@
+export { A as Assets, F as Flag, a as Illustration, b as Illustration3d, S as Sizes, i as is3dIllustrationSupported } from './index-3bf9c1e9.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'clsx';
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "2.5.0-beta.8",
+  "version": "2.6.0-beta.1",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -13,7 +13,9 @@
   "module": "./dist/index.module.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist/",
+    "src/",
+    "!**/*.tsbuildinfo"
   ],
   "scripts": {
     "setup": "yarn && yarn build",
@@ -26,66 +28,75 @@
     "convert-flags-svg-to-png": "node ./scripts/convert-flags-svg-to-png.mjs",
     "convert-i10s-png-to-webp": "rm -rf s3-bucket/illustrations/ && copyfiles --f node_modules/wise-atoms/illustrations/**/*.png s3-bucket/illustrations && node ./scripts/convert-png-to-webp.mjs",
     "generate-i10s-metadata": "node ./scripts/generate-i10s-metadata.mjs && eslint 'src/illustrations/metadata.ts' --fix",
-    "bundle": "rm -rf dist && microbundle --jsxFragment React.Fragment --jsx React.createElement --format es,cjs && cpx src/illustrations/Illustration.css dist/",
+    "bundle": "rm -rf dist && rollup --config --sourcemap && cpx src/illustrations/Illustration.css dist/",
     "cleanup": "rm -rf temp",
     "build": "yarn load-i10s && yarn load-3d-i10s && yarn convert-i10s-png-to-webp && yarn generate-i10s-metadata && yarn load-flags && yarn bundle && yarn cleanup",
-    "start": "start-storybook -p 3001",
+    "start": "storybook dev -p 3001",
     "dev": "yarn start",
     "test": "echo 'release-to-github-with-changelog-pre-release-checks'",
     "lint-fix": "eslint 'src/**/*.{js,ts,tsx}' 'scripts/*.{mjs,js,ts,tsx}' --fix",
-    "build-docs": "build-storybook -o docs",
-    "deploy-docs": "deploy-to-github-pages -d docs -m main"
+    "build-docs": "storybook build -o docs && touch ./docs/.nojekyll"
   },
   "dependencies": {
+    "@babel/runtime": "^7.22.15",
+    "clsx": "^2.0.0",
     "three": "^0.154.0",
     "@react-three/fiber": "^8.13.5",
     "@react-three/drei": "^9.78.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.18.9",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/react": "^6.5.13",
+    "@babel/core": "^7.22.15",
+    "@babel/plugin-transform-runtime": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-typescript": "^11.1.3",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-vite": "^7.4.0",
     "@transferwise/eslint-config": "^8.0.0",
-    "@tsconfig/node16": "^1.0.3",
-    "@types/glob": "^8.0.0",
-    "@types/imagemin": "^8.0.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/babel__core": "^7.20.1",
+    "@types/glob": "^8.1.0",
+    "@types/imagemin": "^8.0.1",
     "@types/imagemin-webp": "^7.0.0",
-    "@types/jest": "^28.1.6",
-    "@types/jsdom": "^21.1.0",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/jest": "^28.1.8",
+    "@types/jsdom": "^21.1.2",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/three": "^0.154.0",
-    "classnames": "^2.3.1",
+    "babel-plugin-optimize-clsx": "^2.6.2",
     "copyfiles": "^2.4.1",
     "cpx": "^1.5.0",
-    "deploy-to-github-pages": "^1.0.1",
-    "eslint": "^8.21.0",
-    "glob": "^8.0.3",
+    "eslint": "^8.48.0",
+    "glob": "^8.1.0",
     "imagemin": "^8.0.1",
     "imagemin-webp": "^7.0.0",
     "gltf-pipeline": "^4.1.0",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
-    "jsdom": "~21.1.1",
-    "microbundle": "^0.15.1",
-    "prettier": "^2.7.1",
+    "jsdom": "~21.1.2",
+    "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "release-to-github-with-changelog": "^1.2.4",
-    "sharp": "^0.32.1",
+    "sharp": "^0.32.5",
+    "storybook": "^7.4.0",
     "ts-node": "10.9.1",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.5",
+    "vite": "^4.4.9",
     "wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#c2683d557cf6f7b4f6226ea8f0e67bc797e7fb2e"
   },
   "peerDependencies": {
-    "classnames": "^2.3",
     "react": ">=17",
     "react-dom": ">=17"
   },
   "prettier": "@transferwise/eslint-config/.prettierrc.js",
   "publishConfig": {
     "access": "public"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
-}
+}

package/src/common.ts

@@ -0,0 +1,17 @@
+export enum Sizes {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+
+export const ImageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
+export type LargeSize = 'large';
+export type MediumSize = 'medium';
+export type SmallSize = 'small';
+
+export type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';

package/src/flags/Flag.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flag } from './Flag';
+
+const meta: Meta<typeof Flag> = {
+  component: Flag,
+  title: 'Flag',
+};
+export default meta;
+
+type Story = StoryObj<typeof Flag>;
+
+export const Basic: Story = {
+  render: (args) => <Flag {...args} />,
+  args: {
+    code: 'GBP',
+    intrinsicSize: 64,
+  },
+};

package/src/flags/Flag.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export interface FlagProps {
+  /**
+   * Two-letter country code (ISO 3166-1 alpha-2) or three-letter currency code (ISO 4217).
+   */
+  code: string;
+
+  /**
+   * Width and height to reserve for the underlying image, in pixels. A detailed variant is shown from 150px and above.
+   */
+  intrinsicSize?: number;
+}
+
+const unknownFlagName = 'wise';
+
+export const Flag = ({ code, intrinsicSize = 64 }: FlagProps) => {
+  const [fallback, setFallback] = useState<'simple' | 'unknown' | null>(null);
+  useEffect(() => {
+    setFallback(null);
+  }, [code]);
+
+  const detailed = intrinsicSize >= 150;
+  const name =
+    fallback !== 'unknown'
+      ? `${code.toLowerCase()}${fallback == null && detailed ? '-detailed' : ''}`
+      : unknownFlagName;
+
+  return (
+    <img
+      src={`https://wise.com/web-art/assets/flags/${name}.svg`}
+      alt=""
+      width={intrinsicSize}
+      height={intrinsicSize}
+      onError={() => {
+        setFallback((prev) => (prev == null && detailed ? 'simple' : 'unknown'));
+      }}
+    />
+  );
+};

package/src/flags/index.ts

@@ -0,0 +1,2 @@
+export { Flag } from './Flag';
+export type { FlagProps } from './Flag';

package/src/illustrations/Illustration.css

@@ -0,0 +1,27 @@
+/* Prevent image overflow viewport or container element */
+img.wds-illustration {
+  max-width: 100%;
+}
+
+.wds-illustration-padding {
+  padding: 24px;
+}
+
+.wds-illustration-3d {
+  display: inline-flex;
+}
+
+.wds-illustration-3d-small {
+  width: 200px;
+  height: 200px;
+}
+
+.wds-illustration-3d-medium {
+  width: 300px;
+  height: 300px;
+}
+
+.wds-illustration-3d-large {
+  width: 500px;
+  height: 500px;
+}

package/src/illustrations/Illustration.stories.tsx

@@ -0,0 +1,33 @@
+/* eslint-disable react/forbid-dom-props */
+import React from 'react';
+
+import Illustration, { Props as IllustrationProps } from './Illustration';
+import { Assets, IllustrationNames } from './metadata';
+
+export default {
+  component: Illustration,
+  title: 'Illustration',
+};
+
+export const All = () => {
+  const assetNames = Object.values(Assets);
+  return (
+    <>
+      <div>Total number of illustrations: {assetNames.length}</div>
+      {Object.values(Assets).map((assetName) => (
+        <p key={assetName}>
+          Asset: <code>{assetName}</code>
+          <Illustration alt={assetName} key={assetName} name={assetName as IllustrationNames} />
+        </p>
+      ))}
+    </>
+  );
+};
+
+export const Individual = ({ name = Assets.CHECK_MARK, ...props }: IllustrationProps) => {
+  return (
+    <>
+      <Illustration name={name} {...props} />
+    </>
+  );
+};

package/src/illustrations/Illustration.tsx

@@ -0,0 +1,95 @@
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+
+import {
+  type LargeSize,
+  type MediumSize,
+  type SmallSize,
+  type Descriptors,
+  Sizes,
+} from './../common';
+import type { IllustrationNames } from './metadata';
+
+// Picking only a few props from Image element to avoid breaking change
+// as in future underlying element might change
+type ImgProps = Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;
+
+export type IllustrationSizes = LargeSize | MediumSize | SmallSize;
+
+export type Props = {
+  name: IllustrationNames;
+  alt: string;
+  size?: IllustrationSizes;
+  loading?: 'eager' | 'lazy';
+  disablePadding?: boolean;
+} & ImgProps;
+
+const imageSizes = {
+  [Sizes.SMALL]: 200,
+  [Sizes.MEDIUM]: 300,
+  [Sizes.LARGE]: 500,
+};
+
+const Illustration = forwardRef<HTMLImageElement, Props>(
+  (
+    {
+      id,
+      name,
+      alt,
+      loading = 'eager',
+      className,
+      size = Sizes.MEDIUM,
+      disablePadding = false,
+    }: Props,
+    ref,
+  ) => {
+    const { SMALL, MEDIUM } = Sizes;
+
+    return name ? (
+      <picture>
+        {size === Sizes.LARGE || size === Sizes.MEDIUM ? (
+          <>
+            <source
+              width={imageSizes[SMALL]}
+              height={imageSizes[SMALL]}
+              media="(max-width: 575px)"
+              srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}
+            />
+            {size !== Sizes.MEDIUM ? (
+              <source
+                width={imageSizes[MEDIUM]}
+                height={imageSizes[MEDIUM]}
+                media="(max-width: 992px)"
+                srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}
+              />
+            ) : null}
+          </>
+        ) : null}
+
+        <img
+          id={id}
+          ref={ref}
+          alt={alt ?? name.replace('-', ' ')}
+          data-testid={`wds-${name}-illustration`}
+          className={clsx(
+            'wds-illustration',
+            `wds-illustration-${name}`,
+            { 'wds-illustration-padding': !disablePadding },
+            className,
+          )}
+          loading={loading}
+          src={defineSrc(name, size, '1x')}
+          srcSet={`${defineSrc(name, size, '2x')} 2x`}
+          width={imageSizes[size]}
+          height={imageSizes[size]}
+        />
+      </picture>
+    ) : null;
+  },
+);
+
+function defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {
+  return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;
+}
+
+export default Illustration;

package/src/illustrations/index.ts

@@ -0,0 +1,5 @@
+export { default } from './Illustration';
+export type { Props as IllustrationProps } from './Illustration';
+
+export { Assets } from './metadata';
+export type { IllustrationNames } from './metadata';

package/src/illustrations/metadata.ts

@@ -0,0 +1,141 @@
+/*
+ *
+ * DON'T MODIFY THIS FILE IT'S AUTO GENERATED
+ * See: `scripts/generate-i10s-metadata.mjs`
+ *
+ */
+
+export enum Assets {
+  BELL = 'bell',
+  BRIEFCASE = 'briefcase',
+  BUSINESS_CARD = 'business-card',
+  CALENDAR = 'calendar',
+  CHECK_MARK = 'check-mark',
+  CLOSED_WINDOW = 'closed-window',
+  COIN_PILE_DOWN = 'coin-pile-down',
+  COIN_PILE_UP = 'coin-pile-up',
+  CONFETTI = 'confetti',
+  CONSTRUCTION_FENCE = 'construction-fence',
+  CONVERT = 'convert',
+  COOKIE = 'cookie',
+  DIGITAL_CARD_2 = 'digital-card-2',
+  DIGITAL_CARD = 'digital-card',
+  DOCUMENTS = 'documents',
+  DOOR = 'door',
+  ECO_CARD = 'eco-card',
+  ELECTRIC_PLUG = 'electric-plug',
+  EMAIL_SUCCESS = 'email-success',
+  EMAIL = 'email',
+  EXCLAMATION_MARK = 'exclamation-mark',
+  FLAG = 'flag',
+  FLOWER = 'flower',
+  GEAR = 'gear',
+  GLOBE = 'globe',
+  GRAPH = 'graph',
+  HEART_2 = 'heart-2',
+  HEART_3 = 'heart-3',
+  HEART_4 = 'heart-4',
+  HEART_5 = 'heart-5',
+  HEART = 'heart',
+  HOUSE = 'house',
+  ID_CARD = 'id-card',
+  INFINITE = 'infinite',
+  INVITE_LETTER = 'invite-letter',
+  JARS = 'jars',
+  KEY = 'key',
+  LIGHT_BULB = 'light-bulb',
+  LOCK = 'lock',
+  MAGNIFYING_GLASS = 'magnifying-glass',
+  MAP = 'map',
+  MARBLE_CARD_BUSINESS = 'marble-card-business',
+  MARBLE_CARD = 'marble-card',
+  MARBLE = 'marble',
+  MEGAPHONE = 'megaphone',
+  MULTI_CURRENCY = 'multi-currency',
+  ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',
+  PALM_TREE = 'palm-tree',
+  PERCENTAGE = 'percentage',
+  PERSONAL_CARD = 'personal-card',
+  PHONES = 'phones',
+  PIE_CHART = 'pie-chart',
+  PLANE_2 = 'plane-2',
+  PLANE = 'plane',
+  PUZZLE_PIECES = 'puzzle-pieces',
+  QUESTION_MARK = 'question-mark',
+  RECEIVE = 'receive',
+  REMINDER_LETTER = 'reminder-letter',
+  SAND_TIMER = 'sand-timer',
+  SHOPPING_BAG = 'shopping-bag',
+  SKIP_AUTHENTICATION = 'skip-authentication',
+  SPEECH_BUBBLE = 'speech-bubble',
+  TOOL = 'tool',
+  TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',
+  WALLET = 'wallet',
+}
+
+export type IllustrationNames =
+  | 'bell'
+  | 'briefcase'
+  | 'business-card'
+  | 'calendar'
+  | 'check-mark'
+  | 'closed-window'
+  | 'coin-pile-down'
+  | 'coin-pile-up'
+  | 'confetti'
+  | 'construction-fence'
+  | 'convert'
+  | 'cookie'
+  | 'digital-card-2'
+  | 'digital-card'
+  | 'documents'
+  | 'door'
+  | 'eco-card'
+  | 'electric-plug'
+  | 'email-success'
+  | 'email'
+  | 'exclamation-mark'
+  | 'flag'
+  | 'flower'
+  | 'gear'
+  | 'globe'
+  | 'graph'
+  | 'heart-2'
+  | 'heart-3'
+  | 'heart-4'
+  | 'heart-5'
+  | 'heart'
+  | 'house'
+  | 'id-card'
+  | 'infinite'
+  | 'invite-letter'
+  | 'jars'
+  | 'key'
+  | 'light-bulb'
+  | 'lock'
+  | 'magnifying-glass'
+  | 'map'
+  | 'marble-card-business'
+  | 'marble-card'
+  | 'marble'
+  | 'megaphone'
+  | 'multi-currency'
+  | 'one-invite-letter-opened'
+  | 'palm-tree'
+  | 'percentage'
+  | 'personal-card'
+  | 'phones'
+  | 'pie-chart'
+  | 'plane-2'
+  | 'plane'
+  | 'puzzle-pieces'
+  | 'question-mark'
+  | 'receive'
+  | 'reminder-letter'
+  | 'sand-timer'
+  | 'shopping-bag'
+  | 'skip-authentication'
+  | 'speech-bubble'
+  | 'tool'
+  | 'two-invite-letters-opened'
+  | 'wallet';

package/src/illustrations3d/Illustration3d.stories.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+import React, { useEffect } from 'react';
+
+import { Sizes } from '../common';
+import { Assets } from '../illustrations/metadata';
+
+import Illustration3d from './Illustration3d';
+
+export default {
+  title: '3D Illustrations',
+};
+
+export const Confetti = () => {
+  return (
+    <>
+      <Illustration3d name={Assets.CONFETTI} size={Sizes.LARGE} />
+    </>
+  );
+};
+
+export const Globe = () => {
+  return (
+    <>
+      <Illustration3d name={Assets.GLOBE} size={Sizes.LARGE} />
+    </>
+  );
+};
+
+export const Lock = () => {
+  return <Illustration3d name={Assets.LOCK} size={Sizes.LARGE} />;
+};
+
+export const CheckMark = () => {
+  return <Illustration3d name={Assets.CHECK_MARK} size={Sizes.LARGE} />;
+};
+
+export const Flower = () => {
+  return <Illustration3d name={Assets.FLOWER} size={Sizes.LARGE} />;
+};
+
+export const Plane = () => {
+  return <Illustration3d name={Assets.PLANE} size={Sizes.LARGE} />;
+};
+
+export const Graph = () => {
+  return <Illustration3d name={Assets.GRAPH} size={Sizes.LARGE} />;
+};
+
+export const Marble = () => {
+  return <Illustration3d name={Assets.MARBLE} size={Sizes.LARGE} />;
+};
+
+export const MarbleCard = () => {
+  return <Illustration3d name={Assets.MARBLE_CARD} size={Sizes.LARGE} />;
+};
+
+export const MagnifyingGlass = () => {
+  return <Illustration3d name={Assets.MAGNIFYING_GLASS} size={Sizes.LARGE} />;
+};
+
+export const Jars = () => {
+  return <Illustration3d name={Assets.JARS} size={Sizes.LARGE} />;
+};
+
+export const MultiCurrency = () => {
+  return <Illustration3d name={Assets.MULTI_CURRENCY} size={Sizes.LARGE} />;
+};
+
+export const Fallback = () => {
+  // @ts-expect-error navigator has connection property
+  const originalNavigator = window.navigator.connection;
+  // mock slow internet connection
+  // @ts-expect-error navigator has connection property
+  window.navigator.connection = { effectiveType: 'slow-2g' };
+
+  useEffect(() => {
+    // cleanup mock on unmount
+    // @ts-expect-error navigator has connection property
+    return () => (window.navigator.connection = originalNavigator);
+  }, [originalNavigator]);
+
+  return (
+    <>
+      <Illustration3d name={Assets.LOCK} />
+      <br />
+      Mock slow internet connection so it fallback to static illustration
+    </>
+  );
+};