@snacky/ui 0.4.2 → 0.4.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 +50 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -26,6 +26,27 @@ npm run build
|
|
|
26
26
|
|
|
27
27
|
## Usage
|
|
28
28
|
|
|
29
|
+
### 1. Load the font
|
|
30
|
+
|
|
31
|
+
**This package ships no `@font-face`.** Every component resolves its type
|
|
32
|
+
through `var(--font-*-family)`, which is `"Poppins", sans-serif` - so if the
|
|
33
|
+
host app does not load Poppins, everything silently falls back to the browser
|
|
34
|
+
default and nothing looks right. Add this once, in your HTML head:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
38
|
+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Any text you write **around** the components needs the token too, or it will
|
|
42
|
+
not match them:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<h2 style={{ fontFamily: 'var(--font-h3-bold-family)' }}>Order summary</h2>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### 2. Import the stylesheet and the components
|
|
49
|
+
|
|
29
50
|
```tsx
|
|
30
51
|
import '@snacky/ui/styles.css'; // required - the compiled bundle does not inject this for you
|
|
31
52
|
import { Button, TextField, Checkbox } from '@snacky/ui';
|
|
@@ -44,6 +65,35 @@ function SignupForm() {
|
|
|
44
65
|
}
|
|
45
66
|
```
|
|
46
67
|
|
|
68
|
+
### 3. Use the real icons
|
|
69
|
+
|
|
70
|
+
**Never substitute an emoji or a hand-drawn SVG.** The package ships the full
|
|
71
|
+
set as `SnackyIcons`, and every icon slot takes a node:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { SnackyIcons, TextField, Button, IconButton } from '@snacky/ui';
|
|
75
|
+
|
|
76
|
+
<TextField
|
|
77
|
+
value={q}
|
|
78
|
+
onChange={setQ}
|
|
79
|
+
placeholder="Search products"
|
|
80
|
+
leadingIcon={<SnackyIcons.outline.search />}
|
|
81
|
+
/>
|
|
82
|
+
|
|
83
|
+
<Button icon={<SnackyIcons.outline.cartAdd />}>Add to cart</Button>
|
|
84
|
+
|
|
85
|
+
<IconButton icon={<SnackyIcons.outline.heart />} onClick={fav} ariaLabel="Favourite" />
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Icons inherit their colour from the slot they sit in (`currentColor`), so you
|
|
89
|
+
normally pass no colour. To tint one deliberately, use `color`:
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
<SnackyIcons.solid.heart color="var(--icon-active)" />
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Names are listed under **What's here** below. `outline` has 42, `solid` has 10.
|
|
96
|
+
|
|
47
97
|
## What's here
|
|
48
98
|
|
|
49
99
|
All 22 documented components, each matching its `code.tsx` sample's prop
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@snacky/ui",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Snacky App design system - React component library. Generated from the source-of-truth design system at ../../index.html (tokens.json / components.json), pixel-accurate to Figma.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "rezatresnas",
|