@wix/design-system-illustrations 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 +44 -0
- package/dist/edge/Dummy.d.ts +3 -0
- package/dist/edge/Dummy.js +23 -0
- package/dist/edge/index.js +1 -0
- package/dist/studio/AddingElements.d.ts +3 -0
- package/dist/studio/AddingElements.js +23 -0
- package/dist/studio/BlogPost.d.ts +3 -0
- package/dist/studio/BlogPost.js +24 -0
- package/dist/studio/CMS.d.ts +3 -0
- package/dist/studio/CMS.js +57 -0
- package/dist/studio/Discount.d.ts +3 -0
- package/dist/studio/Discount.js +27 -0
- package/dist/studio/Dummy.d.ts +3 -0
- package/dist/studio/Dummy.js +23 -0
- package/dist/studio/NoResults.d.ts +3 -0
- package/dist/studio/NoResults.js +29 -0
- package/dist/studio/index.js +6 -0
- package/dist/unified/Dummy.d.ts +5 -0
- package/dist/unified/Dummy.js +12 -0
- package/dist/unified/index.js +1 -0
- package/package.json +40 -0
package/Readme.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Wix Design System Illustrations
|
|
2
|
+
|
|
3
|
+
Welcome to the `@wix/design-system-illustrations` library! This package provides a collection of high-quality illustrations designed for the Wix Design System, exported as React components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To install the `@wix/design-system-illustrations` package, run the following command in your project directory:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
yarn add @wix/design-system-illustrations
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
Importing and using our illustrations in your React application is straightforward. Here's an example of how to use an illustration:
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
import React from 'react';
|
|
19
|
+
import { AddingElements } from '@wix/design-system-illustrations';
|
|
20
|
+
|
|
21
|
+
const MyComponent = () => {
|
|
22
|
+
return (
|
|
23
|
+
<div>
|
|
24
|
+
<h1>Welcome to My Component</h1>
|
|
25
|
+
<AddingElements />
|
|
26
|
+
</div>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default MyComponent;
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Usage between edge and studio illustrations
|
|
34
|
+
|
|
35
|
+
Property `skin` has been exposed for every single illustration component to allow switching from edge to studio illustrations theme. The default skin is `edge`.
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
<AddingElements skin="studio" />
|
|
39
|
+
<AddingElements skin="edge" />
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Contributing
|
|
43
|
+
|
|
44
|
+
TBD.
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const Dummy = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<path d="M40.1002 22H21.9102V27.84H40.1002V22Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
8
|
+
<path d="M98.7701 27.75H21.9102V76.84H98.7701V27.75Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M98.6502 30.9997C100.257 30.9997 101.56 29.6968 101.56 28.0897C101.56 26.4825 100.257 25.1797 98.6502 25.1797C97.0431 25.1797 95.7402 26.4825 95.7402 28.0897C95.7402 29.6968 97.0431 30.9997 98.6502 30.9997Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M21.91 30.7497C23.5171 30.7497 24.82 29.4468 24.82 27.8397C24.82 26.2325 23.5171 24.9297 21.91 24.9297C20.3029 24.9297 19 26.2325 19 27.8397C19 29.4468 20.3029 30.7497 21.91 30.7497Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
11
|
+
<path d="M21.91 79.78C23.5171 79.78 24.82 78.4771 24.82 76.87C24.82 75.2628 23.5171 73.96 21.91 73.96C20.3029 73.96 19 75.2628 19 76.87C19 78.4771 20.3029 79.78 21.91 79.78Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M98.7791 79.5895C100.386 79.5895 101.689 78.2867 101.689 76.6795C101.689 75.0724 100.386 73.7695 98.7791 73.7695C97.172 73.7695 95.8691 75.0724 95.8691 76.6795C95.8691 78.2867 97.172 79.5895 98.7791 79.5895Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M79.9609 71.6504V98.3704L87.2209 89.3804L98.7809 89.6304L79.9609 71.6504Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M60.3499 65.1696C67.3529 65.1696 73.0299 59.4925 73.0299 52.4896C73.0299 45.4866 67.3529 39.8096 60.3499 39.8096C53.3469 39.8096 47.6699 45.4866 47.6699 52.4896C47.6699 59.4925 53.3469 65.1696 60.3499 65.1696Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
<path d="M67.7 51.9595H53V53.0195H67.7V51.9595Z" fill="white" stroke="white" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
16
|
+
<path d="M60.8798 45.1395H59.8198V59.8395H60.8798V45.1395Z" fill="white" stroke="white" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
17
|
+
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
Dummy.displayName = 'Dummy';
|
|
22
|
+
|
|
23
|
+
export default Dummy;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Dummy } from './Dummy';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const AddingElements = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<path d="M40.1002 22H21.9102V27.84H40.1002V22Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
8
|
+
<path d="M98.7701 27.75H21.9102V76.84H98.7701V27.75Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M98.6502 30.9997C100.257 30.9997 101.56 29.6968 101.56 28.0897C101.56 26.4825 100.257 25.1797 98.6502 25.1797C97.0431 25.1797 95.7402 26.4825 95.7402 28.0897C95.7402 29.6968 97.0431 30.9997 98.6502 30.9997Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M21.91 30.7497C23.5171 30.7497 24.82 29.4468 24.82 27.8397C24.82 26.2325 23.5171 24.9297 21.91 24.9297C20.3029 24.9297 19 26.2325 19 27.8397C19 29.4468 20.3029 30.7497 21.91 30.7497Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
11
|
+
<path d="M21.91 79.78C23.5171 79.78 24.82 78.4771 24.82 76.87C24.82 75.2628 23.5171 73.96 21.91 73.96C20.3029 73.96 19 75.2628 19 76.87C19 78.4771 20.3029 79.78 21.91 79.78Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M98.7791 79.5895C100.386 79.5895 101.689 78.2867 101.689 76.6795C101.689 75.0724 100.386 73.7695 98.7791 73.7695C97.172 73.7695 95.8691 75.0724 95.8691 76.6795C95.8691 78.2867 97.172 79.5895 98.7791 79.5895Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M79.9609 71.6504V98.3704L87.2209 89.3804L98.7809 89.6304L79.9609 71.6504Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M60.3499 65.1696C67.3529 65.1696 73.0299 59.4925 73.0299 52.4896C73.0299 45.4866 67.3529 39.8096 60.3499 39.8096C53.3469 39.8096 47.6699 45.4866 47.6699 52.4896C47.6699 59.4925 53.3469 65.1696 60.3499 65.1696Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
<path d="M67.7 51.9595H53V53.0195H67.7V51.9595Z" fill="white" stroke="white" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
16
|
+
<path d="M60.8798 45.1395H59.8198V59.8395H60.8798V45.1395Z" fill="white" stroke="white" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
17
|
+
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
AddingElements.displayName = 'AddingElements';
|
|
22
|
+
|
|
23
|
+
export default AddingElements;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const BlogPost = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<path d="M17.75 84.1999L46.74 78.1999L33.76 32.1699L17.75 33.8799V84.1999Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
8
|
+
<path d="M34.8496 93.2L63.8396 87.2L50.8596 44L34.8496 45.71V93.2Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M107.13 93.73L54.25 104.68C54.25 104.68 45.32 102.99 45.32 91.45V78.79C45.32 76.6 44.99 74.42 44.25 72.36C43.45 70.15 42.12 67.95 40.04 67.95C37.02 67.95 37.24 76.76 37.24 76.76V84.48C37.24 84.48 37.49 93.29 34.21 93.29C31.94 93.29 30.5 91.09 29.63 88.89C28.82 86.82 28.47 84.64 28.47 82.46V63.99L28.46 57.1C28.46 54.92 28.14 52.73 27.39 50.67C26.59 48.47 25.27 46.27 23.18 46.27C20.17 46.27 20.39 55.08 20.39 55.08V67.44L20.38 75.41C20.38 75.41 20.61 84.22 17.49 84.22C15.32 84.22 13.95 82.02 13.13 79.81C12.35 77.76 12.01 75.57 12.01 73.39V35.47C12.01 35.37 12.01 26.16 12 26.06L65.26 15C65.27 15.15 65.27 24.43 65.27 24.58V37.16L74.22 35.43C77.11 34.87 79.99 36.49 81.01 39.26L81.03 39.33C81.78 41.39 82.1 43.57 82.1 45.76V58.85L90.22 57.13C93.35 56.47 96.49 58.21 97.58 61.22L97.61 61.29C98.35 63.35 98.68 65.53 98.68 67.71V80.39C98.68 80.39 98.68 91.02 107.13 93.73Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M86.0402 58.2803C86.4602 59.5103 89.9802 60.8903 89.9802 68.2503V75.4803L54.6202 82.2803V78.0803C54.6202 75.6103 54.4702 69.2303 49.9102 65.7403" stroke="#000624" strokeLinejoin="round"></path>
|
|
11
|
+
<path d="M65.2697 37.1602L23.1797 46.2702" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M82.1093 58.8496L40.0293 67.9596" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M75.0402 90.6402C75.2602 90.0302 75.3202 89.3602 75.1702 88.6902C74.7502 86.7702 72.8602 85.5502 70.9402 85.9602C69.0202 86.3702 67.8002 88.2702 68.2102 90.1902C68.6202 92.1102 70.5202 93.3302 72.4402 92.9202C73.1202 92.7702 73.7002 92.4402 74.1702 91.9902L75.9202 92.1702L75.0402 90.6502V90.6402Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M61.3799 95.2902C61.3799 95.2902 54.8699 92.9702 56.5199 89.9602C57.1399 88.8202 58.5699 88.4102 59.6999 89.0302L60.0699 89.2302L60.3199 88.9002C61.0999 87.8602 62.5699 87.6502 63.5999 88.4302C66.3599 90.5002 61.3799 95.3002 61.3799 95.3002V95.2902Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
<path d="M23.1797 46.2696V32.8696L55.9197 26.0596V39.0896" stroke="#000624" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
16
|
+
<path d="M74.2299 44V60.55L40.0299 67.96C40.1199 67.94 39.9399 67.96 40.0299 67.96V51.37L74.2199 44.01L74.2299 44Z" fill="white"></path>
|
|
17
|
+
<path d="M40.0299 67.96L74.2299 60.55V44L74.2199 44.01L40.0299 51.37V67.96ZM40.0299 67.96C39.9399 67.96 40.1199 67.94 40.0299 67.96Z" stroke="#000624" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
18
|
+
|
|
19
|
+
</svg>
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
BlogPost.displayName = 'BlogPost';
|
|
23
|
+
|
|
24
|
+
export default BlogPost;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const CMS = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<g clipPath="url(#clip0_172_1534)">
|
|
8
|
+
<path d="M106.44 39.35V82.92C106.44 84.33 105.19 85.41 103.8 85.21L51.6102 77.79L44.9402 76.85C43.3802 76.63 42.2202 75.3 42.2202 73.72V27.39C42.2202 26.24 43.2402 25.35 44.3802 25.51L54.8102 26.98C55.4302 27.07 55.9802 27.42 56.3102 27.96L57.4802 29.85C57.8102 30.38 58.3602 30.74 58.9802 30.82L104.64 37.26C105.68 37.41 106.45 38.3 106.45 39.35H106.44Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M82.1104 49.75L96.1204 51.73" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M82.1104 55.5599L92.1804 56.9799" stroke="#000624" strokeLinejoin="round"></path>
|
|
11
|
+
<path d="M82.1104 60.72L96.1204 62.7" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M82.8601 73.57V73.53C82.8601 72.13 84.1001 71.05 85.4901 71.26L93.8401 72.48C94.9701 72.65 95.8001 73.61 95.8001 74.75C95.8001 76.15 94.5601 77.22 93.1801 77.02L84.8301 75.84C83.7001 75.68 82.8501 74.71 82.8501 73.57H82.8601Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M75.1903 59.57V72.29L74.5603 72.2C68.3003 71.1 65.0803 67.56 61.8403 64.02C65.1803 61.32 68.5203 58.62 75.1903 59.57Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M74.5602 72.2L48.4902 68.47V55.75C55.1702 56.71 58.5002 60.36 61.8402 64.02C65.0802 67.56 68.3002 71.1 74.5602 72.2Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
<path d="M75.1902 44.95V59.57C68.5202 58.62 65.1802 61.32 61.8402 64.02C58.5002 60.36 55.1702 56.71 48.4902 55.75V41.13L75.1902 44.95Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
16
|
+
<path d="M64.6333 56.2117C66.0684 54.8758 65.981 52.4493 64.4382 50.7919C62.8953 49.1345 60.4812 48.8738 59.0462 50.2097C57.6111 51.5456 57.6985 53.9721 59.2413 55.6295C60.7842 57.2869 63.1983 57.5476 64.6333 56.2117Z" fill="white" stroke="#000624" stroke-miterlimit="10"></path>
|
|
17
|
+
<path d="M101.73 43.75V87.32C101.73 88.73 100.48 89.81 99.0898 89.61L46.8998 82.19L40.2298 81.25C38.6698 81.03 37.5098 79.7 37.5098 78.12V31.79C37.5098 30.64 38.5298 29.75 39.6698 29.91L50.0998 31.38C50.7198 31.47 51.2698 31.82 51.5998 32.36L52.7698 34.25C53.0998 34.78 53.6498 35.14 54.2698 35.22L99.9298 41.66C100.97 41.81 101.74 42.7 101.74 43.75H101.73Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
18
|
+
<path d="M77.3896 54.15L91.3997 56.13" stroke="#000624" strokeLinejoin="round"></path>
|
|
19
|
+
<path d="M77.3896 59.95L87.4596 61.3699" stroke="#000624" strokeLinejoin="round"></path>
|
|
20
|
+
<path d="M77.3896 65.12L91.3997 67.1" stroke="#000624" strokeLinejoin="round"></path>
|
|
21
|
+
<path d="M78.1399 77.96V77.92C78.1399 76.52 79.3799 75.44 80.7699 75.65L89.1199 76.87C90.2499 77.04 91.0799 78 91.0799 79.14C91.0799 80.54 89.8399 81.61 88.4599 81.41L80.1099 80.23C78.9799 80.07 78.1299 79.1 78.1299 77.96H78.1399Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
22
|
+
<path d="M70.4696 63.96V76.68L69.8396 76.59C63.5796 75.49 60.3596 71.95 57.1196 68.41C60.4596 65.71 63.7996 63.01 70.4696 63.96Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
23
|
+
<path d="M69.8395 76.59L43.7695 72.86V60.14C50.4495 61.1 53.7795 64.75 57.1195 68.41C60.3595 71.95 63.5795 75.49 69.8395 76.59Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
24
|
+
<path d="M70.4695 49.34V63.96C63.7995 63.01 60.4595 65.71 57.1195 68.41C53.7795 64.75 50.4495 61.1 43.7695 60.14V45.52L70.4695 49.34Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
25
|
+
<path d="M59.916 60.6083C61.3511 59.2724 61.2637 56.8459 59.7209 55.1885C58.178 53.5311 55.764 53.2704 54.3289 54.6063C52.8938 55.9422 52.9812 58.3687 54.524 60.0261C56.0669 61.6835 58.481 61.9442 59.916 60.6083Z" fill="white" stroke="#000624" stroke-miterlimit="10"></path>
|
|
26
|
+
<path d="M13.5 46.17V51.31L26.78 53.18V48.04L13.5 46.17Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
27
|
+
<path d="M13.5 51.3101V56.4501L26.78 58.3201V53.1801L13.5 51.3101Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
28
|
+
<path d="M13.5 56.4501V61.5901L26.78 63.4601V58.3201L13.5 56.4501Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
29
|
+
<path d="M13.5 61.5901V66.7301L26.78 68.6001V63.4601L13.5 61.5901Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
30
|
+
<path d="M13.5 66.7301V71.8701L26.78 73.7401V68.6001L13.5 66.7301Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
31
|
+
<path d="M26.8198 60.87L32.7398 61.71" stroke="#000624" strokeLinejoin="round"></path>
|
|
32
|
+
<path d="M96.95 47.7V91.27C96.95 92.68 95.7 93.76 94.31 93.56L42.12 86.14L35.45 85.2C33.89 84.98 32.73 83.65 32.73 82.07V35.74C32.73 34.59 33.75 33.7 34.89 33.86L45.32 35.33C45.94 35.42 46.49 35.77 46.82 36.31L47.99 38.2C48.32 38.73 48.87 39.09 49.49 39.17L95.15 45.61C96.19 45.76 96.96 46.65 96.96 47.7H96.95Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
33
|
+
<path d="M36.4201 38.2401C37.0221 38.2401 37.5101 37.752 37.5101 37.1501C37.5101 36.5481 37.0221 36.0601 36.4201 36.0601C35.8181 36.0601 35.3301 36.5481 35.3301 37.1501C35.3301 37.752 35.8181 38.2401 36.4201 38.2401Z" fill="#000624"></path>
|
|
34
|
+
<path d="M39.9699 38.59C40.5719 38.59 41.0599 38.102 41.0599 37.5C41.0599 36.898 40.5719 36.41 39.9699 36.41C39.3679 36.41 38.8799 36.898 38.8799 37.5C38.8799 38.102 39.3679 38.59 39.9699 38.59Z" fill="#000624"></path>
|
|
35
|
+
<path d="M43.3102 38.97C43.9122 38.97 44.4002 38.482 44.4002 37.88C44.4002 37.278 43.9122 36.79 43.3102 36.79C42.7082 36.79 42.2202 37.278 42.2202 37.88C42.2202 38.482 42.7082 38.97 43.3102 38.97Z" fill="#000624"></path>
|
|
36
|
+
<path d="M75.4502 59.97L89.4602 61.94" stroke="#000624" strokeLinejoin="round"></path>
|
|
37
|
+
<path d="M75.4502 65.73L85.5202 67.15" stroke="#000624" strokeLinejoin="round"></path>
|
|
38
|
+
<path d="M76.1999 75.14V75.1C76.1999 73.7 77.4399 72.62 78.8299 72.83L87.1799 74.05C88.3099 74.22 89.1399 75.18 89.1399 76.32C89.1399 77.72 87.8999 78.79 86.5199 78.59L78.1699 77.41C77.0399 77.25 76.1899 76.28 76.1899 75.14H76.1999Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
39
|
+
<path d="M68.7102 51.82V79C60.1302 74.11 50.7403 71.06 42.0103 69.78V48L68.7102 51.82Z" fill="white" stroke="black" strokeLinejoin="round"></path>
|
|
40
|
+
<path d="M64.3368 60.6551C65.6425 59.4396 65.5631 57.2319 64.1595 55.7241C62.7559 54.2163 60.5595 53.9793 59.2538 55.1947C57.9481 56.4102 58.0275 58.6178 59.4311 60.1257C60.8347 61.6335 63.0311 61.8705 64.3368 60.6551Z" fill="white" stroke="black" stroke-miterlimit="10"></path>
|
|
41
|
+
<path d="M48.55 61.3098L52.17 59.1598L55.06 61.9798V64.7298L60.14 66.9398V75.1198L42 72.7298V60.2398L48.55 61.3098Z" fill="white" stroke="black" strokeLinejoin="round"></path>
|
|
42
|
+
<path d="M48.55 61.3098L52.17 59.1598L45.62 58.0898L42 60.2398L48.55 61.3098Z" fill="black" stroke="black" strokeLinejoin="round"></path>
|
|
43
|
+
<path d="M50.9102 71.4597L52.8102 71.7697V68.2397L50.9102 67.9297V71.4597Z" fill="black" stroke="black" strokeLinejoin="round"></path>
|
|
44
|
+
<path d="M68.7102 78.9993V79.1593L68.0802 79.0693L42.0103 75.3393V69.7793C50.7403 71.0593 60.1302 74.1093 68.7102 78.9993Z" fill="white" stroke="black" strokeLinejoin="round"></path>
|
|
45
|
+
</g>
|
|
46
|
+
<defs>
|
|
47
|
+
<clipPath id="clip0_172_1534">
|
|
48
|
+
<rect width="93.94" height="69.08" fill="white" transform="translate(13 25)"></rect>
|
|
49
|
+
</clipPath>
|
|
50
|
+
</defs>
|
|
51
|
+
|
|
52
|
+
</svg>
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
CMS.displayName = 'CMS';
|
|
56
|
+
|
|
57
|
+
export default CMS;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const Discount = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<g clipPath="url(#clip0_172_1533)">
|
|
8
|
+
<path d="M22.5 53.15V96.16H42L22.5 53.15Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M104.88 96.16H35.02C35.02 96.16 22.5 91.71 22.5 53.15L22.67 23.5H92.52V30.28C92.52 53.3 90.19 75.96 104.88 96.16Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M59.2501 33.33L65.4301 43.28L75.5401 38.52L74.9001 49.87L86.2601 52.12L79.0101 60.52L87.2901 68.93L76.1701 71.18L78.1701 82.53L67.4401 77.77L62.3701 87.72L56.1601 77.77L45.9801 82.53L46.6801 71.18L35.3001 68.93L42.6101 60.52L34.3901 52.12L45.5001 49.87L43.5501 38.52L54.2101 43.28L59.2501 33.33Z" fill="white"></path>
|
|
11
|
+
<path d="M59.2501 33.33L65.4301 43.28L75.5401 38.52L74.9001 49.87L86.2601 52.12L79.0101 60.52L87.2901 68.93L76.1701 71.18L78.1701 82.53L67.4401 77.77L62.3701 87.72L56.1601 77.77L45.9801 82.53L46.6801 71.18L35.3001 68.93L42.6101 60.52L34.3901 52.12L45.5001 49.87L43.5501 38.52L54.2101 43.28L59.2501 33.33Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M69.2598 52.53L54.0898 68.51" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M56.6302 57.69C58.3402 57.69 59.6502 56.31 59.5602 54.61C59.4702 52.91 58.0202 51.53 56.3202 51.53C54.6202 51.53 53.3102 52.91 53.3902 54.61C53.4702 56.31 54.9302 57.69 56.6302 57.69Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M67.1298 69.51C68.8398 69.51 70.1498 68.13 70.0598 66.43C69.9698 64.73 68.4998 63.35 66.7898 63.35C65.0798 63.35 63.7698 64.73 63.8598 66.43C63.9498 68.13 65.4198 69.51 67.1298 69.51Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
</g>
|
|
16
|
+
<defs>
|
|
17
|
+
<clipPath id="clip0_172_1533">
|
|
18
|
+
<rect width="83.38" height="73.66" fill="white" transform="translate(22 23)"></rect>
|
|
19
|
+
</clipPath>
|
|
20
|
+
</defs>
|
|
21
|
+
|
|
22
|
+
</svg>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
Discount.displayName = 'Discount';
|
|
26
|
+
|
|
27
|
+
export default Discount;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const Dummy = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<path d="M40.1002 22H21.9102V27.84H40.1002V22Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
8
|
+
<path d="M98.7701 27.75H21.9102V76.84H98.7701V27.75Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M98.6502 30.9997C100.257 30.9997 101.56 29.6968 101.56 28.0897C101.56 26.4825 100.257 25.1797 98.6502 25.1797C97.0431 25.1797 95.7402 26.4825 95.7402 28.0897C95.7402 29.6968 97.0431 30.9997 98.6502 30.9997Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M21.91 30.7497C23.5171 30.7497 24.82 29.4468 24.82 27.8397C24.82 26.2325 23.5171 24.9297 21.91 24.9297C20.3029 24.9297 19 26.2325 19 27.8397C19 29.4468 20.3029 30.7497 21.91 30.7497Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
11
|
+
<path d="M21.91 79.78C23.5171 79.78 24.82 78.4771 24.82 76.87C24.82 75.2628 23.5171 73.96 21.91 73.96C20.3029 73.96 19 75.2628 19 76.87C19 78.4771 20.3029 79.78 21.91 79.78Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M98.7791 79.5895C100.386 79.5895 101.689 78.2867 101.689 76.6795C101.689 75.0724 100.386 73.7695 98.7791 73.7695C97.172 73.7695 95.8691 75.0724 95.8691 76.6795C95.8691 78.2867 97.172 79.5895 98.7791 79.5895Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M79.9609 71.6504V98.3704L87.2209 89.3804L98.7809 89.6304L79.9609 71.6504Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M60.3499 65.1696C67.3529 65.1696 73.0299 59.4925 73.0299 52.4896C73.0299 45.4866 67.3529 39.8096 60.3499 39.8096C53.3469 39.8096 47.6699 45.4866 47.6699 52.4896C47.6699 59.4925 53.3469 65.1696 60.3499 65.1696Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
<path d="M67.7 51.9595H53V53.0195H67.7V51.9595Z" fill="white" stroke="white" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
16
|
+
<path d="M60.8798 45.1395H59.8198V59.8395H60.8798V45.1395Z" fill="white" stroke="white" strokeLinecap="round" strokeLinejoin="round"></path>
|
|
17
|
+
|
|
18
|
+
</svg>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
Dummy.displayName = 'Dummy';
|
|
22
|
+
|
|
23
|
+
export default Dummy;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const NoResults = (props) => (
|
|
4
|
+
<svg viewBox="0 0 120 120" fill="none" width="120" height="120" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
5
|
+
|
|
6
|
+
<rect width="120" height="120" fill="white"></rect>
|
|
7
|
+
<path d="M108.831 39.4354L100.041 47.6754L48.1309 41.3754L57.5109 32.9854L108.831 39.4354Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
8
|
+
<path d="M99.5109 67.9154L48.1309 61.4854V41.3754L69.0109 43.8554L78.6409 45.0054L99.5109 47.4854L103.561 58.6354L99.5109 67.9154Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
9
|
+
<path d="M108.831 59.7353L99.5107 67.9153V47.4853L108.831 39.4353V59.7353Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
10
|
+
<path d="M67.7792 65.09L65.3584 66.9122L70.1154 73.2319L72.5363 71.4097L67.7792 65.09Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
11
|
+
<path d="M90.1601 103.156L69.8001 77.2256C68.4101 75.3856 68.7801 72.7656 70.6201 71.3856C72.4601 69.9956 75.0801 70.3656 76.4601 72.2056L96.8101 98.2956L90.1601 103.156Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
12
|
+
<path d="M65.4302 66.8513C75.0227 59.8435 76.3944 45.3957 68.4939 34.5813C60.5934 23.7669 46.4125 20.681 36.82 27.6888C27.2274 34.6966 25.8558 49.1444 33.7563 59.9588C41.6568 70.7733 55.8377 73.8592 65.4302 66.8513Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
13
|
+
<path d="M66.5502 60.3656C65.6102 61.6356 64.4802 62.7756 63.1602 63.7356C60.4302 65.7256 57.1302 66.7856 53.6102 66.7856C52.9802 66.7856 52.3302 66.7456 51.7102 66.6756C45.9902 66.0956 40.5102 62.8456 36.7802 57.7456C33.5302 53.3056 32.0102 48.0056 32.4902 42.8656C32.9202 38.4356 34.7902 34.5656 37.8202 31.8256C38.2202 31.4656 38.6602 31.1256 39.1002 30.7956C41.8302 28.7856 45.1402 27.7356 48.6502 27.7356C53.4402 27.7356 58.1802 29.6356 62.0002 32.9756H62.0102C63.2802 34.0956 64.4302 35.3656 65.4702 36.7756C67.0302 38.9156 68.1802 41.2356 68.8902 43.5756C69.0502 44.1256 69.2002 44.6656 69.3202 45.2156C70.5502 50.6756 69.5802 56.2256 66.5502 60.3656Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
14
|
+
<path d="M69.3209 45.2254L51.7109 41.3954L62.0109 32.9854H62.0209C63.2909 34.1054 64.4409 35.3754 65.4809 36.7854C67.0409 38.9254 68.1909 41.2454 68.9009 43.5854C69.0609 44.1354 69.2109 44.6754 69.3309 45.2254H69.3209Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
15
|
+
<path d="M66.5392 60.3655C65.5992 61.6355 64.4692 62.7855 63.1592 63.7455C60.4292 65.7355 57.1292 66.7855 53.5992 66.7855C52.9592 66.7855 52.3292 66.7455 51.6992 66.6855V41.3955L68.8892 43.5955C70.7192 49.5655 69.8792 55.8155 66.5392 60.3655Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
16
|
+
<path d="M95.0905 102.926C96.9279 101.584 97.699 99.5124 96.8128 98.2994C95.9267 97.0864 93.7188 97.1912 91.8815 98.5335C90.0441 99.8757 89.2731 101.947 90.1592 103.16C91.0454 104.373 93.2532 104.268 95.0905 102.926Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
17
|
+
<path d="M55.8893 82.3155L50.2593 87.3555L36.5293 85.6855L38.3593 84.0855L40.5393 82.1655L42.3193 80.6055L55.8893 82.3155Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
18
|
+
<path d="M50.1193 99.6954L44.5993 99.0054L42.0593 98.6854L36.5293 97.9954V85.6854L42.0593 86.3454L44.5993 86.6454L50.1193 87.3054L51.1893 90.2454L50.1193 99.6954Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
19
|
+
<path d="M55.8891 82.3154V94.6254L50.1191 99.6954V87.3054L51.8691 85.7854L54.0791 83.8754L55.8891 82.3154Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
20
|
+
<path d="M28.18 65.3257L24.72 68.4257L11 66.7157L12.12 65.7357L13.46 64.5557L14.56 63.5957L28.18 65.3257Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
21
|
+
<path d="M24.63 76.0057L15.96 74.8957L14.39 74.6957L11 74.2757V66.7157L14.39 67.1157L15.96 67.3057L24.63 68.3857L25.29 70.2057L24.63 76.0057Z" fill="white" stroke="#000624" strokeLinejoin="round"></path>
|
|
22
|
+
<path d="M28.1799 65.3257V72.8857L24.6299 76.0057V68.3857L25.7099 67.4557L27.0699 66.2857L28.1799 65.3257Z" fill="#000624" stroke="#000624" strokeLinejoin="round"></path>
|
|
23
|
+
|
|
24
|
+
</svg>
|
|
25
|
+
);
|
|
26
|
+
|
|
27
|
+
NoResults.displayName = 'NoResults';
|
|
28
|
+
|
|
29
|
+
export default NoResults;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { default as AddingElements } from './AddingElements';
|
|
2
|
+
export { default as BlogPost } from './BlogPost';
|
|
3
|
+
export { default as CMS } from './CMS';
|
|
4
|
+
export { default as Discount } from './Discount';
|
|
5
|
+
export { default as Dummy } from './Dummy';
|
|
6
|
+
export { default as NoResults } from './NoResults';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Dummy as Edge } from '../edge';
|
|
3
|
+
import { Dummy as Studio } from '../studio';
|
|
4
|
+
|
|
5
|
+
const Dummy = ({ skin, ...props }) => {
|
|
6
|
+
return skin === "studio" ? <Studio {...props} /> : <Edge {...props} />;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
Dummy.displayName = 'Dummy';
|
|
10
|
+
|
|
11
|
+
export default Dummy;
|
|
12
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Dummy } from './Dummy';
|
package/package.json
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@wix/design-system-illustrations",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"packageManager": "yarn@4.0.2",
|
|
5
|
+
"author": "mykolass@wix.com",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"description": "Wix Design System Illustrations",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"build": "node ./scripts/build.mjs",
|
|
10
|
+
"test": "echo ok"
|
|
11
|
+
},
|
|
12
|
+
"files": [
|
|
13
|
+
"dist"
|
|
14
|
+
],
|
|
15
|
+
"exports": {
|
|
16
|
+
".": "./dist/unified/index.js",
|
|
17
|
+
"./studio": "./dist/studio/index.js",
|
|
18
|
+
"./edge": "./dist/edge/index.js"
|
|
19
|
+
},
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"react": "^16.14.0 || ^17.0.0 || ^18.0.0",
|
|
22
|
+
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
"chalk": "^5.3.0",
|
|
26
|
+
"esbuild": "^0.19.2",
|
|
27
|
+
"node-html-parser": "^6.1.11"
|
|
28
|
+
},
|
|
29
|
+
"publishConfig": {
|
|
30
|
+
"registry": "https://registry.npmjs.org/",
|
|
31
|
+
"access": "public"
|
|
32
|
+
},
|
|
33
|
+
"wix": {
|
|
34
|
+
"artifact": {
|
|
35
|
+
"artifactId": "wix-design-system-illustrations",
|
|
36
|
+
"groupId": "com.wixpress"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"falconPackageHash": "64ef38c586c101ed96c24e0986e6fedfc78f416f0c0bfbcfa06bc7bd"
|
|
40
|
+
}
|