@digital-ai/dot-illustrations 2.0.16 → 2.0.18

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/demo/script.js CHANGED
@@ -34,6 +34,7 @@ function doMagic() {
34
34
  "disconnected",
35
35
  "done",
36
36
  "dora-metrics-circle",
37
+ "download",
37
38
  "empty",
38
39
  "error-fourhundredfour",
39
40
  "error-fivehundred",
@@ -47,20 +48,23 @@ function doMagic() {
47
48
  "no-filters",
48
49
  "nothing-defined",
49
50
  "password-token",
51
+ "protection-in-progress",
50
52
  "reports",
53
+ "scan-document",
51
54
  "survey",
52
55
  "user",
53
56
  "ui-ux-improvements",
57
+ "upload",
54
58
  "work-item",
55
59
  "workflows-main",
56
60
  "research",
57
61
  "commitrepo",
58
62
 
59
-
63
+
60
64
  // Dashboards arrange from A-Z
61
- "analysis",
62
- "automation",
63
- "burn-down",
65
+ "analysis",
66
+ "automation",
67
+ "burn-down",
64
68
  "burn-up",
65
69
  "change-credit-score",
66
70
  "change-data-quality",
@@ -71,15 +75,15 @@ function doMagic() {
71
75
  "change-failure-prediction",
72
76
  "CRP-failure-prediction-monitoring",
73
77
  "custom",
74
- "defect",
75
- "dependency",
76
- "dora",
77
- "executive",
78
+ "defect",
79
+ "dependency",
80
+ "dora",
81
+ "executive",
78
82
  "change-impact",
79
- "item",
80
- "late-task",
83
+ "item",
84
+ "late-task",
81
85
  "onboarding",
82
- "data-extraction",
86
+ "data-extraction",
83
87
  "workflow"
84
88
  ];
85
89
  illustrations.forEach(illustration => {
@@ -99,7 +103,7 @@ function doMagic() {
99
103
  Copy Code
100
104
  <span class="tooltiptext">Copy Code</span>
101
105
  </button>
102
- </div>
106
+ </div>
103
107
  <span class="iconID">${illustration}</span>
104
108
  <!-- Code block to be copied -->
105
109
  <pre class="codeBlock">
@@ -0,0 +1,14 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.019" cy="124.5" r="93" fill="#494F60" fill-opacity="0.3"/>
3
+ <g clip-path="url(#clip0_4326_3111)">
4
+ <path d="M65.3875 84.237V237.785H192.848V107.578L155.09 65.4727H76.3715C65.3875 65.4727 64.4721 77.9822 65.3875 84.237Z" fill="#555F77"/>
5
+ <path d="M121.736 156.902L124.951 160.118L124.951 145.126C124.951 143.051 126.764 141.561 128.752 141.561C130.739 141.561 132.552 143.051 132.552 145.126L132.552 160.118L135.768 156.902C137.252 155.418 139.658 155.418 141.143 156.902C142.627 158.386 142.627 160.793 141.143 162.277L131.439 171.981C129.955 173.465 127.549 173.465 126.064 171.981L116.361 162.277C114.877 160.793 114.877 158.386 116.361 156.902C117.845 155.418 120.251 155.418 121.736 156.902Z" fill="#E5E9F3"/>
6
+ <path d="M115.086 137.596C115.086 137.575 115.095 137.554 115.11 137.539C115.125 137.524 115.146 137.515 115.167 137.515L142.337 137.515C142.359 137.515 142.379 137.524 142.394 137.539C142.409 137.554 142.418 137.575 142.418 137.596L142.418 145.359C142.418 147.458 144.119 149.16 146.218 149.16C148.317 149.16 150.019 147.458 150.019 145.359L150.019 137.596C150.019 135.559 149.21 133.605 147.769 132.164C146.328 130.724 144.374 129.914 142.337 129.914L115.167 129.914C113.13 129.914 111.176 130.724 109.735 132.164C108.294 133.605 107.485 135.559 107.485 137.596L107.485 145.359C107.485 147.458 109.187 149.16 111.286 149.16C113.385 149.16 115.086 147.458 115.086 145.359L115.086 137.596Z" fill="#E5E9F3"/>
7
+ <path d="M155.09 99.3417V65.7031L192.619 107.58C185.144 107.58 168.735 107.351 162.694 107.351C156.652 107.351 155.09 105.749 155.09 99.3417Z" fill="#8591AE"/>
8
+ </g>
9
+ <defs>
10
+ <clipPath id="clip0_4326_3111">
11
+ <rect x="31.019" y="31.5" width="186" height="186" rx="93" fill="white"/>
12
+ </clipPath>
13
+ </defs>
14
+ </svg>
@@ -0,0 +1,12 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.019" cy="124.5" r="93" fill="#494F60" fill-opacity="0.3"/>
3
+ <circle cx="124.019" cy="124.5" r="66" fill="url(#paint0_linear_4331_4098)"/>
4
+ <circle cx="123.519" cy="125" r="43.5" fill="#555F77"/>
5
+ <path d="M123.703 104.5C128.741 104.5 132.826 108.585 132.826 113.623V120.53C135.625 123.036 137.387 126.676 137.387 130.729C137.387 138.286 131.26 144.413 123.703 144.413C116.145 144.413 110.019 138.286 110.019 130.729C110.019 126.676 111.781 123.035 114.581 120.529V113.623C114.581 108.585 118.664 104.5 123.703 104.5ZM123.703 123.884C121.544 123.884 119.794 125.634 119.793 127.793C119.793 129.24 120.58 130.502 121.749 131.178V135.611C121.749 136.691 122.623 137.566 123.703 137.566C124.782 137.566 125.658 136.691 125.658 135.611V131.178C126.826 130.502 127.613 129.24 127.613 127.793C127.613 125.634 125.862 123.884 123.703 123.884ZM123.703 107.921C120.554 107.921 118.001 110.474 118.001 113.623V118.286C119.737 117.49 121.668 117.045 123.703 117.045C125.738 117.045 127.669 117.489 129.405 118.286V113.623C129.405 110.474 126.852 107.921 123.703 107.921Z" fill="#AAB2C5"/>
6
+ <defs>
7
+ <linearGradient id="paint0_linear_4331_4098" x1="80.5876" y1="124.5" x2="167.45" y2="124.5" gradientUnits="userSpaceOnUse">
8
+ <stop stop-color="#3D465C"/>
9
+ <stop offset="1" stop-color="#8591AE"/>
10
+ </linearGradient>
11
+ </defs>
12
+ </svg>
@@ -0,0 +1,16 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.019" cy="124.5" r="93" fill="#494F60" fill-opacity="0.3"/>
3
+ <g clip-path="url(#clip0_4331_3862)">
4
+ <path d="M65.3875 84.237V237.785H192.848V107.578L155.09 65.4727H76.3715C65.3875 65.4727 64.4721 77.9822 65.3875 84.237Z" fill="#555F77"/>
5
+ <path d="M155.09 99.3417V65.7031L192.619 107.58C185.144 107.58 168.735 107.351 162.694 107.351C156.652 107.351 155.09 105.749 155.09 99.3417Z" fill="#8591AE"/>
6
+ <rect x="79.019" y="135.5" width="99" height="11" rx="3" fill="#8591AE"/>
7
+ <rect x="79.019" y="151.5" width="99" height="11" rx="3" fill="#8591AE"/>
8
+ <rect x="79.019" y="167.5" width="99" height="11" rx="3" fill="#8591AE"/>
9
+ <rect x="52.019" y="120.5" width="154" height="15" rx="3" fill="#E5E9F3"/>
10
+ </g>
11
+ <defs>
12
+ <clipPath id="clip0_4331_3862">
13
+ <rect x="31.019" y="31.5" width="186" height="186" rx="93" fill="white"/>
14
+ </clipPath>
15
+ </defs>
16
+ </svg>
@@ -0,0 +1,14 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.019" cy="124.5" r="93" fill="#494F60" fill-opacity="0.3"/>
3
+ <g clip-path="url(#clip0_4326_3110)">
4
+ <path d="M65.3875 84.237V237.785H192.848V107.578L155.09 65.4727H76.3715C65.3875 65.4727 64.4721 77.9822 65.3875 84.237Z" fill="#555F77"/>
5
+ <path d="M135.769 146.106L132.553 142.89V157.882C132.553 159.957 130.74 161.447 128.753 161.447C126.765 161.447 124.952 159.957 124.952 157.882L124.952 142.89L121.736 146.106C120.252 147.59 117.846 147.59 116.362 146.106C114.877 144.621 114.877 142.215 116.362 140.731L126.065 131.027C127.549 129.543 129.956 129.543 131.44 131.027L141.144 140.731C142.628 142.215 142.628 144.621 141.144 146.106C139.659 147.59 137.253 147.59 135.769 146.106Z" fill="#E5E9F3"/>
6
+ <path d="M142.418 165.412C142.418 165.433 142.41 165.454 142.394 165.469C142.379 165.484 142.359 165.493 142.337 165.493H115.167C115.146 165.493 115.125 165.484 115.11 165.469C115.095 165.454 115.086 165.433 115.086 165.412V157.649C115.086 155.55 113.385 153.848 111.286 153.848C109.187 153.848 107.485 155.55 107.485 157.649V165.412C107.485 167.449 108.295 169.403 109.735 170.844C111.176 172.284 113.13 173.094 115.167 173.094H142.337C144.375 173.094 146.329 172.284 147.769 170.844C149.21 169.403 150.019 167.449 150.019 165.412V157.649C150.019 155.55 148.318 153.848 146.219 153.848C144.12 153.848 142.418 155.55 142.418 157.649V165.412Z" fill="#E5E9F3"/>
7
+ <path d="M155.09 99.3417V65.7031L192.619 107.58C185.144 107.58 168.735 107.351 162.694 107.351C156.652 107.351 155.09 105.749 155.09 99.3417Z" fill="#8591AE"/>
8
+ </g>
9
+ <defs>
10
+ <clipPath id="clip0_4326_3110">
11
+ <rect x="31.019" y="31.5" width="186" height="186" rx="93" fill="white"/>
12
+ </clipPath>
13
+ </defs>
14
+ </svg>
@@ -0,0 +1,14 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.438" cy="124.5" r="93" fill="#94A8E1" fill-opacity="0.2"/>
3
+ <g clip-path="url(#clip0_4326_3125)">
4
+ <path d="M65.8064 84.237V237.785H193.267V107.578L155.509 65.4727H76.7904C65.8064 65.4727 64.8911 77.9822 65.8064 84.237Z" fill="#F8F9FC"/>
5
+ <path d="M122.155 156.902L125.37 160.118L125.37 145.126C125.37 143.051 127.183 141.561 129.171 141.561C131.158 141.561 132.971 143.051 132.971 145.126L132.971 160.118L136.187 156.902C137.671 155.418 140.077 155.418 141.562 156.902C143.046 158.386 143.046 160.793 141.562 162.277L131.858 171.981C130.374 173.465 127.968 173.465 126.483 171.981L116.78 162.277C115.296 160.793 115.296 158.386 116.78 156.902C118.264 155.418 120.67 155.418 122.155 156.902Z" fill="#8591AE"/>
6
+ <path d="M115.505 137.596C115.505 137.575 115.514 137.554 115.529 137.539C115.544 137.524 115.565 137.515 115.586 137.515L142.756 137.515C142.777 137.515 142.798 137.524 142.813 137.539C142.828 137.554 142.837 137.575 142.837 137.596L142.837 145.359C142.837 147.458 144.538 149.16 146.637 149.16C148.736 149.16 150.438 147.458 150.438 145.359L150.438 137.596C150.438 135.559 149.629 133.605 148.188 132.164C146.747 130.724 144.793 129.914 142.756 129.914L115.586 129.914C113.549 129.914 111.595 130.724 110.154 132.164C108.713 133.605 107.904 135.559 107.904 137.596L107.904 145.359C107.904 147.458 109.606 149.16 111.705 149.16C113.804 149.16 115.505 147.458 115.505 145.359L115.505 137.596Z" fill="#8591AE"/>
7
+ <path d="M155.509 99.3417V65.7031L193.038 107.58C185.563 107.58 169.154 107.351 163.113 107.351C157.071 107.351 155.509 105.749 155.509 99.3417Z" fill="#CBD2E2"/>
8
+ </g>
9
+ <defs>
10
+ <clipPath id="clip0_4326_3125">
11
+ <rect x="31.438" y="31.5" width="186" height="186" rx="93" fill="white"/>
12
+ </clipPath>
13
+ </defs>
14
+ </svg>
@@ -0,0 +1,12 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.438" cy="124.5" r="93" fill="#94A8E1" fill-opacity="0.2"/>
3
+ <circle cx="124.438" cy="124.5" r="66" fill="url(#paint0_linear_4331_4111)"/>
4
+ <circle cx="123.938" cy="125" r="43.5" fill="#F8F9FC"/>
5
+ <path d="M124.122 104.5C129.16 104.5 133.245 108.585 133.245 113.623V120.53C136.044 123.036 137.806 126.676 137.806 130.729C137.806 138.286 131.679 144.413 124.122 144.413C116.564 144.413 110.438 138.286 110.438 130.729C110.438 126.676 112.2 123.035 115 120.529V113.623C115 108.585 119.083 104.5 124.122 104.5ZM124.122 123.884C121.963 123.884 120.213 125.634 120.212 127.793C120.212 129.24 120.999 130.502 122.167 131.178V135.611C122.168 136.691 123.042 137.566 124.122 137.566C125.201 137.566 126.077 136.691 126.077 135.611V131.178C127.245 130.502 128.032 129.24 128.032 127.793C128.031 125.634 126.281 123.884 124.122 123.884ZM124.122 107.921C120.973 107.921 118.42 110.474 118.42 113.623V118.286C120.156 117.49 122.087 117.045 124.122 117.045C126.157 117.045 128.088 117.489 129.824 118.286V113.623C129.824 110.474 127.271 107.921 124.122 107.921Z" fill="#8591AE"/>
6
+ <defs>
7
+ <linearGradient id="paint0_linear_4331_4111" x1="81.0066" y1="124.5" x2="167.869" y2="124.5" gradientUnits="userSpaceOnUse">
8
+ <stop stop-color="#8591AE"/>
9
+ <stop offset="1" stop-color="#AAB2C5"/>
10
+ </linearGradient>
11
+ </defs>
12
+ </svg>
@@ -0,0 +1,16 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.438" cy="124.5" r="93" fill="#94A8E1" fill-opacity="0.2"/>
3
+ <g clip-path="url(#clip0_4331_4124)">
4
+ <path d="M65.8064 84.237V237.785H193.267V107.578L155.509 65.4727H76.7904C65.8064 65.4727 64.8911 77.9822 65.8064 84.237Z" fill="#F8F9FC"/>
5
+ <path d="M155.509 99.3417V65.7031L193.038 107.58C185.563 107.58 169.154 107.351 163.113 107.351C157.071 107.351 155.509 105.749 155.509 99.3417Z" fill="#CBD2E2"/>
6
+ <rect x="79.438" y="135.5" width="99" height="11" rx="3" fill="#CBD2E2"/>
7
+ <rect x="79.438" y="151.5" width="99" height="11" rx="3" fill="#CBD2E2"/>
8
+ <rect x="79.438" y="167.5" width="99" height="11" rx="3" fill="#CBD2E2"/>
9
+ <rect x="52.438" y="120.5" width="154" height="15" rx="3" fill="#8591AE"/>
10
+ </g>
11
+ <defs>
12
+ <clipPath id="clip0_4331_4124">
13
+ <rect x="31.438" y="31.5" width="186" height="186" rx="93" fill="white"/>
14
+ </clipPath>
15
+ </defs>
16
+ </svg>
@@ -0,0 +1,14 @@
1
+ <svg width="249" height="249" viewBox="0 0 249 249" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="124.438" cy="124.5" r="93" fill="#94A8E1" fill-opacity="0.2"/>
3
+ <g clip-path="url(#clip0_4326_3124)">
4
+ <path d="M65.8064 84.237V237.785H193.267V107.578L155.509 65.4727H76.7904C65.8064 65.4727 64.8911 77.9822 65.8064 84.237Z" fill="#F8F9FC"/>
5
+ <path d="M136.188 146.106L132.972 142.89V157.882C132.972 159.957 131.159 161.447 129.171 161.447C127.184 161.447 125.371 159.957 125.371 157.882L125.371 142.89L122.155 146.106C120.671 147.59 118.265 147.59 116.781 146.106C115.296 144.621 115.296 142.215 116.781 140.731L126.484 131.027C127.968 129.543 130.375 129.543 131.859 131.027L141.563 140.731C143.047 142.215 143.047 144.621 141.563 146.106C140.078 147.59 137.672 147.59 136.188 146.106Z" fill="#8591AE"/>
6
+ <path d="M142.837 165.412C142.837 165.433 142.829 165.454 142.813 165.469C142.798 165.484 142.778 165.493 142.756 165.493H115.586C115.565 165.493 115.544 165.484 115.529 165.469C115.514 165.454 115.505 165.433 115.505 165.412V157.649C115.505 155.55 113.804 153.848 111.705 153.848C109.606 153.848 107.904 155.55 107.904 157.649V165.412C107.904 167.449 108.714 169.403 110.154 170.844C111.595 172.284 113.549 173.094 115.586 173.094H142.756C144.794 173.094 146.748 172.284 148.188 170.844C149.629 169.403 150.438 167.449 150.438 165.412V157.649C150.438 155.55 148.737 153.848 146.638 153.848C144.539 153.848 142.837 155.55 142.837 157.649V165.412Z" fill="#8591AE"/>
7
+ <path d="M155.509 99.3417V65.7031L193.038 107.58C185.563 107.58 169.154 107.351 163.113 107.351C157.071 107.351 155.509 105.749 155.509 99.3417Z" fill="#CBD2E2"/>
8
+ </g>
9
+ <defs>
10
+ <clipPath id="clip0_4326_3124">
11
+ <rect x="31.438" y="31.5" width="186" height="186" rx="93" fill="white"/>
12
+ </clipPath>
13
+ </defs>
14
+ </svg>
package/index.css CHANGED
@@ -1,6 +1,38 @@
1
1
  /* ------------------ GLOBAL ILLUSTRATIONS -------------------- */
2
2
  /*Path: --------- './illustrations/light/global/*.svg ----- light */
3
- /*Path: --------- './illustrations/dark/global/*.svg ------ dark */
3
+ /*Path: --------- './illustrations/dark/global/*.svg ------ dark */
4
+
5
+ .dot-illustration img.scan-document.light {
6
+ content: url('./illustrations/light/global/scan-document.svg');
7
+ }
8
+
9
+ .dot-illustration img.scan-document.dark {
10
+ content: url('./illustrations/dark/global/scan-document.svg');
11
+ }
12
+
13
+ .dot-illustration img.protection-in-progress.light {
14
+ content: url('./illustrations/light/global/protection-in-progress.svg');
15
+ }
16
+
17
+ .dot-illustration img.protection-in-progress.dark {
18
+ content: url('./illustrations/dark/global/protection-in-progress.svg');
19
+ }
20
+
21
+ .dot-illustration img.upload.light {
22
+ content: url('./illustrations/light/global/upload.svg');
23
+ }
24
+
25
+ .dot-illustration img.upload.dark {
26
+ content: url('./illustrations/dark/global/upload.svg');
27
+ }
28
+
29
+ .dot-illustration img.download.light {
30
+ content: url('./illustrations/light/global/download.svg');
31
+ }
32
+
33
+ .dot-illustration img.download.dark {
34
+ content: url('./illustrations/dark/global/download.svg');
35
+ }
4
36
 
5
37
  .dot-illustration img.ai.light {
6
38
  content: url('./illustrations/light/global/ai.svg');
@@ -292,7 +324,7 @@
292
324
 
293
325
  /* ------------------ DASHBOARD ILLUSTRATIONS -------------------- */
294
326
  /*Path: --------- './illustrations/light/dashboards/*.svg ----- light */
295
- /*Path: --------- './illustrations/dark/dashboards/*.svg ------ dark */
327
+ /*Path: --------- './illustrations/dark/dashboards/*.svg ------ dark */
296
328
 
297
329
  .dot-illustration img.analysis.light {
298
330
  content: url('./illustrations/light/dashboards/analysis.svg');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digital-ai/dot-illustrations",
3
- "version": "2.0.16",
3
+ "version": "2.0.18",
4
4
  "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
5
5
  "main": "./index.css",
6
6
  "scripts": {