@wix/design-system-illustrations 1.1.2 → 1.1.3
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 +39 -4
- package/package.json +4 -3
package/Readme.md
CHANGED
|
@@ -12,11 +12,13 @@ yarn add @wix/design-system-illustrations
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
Importing and using
|
|
15
|
+
Importing and using illustrations in your React application is straightforward.
|
|
16
|
+
|
|
17
|
+
Here's an example of how to use an illustration for Studio developers:
|
|
16
18
|
|
|
17
19
|
```jsx
|
|
18
20
|
import React from 'react';
|
|
19
|
-
import { AddingElements } from '@wix/design-system-illustrations';
|
|
21
|
+
import { AddingElements } from '@wix/design-system-illustrations/studio';
|
|
20
22
|
|
|
21
23
|
const MyComponent = () => {
|
|
22
24
|
return (
|
|
@@ -30,10 +32,43 @@ const MyComponent = () => {
|
|
|
30
32
|
export default MyComponent;
|
|
31
33
|
```
|
|
32
34
|
|
|
33
|
-
|
|
35
|
+
Here's an example of how to use an illustration for Business Manager or Editor Classic developers:
|
|
34
36
|
|
|
35
|
-
|
|
37
|
+
```jsx
|
|
38
|
+
import React from 'react';
|
|
39
|
+
import { AddingElements } from '@wix/design-system-illustrations/edge';
|
|
40
|
+
|
|
41
|
+
const MyComponent = () => {
|
|
42
|
+
return (
|
|
43
|
+
<div>
|
|
44
|
+
<h1>Welcome to My Component</h1>
|
|
45
|
+
<AddingElements />
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
export default MyComponent;
|
|
51
|
+
```
|
|
36
52
|
|
|
53
|
+
Here's an example of how to use an illustration for TPA's and Editor Elements team:
|
|
54
|
+
|
|
55
|
+
```jsx
|
|
56
|
+
import React from 'react';
|
|
57
|
+
import { AddingElements } from '@wix/design-system-illustrations';
|
|
58
|
+
|
|
59
|
+
const MyComponent = (editorType = 'studio') => {
|
|
60
|
+
return (
|
|
61
|
+
<div>
|
|
62
|
+
<h1>Welcome to My Component</h1>
|
|
63
|
+
<AddingElements skin={editor} />
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export default MyComponent;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Property `skin` has been exposed for every single illustration component to allow switching from edge to studio illustrations theme. The default skin is `edge`.
|
|
37
72
|
```jsx
|
|
38
73
|
<AddingElements skin="studio" />
|
|
39
74
|
<AddingElements skin="edge" />
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/design-system-illustrations",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.3",
|
|
5
5
|
"packageManager": "yarn@4.0.2",
|
|
6
6
|
"author": "mykolass@wix.com",
|
|
7
7
|
"license": "MIT",
|
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
"exports": {
|
|
17
17
|
".": "./dist/unified/index.js",
|
|
18
18
|
"./studio": "./dist/studio/index.js",
|
|
19
|
-
"./edge": "./dist/edge/index.js"
|
|
19
|
+
"./edge": "./dist/edge/index.js",
|
|
20
|
+
"./package.json": "./package.json"
|
|
20
21
|
},
|
|
21
22
|
"peerDependencies": {
|
|
22
23
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
|
|
@@ -39,5 +40,5 @@
|
|
|
39
40
|
"groupId": "com.wixpress"
|
|
40
41
|
}
|
|
41
42
|
},
|
|
42
|
-
"falconPackageHash": "
|
|
43
|
+
"falconPackageHash": "c7254dc80d3f2b70cbe071285b52736ed4d55c43fd677f2a61f70482"
|
|
43
44
|
}
|