@digital-ai/dot-illustrations 2.0.42 → 2.0.43
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 +172 -58
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,102 +1,216 @@
|
|
|
1
|
-
# dot-illustrations
|
|
1
|
+
# dot-illustrations
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Central asset library for Digital.ai UX — illustrations and integration logos for use in products and documentation.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
- illustrations
|
|
7
|
-
- integrations
|
|
5
|
+
📖 **[Browse the demo →](https://digital-ai.github.io/dot-illustrations/demo/)**
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
---
|
|
11
8
|
|
|
9
|
+
## Contents
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
- [Asset types](#asset-types)
|
|
12
|
+
- [Browse the demo](#browse-the-demo)
|
|
13
|
+
- [Using illustrations](#using-illustrations)
|
|
14
|
+
- [Using integration logos](#using-integration-logos)
|
|
15
|
+
- [Adding a new illustration or integration logo](#adding-a-new-illustration-or-integration-logo)
|
|
16
|
+
- [Option A — Upload via demo UI (recommended)](#option-a--upload-via-demo-ui-recommended)
|
|
17
|
+
- [Option B — Manual contribution](#option-b--manual-contribution)
|
|
18
|
+
- [Troubleshooting](#troubleshooting)
|
|
14
19
|
|
|
20
|
+
---
|
|
15
21
|
|
|
16
|
-
##
|
|
22
|
+
## Asset types
|
|
17
23
|
|
|
18
|
-
|
|
24
|
+
| Type | Folder | Themes | React component |
|
|
25
|
+
|---|---|---|---|
|
|
26
|
+
| **Illustrations** | `illustrations/light/` + `illustrations/dark/` | Light + Dark | `DotIllustration` |
|
|
27
|
+
| **Integration logos** | `integrations/` | Single (no dark variant) | — (HTML only) |
|
|
19
28
|
|
|
20
|
-
|
|
29
|
+
---
|
|
21
30
|
|
|
22
|
-
|
|
31
|
+
## Browse the demo
|
|
32
|
+
|
|
33
|
+
**https://digital-ai.github.io/dot-illustrations/demo/**
|
|
34
|
+
|
|
35
|
+
The demo lets you:
|
|
36
|
+
- Browse **72 illustrations** (Global and Dashboards) and **113 integration logos**
|
|
37
|
+
- Switch between **Illustrations** and **Integrations** using the section switcher next to the search bar
|
|
38
|
+
- **Search** with fuzzy autocomplete across both sections
|
|
39
|
+
- Filter illustrations by **A–Z** (integrations only — 113 logos benefit from alphabet navigation)
|
|
40
|
+
- **Click any card** to open a detail modal with the copy-ready code snippet
|
|
41
|
+
- **Star items** to save them in your Favourites (persisted in your browser)
|
|
42
|
+
- **Upload a new illustration or integration logo** directly from the browser
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
## Using illustrations
|
|
47
|
+
|
|
48
|
+
### React — `DotIllustration` via `dot-components`
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { DotIllustration } from '@digital-ai/dot-components';
|
|
52
|
+
|
|
53
|
+
// Light (default)
|
|
54
|
+
<DotIllustration illustrationId="empty" />
|
|
55
|
+
|
|
56
|
+
// Dark
|
|
57
|
+
<DotIllustration illustrationId="done" theme="dark" />
|
|
58
|
+
|
|
59
|
+
// With tooltip
|
|
60
|
+
<DotIllustration illustrationId="features" tooltip="See all features" />
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
[Full `DotIllustration` documentation →](https://digital-ai.github.io/dot-components/?path=/story/components-illustration--default)
|
|
23
64
|
|
|
24
|
-
|
|
65
|
+
### Standard HTML
|
|
25
66
|
|
|
26
67
|
```html
|
|
27
68
|
<link rel="stylesheet" href="./index.css" />
|
|
28
69
|
|
|
29
|
-
|
|
70
|
+
<!-- Light theme -->
|
|
71
|
+
<span class="dot-illustration">
|
|
72
|
+
<img class="done light" />
|
|
73
|
+
</span>
|
|
30
74
|
|
|
75
|
+
<!-- Dark theme -->
|
|
31
76
|
<span class="dot-illustration">
|
|
32
|
-
<img class="
|
|
77
|
+
<img class="done dark" />
|
|
33
78
|
</span>
|
|
34
79
|
```
|
|
35
80
|
|
|
36
|
-
|
|
81
|
+
Always set an explicit `width` and `height` — the library has no built-in sizing defaults.
|
|
37
82
|
|
|
38
|
-
|
|
83
|
+
---
|
|
39
84
|
|
|
40
|
-
##
|
|
85
|
+
## Using integration logos
|
|
41
86
|
|
|
42
|
-
|
|
87
|
+
There is no React component for integrations — use the HTML approach directly.
|
|
43
88
|
|
|
44
|
-
|
|
89
|
+
```html
|
|
90
|
+
<link rel="stylesheet" href="./index.css" />
|
|
45
91
|
|
|
46
|
-
|
|
92
|
+
<span class="dot-integration">
|
|
93
|
+
<img class="jenkins" />
|
|
94
|
+
</span>
|
|
95
|
+
```
|
|
47
96
|
|
|
48
|
-
|
|
97
|
+
> Integration logos are **single-theme only** — they have no dark variant.
|
|
49
98
|
|
|
50
|
-
|
|
51
|
-
<link rel="stylesheet" href="./integrations/index.css" />
|
|
99
|
+
---
|
|
52
100
|
|
|
53
|
-
|
|
101
|
+
## Adding a new illustration or integration logo
|
|
54
102
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
103
|
+
### Option A — Upload via demo UI (recommended)
|
|
104
|
+
|
|
105
|
+
The demo includes a built-in upload flow that handles everything automatically.
|
|
106
|
+
|
|
107
|
+
#### Prerequisites
|
|
108
|
+
|
|
109
|
+
Run the local proxy once so the demo can authenticate as you without entering a token:
|
|
110
|
+
|
|
111
|
+
```bash
|
|
112
|
+
# From the repo root (requires gh CLI authenticated: gh auth login)
|
|
113
|
+
node demo/local-proxy.js
|
|
58
114
|
```
|
|
59
115
|
|
|
60
|
-
|
|
116
|
+
#### Steps
|
|
61
117
|
|
|
62
|
-
|
|
118
|
+
1. Open **https://digital-ai.github.io/dot-illustrations/demo/** (or your local server)
|
|
119
|
+
2. Click **Upload New** in the header
|
|
120
|
+
3. Choose what you are uploading:
|
|
63
121
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
122
|
+
**Illustration**
|
|
123
|
+
- Enter the **Illustration ID** (lowercase, hyphens only — e.g. `my-new-state`)
|
|
124
|
+
- Select the **Category**: Global or Dashboards
|
|
125
|
+
- Upload the **Light SVG** (☀️) and **Dark SVG** (🌙) — both are required
|
|
126
|
+
- Click **Connect GitHub** then **Create Pull Request**
|
|
69
127
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
128
|
+
**Integration logo**
|
|
129
|
+
- Enter the **Integration ID** (lowercase, hyphens — e.g. `my-tool`)
|
|
130
|
+
- Upload the single **SVG** file (no dark variant needed)
|
|
131
|
+
- Click **Connect GitHub** then **Create Pull Request**
|
|
73
132
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
133
|
+
The PR is created automatically with:
|
|
134
|
+
- SVG file(s) committed to the correct folder
|
|
135
|
+
- CSS rule added to `index.css`
|
|
136
|
+
- ID added to `demo/script.js` in alphabetical order
|
|
78
137
|
|
|
79
|
-
|
|
138
|
+
> The local proxy uses your existing `gh auth` credentials — no token input required.
|
|
80
139
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
140
|
+
---
|
|
141
|
+
|
|
142
|
+
### Option B — Manual contribution
|
|
143
|
+
|
|
144
|
+
Use this if the upload UI is not available.
|
|
145
|
+
|
|
146
|
+
#### Adding an illustration
|
|
147
|
+
|
|
148
|
+
1. Add your SVG files to the correct folders:
|
|
149
|
+
```
|
|
150
|
+
illustrations/light/global/my-new-state.svg
|
|
151
|
+
illustrations/dark/global/my-new-state.svg
|
|
152
|
+
```
|
|
153
|
+
Use `dashboards/` instead of `global/` for dashboard-specific illustrations.
|
|
154
|
+
|
|
155
|
+
2. Add CSS rules to `index.css`:
|
|
156
|
+
```css
|
|
157
|
+
.dot-illustration img.my-new-state.light {
|
|
158
|
+
content: url('./illustrations/light/global/my-new-state.svg');
|
|
159
|
+
}
|
|
160
|
+
.dot-illustration img.my-new-state.dark {
|
|
161
|
+
content: url('./illustrations/dark/global/my-new-state.svg');
|
|
162
|
+
}
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
3. Add the ID to `demo/script.js` inside the correct list (`globalList` or `dashboardsList`), **alphabetically ordered**:
|
|
166
|
+
```js
|
|
167
|
+
const globalList = [
|
|
168
|
+
"add-new",
|
|
169
|
+
"my-new-state", // ← inserted alphabetically
|
|
170
|
+
"no-chat",
|
|
171
|
+
];
|
|
172
|
+
```
|
|
89
173
|
|
|
90
|
-
|
|
174
|
+
#### Adding an integration logo
|
|
91
175
|
|
|
92
|
-
|
|
176
|
+
1. Add your SVG to `integrations/my-tool.svg`
|
|
177
|
+
|
|
178
|
+
2. Add a CSS rule to `index.css`:
|
|
179
|
+
```css
|
|
180
|
+
.dot-integration img.my-tool {
|
|
181
|
+
content: url('./integrations/my-tool.svg');
|
|
182
|
+
}
|
|
183
|
+
```
|
|
184
|
+
|
|
185
|
+
3. Add the ID to `demo/script.js` inside `integrationsList`, **alphabetically ordered**:
|
|
186
|
+
```js
|
|
187
|
+
const integrationsList = [
|
|
188
|
+
"microsoft-teams",
|
|
189
|
+
"my-tool", // ← inserted alphabetically
|
|
190
|
+
"mysql",
|
|
191
|
+
];
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
4. Open a pull request and post in [#dot-components](https://app.slack.com/client/T02GN6UQX/C01GVS9T7GV) on Slack for review.
|
|
195
|
+
|
|
196
|
+
---
|
|
93
197
|
|
|
94
198
|
## Troubleshooting
|
|
95
199
|
|
|
96
|
-
|
|
200
|
+
**Latest `dot-illustrations` not picked up by `dot-components`**
|
|
201
|
+
|
|
202
|
+
Add a `resolutions` entry to your `package.json`:
|
|
97
203
|
|
|
98
204
|
```json
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
```
|
|
205
|
+
"resolutions": {
|
|
206
|
+
"@digital-ai/dot-illustrations": "latest"
|
|
207
|
+
}
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
**Integration image not showing**
|
|
211
|
+
|
|
212
|
+
Make sure the CSS is imported: `<link rel="stylesheet" href="./index.css" />`. The library uses `content: url()` on `<img>` elements — the `<img>` tag must have **no `src` attribute** and the class must match the integration ID exactly.
|
|
213
|
+
|
|
214
|
+
---
|
|
215
|
+
|
|
216
|
+
More information: [dot design system — Illustrations](https://zeroheight.com/4a9ac476a/p/86a804-illustrations)
|
package/package.json
CHANGED