@xsolla/xui-typography 0.150.0 → 0.151.0
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 +102 -208
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,289 +1,183 @@
|
|
|
1
1
|
# Typography
|
|
2
2
|
|
|
3
|
-
A cross-platform
|
|
3
|
+
A cross-platform text component with predefined style variants, themed colours, and product-context-aware sizing.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
8
|
npm install @xsolla/xui-typography
|
|
9
|
-
# or
|
|
10
|
-
yarn add @xsolla/xui-typography
|
|
11
9
|
```
|
|
12
10
|
|
|
13
|
-
##
|
|
14
|
-
|
|
15
|
-
### Headings
|
|
11
|
+
## Imports
|
|
16
12
|
|
|
17
13
|
```tsx
|
|
18
|
-
import * as React from 'react';
|
|
19
14
|
import { Typography } from '@xsolla/xui-typography';
|
|
20
|
-
|
|
21
|
-
export default function Headings() {
|
|
22
|
-
return (
|
|
23
|
-
<div>
|
|
24
|
-
<Typography variant="display">Display Text</Typography>
|
|
25
|
-
<Typography variant="h1">Heading 1</Typography>
|
|
26
|
-
<Typography variant="h2">Heading 2</Typography>
|
|
27
|
-
<Typography variant="h3">Heading 3</Typography>
|
|
28
|
-
<Typography variant="h4">Heading 4</Typography>
|
|
29
|
-
</div>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
15
|
```
|
|
33
16
|
|
|
34
|
-
|
|
17
|
+
## Quick start
|
|
35
18
|
|
|
36
19
|
```tsx
|
|
37
20
|
import * as React from 'react';
|
|
38
21
|
import { Typography } from '@xsolla/xui-typography';
|
|
39
22
|
|
|
40
|
-
export default function
|
|
41
|
-
return
|
|
42
|
-
<div>
|
|
43
|
-
<Typography variant="bodyLg">Large body text</Typography>
|
|
44
|
-
<Typography variant="bodyMd">Medium body text (default)</Typography>
|
|
45
|
-
<Typography variant="bodySm">Small body text</Typography>
|
|
46
|
-
<Typography variant="bodyXs">Extra small body text</Typography>
|
|
47
|
-
</div>
|
|
48
|
-
);
|
|
23
|
+
export default function QuickStart() {
|
|
24
|
+
return <Typography variant="bodyMd">Hello world</Typography>;
|
|
49
25
|
}
|
|
50
26
|
```
|
|
51
27
|
|
|
52
|
-
|
|
28
|
+
## API Reference
|
|
29
|
+
|
|
30
|
+
### `<Typography>`
|
|
31
|
+
|
|
32
|
+
| Prop | Type | Default | Description |
|
|
33
|
+
| --- | --- | --- | --- |
|
|
34
|
+
| `children` | `ReactNode` | - | Text content. |
|
|
35
|
+
| `variant` | `VariantType` | `"bodyMd"` | Text style variant (see below). |
|
|
36
|
+
| `color` | `ColorType \| string` | `"inherit"` | Themed colour token, or a custom CSS colour string. |
|
|
37
|
+
| `align` | `"left" \| "center" \| "right" \| "justify" \| "inherit"` | `"inherit"` | Text alignment. |
|
|
38
|
+
| `noWrap` | `boolean` | `false` | Single-line truncation with ellipsis. |
|
|
39
|
+
| `marginTop` | `number` | `0` | Top margin in pixels. |
|
|
40
|
+
| `marginBottom` | `number` | `0` | Bottom margin in pixels. |
|
|
41
|
+
| `as` | `ElementType` | - | HTML element to render (web only). |
|
|
42
|
+
| `productContext` | `"b2c" \| "b2b" \| "paystation" \| "presentation"` | - | Override the product context for this instance only. |
|
|
43
|
+
| `aria-hidden` | `boolean` | - | Hide from assistive technology. |
|
|
44
|
+
| `aria-live` | `"polite" \| "assertive" \| "off"` | - | Live-region politeness. |
|
|
45
|
+
|
|
46
|
+
Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
|
|
47
|
+
|
|
48
|
+
#### `VariantType`
|
|
49
|
+
|
|
50
|
+
```ts
|
|
51
|
+
type VariantType =
|
|
52
|
+
| "display"
|
|
53
|
+
| "h1" | "h2" | "h3" | "h4" | "h5"
|
|
54
|
+
| "bodyLg" | "bodyLgAccent" | "bodyLgParagraph"
|
|
55
|
+
| "bodyMd" | "bodyMdAccent" | "bodyMdParagraph"
|
|
56
|
+
| "bodySm" | "bodySmAccent" | "bodySmParagraph"
|
|
57
|
+
| "bodyXs" | "bodyXsAccent" | "bodyXsParagraph"
|
|
58
|
+
| "bodyXxs" | "bodyXxsAccent" | "bodyXxsParagraph";
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`*Accent` variants use weight 500. `*Paragraph` variants use a relaxed line height suitable for long-form copy.
|
|
62
|
+
|
|
63
|
+
#### `ColorType`
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
type ColorType =
|
|
67
|
+
| "inherit"
|
|
68
|
+
| "primary" | "secondary" | "tertiary"
|
|
69
|
+
| "brand" | "brandSecondary"
|
|
70
|
+
| "success" | "warning" | "alert"
|
|
71
|
+
| "neutral";
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
`color` also accepts any string (for example, a hex or CSS variable) for custom colours.
|
|
75
|
+
|
|
76
|
+
## Examples
|
|
77
|
+
|
|
78
|
+
### Headings
|
|
53
79
|
|
|
54
80
|
```tsx
|
|
55
81
|
import * as React from 'react';
|
|
56
82
|
import { Typography } from '@xsolla/xui-typography';
|
|
57
83
|
|
|
58
|
-
export default function
|
|
84
|
+
export default function Headings() {
|
|
59
85
|
return (
|
|
60
|
-
<div
|
|
61
|
-
<Typography
|
|
62
|
-
<Typography
|
|
63
|
-
<Typography
|
|
64
|
-
<Typography
|
|
65
|
-
<Typography
|
|
66
|
-
<Typography
|
|
67
|
-
<Typography color="alert">Alert color</Typography>
|
|
86
|
+
<div>
|
|
87
|
+
<Typography variant="display">Display</Typography>
|
|
88
|
+
<Typography variant="h1">Heading 1</Typography>
|
|
89
|
+
<Typography variant="h2">Heading 2</Typography>
|
|
90
|
+
<Typography variant="h3">Heading 3</Typography>
|
|
91
|
+
<Typography variant="h4">Heading 4</Typography>
|
|
92
|
+
<Typography variant="h5">Heading 5</Typography>
|
|
68
93
|
</div>
|
|
69
94
|
);
|
|
70
95
|
}
|
|
71
96
|
```
|
|
72
97
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
```jsx
|
|
76
|
-
import { Typography } from '@xsolla/xui-typography';
|
|
77
|
-
|
|
78
|
-
<Typography
|
|
79
|
-
variant="bodyMd" // Text style variant
|
|
80
|
-
color="primary" // Text color
|
|
81
|
-
align="left" // Text alignment
|
|
82
|
-
noWrap={false} // Truncate with ellipsis
|
|
83
|
-
marginTop={0} // Top margin
|
|
84
|
-
marginBottom={0} // Bottom margin
|
|
85
|
-
as="p" // HTML element to render
|
|
86
|
-
productContext="b2c" // Override product context (optional)
|
|
87
|
-
>
|
|
88
|
-
Text content
|
|
89
|
-
</Typography>
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
## Examples
|
|
93
|
-
|
|
94
|
-
### Article Layout
|
|
98
|
+
### Body and accent
|
|
95
99
|
|
|
96
100
|
```tsx
|
|
97
101
|
import * as React from 'react';
|
|
98
102
|
import { Typography } from '@xsolla/xui-typography';
|
|
99
103
|
|
|
100
|
-
export default function
|
|
104
|
+
export default function Body() {
|
|
101
105
|
return (
|
|
102
|
-
<
|
|
103
|
-
<Typography variant="
|
|
104
|
-
|
|
105
|
-
</Typography>
|
|
106
|
-
<Typography variant="
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<Typography variant="bodyLgParagraph" marginBottom={16}>
|
|
110
|
-
This is the introduction paragraph. It uses the paragraph variant
|
|
111
|
-
which has increased line height for better readability in long-form
|
|
112
|
-
content.
|
|
113
|
-
</Typography>
|
|
114
|
-
<Typography variant="h3" marginBottom={12}>
|
|
115
|
-
Section Heading
|
|
116
|
-
</Typography>
|
|
117
|
-
<Typography variant="bodyMdParagraph">
|
|
118
|
-
This is a regular paragraph section with medium body text.
|
|
119
|
-
The paragraph variants have larger line heights for improved
|
|
120
|
-
readability.
|
|
121
|
-
</Typography>
|
|
122
|
-
</article>
|
|
106
|
+
<div>
|
|
107
|
+
<Typography variant="bodyLg">Large body</Typography>
|
|
108
|
+
<Typography variant="bodyLgAccent">Large body accent</Typography>
|
|
109
|
+
<Typography variant="bodyMd">Medium body (default)</Typography>
|
|
110
|
+
<Typography variant="bodyMdParagraph">Medium body paragraph</Typography>
|
|
111
|
+
<Typography variant="bodyXxs">Extra-extra-small body</Typography>
|
|
112
|
+
</div>
|
|
123
113
|
);
|
|
124
114
|
}
|
|
125
115
|
```
|
|
126
116
|
|
|
127
|
-
###
|
|
117
|
+
### Colours
|
|
128
118
|
|
|
129
119
|
```tsx
|
|
130
120
|
import * as React from 'react';
|
|
131
121
|
import { Typography } from '@xsolla/xui-typography';
|
|
132
122
|
|
|
133
|
-
export default function
|
|
123
|
+
export default function Colours() {
|
|
134
124
|
return (
|
|
135
|
-
<div style={{
|
|
136
|
-
<Typography
|
|
137
|
-
|
|
138
|
-
</Typography>
|
|
125
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
126
|
+
<Typography color="primary">Primary</Typography>
|
|
127
|
+
<Typography color="secondary">Secondary</Typography>
|
|
128
|
+
<Typography color="tertiary">Tertiary</Typography>
|
|
129
|
+
<Typography color="brand">Brand</Typography>
|
|
130
|
+
<Typography color="success">Success</Typography>
|
|
131
|
+
<Typography color="warning">Warning</Typography>
|
|
132
|
+
<Typography color="alert">Alert</Typography>
|
|
139
133
|
</div>
|
|
140
134
|
);
|
|
141
135
|
}
|
|
142
136
|
```
|
|
143
137
|
|
|
144
|
-
###
|
|
138
|
+
### Truncation
|
|
145
139
|
|
|
146
140
|
```tsx
|
|
147
141
|
import * as React from 'react';
|
|
148
142
|
import { Typography } from '@xsolla/xui-typography';
|
|
149
143
|
|
|
150
|
-
export default function
|
|
144
|
+
export default function Truncation() {
|
|
151
145
|
return (
|
|
152
|
-
<div style={{
|
|
153
|
-
<Typography variant="
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
<Typography variant="bodyMdAccent">Accented medium text (500 weight)</Typography>
|
|
146
|
+
<div style={{ width: 200 }}>
|
|
147
|
+
<Typography variant="bodyMd" noWrap>
|
|
148
|
+
This long text will be truncated with an ellipsis.
|
|
149
|
+
</Typography>
|
|
157
150
|
</div>
|
|
158
151
|
);
|
|
159
152
|
}
|
|
160
153
|
```
|
|
161
154
|
|
|
162
|
-
### Product
|
|
155
|
+
### Product context override
|
|
163
156
|
|
|
164
157
|
```tsx
|
|
165
158
|
import * as React from 'react';
|
|
166
159
|
import { Typography } from '@xsolla/xui-typography';
|
|
167
160
|
import { XUIProvider } from '@xsolla/xui-core';
|
|
168
161
|
|
|
169
|
-
export default function
|
|
162
|
+
export default function ContextOverride() {
|
|
170
163
|
return (
|
|
171
|
-
// Root provider sets B2B context
|
|
172
164
|
<XUIProvider initialProductContext="b2b">
|
|
173
|
-
<
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
Default B2B Heading
|
|
177
|
-
</Typography>
|
|
178
|
-
|
|
179
|
-
{/* Override to B2C context (40px, weight 700) */}
|
|
180
|
-
<Typography variant="h1" productContext="b2c">
|
|
181
|
-
B2C Marketing Headline
|
|
182
|
-
</Typography>
|
|
183
|
-
|
|
184
|
-
{/* Override to PayStation context for compact UI (28px, weight 700) */}
|
|
185
|
-
<Typography variant="h1" productContext="paystation">
|
|
186
|
-
Payment Form Title
|
|
187
|
-
</Typography>
|
|
188
|
-
|
|
189
|
-
{/* Override to Presentation context for large displays (56px, weight 700) */}
|
|
190
|
-
<Typography variant="h1" productContext="presentation">
|
|
191
|
-
Presentation Display
|
|
192
|
-
</Typography>
|
|
193
|
-
</div>
|
|
165
|
+
<Typography variant="h1">Default (B2B from provider)</Typography>
|
|
166
|
+
<Typography variant="h1" productContext="b2c">B2C override</Typography>
|
|
167
|
+
<Typography variant="h1" productContext="paystation">PayStation override</Typography>
|
|
194
168
|
</XUIProvider>
|
|
195
169
|
);
|
|
196
170
|
}
|
|
197
171
|
```
|
|
198
172
|
|
|
199
|
-
##
|
|
200
|
-
|
|
201
|
-
### Typography
|
|
173
|
+
## Behaviour
|
|
202
174
|
|
|
203
|
-
|
|
175
|
+
- Resolved sizes, weights, and line heights come from the active product context. With no override, the provider's `initialProductContext` (defaulting to `b2b`) is used.
|
|
176
|
+
- The `Accent` family raises weight to 500; `Paragraph` family raises line height for readable long-form copy.
|
|
177
|
+
- `as` is web-only; on native platforms the rendered element is fixed.
|
|
204
178
|
|
|
205
|
-
|
|
206
|
-
| :--- | :--- | :------ | :---------- |
|
|
207
|
-
| children | `ReactNode` | - | Text content. |
|
|
208
|
-
| variant | `VariantType` | `"bodyMd"` | Text style variant. |
|
|
209
|
-
| color | `ColorType` | `"inherit"` | Text color. |
|
|
210
|
-
| align | `"left" \| "center" \| "right" \| "inherit"` | `"inherit"` | Text alignment. |
|
|
211
|
-
| noWrap | `boolean` | `false` | Truncate with ellipsis. |
|
|
212
|
-
| marginTop | `number` | `0` | Top margin in pixels. |
|
|
213
|
-
| marginBottom | `number` | `0` | Bottom margin in pixels. |
|
|
214
|
-
| as | `ElementType` | - | HTML element to render. |
|
|
215
|
-
| productContext | `ProductContext` | - | Override product context (`"b2c"` \| `"b2b"` \| `"paystation"` \| `"presentation"`). Uses provider context if not specified. |
|
|
216
|
-
|
|
217
|
-
**VariantType:**
|
|
218
|
-
|
|
219
|
-
```typescript
|
|
220
|
-
type VariantType =
|
|
221
|
-
| "display" // 48px, 800 weight
|
|
222
|
-
| "h1" // 40px, 700 weight
|
|
223
|
-
| "h2" // 32px, 700 weight
|
|
224
|
-
| "h3" // 28px, 700 weight
|
|
225
|
-
| "h4" // 24px, 700 weight
|
|
226
|
-
| "bodyLg" // 18px, 400 weight
|
|
227
|
-
| "bodyLgAccent" // 18px, 500 weight
|
|
228
|
-
| "bodyLgParagraph" // 18px, 400 weight, larger line height
|
|
229
|
-
| "bodyMd" // 16px, 400 weight
|
|
230
|
-
| "bodyMdAccent" // 16px, 500 weight
|
|
231
|
-
| "bodyMdParagraph" // 16px, 400 weight, larger line height
|
|
232
|
-
| "bodySm" // 14px, 400 weight
|
|
233
|
-
| "bodySmAccent" // 14px, 500 weight
|
|
234
|
-
| "bodySmParagraph" // 14px, 400 weight, larger line height
|
|
235
|
-
| "bodyXs" // 12px, 400 weight
|
|
236
|
-
| "bodyXsAccent" // 12px, 500 weight
|
|
237
|
-
| "bodyXsParagraph" // 12px, 400 weight, larger line height
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
**ColorType:**
|
|
241
|
-
|
|
242
|
-
```typescript
|
|
243
|
-
type ColorType =
|
|
244
|
-
| "inherit"
|
|
245
|
-
| "primary"
|
|
246
|
-
| "secondary"
|
|
247
|
-
| "tertiary"
|
|
248
|
-
| "brand"
|
|
249
|
-
| "brandSecondary"
|
|
250
|
-
| "success"
|
|
251
|
-
| "warning"
|
|
252
|
-
| "alert"
|
|
253
|
-
| "neutral"
|
|
254
|
-
| string; // Custom color value
|
|
255
|
-
```
|
|
179
|
+
## Accessibility
|
|
256
180
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
| Variant | Size | Weight | Line Height |
|
|
262
|
-
| :------ | :--- | :----- | :---------- |
|
|
263
|
-
| display | 64px | 400 | 78px |
|
|
264
|
-
| h1 | 56px | 400 | 68px |
|
|
265
|
-
| h2 | 48px | 400 | 58px |
|
|
266
|
-
| h3 | 32px | 400 | 38px |
|
|
267
|
-
| h4 | 24px | 400 | 28px |
|
|
268
|
-
| h5 | 20px | 600 | 24px |
|
|
269
|
-
| bodyLg | 18px | 400 | 24px |
|
|
270
|
-
| bodyLgAccent | 18px | 500 | 24px |
|
|
271
|
-
| bodyLgParagraph | 18px | 400 | 26px |
|
|
272
|
-
| bodyMd | 16px | 400 | 20px |
|
|
273
|
-
| bodyMdAccent | 16px | 500 | 20px |
|
|
274
|
-
| bodyMdParagraph | 16px | 400 | 22px |
|
|
275
|
-
| bodySm | 14px | 400 | 18px |
|
|
276
|
-
| bodySmAccent | 14px | 500 | 18px |
|
|
277
|
-
| bodySmParagraph | 14px | 400 | 20px |
|
|
278
|
-
| bodyXs | 12px | 400 | 16px |
|
|
279
|
-
| bodyXsAccent | 12px | 500 | 16px |
|
|
280
|
-
| bodyXsParagraph | 12px | 400 | 18px |
|
|
281
|
-
|
|
282
|
-
### Product Contexts
|
|
283
|
-
|
|
284
|
-
Product contexts allow switching between different typographic scales (and in the future, component variations):
|
|
285
|
-
|
|
286
|
-
- **b2c**: Consumer-facing (moderate sizes, bold headings)
|
|
287
|
-
- **b2b**: Business/enterprise (larger sizes, lighter headings) - *Default*
|
|
288
|
-
- **paystation**: Compact for payments (smaller sizes)
|
|
289
|
-
- **presentation**: Large displays (largest sizes)
|
|
181
|
+
- Use semantic heading variants (`h1`-`h5`) in document order, and pair `as` with the appropriate HTML tag on web.
|
|
182
|
+
- `aria-live` is available for live-region announcements when content updates dynamically.
|
|
183
|
+
- Avoid using `noWrap` on copy that the user must read in full; prefer wrapping or a tooltip for the truncated value.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-typography",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.151.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-core": "0.
|
|
17
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-core": "0.151.0",
|
|
17
|
+
"@xsolla/xui-primitives-core": "0.151.0"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
|
20
20
|
"react": ">=16.8.0",
|