@wise/art v2.12.0
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
- Bump version number in
package.json
according to semver and add an item toCHANGELOG.md
. - If you updated
wise-atoms
make sure to runpnpm build
to update components and S3 bucket. - Commit & Push & PR.
- 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://git@github.com:transferwise/wise-atoms.git#{commit-hash}",
3 days ago
25 days ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
9 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
7 months ago
9 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago