@deriv-web-design/ui 0.0.2 → 0.0.3
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 +39 -27
- package/dist/index.css +264 -240
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +24 -1
- package/dist/index.d.ts +24 -1
- package/dist/index.js +159 -214
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +158 -214
- package/dist/index.mjs.map +1 -1
- package/package.json +7 -7
- package/tokens.css +17 -193
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @deriv-web-design/ui
|
|
2
2
|
|
|
3
|
-
React component library for the Deriv Web Design System. Built with TypeScript
|
|
3
|
+
React component library for the Deriv Web Design System. Built with TypeScript, powered by Deriv design tokens.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -10,54 +10,66 @@ npm install @deriv-web-design/ui
|
|
|
10
10
|
|
|
11
11
|
## Setup
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
In your app's entry file (e.g. `main.tsx` or `App.tsx`), import the component styles and design tokens:
|
|
13
|
+
Import styles and tokens once in your app entry file (e.g. `main.tsx`):
|
|
16
14
|
|
|
17
15
|
```js
|
|
18
16
|
import "@deriv-web-design/ui/styles.css";
|
|
19
17
|
import "@deriv-web-design/ui/tokens.css";
|
|
20
18
|
```
|
|
21
19
|
|
|
22
|
-
|
|
20
|
+
## Usage
|
|
23
21
|
|
|
24
22
|
```tsx
|
|
25
|
-
import { Button, TextField, Chip } from "@deriv-web-design/ui";
|
|
23
|
+
import { Button, TextField, Chip, Tag } from "@deriv-web-design/ui";
|
|
26
24
|
|
|
27
25
|
export default function App() {
|
|
28
26
|
return (
|
|
29
27
|
<div>
|
|
30
|
-
<Button variant="primary">
|
|
28
|
+
<Button variant="primary">Submit</Button>
|
|
29
|
+
<Button variant="secondary">Cancel</Button>
|
|
30
|
+
<Button variant="danger">Delete</Button>
|
|
31
|
+
|
|
31
32
|
<TextField label="Email" placeholder="you@example.com" />
|
|
32
|
-
<
|
|
33
|
+
<TextField label="Password" type="password" helperText="Min 8 characters" />
|
|
34
|
+
|
|
35
|
+
<Chip label="Active" selected />
|
|
36
|
+
<Tag label="New" />
|
|
33
37
|
</div>
|
|
34
38
|
);
|
|
35
39
|
}
|
|
36
40
|
```
|
|
37
41
|
|
|
38
|
-
##
|
|
39
|
-
|
|
40
|
-
| Component
|
|
41
|
-
|
|
|
42
|
-
| `Button`
|
|
43
|
-
| `Accordion`
|
|
44
|
-
| `Breadcrumb`
|
|
45
|
-
| `Chip`
|
|
46
|
-
| `ChipDropdown
|
|
47
|
-
| `Link`
|
|
48
|
-
| `Pagination`
|
|
49
|
-
| `SearchField`
|
|
50
|
-
| `Tag`
|
|
51
|
-
| `TextField`
|
|
52
|
-
| `Card`
|
|
42
|
+
## Components
|
|
43
|
+
|
|
44
|
+
| Component | Description |
|
|
45
|
+
| -------------- | --------------------------------------------------------- |
|
|
46
|
+
| `Button` | Primary, secondary, ghost, and danger variants |
|
|
47
|
+
| `Accordion` | Expandable/collapsible content sections |
|
|
48
|
+
| `Breadcrumb` | Navigation breadcrumb trail |
|
|
49
|
+
| `Chip` | Compact selection or filter element with selected state |
|
|
50
|
+
| `ChipDropdown` | Chip that opens a dropdown list for selection |
|
|
51
|
+
| `Link` | Styled anchor — coral, black, and white schemes |
|
|
52
|
+
| `Pagination` | Page navigation with previous/next and numbered pages |
|
|
53
|
+
| `SearchField` | Text input with built-in search icon |
|
|
54
|
+
| `Tag` | Fill or outline label for status and categories |
|
|
55
|
+
| `TextField` | Text input with label, helper text, and validation states |
|
|
56
|
+
| `Card` | Content card container |
|
|
53
57
|
|
|
54
|
-
##
|
|
58
|
+
## Design Tokens
|
|
55
59
|
|
|
56
|
-
|
|
60
|
+
All components use Deriv semantic tokens. Tokens are included in `tokens.css` and cover:
|
|
57
61
|
|
|
58
|
-
|
|
62
|
+
- **Colors** — core palette (slate, coral, emerald, yellow, blue) + semantic tokens per component
|
|
63
|
+
- **Spacing** — 8-point scale from `--spacing-2` (2px) to `--spacing-112` (112px)
|
|
64
|
+
- **Typography** — Inter font, sizes `xs`–`5xl`, responsive at tablet/desktop breakpoints
|
|
65
|
+
- **Border Radius** — `--radius-xs` through `--radius-full`
|
|
66
|
+
- **Shadows** — `--shadow-xs` through `--shadow-xl`
|
|
67
|
+
|
|
68
|
+
See [`@deriv-web-design/tokens`](https://www.npmjs.com/package/@deriv-web-design/tokens) for the full token reference.
|
|
69
|
+
|
|
70
|
+
## TypeScript
|
|
59
71
|
|
|
60
|
-
|
|
72
|
+
Full TypeScript definitions are included — no `@types` package needed.
|
|
61
73
|
|
|
62
74
|
## Requirements
|
|
63
75
|
|