@wise/art 0.0.7 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -4
- package/dist/illustrations/Illustration.stories.d.ts +1 -1
- package/dist/illustrations/metadata.d.ts +0 -6
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,4 +1,51 @@
|
|
|
1
|
-
# `@wise/art`
|
|
1
|
+
# Web Art | `@wise/art`
|
|
2
|
+
|
|
3
|
+
React library for art elements (illustrations, tapestries, animation and alike) in UI.
|
|
4
|
+
|
|
5
|
+
Demo deployment: https://transferwise.github.io/web-art
|
|
6
|
+
|
|
7
|
+
Art assets powered by [Wise Atoms](https://github.com/transferwise/wise-atoms).
|
|
8
|
+
|
|
9
|
+
# Usage
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install @wise/art
|
|
13
|
+
|
|
14
|
+
yarn add @wise/art
|
|
15
|
+
|
|
16
|
+
pnpm add @wise/art
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
This package relies on following peer dependencies:
|
|
20
|
+
|
|
21
|
+
- `react`
|
|
22
|
+
- `react-dom`
|
|
23
|
+
- `classnames`
|
|
24
|
+
|
|
25
|
+
## Illustrations
|
|
26
|
+
|
|
27
|
+
### Usage in React
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import { Illustration, Assets, Sizes } from '@wise/art';
|
|
31
|
+
|
|
32
|
+
<Illustration
|
|
33
|
+
name={Assets.BRIEFCASE}
|
|
34
|
+
alt="..."
|
|
35
|
+
|
|
36
|
+
id="..."
|
|
37
|
+
className="..."
|
|
38
|
+
|
|
39
|
+
// 'auto' by default
|
|
40
|
+
size={Sizes.AUTO}
|
|
41
|
+
|
|
42
|
+
// 'lazy` by default
|
|
43
|
+
loading={'lazy' | 'eager'}
|
|
44
|
+
|
|
45
|
+
// React Ref
|
|
46
|
+
ref={...}
|
|
47
|
+
/>
|
|
48
|
+
```
|
|
2
49
|
|
|
3
50
|
|
|
4
51
|
### Usage in Angular Environment
|
|
@@ -13,14 +60,14 @@ import { Illustration } from '@wise/art';
|
|
|
13
60
|
|
|
14
61
|
angular
|
|
15
62
|
.module('tw.someModule', [ ... ])
|
|
16
|
-
.component('
|
|
63
|
+
.component('wiseIllustration', react2angular(Illustration))
|
|
17
64
|
```
|
|
18
65
|
|
|
19
66
|
in Angular HTML template file
|
|
20
67
|
```html
|
|
21
|
-
<
|
|
68
|
+
<wise-illustration
|
|
22
69
|
id="'test-id'"
|
|
23
70
|
alt="'Image of briefcase'"
|
|
24
71
|
name="'briefcase'">
|
|
25
|
-
</
|
|
72
|
+
</wise-illustration>
|
|
26
73
|
```
|
|
@@ -14,8 +14,8 @@ declare const _default: {
|
|
|
14
14
|
title: string;
|
|
15
15
|
};
|
|
16
16
|
export default _default;
|
|
17
|
+
export declare const All: () => JSX.Element;
|
|
17
18
|
export declare const Individual: ({ name, size }: {
|
|
18
19
|
name?: Assets | undefined;
|
|
19
20
|
size?: Sizes | undefined;
|
|
20
21
|
}) => JSX.Element;
|
|
21
|
-
export declare const All: () => JSX.Element;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/*\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n BELL = 'bell',\n BRIEFCASE = 'briefcase',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE = 'coin-pile',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL = 'email',\n EXCLAMATION_MARK = 'exclamation-mark',\n FLAG = 'flag',\n FLOWER = 'flower',\n GEAR = 'gear',\n GLOBE = 'globe',\n GRAPH = 'graph',\n HEART = 'heart',\n HOUSE = 'house',\n ID_CARD = 'id-card',\n INFINITE = 'infinite',\n INVITE_LETTER = 'invite-letter',\n JARS = 'jars',\n KEY = 'key',\n LIGHT_BULB = 'light-bulb',\n LOCK = 'lock',\n MAGNIFYING_GLASS = 'magnifying-glass',\n MAP = 'map',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE = 'plane',\n PUZZLE_PIECES = 'puzzle-pieces',\n QUESTION_MARK = 'question-mark',\n RECEIVE = 'receive',\n REMINDER_LETTER = 'reminder-letter',\n SAND_TIMER = 'sand-timer',\n SHOPPING_BAG = 'shopping-bag',\n SKIP_AUTHENTICATION = 'skip-authentication',\n SPEECH_BUBBLE = 'speech-bubble',\n TOOL = 'tool',\n TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n | 'bell'\n | 'briefcase'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'documents'\n | 'door'\n | 'electric-plug'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart'\n | 'house'\n | 'id-card'\n | 'infinite'\n | 'invite-letter'\n | 'jars'\n | 'key'\n | 'light-bulb'\n | 'lock'\n | 'magnifying-glass'\n | 'map'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'phones'\n | 'pie-chart'\n | 'plane'\n | 'puzzle-pieces'\n | 'question-mark'\n | 'receive'\n | 'reminder-letter'\n | 'sand-timer'\n | 'shopping-bag'\n | 'skip-authentication'\n | 'speech-bubble'\n | 'tool'\n | 'two-invite-letters-opened'\n | 'wallet';\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","name","alt","_ref$loading","_ref","loading","className","size","AUTO","_ref$size","SMALL","MEDIUM","LARGE","autoSize","React","createElement","id","Fragment","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"2HAAYA,gEAAAA,EAAAA,QAAKA,QAALA,cAKX,CAAA,IAJC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,OCeIC,ICZMC,EDYMD,EAAGE,EAAUA,WAC7B,SAA2EC,EAAAA,GAAO,IAA3EC,EAAAA,EAAAA,KAAMC,IAAAA,IAAGC,EAAAC,EAAEC,QAAAA,OAAO,IAAAF,EAAG,OAAQG,EAAAA,EAAAA,EAAAA,UAAWC,EAAAA,EAAAA,KAAAA,OAAOX,IAAAA,EAAAA,cAAMY,KAC1DC,IAAiCb,QAAAA,MAAzBc,MAAOC,EAAkBf,QAAKA,MAAvBe,OAAQC,EAAUhB,QAAKA,MAAfgB,MACTC,EAAYN,IAASX,QAAKA,MAACY,KACzC,OAAOP,eACLa,UAASC,cAAA,UAAA,CAAAC,GAJRZ,EAAFY,IAKIH,eACCC,UAAAC,cAAAD,EAAAA,QAAAG,SAAA,kBAEEH,UACEC,cAAA,SAAA,CAAAG,MAAM,qBACNC,OAAWC,EAAUnB,EAAMS,EAAO,MAAUU,KAAAA,EAAUnB,EAAMS,EAAO,MAAW,qBAGhFI,UAAAC,cAAA,SAAA,CACEG,MAAM,qBACNC,OAAWC,EAAUnB,EAAMU,EAAQ,MAAUS,KAAAA,EAAUnB,EAAMU,EAAQ,MAAW,SAGlF,kBAEJG,EAAAA,QACEC,cAAA,MAAA,CAAAf,IAAKA,EACLE,IAAKA,EACLI,UAAWe,UAAW,mBAAkB,oBAAsBpB,EAAQK,GACtED,QAASA,EACTiB,IAAKF,EAAUnB,EAAMY,EAAWD,EAAQL,EAAM,MAC9CY,OAAWC,EAAUnB,EAAMY,EAAWD,EAAQL,EAAM,MAAW,SAGjE,IACN,GAGF,SAASa,EAAUG,EAAsBhB,EAAyBiB,GAChE,MAAA,iDAAwDD,EAAY,IAAIhB,EAAI,IAAIiB,EAAU,OAC5F,CCEC1B,QAAAA,YAAAA,GAlDWA,EAAAA,QAAMA,SAANA,eAkDX,CAAA,IAjDC,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.mjs","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","
|
|
1
|
+
{"version":3,"file":"index.modern.mjs","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/*\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n BELL = 'bell',\n BRIEFCASE = 'briefcase',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE = 'coin-pile',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL = 'email',\n EXCLAMATION_MARK = 'exclamation-mark',\n FLAG = 'flag',\n FLOWER = 'flower',\n GEAR = 'gear',\n GLOBE = 'globe',\n GRAPH = 'graph',\n HEART = 'heart',\n HOUSE = 'house',\n ID_CARD = 'id-card',\n INFINITE = 'infinite',\n INVITE_LETTER = 'invite-letter',\n JARS = 'jars',\n KEY = 'key',\n LIGHT_BULB = 'light-bulb',\n LOCK = 'lock',\n MAGNIFYING_GLASS = 'magnifying-glass',\n MAP = 'map',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE = 'plane',\n PUZZLE_PIECES = 'puzzle-pieces',\n QUESTION_MARK = 'question-mark',\n RECEIVE = 'receive',\n REMINDER_LETTER = 'reminder-letter',\n SAND_TIMER = 'sand-timer',\n SHOPPING_BAG = 'shopping-bag',\n SKIP_AUTHENTICATION = 'skip-authentication',\n SPEECH_BUBBLE = 'speech-bubble',\n TOOL = 'tool',\n TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n | 'bell'\n | 'briefcase'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'documents'\n | 'door'\n | 'electric-plug'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart'\n | 'house'\n | 'id-card'\n | 'infinite'\n | 'invite-letter'\n | 'jars'\n | 'key'\n | 'light-bulb'\n | 'lock'\n | 'magnifying-glass'\n | 'map'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'phones'\n | 'pie-chart'\n | 'plane'\n | 'puzzle-pieces'\n | 'question-mark'\n | 'receive'\n | 'reminder-letter'\n | 'sand-timer'\n | 'shopping-bag'\n | 'skip-authentication'\n | 'speech-bubble'\n | 'tool'\n | 'two-invite-letters-opened'\n | 'wallet';\n"],"names":["Sizes","Illustration","forwardRef","id","name","alt","loading","className","size","AUTO","ref","SMALL","MEDIUM","LARGE","React","createElement","autoSize","Fragment","media","srcSet","defineSrc","classNames","src","illustration","descriptor","Assets"],"mappings":"gEAAYA,OAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,ICcKC,MAAYA,EAAGC,EACnB,EAAGC,KAAIC,OAAMC,MAAKC,QAAAA,EAAU,OAAQC,YAAWC,KAAAA,EAAOR,EAAMS,MAAeC,KACzE,MAAMC,MAAEA,EAAKC,OAAEA,EAAMC,MAAEA,GAAUb,IACPQ,IAASR,EAAMS,KACzC,OAAOL,eACLU,EAAAC,cAAA,UAAA,CAASZ,GAAIA,GACVa,eACCF,EAAAC,cAAAD,EAAAG,SAAA,kBAEEH,EACEC,cAAA,SAAA,CAAAG,MAAM,qBACNC,OAAQ,GAAGC,EAAUhB,EAAMO,EAAO,UAAUS,EAAUhB,EAAMO,EAAO,0BAGrEG,EAAAC,cAAA,SAAA,CACEG,MAAM,qBACNC,OAAQ,GAAGC,EAAUhB,EAAMQ,EAAQ,UAAUQ,EAAUhB,EAAMQ,EAAQ,cAGvE,kBAEJE,uBACEJ,IAAKA,EACLL,IAAKA,EACLE,UAAWc,EAAW,mBAAwC,oBAAAjB,IAAQG,GACtED,QAASA,EACTgB,IAAKF,EAAUhB,EAAMY,EAAWH,EAAQL,EAAM,MAC9CW,OAAW,GAAAC,EAAUhB,EAAMY,EAAWH,EAAQL,EAAM,cAGtD,OAIR,SAAkBY,EAACG,EAAsBf,EAAyBgB,GAChE,uDAAwDD,KAAgBf,KAAQgB,QAClF,CChDYC,IAkDXA,GAlDD,SAAYA,GACVA,EAAA,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,QACD,CAlDD,CAAYA,IAAAA,EAkDX,CAAA"}
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","
|
|
1
|
+
{"version":3,"file":"index.module.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/*\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n BELL = 'bell',\n BRIEFCASE = 'briefcase',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE = 'coin-pile',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL = 'email',\n EXCLAMATION_MARK = 'exclamation-mark',\n FLAG = 'flag',\n FLOWER = 'flower',\n GEAR = 'gear',\n GLOBE = 'globe',\n GRAPH = 'graph',\n HEART = 'heart',\n HOUSE = 'house',\n ID_CARD = 'id-card',\n INFINITE = 'infinite',\n INVITE_LETTER = 'invite-letter',\n JARS = 'jars',\n KEY = 'key',\n LIGHT_BULB = 'light-bulb',\n LOCK = 'lock',\n MAGNIFYING_GLASS = 'magnifying-glass',\n MAP = 'map',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE = 'plane',\n PUZZLE_PIECES = 'puzzle-pieces',\n QUESTION_MARK = 'question-mark',\n RECEIVE = 'receive',\n REMINDER_LETTER = 'reminder-letter',\n SAND_TIMER = 'sand-timer',\n SHOPPING_BAG = 'shopping-bag',\n SKIP_AUTHENTICATION = 'skip-authentication',\n SPEECH_BUBBLE = 'speech-bubble',\n TOOL = 'tool',\n TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n | 'bell'\n | 'briefcase'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'documents'\n | 'door'\n | 'electric-plug'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart'\n | 'house'\n | 'id-card'\n | 'infinite'\n | 'invite-letter'\n | 'jars'\n | 'key'\n | 'light-bulb'\n | 'lock'\n | 'magnifying-glass'\n | 'map'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'phones'\n | 'pie-chart'\n | 'plane'\n | 'puzzle-pieces'\n | 'question-mark'\n | 'receive'\n | 'reminder-letter'\n | 'sand-timer'\n | 'shopping-bag'\n | 'skip-authentication'\n | 'speech-bubble'\n | 'tool'\n | 'two-invite-letters-opened'\n | 'wallet';\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","name","alt","_ref$loading","_ref","loading","className","size","AUTO","_ref$size","SMALL","MEDIUM","LARGE","autoSize","React","createElement","id","Fragment","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"gEAAYA,OAAZ,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,MACD,CALD,CAAYA,IAAAA,EAKX,CAAA,ICcKC,ICsCLC,EDtCiBD,EAAGE,EACnB,SAA2EC,EAAAA,GAAO,IAA3EC,EAAAA,EAAAA,KAAMC,IAAAA,IAAGC,EAAAC,EAAEC,QAAAA,OAAO,IAAAF,EAAG,OAAQG,EAAAA,EAAAA,EAAAA,UAAWC,EAAAA,EAAAA,KAAAA,OAAOX,IAAAA,EAAAA,EAAMY,KAC1DC,IAAiCb,EAAzBc,MAAOC,EAAkBf,EAAlBe,OAAQC,EAAUhB,EAAVgB,MACTC,EAAYN,IAASX,EAAMY,KACzC,OAAOP,eACLa,EAASC,cAAA,UAAA,CAAAC,GAJRZ,EAAFY,IAKIH,eACCC,EAAAC,cAAAD,EAAAG,SAAA,kBAEEH,EACEC,cAAA,SAAA,CAAAG,MAAM,qBACNC,OAAWC,EAAUnB,EAAMS,EAAO,MAAUU,KAAAA,EAAUnB,EAAMS,EAAO,MAAW,qBAGhFI,EAAAC,cAAA,SAAA,CACEG,MAAM,qBACNC,OAAWC,EAAUnB,EAAMU,EAAQ,MAAUS,KAAAA,EAAUnB,EAAMU,EAAQ,MAAW,SAGlF,kBAEJG,EACEC,cAAA,MAAA,CAAAf,IAAKA,EACLE,IAAKA,EACLI,UAAWe,EAAW,mBAAkB,oBAAsBpB,EAAQK,GACtED,QAASA,EACTiB,IAAKF,EAAUnB,EAAMY,EAAWD,EAAQL,EAAM,MAC9CY,OAAWC,EAAUnB,EAAMY,EAAWD,EAAQL,EAAM,MAAW,SAGjE,IACN,GAGF,SAASa,EAAUG,EAAsBhB,EAAyBiB,GAChE,MAAA,iDAAwDD,EAAY,IAAIhB,EAAI,IAAIiB,EAAU,OAC5F,EChDA,SAAY1B,GACVA,EAAA,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA,QACD,CAlDD,CAAYA,IAAAA,EAkDX,CAAA"}
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../src/common.ts","../src/illustrations/Illustration.tsx","../src/illustrations/metadata.ts"],"sourcesContent":["export enum Sizes {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n AUTO = 'auto',\n}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\nexport type AutoSize = 'auto';\n\nexport type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';\n","import classNames from 'classnames';\nimport React, { forwardRef, ImgHTMLAttributes } from 'react';\n\nimport { LargeSize, MediumSize, SmallSize, AutoSize, Descriptors, Sizes } from './../common';\nimport { IllustrationNames } from './metadata';\n\n// Picking only a few props from Image element to avoid breaking change\n// as in future underlying element might change\ntype ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;\n\nexport type IllustrationSizes = LargeSize | MediumSize | SmallSize | AutoSize;\n\nexport type Props = {\n name: IllustrationNames;\n alt: string;\n size?: IllustrationSizes;\n loading?: 'eager' | 'lazy';\n} & ImgProps;\n\nconst Illustration = forwardRef<HTMLImageElement, Props>(\n ({ id, name, alt, loading = 'lazy', className, size = Sizes.AUTO }: Props, ref) => {\n const { SMALL, MEDIUM, LARGE } = Sizes;\n const autoSize: boolean = size === Sizes.AUTO;\n return name ? (\n <picture id={id}>\n {autoSize ? (\n <>\n {/* Mobile Screens */}\n <source\n media=\"(max-width: 575px)\"\n srcSet={`${defineSrc(name, SMALL, '1x')}, ${defineSrc(name, SMALL, '2x')} 2x`}\n />\n {/* Tablets */}\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n </>\n ) : null}\n\n <img\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, autoSize ? LARGE : size, '1x')}\n srcSet={`${defineSrc(name, autoSize ? LARGE : size, '2x')} 2x`}\n />\n </picture>\n ) : null;\n },\n);\n\nfunction defineSrc(illustration: string, size: IllustrationSizes, descriptor: Descriptors) {\n return `https://wise.com/web-art/assets/illustrations/${illustration}-${size}@${descriptor}.webp`;\n}\n\nexport default Illustration;\n","/*\n *\n * DON'T MODIFY THIS FILE IT'S AUTO GENERATED\n * See: `scripts/generate-i10s-metadata.mjs`\n *\n */\n\nexport enum Assets {\n BELL = 'bell',\n BRIEFCASE = 'briefcase',\n CALENDAR = 'calendar',\n CHECK_MARK = 'check-mark',\n CLOSED_WINDOW = 'closed-window',\n COIN_PILE = 'coin-pile',\n CONFETTI = 'confetti',\n CONSTRUCTION_FENCE = 'construction-fence',\n CONVERT = 'convert',\n COOKIE = 'cookie',\n DOCUMENTS = 'documents',\n DOOR = 'door',\n ELECTRIC_PLUG = 'electric-plug',\n EMAIL = 'email',\n EXCLAMATION_MARK = 'exclamation-mark',\n FLAG = 'flag',\n FLOWER = 'flower',\n GEAR = 'gear',\n GLOBE = 'globe',\n GRAPH = 'graph',\n HEART = 'heart',\n HOUSE = 'house',\n ID_CARD = 'id-card',\n INFINITE = 'infinite',\n INVITE_LETTER = 'invite-letter',\n JARS = 'jars',\n KEY = 'key',\n LIGHT_BULB = 'light-bulb',\n LOCK = 'lock',\n MAGNIFYING_GLASS = 'magnifying-glass',\n MAP = 'map',\n MEGAPHONE = 'megaphone',\n MULTI_CURRENCY = 'multi-currency',\n ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',\n PALM_TREE = 'palm-tree',\n PHONES = 'phones',\n PIE_CHART = 'pie-chart',\n PLANE = 'plane',\n PUZZLE_PIECES = 'puzzle-pieces',\n QUESTION_MARK = 'question-mark',\n RECEIVE = 'receive',\n REMINDER_LETTER = 'reminder-letter',\n SAND_TIMER = 'sand-timer',\n SHOPPING_BAG = 'shopping-bag',\n SKIP_AUTHENTICATION = 'skip-authentication',\n SPEECH_BUBBLE = 'speech-bubble',\n TOOL = 'tool',\n TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',\n WALLET = 'wallet',\n}\n\nexport type IllustrationNames =\n | 'bell'\n | 'briefcase'\n | 'calendar'\n | 'check-mark'\n | 'closed-window'\n | 'coin-pile'\n | 'confetti'\n | 'construction-fence'\n | 'convert'\n | 'cookie'\n | 'documents'\n | 'door'\n | 'electric-plug'\n | 'email'\n | 'exclamation-mark'\n | 'flag'\n | 'flower'\n | 'gear'\n | 'globe'\n | 'graph'\n | 'heart'\n | 'house'\n | 'id-card'\n | 'infinite'\n | 'invite-letter'\n | 'jars'\n | 'key'\n | 'light-bulb'\n | 'lock'\n | 'magnifying-glass'\n | 'map'\n | 'megaphone'\n | 'multi-currency'\n | 'one-invite-letter-opened'\n | 'palm-tree'\n | 'phones'\n | 'pie-chart'\n | 'plane'\n | 'puzzle-pieces'\n | 'question-mark'\n | 'receive'\n | 'reminder-letter'\n | 'sand-timer'\n | 'shopping-bag'\n | 'skip-authentication'\n | 'speech-bubble'\n | 'tool'\n | 'two-invite-letters-opened'\n | 'wallet';\n"],"names":["Sizes","Illustration","Assets","forwardRef","ref","name","alt","_ref$loading","_ref","loading","className","size","AUTO","_ref$size","SMALL","MEDIUM","LARGE","autoSize","React","createElement","id","Fragment","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"8XAAYA,0DAAAA,EAAAA,EAAKA,QAALA,QAKX,CAAA,IAJC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QACAA,EAAA,KAAA,OCeIC,ICZMC,EDYMD,EAAGE,EAAUA,WAC7B,SAA2EC,EAAAA,GAAO,IAA3EC,EAAAA,EAAAA,KAAMC,IAAAA,IAAGC,EAAAC,EAAEC,QAAAA,OAAO,IAAAF,EAAG,OAAQG,EAAAA,EAAAA,EAAAA,UAAWC,EAAAA,EAAAA,KAAAA,OAAOX,IAAAA,EAAAA,QAAMY,KAC1DC,IAAiCb,EAAAA,MAAzBc,MAAOC,EAAkBf,EAAKA,MAAvBe,OAAQC,EAAUhB,EAAKA,MAAfgB,MACTC,EAAYN,IAASX,EAAKA,MAACY,KACzC,OAAOP,eACLa,UAASC,cAAA,UAAA,CAAAC,GAJRZ,EAAFY,IAKIH,eACCC,UAAAC,cAAAD,EAAAA,QAAAG,SAAA,kBAEEH,UACEC,cAAA,SAAA,CAAAG,MAAM,qBACNC,OAAWC,EAAUnB,EAAMS,EAAO,MAAUU,KAAAA,EAAUnB,EAAMS,EAAO,MAAW,qBAGhFI,UAAAC,cAAA,SAAA,CACEG,MAAM,qBACNC,OAAWC,EAAUnB,EAAMU,EAAQ,MAAUS,KAAAA,EAAUnB,EAAMU,EAAQ,MAAW,SAGlF,kBAEJG,EAAAA,QACEC,cAAA,MAAA,CAAAf,IAAKA,EACLE,IAAKA,EACLI,UAAWe,UAAW,mBAAkB,oBAAsBpB,EAAQK,GACtED,QAASA,EACTiB,IAAKF,EAAUnB,EAAMY,EAAWD,EAAQL,EAAM,MAC9CY,OAAWC,EAAUnB,EAAMY,EAAWD,EAAQL,EAAM,MAAW,SAGjE,IACN,GAGF,SAASa,EAAUG,EAAsBhB,EAAyBiB,GAChE,MAAA,iDAAwDD,EAAY,IAAIhB,EAAI,IAAIiB,EAAU,OAC5F,CCEC1B,EAAAA,YAAAA,GAlDWA,EAAAA,EAAMA,SAANA,SAkDX,CAAA,IAjDC,KAAA,OACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,WAAA,aACAA,EAAA,cAAA,gBACAA,EAAA,UAAA,YACAA,EAAA,SAAA,WACAA,EAAA,mBAAA,qBACAA,EAAA,QAAA,UACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,KAAA,OACAA,EAAA,cAAA,gBACAA,EAAA,MAAA,QACAA,EAAA,iBAAA,mBACAA,EAAA,KAAA,OACAA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,MAAA,QACAA,EAAA,QAAA,UACAA,EAAA,SAAA,WACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,IAAA,MACAA,EAAA,WAAA,aACAA,EAAA,KAAA,OACAA,EAAA,iBAAA,mBACAA,EAAA,IAAA,MACAA,EAAA,UAAA,YACAA,EAAA,eAAA,iBACAA,EAAA,yBAAA,2BACAA,EAAA,UAAA,YACAA,EAAA,OAAA,SACAA,EAAA,UAAA,YACAA,EAAA,MAAA,QACAA,EAAA,cAAA,gBACAA,EAAA,cAAA,gBACAA,EAAA,QAAA,UACAA,EAAA,gBAAA,kBACAA,EAAA,WAAA,aACAA,EAAA,aAAA,eACAA,EAAA,oBAAA,sBACAA,EAAA,cAAA,gBACAA,EAAA,KAAA,OACAA,EAAA,0BAAA,4BACAA,EAAA,OAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wise/art",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "React library for art elements in UI",
|
|
6
6
|
"homepage": "https://github.com/transferwise/web-art#readme",
|
|
@@ -27,7 +27,9 @@
|
|
|
27
27
|
"start": "start-storybook -p 3001",
|
|
28
28
|
"dev": "yarn start",
|
|
29
29
|
"test": "release-to-github-with-changelog-pre-release-checks",
|
|
30
|
-
"lint-fix": "eslint 'src/**/*.{js,ts,tsx}' 'scripts/*.{mjs,js,ts,tsx}' --fix"
|
|
30
|
+
"lint-fix": "eslint 'src/**/*.{js,ts,tsx}' 'scripts/*.{mjs,js,ts,tsx}' --fix",
|
|
31
|
+
"build-docs": "build-storybook -o docs",
|
|
32
|
+
"deploy-docs": "deploy-to-github-pages -d docs -m main"
|
|
31
33
|
},
|
|
32
34
|
"devDependencies": {
|
|
33
35
|
"wise-atoms": "git+ssh://git@github.com:transferwise/wise-atoms.git#e16d86e7d741bd56e4a17ab9ec39d6de479eb0f9",
|
|
@@ -58,7 +60,8 @@
|
|
|
58
60
|
"@types/glob": "^8.0.0",
|
|
59
61
|
"@storybook/addon-essentials": "^6.5.13",
|
|
60
62
|
"@storybook/react": "^6.5.13",
|
|
61
|
-
"microbundle": "^0.15.1"
|
|
63
|
+
"microbundle": "^0.15.1",
|
|
64
|
+
"deploy-to-github-pages": "^1.0.1"
|
|
62
65
|
},
|
|
63
66
|
"peerDependencies": {
|
|
64
67
|
"react": ">=17",
|