@jamesodwyer/gds-figma-vite 2.0.9 → 2.0.10
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/guidelines/Guidelines.md +217 -162
- package/package.json +1 -1
package/guidelines/Guidelines.md
CHANGED
|
@@ -3,16 +3,56 @@
|
|
|
3
3
|
> **IMPORTANT FOR AI AGENTS**: This is the entry point for AI-assisted design-to-code generation.
|
|
4
4
|
> Read this entire document before generating any code.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## 🚫🚫🚫 STOP - READ THIS FIRST 🚫🚫🚫
|
|
9
|
+
|
|
10
|
+
### BANNED PROPS - WILL CAUSE RUNTIME ERRORS
|
|
11
|
+
|
|
12
|
+
**The following props DO NOT EXIST and MUST NEVER be used:**
|
|
13
|
+
|
|
14
|
+
```
|
|
15
|
+
❌ BANNED: marginTop, marginBottom, marginLeft, marginRight
|
|
16
|
+
❌ BANNED: paddingTop, paddingBottom, paddingLeft, paddingRight
|
|
17
|
+
❌ BANNED: gap (on GDS components - only use on styled divs)
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
**These props will cause this error in the console:**
|
|
7
21
|
|
|
8
|
-
|
|
22
|
+
```
|
|
23
|
+
styled-components: it looks like an unknown prop "marginTop" is being sent through to the DOM
|
|
24
|
+
```
|
|
9
25
|
|
|
10
|
-
|
|
11
|
-
|------------|-------------|
|
|
12
|
-
| `<InputField.Row marginTop="...">` | `<InputField.Row style={{ marginTop: '8px' }}>` |
|
|
13
|
-
| `<Stack marginTop="...">` | `<Stack style={{ marginTop: '8px' }}>` |
|
|
26
|
+
### CORRECT WAY TO ADD SPACING
|
|
14
27
|
|
|
15
|
-
Always use
|
|
28
|
+
Always use the `style` prop with inline styles:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
// ✅ CORRECT - Use inline style prop
|
|
32
|
+
<InputField.Row style={{ marginTop: '8px' }}>
|
|
33
|
+
<div style={{ marginTop: '16px', marginBottom: '8px' }}>
|
|
34
|
+
|
|
35
|
+
// ❌ WRONG - These props DO NOT EXIST
|
|
36
|
+
<InputField.Row marginTop="club"> // WILL CAUSE ERROR
|
|
37
|
+
<InputField.Row marginTop="8px"> // WILL CAUSE ERROR
|
|
38
|
+
<Stack marginTop="16px"> // WILL CAUSE ERROR
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### SPACING WITH STYLED-COMPONENTS
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import styled from "styled-components";
|
|
45
|
+
import { spacing } from "@jamesodwyer/gds-figma-vite";
|
|
46
|
+
|
|
47
|
+
// ✅ CORRECT - Use spacing tokens in styled-components
|
|
48
|
+
const Container = styled.div`
|
|
49
|
+
margin-top: ${spacing.club}; // 8px
|
|
50
|
+
margin-bottom: ${spacing.auditorium}; // 16px
|
|
51
|
+
padding: ${spacing.arena}; // 32px
|
|
52
|
+
`;
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
---
|
|
16
56
|
|
|
17
57
|
## Package Information
|
|
18
58
|
|
|
@@ -25,15 +65,18 @@ Always use inline `style` prop for margins instead of custom margin props.
|
|
|
25
65
|
All documentation is available in the `@jamesodwyer/gds-figma-vite` npm package under `guidelines/`:
|
|
26
66
|
|
|
27
67
|
**Design Tokens** (in package: `@jamesodwyer/gds-figma-vite/guidelines/design-tokens/`):
|
|
68
|
+
|
|
28
69
|
- `colors.md` - Color tokens and theme colors
|
|
29
70
|
- `typography.md` - Text styles and font scales
|
|
30
71
|
- `spacing.md` - Spacing tokens
|
|
31
72
|
- `elevation.md` - Shadow/elevation tokens
|
|
32
73
|
|
|
33
74
|
**Component Docs** (in package: `@jamesodwyer/gds-figma-vite/guidelines/components/`):
|
|
75
|
+
|
|
34
76
|
- Individual `.md` file for each component (e.g., `Button.md`, `Modal.md`, `Card.md`)
|
|
35
77
|
|
|
36
78
|
**Overviews** (in package: `@jamesodwyer/gds-figma-vite/guidelines/`):
|
|
79
|
+
|
|
37
80
|
- `overview-components.md` - All available components
|
|
38
81
|
- `overview-icons.md` - Icon system and usage
|
|
39
82
|
|
|
@@ -44,7 +87,7 @@ All documentation is available in the `@jamesodwyer/gds-figma-vite` npm package
|
|
|
44
87
|
Every application using GDS **MUST** wrap components with `GdsProvider`:
|
|
45
88
|
|
|
46
89
|
```tsx
|
|
47
|
-
import { GdsProvider, Button } from
|
|
90
|
+
import { GdsProvider, Button } from "@jamesodwyer/gds-figma-vite";
|
|
48
91
|
|
|
49
92
|
function App() {
|
|
50
93
|
return (
|
|
@@ -57,19 +100,19 @@ function App() {
|
|
|
57
100
|
|
|
58
101
|
### GdsProvider Props
|
|
59
102
|
|
|
60
|
-
| Prop
|
|
61
|
-
|
|
62
|
-
| theme
|
|
63
|
-
| includeGlobalStyles | boolean
|
|
64
|
-
| children
|
|
103
|
+
| Prop | Type | Default | Description |
|
|
104
|
+
| ------------------- | ------------ | -------- | ------------------------- |
|
|
105
|
+
| theme | 'TM' \| 'LN' | 'TM' | Brand theme to use |
|
|
106
|
+
| includeGlobalStyles | boolean | true | Include global CSS styles |
|
|
107
|
+
| children | ReactNode | required | Child components |
|
|
65
108
|
|
|
66
109
|
### Alternative Setup (Manual Control)
|
|
67
110
|
|
|
68
111
|
If you need more control over the theme or global styles:
|
|
69
112
|
|
|
70
113
|
```tsx
|
|
71
|
-
import { ThemeProvider, createGlobalStyle } from
|
|
72
|
-
import { TM, getGlobalStyles, Button } from
|
|
114
|
+
import { ThemeProvider, createGlobalStyle } from "styled-components";
|
|
115
|
+
import { TM, getGlobalStyles, Button } from "@jamesodwyer/gds-figma-vite";
|
|
73
116
|
|
|
74
117
|
const GlobalStyle = createGlobalStyle`
|
|
75
118
|
${getGlobalStyles()}
|
|
@@ -130,12 +173,12 @@ Many GDS components use the **compound component pattern**. Sub-components are a
|
|
|
130
173
|
|
|
131
174
|
### Components with Compound Sub-components
|
|
132
175
|
|
|
133
|
-
| Component
|
|
134
|
-
|
|
135
|
-
| Modal
|
|
136
|
-
| Card
|
|
176
|
+
| Component | Sub-components |
|
|
177
|
+
| ---------- | ------------------------------------------------------------------------------------------------------------------ |
|
|
178
|
+
| Modal | `.Header`, `.Title`, `.Content`, `.Description`, `.Image`, `.CloseButton`, `.Actions` |
|
|
179
|
+
| Card | `.Title`, `.Body` |
|
|
137
180
|
| InputField | `.Label`, `.Row`, `.Input`, `.Textarea`, `.Select`, `.Checkbox`, `.Radio`, `.StartIcon`, `.EndIcon`, `.Validation` |
|
|
138
|
-
| Accordion
|
|
181
|
+
| Accordion | `.Item`, `.Toggle`, `.Content` |
|
|
139
182
|
|
|
140
183
|
---
|
|
141
184
|
|
|
@@ -145,47 +188,39 @@ Many GDS components use the **compound component pattern**. Sub-components are a
|
|
|
145
188
|
|
|
146
189
|
### Components That DO NOT Exist
|
|
147
190
|
|
|
148
|
-
| Non-Existent
|
|
149
|
-
|
|
150
|
-
| `ButtonGroup`
|
|
151
|
-
| `CardContent`
|
|
152
|
-
| `CardHeader`
|
|
153
|
-
| `CardActions`
|
|
154
|
-
| `ModalDescription` | Use `Modal.Description` (compound component)
|
|
155
|
-
| `ModalHeader`
|
|
156
|
-
| `ModalBody`
|
|
157
|
-
| `ModalFooter`
|
|
158
|
-
| `FormControl`
|
|
159
|
-
| `FormLabel`
|
|
160
|
-
| `FormHelperText`
|
|
161
|
-
| `Grid`
|
|
162
|
-
| `Box`
|
|
163
|
-
| `Container`
|
|
164
|
-
| `Typography`
|
|
165
|
-
| `Divider`
|
|
166
|
-
| `IconButton`
|
|
167
|
-
| `Snackbar`
|
|
168
|
-
| `Dialog`
|
|
169
|
-
| `Drawer`
|
|
170
|
-
| `AppBar`
|
|
191
|
+
| Non-Existent | Use Instead |
|
|
192
|
+
| ------------------ | ------------------------------------------------------------------------ |
|
|
193
|
+
| `ButtonGroup` | Use a styled `div` with flexbox (see Layout Without ButtonGroup section) |
|
|
194
|
+
| `CardContent` | Put content directly inside `Card.Body` |
|
|
195
|
+
| `CardHeader` | Use `Card.Title` |
|
|
196
|
+
| `CardActions` | Put buttons inside `Card.Body` |
|
|
197
|
+
| `ModalDescription` | Use `Modal.Description` (compound component) |
|
|
198
|
+
| `ModalHeader` | Use `Modal.Header` (compound component) |
|
|
199
|
+
| `ModalBody` | Use `Modal.Content` (compound component) |
|
|
200
|
+
| `ModalFooter` | Use `Modal.Actions` (compound component) |
|
|
201
|
+
| `FormControl` | Use `InputField` compound component |
|
|
202
|
+
| `FormLabel` | Use `InputField.Label` |
|
|
203
|
+
| `FormHelperText` | Use `InputField.Validation` |
|
|
204
|
+
| `Grid` | Use CSS Grid or styled `div` |
|
|
205
|
+
| `Box` | Use styled `div` with spacing tokens |
|
|
206
|
+
| `Container` | Use styled `div` with spacing tokens |
|
|
207
|
+
| `Typography` | Use `TextStyle` component |
|
|
208
|
+
| `Divider` | Use styled `hr` or `div` |
|
|
209
|
+
| `IconButton` | Use `CircleButton` or `SquareButton` |
|
|
210
|
+
| `Snackbar` | Use `Toast` |
|
|
211
|
+
| `Dialog` | Use `Modal` |
|
|
212
|
+
| `Drawer` | Use `SidePanel` |
|
|
213
|
+
| `AppBar` | Use `Header` |
|
|
171
214
|
|
|
172
215
|
### Layout Without ButtonGroup
|
|
173
216
|
|
|
174
|
-
Use
|
|
217
|
+
**Use a styled div for button layouts** (Stack is not recommended for button groups):
|
|
175
218
|
|
|
176
219
|
```tsx
|
|
177
|
-
import { Stack, Button } from '@jamesodwyer/gds-figma-vite';
|
|
178
|
-
|
|
179
|
-
// For horizontal button group
|
|
180
|
-
<Stack gap="club" style={{ display: 'flex', flexDirection: 'row' }}>
|
|
181
|
-
<Button colorVariant="secondary">Cancel</Button>
|
|
182
|
-
<Button colorVariant="primary">Confirm</Button>
|
|
183
|
-
</Stack>
|
|
184
|
-
|
|
185
|
-
// Or use a styled div
|
|
186
220
|
import styled from 'styled-components';
|
|
187
|
-
import { spacing } from '@jamesodwyer/gds-figma-vite';
|
|
221
|
+
import { spacing, Button } from '@jamesodwyer/gds-figma-vite';
|
|
188
222
|
|
|
223
|
+
// ✅ CORRECT - Use styled div with CSS gap
|
|
189
224
|
const ButtonRow = styled.div`
|
|
190
225
|
display: flex;
|
|
191
226
|
gap: ${spacing.club};
|
|
@@ -195,6 +230,12 @@ const ButtonRow = styled.div`
|
|
|
195
230
|
<Button colorVariant="secondary">Cancel</Button>
|
|
196
231
|
<Button colorVariant="primary">Confirm</Button>
|
|
197
232
|
</ButtonRow>
|
|
233
|
+
|
|
234
|
+
// ✅ ALSO CORRECT - Inline styles
|
|
235
|
+
<div style={{ display: 'flex', gap: '8px' }}>
|
|
236
|
+
<Button colorVariant="secondary">Cancel</Button>
|
|
237
|
+
<Button colorVariant="primary">Confirm</Button>
|
|
238
|
+
</div>
|
|
198
239
|
```
|
|
199
240
|
|
|
200
241
|
---
|
|
@@ -202,6 +243,7 @@ const ButtonRow = styled.div`
|
|
|
202
243
|
## IMPORTANT: Code Generation Rules
|
|
203
244
|
|
|
204
245
|
### DO:
|
|
246
|
+
|
|
205
247
|
- Always wrap with `GdsProvider` or `ThemeProvider`
|
|
206
248
|
- Use compound component syntax (`Modal.Header`, `Card.Body`, etc.)
|
|
207
249
|
- Use semantic color tokens from theme (`theme.base.primary`, `theme.status.danger`)
|
|
@@ -212,6 +254,8 @@ const ButtonRow = styled.div`
|
|
|
212
254
|
- Import components from `@jamesodwyer/gds-figma-vite`
|
|
213
255
|
|
|
214
256
|
### DO NOT:
|
|
257
|
+
|
|
258
|
+
- **🚫 NEVER use marginTop, marginBottom, paddingTop, etc. as props** - use `style={{ marginTop: '8px' }}`
|
|
215
259
|
- **Never import sub-components separately** - use dot notation (`Modal.Header` not `ModalHeader`)
|
|
216
260
|
- **Never use components that don't exist** - check the exports list above
|
|
217
261
|
- Never hardcode hex color values - always use theme tokens
|
|
@@ -224,10 +268,10 @@ const ButtonRow = styled.div`
|
|
|
224
268
|
|
|
225
269
|
## Theme Selection
|
|
226
270
|
|
|
227
|
-
| Theme | Brand
|
|
228
|
-
|
|
229
|
-
| TM
|
|
230
|
-
| LN
|
|
271
|
+
| Theme | Brand | Primary Color | Usage |
|
|
272
|
+
| ----- | ------------ | -------------- | ---------------------- |
|
|
273
|
+
| TM | Ticketmaster | Blue (#024ddf) | Default, ticket sales |
|
|
274
|
+
| LN | Live Nation | Red (#e21836) | Live Nation properties |
|
|
231
275
|
|
|
232
276
|
```tsx
|
|
233
277
|
// Ticketmaster theme (default)
|
|
@@ -244,89 +288,97 @@ const ButtonRow = styled.div`
|
|
|
244
288
|
> **For detailed component docs**: See `@jamesodwyer/gds-figma-vite/guidelines/components/[ComponentName].md`
|
|
245
289
|
|
|
246
290
|
### Layout Components
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
|
250
|
-
| `
|
|
251
|
-
| `
|
|
252
|
-
| `
|
|
253
|
-
| `
|
|
254
|
-
| `
|
|
255
|
-
| `
|
|
256
|
-
| `
|
|
257
|
-
| `
|
|
291
|
+
|
|
292
|
+
| Component | Purpose |
|
|
293
|
+
| ----------- | -------------------------------------------------------------------------------- |
|
|
294
|
+
| `Stack` | Spacing utility - ⚠️ Use styled `div` instead to avoid prop warnings |
|
|
295
|
+
| `Card` | Content containers with `.Title` and `.Body` |
|
|
296
|
+
| `Modal` | Overlay dialogs with `.Header`, `.Title`, `.Content`, `.Description`, `.Actions` |
|
|
297
|
+
| `SidePanel` | Slide-in panels for supplementary content |
|
|
298
|
+
| `Accordion` | Collapsible content sections with `.Item`, `.Toggle`, `.Content` |
|
|
299
|
+
| `Header` | Page header with logo |
|
|
300
|
+
| `Footer` | Page footer |
|
|
301
|
+
| `BrandLogo` | Ticketmaster brand logo |
|
|
302
|
+
| `ShareCard` | Social sharing card (beta) |
|
|
258
303
|
|
|
259
304
|
### Button Components
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
|
263
|
-
| `
|
|
264
|
-
| `
|
|
265
|
-
| `
|
|
266
|
-
| `
|
|
305
|
+
|
|
306
|
+
| Component | Purpose |
|
|
307
|
+
| ------------------ | ----------------------------------------------------------------- |
|
|
308
|
+
| `Button` | Primary action element (colorVariant: primary/secondary/tertiary) |
|
|
309
|
+
| `CircleButton` | Circular icon button |
|
|
310
|
+
| `SquareButton` | Square icon button |
|
|
311
|
+
| `PillButton` | Pill-shaped filter/tag button |
|
|
312
|
+
| `PaginationButton` | Load more button with progress |
|
|
267
313
|
|
|
268
314
|
### Form Components
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
|
272
|
-
| `
|
|
273
|
-
| `
|
|
274
|
-
| `
|
|
275
|
-
| `
|
|
276
|
-
| `
|
|
277
|
-
| `
|
|
278
|
-
| `
|
|
279
|
-
| `
|
|
280
|
-
| `
|
|
281
|
-
| `
|
|
282
|
-
| `
|
|
283
|
-
| `
|
|
284
|
-
| `
|
|
315
|
+
|
|
316
|
+
| Component | Purpose |
|
|
317
|
+
| ------------------ | ------------------------------------------------------------------ |
|
|
318
|
+
| `InputField` | Compound form input with `.Label`, `.Row`, `.Input`, `.Validation` |
|
|
319
|
+
| `TextInput` | Single-line text input |
|
|
320
|
+
| `TextArea` | Multi-line text input |
|
|
321
|
+
| `TextAreaLimited` | Text area with character limit |
|
|
322
|
+
| `PasswordInput` | Password input with toggle |
|
|
323
|
+
| `Checkbox` | Boolean selection |
|
|
324
|
+
| `RadioButton` | Single selection from options |
|
|
325
|
+
| `ToggleSwitch` | On/off switch control |
|
|
326
|
+
| `SelectInput` | Dropdown selection |
|
|
327
|
+
| `PhoneNumber` | Phone input with country code |
|
|
328
|
+
| `DateOfBirth` | Date of birth input |
|
|
329
|
+
| `CountryPicker` | Country selection dropdown |
|
|
330
|
+
| `DoubleRangeInput` | Dual-handle range slider |
|
|
331
|
+
| `Stepper` | Increment/decrement control |
|
|
285
332
|
|
|
286
333
|
### Feedback Components
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
|
290
|
-
| `
|
|
291
|
-
| `
|
|
292
|
-
| `
|
|
293
|
-
| `
|
|
294
|
-
| `
|
|
295
|
-
| `
|
|
296
|
-
| `
|
|
334
|
+
|
|
335
|
+
| Component | Purpose |
|
|
336
|
+
| ---------------- | ----------------------------------------------------------- |
|
|
337
|
+
| `Toast` | Temporary notifications |
|
|
338
|
+
| `AlertBox` | Inline alert messages (status: info/success/warning/danger) |
|
|
339
|
+
| `LoadingSpinner` | Loading indicator |
|
|
340
|
+
| `Skeleton` | Loading placeholder |
|
|
341
|
+
| `ErrorMessage` | Error display |
|
|
342
|
+
| `SuccessMessage` | Success display |
|
|
343
|
+
| `Badge` | Status badge/label |
|
|
344
|
+
| `Tooltip` | Hover/click tooltip |
|
|
297
345
|
|
|
298
346
|
### Typography Components
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
|
302
|
-
| `
|
|
347
|
+
|
|
348
|
+
| Component | Purpose |
|
|
349
|
+
| ---------------- | ---------------------------- |
|
|
350
|
+
| `DisplayHeading` | Hero/display text (beta) |
|
|
351
|
+
| `TitleHeading` | Page titles |
|
|
303
352
|
| `SectionHeading` | Section headers (deprecated) |
|
|
304
|
-
| `TextStyle`
|
|
305
|
-
| `Link`
|
|
353
|
+
| `TextStyle` | Pre-styled text components |
|
|
354
|
+
| `Link` | Styled hyperlinks |
|
|
306
355
|
|
|
307
356
|
### Timer Components
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
|
357
|
+
|
|
358
|
+
| Component | Purpose |
|
|
359
|
+
| ---------------- | -------------------------------- |
|
|
360
|
+
| `Countdown` | Visual countdown display (beta) |
|
|
311
361
|
| `CountdownTimer` | Animated countdown with callback |
|
|
312
362
|
|
|
313
363
|
### Ticket Components
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
|
317
|
-
| `
|
|
318
|
-
| `
|
|
319
|
-
| `
|
|
320
|
-
| `
|
|
321
|
-
| `
|
|
364
|
+
|
|
365
|
+
| Component | Purpose |
|
|
366
|
+
| ------------------- | -------------------------- |
|
|
367
|
+
| `TicketCardv2` | Ticket card container |
|
|
368
|
+
| `TicketTopSection` | Ticket header with seating |
|
|
369
|
+
| `TicketDescription` | Ticket delivery info |
|
|
370
|
+
| `TicketQuantity` | Ticket quantity display |
|
|
371
|
+
| `SeatInfov2` | Seat location display |
|
|
372
|
+
| `SimpleSeatInfo` | Simple seat display |
|
|
322
373
|
|
|
323
374
|
### Deprecated Components
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
|
327
|
-
| `
|
|
328
|
-
| `
|
|
329
|
-
| `
|
|
375
|
+
|
|
376
|
+
| Component | Replacement |
|
|
377
|
+
| ---------------- | ------------------ |
|
|
378
|
+
| `Toggle` | Use React state |
|
|
379
|
+
| `AlertBoxLegacy` | `AlertBox` |
|
|
380
|
+
| `TicketInfo` | `TicketTopSection` |
|
|
381
|
+
| `SeatInfo` | `SeatInfov2` |
|
|
330
382
|
|
|
331
383
|
---
|
|
332
384
|
|
|
@@ -340,10 +392,10 @@ import {
|
|
|
340
392
|
Card,
|
|
341
393
|
TitleHeading,
|
|
342
394
|
TextStyle,
|
|
343
|
-
Button
|
|
344
|
-
} from
|
|
345
|
-
import styled from
|
|
346
|
-
import { spacing } from
|
|
395
|
+
Button,
|
|
396
|
+
} from "@jamesodwyer/gds-figma-vite";
|
|
397
|
+
import styled from "styled-components";
|
|
398
|
+
import { spacing } from "@jamesodwyer/gds-figma-vite";
|
|
347
399
|
|
|
348
400
|
const Container = styled.div`
|
|
349
401
|
padding: ${spacing.arena};
|
|
@@ -371,9 +423,9 @@ function Page() {
|
|
|
371
423
|
### Form Example
|
|
372
424
|
|
|
373
425
|
```tsx
|
|
374
|
-
import { GdsProvider, InputField, Button } from
|
|
375
|
-
import styled from
|
|
376
|
-
import { spacing } from
|
|
426
|
+
import { GdsProvider, InputField, Button } from "@jamesodwyer/gds-figma-vite";
|
|
427
|
+
import styled from "styled-components";
|
|
428
|
+
import { spacing } from "@jamesodwyer/gds-figma-vite";
|
|
377
429
|
|
|
378
430
|
const Form = styled.form`
|
|
379
431
|
display: flex;
|
|
@@ -387,14 +439,14 @@ function LoginForm() {
|
|
|
387
439
|
<Form>
|
|
388
440
|
<InputField id="email">
|
|
389
441
|
<InputField.Label>Email</InputField.Label>
|
|
390
|
-
<InputField.Row style={{ marginTop:
|
|
442
|
+
<InputField.Row style={{ marginTop: "8px" }}>
|
|
391
443
|
<InputField.Input type="email" />
|
|
392
444
|
</InputField.Row>
|
|
393
445
|
</InputField>
|
|
394
446
|
|
|
395
447
|
<InputField id="password">
|
|
396
448
|
<InputField.Label>Password</InputField.Label>
|
|
397
|
-
<InputField.Row style={{ marginTop:
|
|
449
|
+
<InputField.Row style={{ marginTop: "8px" }}>
|
|
398
450
|
<InputField.Input type="password" />
|
|
399
451
|
</InputField.Row>
|
|
400
452
|
</InputField>
|
|
@@ -411,8 +463,8 @@ function LoginForm() {
|
|
|
411
463
|
### Modal Example
|
|
412
464
|
|
|
413
465
|
```tsx
|
|
414
|
-
import { useState } from
|
|
415
|
-
import { GdsProvider, Modal, Button } from
|
|
466
|
+
import { useState } from "react";
|
|
467
|
+
import { GdsProvider, Modal, Button } from "@jamesodwyer/gds-figma-vite";
|
|
416
468
|
|
|
417
469
|
function ModalExample() {
|
|
418
470
|
const [isOpen, setIsOpen] = useState(false);
|
|
@@ -432,9 +484,7 @@ function ModalExample() {
|
|
|
432
484
|
<Modal.CloseButton label="Close" />
|
|
433
485
|
</Modal.Header>
|
|
434
486
|
<Modal.Content>
|
|
435
|
-
<Modal.Description>
|
|
436
|
-
This is the modal content.
|
|
437
|
-
</Modal.Description>
|
|
487
|
+
<Modal.Description>This is the modal content.</Modal.Description>
|
|
438
488
|
</Modal.Content>
|
|
439
489
|
<Modal.Actions>
|
|
440
490
|
<Button colorVariant="secondary" onClick={() => setIsOpen(false)}>
|
|
@@ -453,7 +503,12 @@ function ModalExample() {
|
|
|
453
503
|
### Using Icons
|
|
454
504
|
|
|
455
505
|
```tsx
|
|
456
|
-
import {
|
|
506
|
+
import {
|
|
507
|
+
GdsProvider,
|
|
508
|
+
Button,
|
|
509
|
+
HeartIcon,
|
|
510
|
+
CheckmarkIcon,
|
|
511
|
+
} from "@jamesodwyer/gds-figma-vite";
|
|
457
512
|
|
|
458
513
|
function IconExample() {
|
|
459
514
|
return (
|
|
@@ -479,18 +534,18 @@ function IconExample() {
|
|
|
479
534
|
|
|
480
535
|
Use these spacing tokens instead of pixel values:
|
|
481
536
|
|
|
482
|
-
| Token
|
|
483
|
-
|
|
484
|
-
| `spacing.lounge`
|
|
485
|
-
| `spacing.club`
|
|
486
|
-
| `spacing.hall`
|
|
487
|
-
| `spacing.auditorium`
|
|
488
|
-
| `spacing.theatre`
|
|
489
|
-
| `spacing.amphitheatre` | 24px
|
|
490
|
-
| `spacing.arena`
|
|
491
|
-
| `spacing.stadium`
|
|
492
|
-
| `spacing.dome`
|
|
493
|
-
| `spacing.field`
|
|
537
|
+
| Token | Value | Use Case |
|
|
538
|
+
| ---------------------- | ----- | --------------------------- |
|
|
539
|
+
| `spacing.lounge` | 4px | Tight spacing, icon gaps |
|
|
540
|
+
| `spacing.club` | 8px | Small gaps between elements |
|
|
541
|
+
| `spacing.hall` | 12px | Medium-small spacing |
|
|
542
|
+
| `spacing.auditorium` | 16px | Standard spacing |
|
|
543
|
+
| `spacing.theatre` | 20px | Medium spacing |
|
|
544
|
+
| `spacing.amphitheatre` | 24px | Comfortable spacing |
|
|
545
|
+
| `spacing.arena` | 32px | Large spacing |
|
|
546
|
+
| `spacing.stadium` | 48px | Section spacing |
|
|
547
|
+
| `spacing.dome` | 64px | Large section gaps |
|
|
548
|
+
| `spacing.field` | 88px | Maximum spacing |
|
|
494
549
|
|
|
495
550
|
---
|
|
496
551
|
|
|
@@ -498,16 +553,16 @@ Use these spacing tokens instead of pixel values:
|
|
|
498
553
|
|
|
499
554
|
Use `textStyle` for consistent typography:
|
|
500
555
|
|
|
501
|
-
| Style
|
|
502
|
-
|
|
503
|
-
| `textStyle.mauna`
|
|
504
|
-
| `textStyle.everest`
|
|
505
|
-
| `textStyle.kilimanjaro` | 16px
|
|
506
|
-
| `textStyle.matterhorn`
|
|
507
|
-
| `textStyle.vinson`
|
|
508
|
-
| `textStyle.blanc`
|
|
509
|
-
| `textStyle.fiji`
|
|
510
|
-
| `textStyle.rainier`
|
|
556
|
+
| Style | Mobile | Desktop | Use Case |
|
|
557
|
+
| ----------------------- | ------ | ------- | -------------------- |
|
|
558
|
+
| `textStyle.mauna` | 12px | 12px | Captions, small text |
|
|
559
|
+
| `textStyle.everest` | 14px | 14px | Body text |
|
|
560
|
+
| `textStyle.kilimanjaro` | 16px | 16px | Large body |
|
|
561
|
+
| `textStyle.matterhorn` | 18px | 18px | Emphasis |
|
|
562
|
+
| `textStyle.vinson` | 20px | 22px | Small headings |
|
|
563
|
+
| `textStyle.blanc` | 24px | 28px | Section headings |
|
|
564
|
+
| `textStyle.fiji` | 28px | 34px | Page titles |
|
|
565
|
+
| `textStyle.rainier` | 32px | 40px | Large titles |
|
|
511
566
|
|
|
512
567
|
---
|
|
513
568
|
|