@digital-ai/dot-illustrations 1.0.31 → 1.0.32
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 +16 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -58,30 +58,32 @@ If not using `dot-components` then import `@digital-ai/dot-illustrations` into y
|
|
|
58
58
|
|
|
59
59
|
## Contributing
|
|
60
60
|
|
|
61
|
-
To add new illustrations, first add the new file to the appropriate location in one of the asset folders (
|
|
61
|
+
To add new illustrations, first add the new file to the appropriate location in one of the asset folders (illustrations or integrations.). The file names should not contain spaces or special characters, and they must be uniquely named project wide.
|
|
62
62
|
|
|
63
63
|
Next, add new class selectors to `index.css` that set the content to your new files. Define the light version first, then if you have a dark version, define it second with an additional .dark-theme class selector. For example:
|
|
64
64
|
```css
|
|
65
|
-
/*
|
|
65
|
+
/* ------------------ GLOBAL ILLUSTRATIONS -------------------- */
|
|
66
|
+
/*Path: --------- './illustrations/light/global/*.svg ----- light */
|
|
67
|
+
/*Path: --------- './illustrations/dark/global/*.svg ------ dark */
|
|
66
68
|
|
|
67
|
-
.dot-illustration img.
|
|
68
|
-
content: url('./
|
|
69
|
+
.dot-illustration img.done.light {
|
|
70
|
+
content: url('./illustrations/light/global/done.svg');
|
|
69
71
|
}
|
|
70
72
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
.dot-illustration img.illustration-agility-launch-dark {
|
|
74
|
-
content: url('./agility/dark/global/agility-launch-dark.svg');
|
|
73
|
+
.dot-illustration img.done.dark {
|
|
74
|
+
content: url('./illustrations/dark/global/done.svg');
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
Finally, update `demo/
|
|
78
|
+
Finally, update `demo/script.js` by adding your new illustrations in function "doMagic" by ID name like so:
|
|
79
79
|
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
80
|
+
```js
|
|
81
|
+
// Global arrange from A-Z
|
|
82
|
+
"add-new",
|
|
83
|
+
"add-new-grid",
|
|
84
|
+
"add-team",
|
|
85
|
+
"add-user",
|
|
86
|
+
"assets",
|
|
85
87
|
```
|
|
86
88
|
|
|
87
89
|
Once complete, please submit a pull request with the updated files and request someone to review in the [#dot-components](https://app.slack.com/client/T02GN6UQX/C01GVS9T7GV) channel on slack.
|
package/package.json
CHANGED