Web Art | @wise/art

React library for art elements (illustrations, tapestries, animation and alike) in UI.

Demo deployment: https://transferwise.github.io/web-art

Art assets powered by Wise Atoms.

Usage

npm install @wise/art

yarn add @wise/art

pnpm add @wise/art

This package relies on following peer dependencies:

• react
• react-dom

Add Styles

import '@wise/art/dist/Illustration.css';

Note: ignore naming, the bundle store styles for multiple components from the package.

Illustrations

Illustrations works via Illustration React component. The component implements Responsive Images concept so you don't need bother about different image sizes for different devices.

Usage in React

import { Illustration, Assets, Sizes } from '@wise/art';

<Illustration
  name={Assets.BRIEFCASE}
  alt="..."

  id="..."
  className="..."

  // 'eager` by default
  loading={'lazy' | 'eager'}

  // removes padding around image, `false` by default
  disablePadding={ true | false }

  // React Ref
  ref={...}
/>

Usage in Angular Environment

This package don't provide support for Angular.

Consider use react2angular or alike wrappers:

import { react2angular } from 'react2angular';
import { Illustration } from '@wise/art';

angular
  .module('tw.someModule', [ ... ])
  .component('wiseIllustration', react2angular(Illustration))

in Angular HTML template file

<wise-illustration id="'test-id'" alt="'Image of briefcase'" name="'briefcase'">
</wise-illustration>

3D Illustrations

3D illustrations work via Illustration3D React component. The component uses three.js framework to preview 3D models.

Usage

import { Illustration3D, Assets, Sizes } from '@wise/art';

<Illustration3D name={Assets.LOCK} size={Sizes.LARGE} />

Note: this API requires React 18.

Note: if your tests fail because of matchMedia and ResizeObserver being undefined you need add polyfills or mocks for Jest's jsdom env, use mocks from @transferwise/components/mocks.

Flags

Flags generated from wise-atoms SVGs are accessible by either of these:

• Two-letter country code (ISO 3166-1 alpha-2) — e.g.: GB, US
• Three-letter currency code (ISO 4217) — e.g.: GBP, USD

Usage in React

import { Flag } from '@wise/art';

<Flag code="GB" />
<Flag code="GBP" intrinsicSize={150} />

Usage without React

The underlying assets may be loaded directly as images. Make sure to:

• Use lowercase letter codes, e.g. "gbp" instead of "GBP"
• Use detailed variant when intrinsicSize >= 150px
• Use "wise" as a fallback when a flag can’t be found

E.g.:

<img src="https://wise.com/web-art/assets/flags/usd.svg" alt="" width="24" height="24">

<img src="https://wise.com/web-art/assets/flags/usd-detailed.svg" alt="" width="150" height="150">

<!-- Not every flag has a detailed variant at large sizes, though -->
<img src="https://wise.com/web-art/assets/flags/gbp.svg" alt="" width="150" height="150">

If you want to see all the flags, head over to wise.design.

Maintenance

Release

1. Bump version number in package.json according to semver and add an item to CHANGELOG.md.
2. If you updated wise-atoms make sure to run pnpm build to update components and S3 bucket.
3. Commit & Push & PR.
4. Once PR merge code will automatically be published to NPM with the version specified in the package.json.

Updating wise-atoms

All the resources are pulled from wise-atoms which does not use version numbers.

Grab the commit hash from the latest version of wise-atoms and paste it in to the package.json here:

"wise-atoms": "git+ssh://[email protected]:transferwise/wise-atoms.git#{commit-hash}",

Package versions

• The following packages must remain at the listed major versions until Wise moves to React 19.x:
  • @react-three/[email protected]
  • @react-three/[email protected]
• [email protected] - must not exceed the fixed version until new lighting is implemented.