@digital-ai/dot-illustrations 1.0.30 → 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 +49 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
# dot-illustrations
|
|
2
|
-
A central place for the design team to keep illustrations and for dev teams to find them.
|
|
1
|
+
# dot-illustrations and integrations
|
|
2
|
+
A central place for the design team to keep illustrations all graphical assets and for dev teams to find them.
|
|
3
3
|
|
|
4
|
-
Files are organized in
|
|
5
|
-
-
|
|
6
|
-
-
|
|
7
|
-
- digitalai
|
|
4
|
+
Files are organized in 2 separate folders
|
|
5
|
+
- illustrations
|
|
6
|
+
- integrations
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
## Illustrations
|
|
9
|
+
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
In each one of those, there is a light and dark folder to match the color style if you using a material theme do not forget to update the illustration folder directory light / dark to match the theme of the switch
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
##
|
|
15
|
+
## Illustrations usage
|
|
16
16
|
|
|
17
17
|
### React Component via `dot-components`
|
|
18
18
|
|
|
@@ -28,36 +28,62 @@ If not using `dot-components` then import `@digital-ai/dot-illustrations` into y
|
|
|
28
28
|
...
|
|
29
29
|
|
|
30
30
|
<span class="dot-illustration">
|
|
31
|
-
<img class="
|
|
31
|
+
<img class="${illustration-ID}"></img>
|
|
32
|
+
</span>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Integrations
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## Integrations usage
|
|
40
|
+
|
|
41
|
+
### React Component via `dot-components` COMING UP SOON
|
|
42
|
+
|
|
43
|
+
(PENDING WIP): If you are already consuming `dot-components` then the easiest way would be to use the `DotIllustration` component, [documentation is available here](https://digital-ai.github.io/dot-components/?path=/story/components-illustration--default)
|
|
44
|
+
|
|
45
|
+
### Standard HTML
|
|
46
|
+
|
|
47
|
+
If not using `dot-components` then import `@digital-ai/dot-illustrations` into your project as an npm package or as a git submodule. You can also download the contents of this repository and copy the `./integrations/index.css` and asset folders into your project.
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<link rel="stylesheet" href="./integrations/index.css" />
|
|
51
|
+
|
|
52
|
+
...
|
|
53
|
+
|
|
54
|
+
<span class="dot-integration">
|
|
55
|
+
<img class="${integration-ID}"></img>
|
|
32
56
|
</span>
|
|
33
57
|
```
|
|
34
58
|
|
|
35
59
|
## Contributing
|
|
36
60
|
|
|
37
|
-
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.
|
|
38
62
|
|
|
39
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:
|
|
40
64
|
```css
|
|
41
|
-
/*
|
|
65
|
+
/* ------------------ GLOBAL ILLUSTRATIONS -------------------- */
|
|
66
|
+
/*Path: --------- './illustrations/light/global/*.svg ----- light */
|
|
67
|
+
/*Path: --------- './illustrations/dark/global/*.svg ------ dark */
|
|
42
68
|
|
|
43
|
-
.dot-illustration img.
|
|
44
|
-
content: url('./
|
|
69
|
+
.dot-illustration img.done.light {
|
|
70
|
+
content: url('./illustrations/light/global/done.svg');
|
|
45
71
|
}
|
|
46
72
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
.dot-illustration img.illustration-agility-launch-dark {
|
|
50
|
-
content: url('./agility/dark/global/agility-launch-dark.svg');
|
|
73
|
+
.dot-illustration img.done.dark {
|
|
74
|
+
content: url('./illustrations/dark/global/done.svg');
|
|
51
75
|
}
|
|
52
76
|
```
|
|
53
77
|
|
|
54
|
-
Finally, update `demo/
|
|
78
|
+
Finally, update `demo/script.js` by adding your new illustrations in function "doMagic" by ID name like so:
|
|
55
79
|
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
80
|
+
```js
|
|
81
|
+
// Global arrange from A-Z
|
|
82
|
+
"add-new",
|
|
83
|
+
"add-new-grid",
|
|
84
|
+
"add-team",
|
|
85
|
+
"add-user",
|
|
86
|
+
"assets",
|
|
61
87
|
```
|
|
62
88
|
|
|
63
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