@wise/art 0.0.6 → 1.0.0-beta.1
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 +52 -4
- package/dist/Illustration.css +2 -1
- package/dist/common.d.ts +1 -3
- package/dist/illustrations/Illustration.d.ts +2 -2
- package/dist/illustrations/Illustration.stories.d.ts +1 -1
- package/dist/illustrations/metadata.d.ts +0 -6
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.modern.mjs +1 -1
- package/dist/index.modern.mjs.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,4 +1,52 @@
|
|
|
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
|
+
Illustrations works via `Illustration` React component. The component implements [Responsive Images](https://web.dev/responsive-images/) concept so you don't need bother about different image sizes for different devices.
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Usage in React
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import { Illustration, Assets, Sizes } from '@wise/art';
|
|
35
|
+
|
|
36
|
+
<Illustration
|
|
37
|
+
name={Assets.BRIEFCASE}
|
|
38
|
+
alt="..."
|
|
39
|
+
|
|
40
|
+
id="..."
|
|
41
|
+
className="..."
|
|
42
|
+
|
|
43
|
+
// 'lazy` by default
|
|
44
|
+
loading={'lazy' | 'eager'}
|
|
45
|
+
|
|
46
|
+
// React Ref
|
|
47
|
+
ref={...}
|
|
48
|
+
/>
|
|
49
|
+
```
|
|
2
50
|
|
|
3
51
|
|
|
4
52
|
### Usage in Angular Environment
|
|
@@ -13,14 +61,14 @@ import { Illustration } from '@wise/art';
|
|
|
13
61
|
|
|
14
62
|
angular
|
|
15
63
|
.module('tw.someModule', [ ... ])
|
|
16
|
-
.component('
|
|
64
|
+
.component('wiseIllustration', react2angular(Illustration))
|
|
17
65
|
```
|
|
18
66
|
|
|
19
67
|
in Angular HTML template file
|
|
20
68
|
```html
|
|
21
|
-
<
|
|
69
|
+
<wise-illustration
|
|
22
70
|
id="'test-id'"
|
|
23
71
|
alt="'Image of briefcase'"
|
|
24
72
|
name="'briefcase'">
|
|
25
|
-
</
|
|
73
|
+
</wise-illustration>
|
|
26
74
|
```
|
package/dist/Illustration.css
CHANGED
package/dist/common.d.ts
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
export declare enum Sizes {
|
|
2
2
|
SMALL = "small",
|
|
3
3
|
MEDIUM = "medium",
|
|
4
|
-
LARGE = "large"
|
|
5
|
-
AUTO = "auto"
|
|
4
|
+
LARGE = "large"
|
|
6
5
|
}
|
|
7
6
|
export declare type LargeSize = 'large';
|
|
8
7
|
export declare type MediumSize = 'medium';
|
|
9
8
|
export declare type SmallSize = 'small';
|
|
10
|
-
export declare type AutoSize = 'auto';
|
|
11
9
|
export declare type Descriptors = '1x' | '1.5x' | '2x' | '3x' | '4x';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React, { ImgHTMLAttributes } from 'react';
|
|
2
|
-
import { LargeSize, MediumSize, SmallSize
|
|
2
|
+
import { LargeSize, MediumSize, SmallSize } from './../common';
|
|
3
3
|
import { IllustrationNames } from './metadata';
|
|
4
4
|
declare type ImgProps = Pick<ImgHTMLAttributes<HTMLImageElement>, 'id' | 'className'>;
|
|
5
|
-
export declare type IllustrationSizes = LargeSize | MediumSize | SmallSize
|
|
5
|
+
export declare type IllustrationSizes = LargeSize | MediumSize | SmallSize;
|
|
6
6
|
export declare type Props = {
|
|
7
7
|
name: IllustrationNames;
|
|
8
8
|
alt: string;
|
|
@@ -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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=require("classnames"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var
|
|
1
|
+
var e=require("classnames"),t=require("react");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var E,s=/*#__PURE__*/r(e),i=/*#__PURE__*/r(t);exports.Sizes=void 0,(E=exports.Sizes||(exports.Sizes={})).SMALL="small",E.MEDIUM="medium",E.LARGE="large";var a,l=t.forwardRef(function(e,t){var r=e.id,E=e.name,a=e.alt,l=e.loading,n=void 0===l?"lazy":l,c=e.className,u=e.size,I=void 0===u?exports.Sizes.MEDIUM:u,d=exports.Sizes.SMALL,p=exports.Sizes.MEDIUM;return E?/*#__PURE__*/i.default.createElement("picture",null,I===exports.Sizes.LARGE||I===exports.Sizes.MEDIUM?/*#__PURE__*/i.default.createElement(i.default.Fragment,null,/*#__PURE__*/i.default.createElement("source",{media:"(max-width: 575px)",srcSet:o(E,d,"1x")+", "+o(E,d,"2x")+" 2x"}),I!==exports.Sizes.MEDIUM?/*#__PURE__*/i.default.createElement("source",{media:"(max-width: 991px)",srcSet:o(E,p,"1x")+", "+o(E,p,"2x")+" 2x"}):null):null,/*#__PURE__*/i.default.createElement("img",{id:r,ref:t,alt:a,className:s.default("wds-illustration","wds-illustration-"+E,c),loading:n,src:o(E,I,"1x"),srcSet:o(E,I,"2x")+" 2x"})):null});function o(e,t,r){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+r+".webp"}exports.Assets=void 0,(a=exports.Assets||(exports.Assets={})).BELL="bell",a.BRIEFCASE="briefcase",a.CALENDAR="calendar",a.CHECK_MARK="check-mark",a.CLOSED_WINDOW="closed-window",a.COIN_PILE="coin-pile",a.CONFETTI="confetti",a.CONSTRUCTION_FENCE="construction-fence",a.CONVERT="convert",a.COOKIE="cookie",a.DOCUMENTS="documents",a.DOOR="door",a.ELECTRIC_PLUG="electric-plug",a.EMAIL="email",a.EXCLAMATION_MARK="exclamation-mark",a.FLAG="flag",a.FLOWER="flower",a.GEAR="gear",a.GLOBE="globe",a.GRAPH="graph",a.HEART="heart",a.HOUSE="house",a.ID_CARD="id-card",a.INFINITE="infinite",a.INVITE_LETTER="invite-letter",a.JARS="jars",a.KEY="key",a.LIGHT_BULB="light-bulb",a.LOCK="lock",a.MAGNIFYING_GLASS="magnifying-glass",a.MAP="map",a.MEGAPHONE="megaphone",a.MULTI_CURRENCY="multi-currency",a.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",a.PALM_TREE="palm-tree",a.PHONES="phones",a.PIE_CHART="pie-chart",a.PLANE="plane",a.PUZZLE_PIECES="puzzle-pieces",a.QUESTION_MARK="question-mark",a.RECEIVE="receive",a.REMINDER_LETTER="reminder-letter",a.SAND_TIMER="sand-timer",a.SHOPPING_BAG="shopping-bag",a.SKIP_AUTHENTICATION="skip-authentication",a.SPEECH_BUBBLE="speech-bubble",a.TOOL="tool",a.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",a.WALLET="wallet",exports.Illustration=l;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
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
|
|
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}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, 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","ref","id","name","alt","loading","_ref$loading","className","_ref$size","size","MEDIUM","SMALL","React","createElement","LARGE","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"2HAAYA,0CAIXA,QAAAA,WAAAA,GAJWA,EAAAA,gBAAAA,QAAAA,MAIX,CAAA,IAHC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QCgBIC,ICZMC,EDYMD,EAAGE,EAAUA,WAC7B,SAAAC,EAA6EC,GAA1EC,IAAAA,IAAAA,GAAIC,EAAIH,EAAJG,KAAMC,EAAAA,EAAAA,IAAKC,EAAAA,EAAAA,QAAAA,aAAU,OAAMC,EAAEC,EAASP,EAATO,UAASC,EAAAR,EAAES,KAAAA,OAAI,IAAAD,EAAGZ,QAAAA,MAAMc,OAAMF,EACnDG,EAAaf,QAAAA,MAAlBe,MAAOD,EAAWd,QAAKA,MAAhBc,OAEf,sBACEE,EAAA,QAAAC,cAAA,UAAA,KACGJ,IAASb,QAAAA,MAAMkB,OAASL,IAASb,QAAKA,MAACc,oBACtCE,EAAAA,2DAEEA,EACE,QAAAC,cAAA,SAAA,CAAAE,MAAM,qBACNC,OAAWC,EAAUd,EAAMQ,EAAO,MAAK,KAAKM,EAAUd,EAAMQ,EAAO,MAAW,QAG/EF,IAASb,QAAKA,MAACc,oBACdE,UACEC,cAAA,SAAA,CAAAE,MAAM,qBACNC,OAAWC,EAAUd,EAAMO,EAAQ,MAAK,KAAKO,EAAUd,EAAMO,EAAQ,MAAW,QAEhF,MAEJ,kBAEJE,EAAA,QAAAC,cAAA,MAAA,CACEX,GAAIA,EACJD,IAAKA,EACLG,IAAKA,EACLG,UAAWW,EAAU,QAAC,mBAAwCf,oBAAAA,EAAQI,GACtEF,QAASA,EACTc,IAAKF,EAAUd,EAAMM,EAAM,MAC3BO,OAAWC,EAAUd,EAAMM,EAAM,eAGnC,IACN,GAGF,SAASQ,EAAUG,EAAsBX,EAAyBY,GAChE,MAAA,iDAAwDD,EAAY,IAAIX,EAAI,IAAIY,EAAU,OAC5F,CCDCvB,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"}
|
package/dist/index.modern.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"classnames";import
|
|
1
|
+
import e from"classnames";import E,{forwardRef as t}from"react";var l;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(l||(l={}));const a=t(({id:t,name:a,alt:n,loading:r="lazy",className:c,size:o=l.MEDIUM},s)=>{const{SMALL:I,MEDIUM:m}=l;return a?/*#__PURE__*/E.createElement("picture",null,o===l.LARGE||o===l.MEDIUM?/*#__PURE__*/E.createElement(E.Fragment,null,/*#__PURE__*/E.createElement("source",{media:"(max-width: 575px)",srcSet:`${i(a,I,"1x")}, ${i(a,I,"2x")} 2x`}),o!==l.MEDIUM?/*#__PURE__*/E.createElement("source",{media:"(max-width: 991px)",srcSet:`${i(a,m,"1x")}, ${i(a,m,"2x")} 2x`}):null):null,/*#__PURE__*/E.createElement("img",{id:t,ref:s,alt:n,className:e("wds-illustration",`wds-illustration-${a}`,c),loading:r,src:i(a,o,"1x"),srcSet:`${i(a,o,"2x")} 2x`})):null});function i(e,E,t){return`https://wise.com/web-art/assets/illustrations/${e}-${E}@${t}.webp`}var n;!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE="coin-pile",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DOCUMENTS="documents",e.DOOR="door",e.ELECTRIC_PLUG="electric-plug",e.EMAIL="email",e.EXCLAMATION_MARK="exclamation-mark",e.FLAG="flag",e.FLOWER="flower",e.GEAR="gear",e.GLOBE="globe",e.GRAPH="graph",e.HEART="heart",e.HOUSE="house",e.ID_CARD="id-card",e.INFINITE="infinite",e.INVITE_LETTER="invite-letter",e.JARS="jars",e.KEY="key",e.LIGHT_BULB="light-bulb",e.LOCK="lock",e.MAGNIFYING_GLASS="magnifying-glass",e.MAP="map",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE="plane",e.PUZZLE_PIECES="puzzle-pieces",e.QUESTION_MARK="question-mark",e.RECEIVE="receive",e.REMINDER_LETTER="reminder-letter",e.SAND_TIMER="sand-timer",e.SHOPPING_BAG="shopping-bag",e.SKIP_AUTHENTICATION="skip-authentication",e.SPEECH_BUBBLE="speech-bubble",e.TOOL="tool",e.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",e.WALLET="wallet"}(n||(n={}));export{n as Assets,a as Illustration,l as Sizes};
|
|
2
2
|
//# sourceMappingURL=index.modern.mjs.map
|
|
@@ -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
|
|
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}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, 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","MEDIUM","ref","SMALL","React","LARGE","createElement","Fragment","media","srcSet","defineSrc","classNames","src","illustration","descriptor","Assets"],"mappings":"gEAAYA,IAIXA,GAJD,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,ICeKC,MAAYA,EAAGC,EACnB,EAAGC,KAAIC,OAAMC,MAAKC,QAAAA,EAAU,OAAQC,YAAWC,KAAAA,EAAOR,EAAMS,QAAiBC,KAC3E,MAAMC,MAAEA,EAAKF,OAAEA,GAAWT,EAE1B,OAAWI,eACTQ,+BACGJ,IAASR,EAAMa,OAASL,IAASR,EAAMS,oBACtCG,EAAAE,cAAAF,EAAAG,SAAA,kBAEEH,0BACEI,MAAM,qBACNC,OAAQ,GAAGC,EAAUd,EAAMO,EAAO,UAAUO,EAAUd,EAAMO,EAAO,aAGpEH,IAASR,EAAMS,oBACdG,EACEE,cAAA,SAAA,CAAAE,MAAM,qBACNC,UAAWC,EAAUd,EAAMK,EAAQ,UAAUS,EAAUd,EAAMK,EAAQ,aAErE,MAEJ,kBAEJG,EACEE,cAAA,MAAA,CAAAX,GAAIA,EACJO,IAAKA,EACLL,IAAKA,EACLE,UAAWY,EAAW,mBAAwC,oBAAAf,IAAQG,GACtED,QAASA,EACTc,IAAKF,EAAUd,EAAMI,EAAM,MAC3BS,OAAQ,GAAGC,EAAUd,EAAMI,EAAM,cAGnC,OAIR,SAAkBU,EAACG,EAAsBb,EAAyBc,GAChE,uDAAwDD,KAAgBb,KAAQc,QAClF,CCnDYC,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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import e from"classnames";import
|
|
1
|
+
import e from"classnames";import E,{forwardRef as t}from"react";var i;!function(e){e.SMALL="small",e.MEDIUM="medium",e.LARGE="large"}(i||(i={}));var a,l=t(function(t,a){var l=t.id,n=t.name,o=t.alt,c=t.loading,s=void 0===c?"lazy":c,I=t.className,m=t.size,L=void 0===m?i.MEDIUM:m,T=i.SMALL,N=i.MEDIUM;return n?/*#__PURE__*/E.createElement("picture",null,L===i.LARGE||L===i.MEDIUM?/*#__PURE__*/E.createElement(E.Fragment,null,/*#__PURE__*/E.createElement("source",{media:"(max-width: 575px)",srcSet:r(n,T,"1x")+", "+r(n,T,"2x")+" 2x"}),L!==i.MEDIUM?/*#__PURE__*/E.createElement("source",{media:"(max-width: 991px)",srcSet:r(n,N,"1x")+", "+r(n,N,"2x")+" 2x"}):null):null,/*#__PURE__*/E.createElement("img",{id:l,ref:a,alt:o,className:e("wds-illustration","wds-illustration-"+n,I),loading:s,src:r(n,L,"1x"),srcSet:r(n,L,"2x")+" 2x"})):null});function r(e,E,t){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+E+"@"+t+".webp"}!function(e){e.BELL="bell",e.BRIEFCASE="briefcase",e.CALENDAR="calendar",e.CHECK_MARK="check-mark",e.CLOSED_WINDOW="closed-window",e.COIN_PILE="coin-pile",e.CONFETTI="confetti",e.CONSTRUCTION_FENCE="construction-fence",e.CONVERT="convert",e.COOKIE="cookie",e.DOCUMENTS="documents",e.DOOR="door",e.ELECTRIC_PLUG="electric-plug",e.EMAIL="email",e.EXCLAMATION_MARK="exclamation-mark",e.FLAG="flag",e.FLOWER="flower",e.GEAR="gear",e.GLOBE="globe",e.GRAPH="graph",e.HEART="heart",e.HOUSE="house",e.ID_CARD="id-card",e.INFINITE="infinite",e.INVITE_LETTER="invite-letter",e.JARS="jars",e.KEY="key",e.LIGHT_BULB="light-bulb",e.LOCK="lock",e.MAGNIFYING_GLASS="magnifying-glass",e.MAP="map",e.MEGAPHONE="megaphone",e.MULTI_CURRENCY="multi-currency",e.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",e.PALM_TREE="palm-tree",e.PHONES="phones",e.PIE_CHART="pie-chart",e.PLANE="plane",e.PUZZLE_PIECES="puzzle-pieces",e.QUESTION_MARK="question-mark",e.RECEIVE="receive",e.REMINDER_LETTER="reminder-letter",e.SAND_TIMER="sand-timer",e.SHOPPING_BAG="shopping-bag",e.SKIP_AUTHENTICATION="skip-authentication",e.SPEECH_BUBBLE="speech-bubble",e.TOOL="tool",e.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",e.WALLET="wallet"}(a||(a={}));export{a as Assets,l as Illustration,i as Sizes};
|
|
2
2
|
//# sourceMappingURL=index.module.js.map
|
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
|
|
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}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, 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","ref","id","name","alt","loading","_ref$loading","className","_ref$size","size","MEDIUM","SMALL","React","createElement","LARGE","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"gEAAYA,IAIXA,GAJD,SAAYA,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,ICeKC,ICsCLC,EDtCiBD,EAAGE,EACnB,SAAAC,EAA6EC,GAA1EC,IAAAA,IAAAA,GAAIC,EAAIH,EAAJG,KAAMC,EAAAA,EAAAA,IAAKC,EAAAA,EAAAA,QAAAA,aAAU,OAAMC,EAAEC,EAASP,EAATO,UAASC,EAAAR,EAAES,KAAAA,OAAI,IAAAD,EAAGZ,EAAMc,OAAMF,EACnDG,EAAaf,EAAlBe,MAAOD,EAAWd,EAAXc,OAEf,sBACEE,EAAAC,cAAA,UAAA,KACGJ,IAASb,EAAMkB,OAASL,IAASb,EAAMc,oBACtCE,6CAEEA,EACEC,cAAA,SAAA,CAAAE,MAAM,qBACNC,OAAWC,EAAUd,EAAMQ,EAAO,MAAK,KAAKM,EAAUd,EAAMQ,EAAO,MAAW,QAG/EF,IAASb,EAAMc,oBACdE,EACEC,cAAA,SAAA,CAAAE,MAAM,qBACNC,OAAWC,EAAUd,EAAMO,EAAQ,MAAK,KAAKO,EAAUd,EAAMO,EAAQ,MAAW,QAEhF,MAEJ,kBAEJE,EAAAC,cAAA,MAAA,CACEX,GAAIA,EACJD,IAAKA,EACLG,IAAKA,EACLG,UAAWW,EAAW,mBAAwCf,oBAAAA,EAAQI,GACtEF,QAASA,EACTc,IAAKF,EAAUd,EAAMM,EAAM,MAC3BO,OAAWC,EAAUd,EAAMM,EAAM,eAGnC,IACN,GAGF,SAASQ,EAAUG,EAAsBX,EAAyBY,GAChE,MAAA,iDAAwDD,EAAY,IAAIX,EAAI,IAAIY,EAAU,OAC5F,ECnDA,SAAYvB,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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("classnames"),require("react")):"function"==typeof define&&define.amd?define(["exports","classnames","react"],t):t((e||self).art={},e.classnames,e.react)}(this,function(e,t,i){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("classnames"),require("react")):"function"==typeof define&&define.amd?define(["exports","classnames","react"],t):t((e||self).art={},e.classnames,e.react)}(this,function(e,t,i){function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l,E=/*#__PURE__*/a(t),n=/*#__PURE__*/a(i);e.Sizes=void 0,(l=e.Sizes||(e.Sizes={})).SMALL="small",l.MEDIUM="medium",l.LARGE="large";var s,r=i.forwardRef(function(t,i){var a=t.id,l=t.name,s=t.alt,r=t.loading,c=void 0===r?"lazy":r,u=t.className,d=t.size,I=void 0===d?e.Sizes.MEDIUM:d,f=e.Sizes.SMALL,m=e.Sizes.MEDIUM;return l?/*#__PURE__*/n.default.createElement("picture",null,I===e.Sizes.LARGE||I===e.Sizes.MEDIUM?/*#__PURE__*/n.default.createElement(n.default.Fragment,null,/*#__PURE__*/n.default.createElement("source",{media:"(max-width: 575px)",srcSet:o(l,f,"1x")+", "+o(l,f,"2x")+" 2x"}),I!==e.Sizes.MEDIUM?/*#__PURE__*/n.default.createElement("source",{media:"(max-width: 991px)",srcSet:o(l,m,"1x")+", "+o(l,m,"2x")+" 2x"}):null):null,/*#__PURE__*/n.default.createElement("img",{id:a,ref:i,alt:s,className:E.default("wds-illustration","wds-illustration-"+l,u),loading:c,src:o(l,I,"1x"),srcSet:o(l,I,"2x")+" 2x"})):null});function o(e,t,i){return"https://wise.com/web-art/assets/illustrations/"+e+"-"+t+"@"+i+".webp"}e.Assets=void 0,(s=e.Assets||(e.Assets={})).BELL="bell",s.BRIEFCASE="briefcase",s.CALENDAR="calendar",s.CHECK_MARK="check-mark",s.CLOSED_WINDOW="closed-window",s.COIN_PILE="coin-pile",s.CONFETTI="confetti",s.CONSTRUCTION_FENCE="construction-fence",s.CONVERT="convert",s.COOKIE="cookie",s.DOCUMENTS="documents",s.DOOR="door",s.ELECTRIC_PLUG="electric-plug",s.EMAIL="email",s.EXCLAMATION_MARK="exclamation-mark",s.FLAG="flag",s.FLOWER="flower",s.GEAR="gear",s.GLOBE="globe",s.GRAPH="graph",s.HEART="heart",s.HOUSE="house",s.ID_CARD="id-card",s.INFINITE="infinite",s.INVITE_LETTER="invite-letter",s.JARS="jars",s.KEY="key",s.LIGHT_BULB="light-bulb",s.LOCK="lock",s.MAGNIFYING_GLASS="magnifying-glass",s.MAP="map",s.MEGAPHONE="megaphone",s.MULTI_CURRENCY="multi-currency",s.ONE_INVITE_LETTER_OPENED="one-invite-letter-opened",s.PALM_TREE="palm-tree",s.PHONES="phones",s.PIE_CHART="pie-chart",s.PLANE="plane",s.PUZZLE_PIECES="puzzle-pieces",s.QUESTION_MARK="question-mark",s.RECEIVE="receive",s.REMINDER_LETTER="reminder-letter",s.SAND_TIMER="sand-timer",s.SHOPPING_BAG="shopping-bag",s.SKIP_AUTHENTICATION="skip-authentication",s.SPEECH_BUBBLE="speech-bubble",s.TOOL="tool",s.TWO_INVITE_LETTERS_OPENED="two-invite-letters-opened",s.WALLET="wallet",e.Illustration=r});
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
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
|
|
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}\n\nexport type LargeSize = 'large';\nexport type MediumSize = 'medium';\nexport type SmallSize = 'small';\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, 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;\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.MEDIUM }: Props, ref) => {\n const { SMALL, MEDIUM } = Sizes;\n\n return name ? (\n <picture>\n {size === Sizes.LARGE || size === Sizes.MEDIUM ? (\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 {size !== Sizes.MEDIUM ? (\n <source\n media=\"(max-width: 991px)\"\n srcSet={`${defineSrc(name, MEDIUM, '1x')}, ${defineSrc(name, MEDIUM, '2x')} 2x`}\n />\n ) : null}\n </>\n ) : null}\n\n <img\n id={id}\n ref={ref}\n alt={alt}\n className={classNames('wds-illustration', `wds-illustration-${name}`, className)}\n loading={loading}\n src={defineSrc(name, size, '1x')}\n srcSet={`${defineSrc(name, 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","ref","id","name","alt","loading","_ref$loading","className","_ref$size","size","MEDIUM","SMALL","React","createElement","LARGE","media","srcSet","defineSrc","classNames","src","illustration","descriptor"],"mappings":"8XAAYA,0CAIXA,EAAAA,WAAAA,GAJWA,EAAAA,UAAAA,EAAAA,MAIX,CAAA,IAHC,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,QCgBIC,ICZMC,EDYMD,EAAGE,EAAUA,WAC7B,SAAAC,EAA6EC,GAA1EC,IAAAA,IAAAA,GAAIC,EAAIH,EAAJG,KAAMC,EAAAA,EAAAA,IAAKC,EAAAA,EAAAA,QAAAA,aAAU,OAAMC,EAAEC,EAASP,EAATO,UAASC,EAAAR,EAAES,KAAAA,OAAI,IAAAD,EAAGZ,EAAAA,MAAMc,OAAMF,EACnDG,EAAaf,EAAAA,MAAlBe,MAAOD,EAAWd,EAAKA,MAAhBc,OAEf,sBACEE,EAAA,QAAAC,cAAA,UAAA,KACGJ,IAASb,EAAAA,MAAMkB,OAASL,IAASb,EAAKA,MAACc,oBACtCE,EAAAA,2DAEEA,EACE,QAAAC,cAAA,SAAA,CAAAE,MAAM,qBACNC,OAAWC,EAAUd,EAAMQ,EAAO,MAAK,KAAKM,EAAUd,EAAMQ,EAAO,MAAW,QAG/EF,IAASb,EAAKA,MAACc,oBACdE,UACEC,cAAA,SAAA,CAAAE,MAAM,qBACNC,OAAWC,EAAUd,EAAMO,EAAQ,MAAK,KAAKO,EAAUd,EAAMO,EAAQ,MAAW,QAEhF,MAEJ,kBAEJE,EAAA,QAAAC,cAAA,MAAA,CACEX,GAAIA,EACJD,IAAKA,EACLG,IAAKA,EACLG,UAAWW,EAAU,QAAC,mBAAwCf,oBAAAA,EAAQI,GACtEF,QAASA,EACTc,IAAKF,EAAUd,EAAMM,EAAM,MAC3BO,OAAWC,EAAUd,EAAMM,EAAM,eAGnC,IACN,GAGF,SAASQ,EAAUG,EAAsBX,EAAyBY,GAChE,MAAA,iDAAwDD,EAAY,IAAIX,EAAI,IAAIY,EAAU,OAC5F,CCDCvB,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-beta.1",
|
|
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",
|