@jamesodwyer/gds-figma-vite 2.0.1 → 2.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/guidelines/Guidelines.md
CHANGED
|
@@ -74,10 +74,123 @@ function App() {
|
|
|
74
74
|
|
|
75
75
|
---
|
|
76
76
|
|
|
77
|
+
## CRITICAL: Compound Component Pattern
|
|
78
|
+
|
|
79
|
+
Many GDS components use the **compound component pattern**. Sub-components are accessed via dot notation on the parent component, NOT as separate imports.
|
|
80
|
+
|
|
81
|
+
### Correct Usage (Dot Notation)
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
// ✅ CORRECT - Use dot notation for sub-components
|
|
85
|
+
<Modal>
|
|
86
|
+
<Modal.Header>...</Modal.Header>
|
|
87
|
+
<Modal.Title>...</Modal.Title>
|
|
88
|
+
<Modal.Content>...</Modal.Content>
|
|
89
|
+
<Modal.Description>...</Modal.Description>
|
|
90
|
+
<Modal.Actions>...</Modal.Actions>
|
|
91
|
+
</Modal>
|
|
92
|
+
|
|
93
|
+
<Card>
|
|
94
|
+
<Card.Title>...</Card.Title>
|
|
95
|
+
<Card.Body>...</Card.Body>
|
|
96
|
+
</Card>
|
|
97
|
+
|
|
98
|
+
<InputField id="email">
|
|
99
|
+
<InputField.Label>...</InputField.Label>
|
|
100
|
+
<InputField.Input />
|
|
101
|
+
</InputField>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### WRONG Usage (Do NOT Do This)
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
// ❌ WRONG - These components DO NOT EXIST as separate imports
|
|
108
|
+
<ModalHeader> // WRONG - use Modal.Header
|
|
109
|
+
<ModalTitle> // WRONG - use Modal.Title
|
|
110
|
+
<ModalContent> // WRONG - use Modal.Content
|
|
111
|
+
<ModalDescription> // WRONG - use Modal.Description
|
|
112
|
+
<ModalActions> // WRONG - use Modal.Actions
|
|
113
|
+
<CardTitle> // WRONG - use Card.Title
|
|
114
|
+
<CardBody> // WRONG - use Card.Body
|
|
115
|
+
<CardContent> // WRONG - does not exist at all
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Components with Compound Sub-components
|
|
119
|
+
|
|
120
|
+
| Component | Sub-components |
|
|
121
|
+
|-----------|----------------|
|
|
122
|
+
| Modal | `.Header`, `.Title`, `.Content`, `.Description`, `.Image`, `.CloseButton`, `.Actions` |
|
|
123
|
+
| Card | `.Title`, `.Body` |
|
|
124
|
+
| InputField | `.Label`, `.Row`, `.Input`, `.Textarea`, `.Select`, `.Checkbox`, `.Radio`, `.StartIcon`, `.EndIcon`, `.Validation` |
|
|
125
|
+
| Accordion | `.Item`, `.Toggle`, `.Content` |
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## CRITICAL: Non-Existent Components
|
|
130
|
+
|
|
131
|
+
> **⚠️ WARNING FOR AI AGENTS**: The following components DO NOT exist in this design system. Do NOT generate code using them.
|
|
132
|
+
|
|
133
|
+
### Components That DO NOT Exist
|
|
134
|
+
|
|
135
|
+
| Non-Existent | Use Instead |
|
|
136
|
+
|--------------|-------------|
|
|
137
|
+
| `ButtonGroup` | Use `Stack` with `gap` prop, or a styled `div` with flexbox |
|
|
138
|
+
| `CardContent` | Put content directly inside `Card.Body` |
|
|
139
|
+
| `CardHeader` | Use `Card.Title` |
|
|
140
|
+
| `CardActions` | Put buttons inside `Card.Body` |
|
|
141
|
+
| `ModalDescription` | Use `Modal.Description` (compound component) |
|
|
142
|
+
| `ModalHeader` | Use `Modal.Header` (compound component) |
|
|
143
|
+
| `ModalBody` | Use `Modal.Content` (compound component) |
|
|
144
|
+
| `ModalFooter` | Use `Modal.Actions` (compound component) |
|
|
145
|
+
| `FormControl` | Use `InputField` compound component |
|
|
146
|
+
| `FormLabel` | Use `InputField.Label` |
|
|
147
|
+
| `FormHelperText` | Use `InputField.Validation` |
|
|
148
|
+
| `Grid` | Use CSS Grid or styled `div` |
|
|
149
|
+
| `Box` | Use styled `div` with spacing tokens |
|
|
150
|
+
| `Container` | Use styled `div` with spacing tokens |
|
|
151
|
+
| `Typography` | Use `TextStyle` component |
|
|
152
|
+
| `Divider` | Use styled `hr` or `div` |
|
|
153
|
+
| `IconButton` | Use `CircleButton` or `SquareButton` |
|
|
154
|
+
| `Snackbar` | Use `Toast` |
|
|
155
|
+
| `Dialog` | Use `Modal` |
|
|
156
|
+
| `Drawer` | Use `SidePanel` |
|
|
157
|
+
| `AppBar` | Use `Header` |
|
|
158
|
+
|
|
159
|
+
### Layout Without ButtonGroup
|
|
160
|
+
|
|
161
|
+
Use `Stack` for horizontal button layouts:
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
import { Stack, Button } from '@jamesodwyer/gds-figma-vite';
|
|
165
|
+
|
|
166
|
+
// For horizontal button group
|
|
167
|
+
<Stack gap="club" style={{ display: 'flex', flexDirection: 'row' }}>
|
|
168
|
+
<Button colorVariant="secondary">Cancel</Button>
|
|
169
|
+
<Button colorVariant="primary">Confirm</Button>
|
|
170
|
+
</Stack>
|
|
171
|
+
|
|
172
|
+
// Or use a styled div
|
|
173
|
+
import styled from 'styled-components';
|
|
174
|
+
import { spacing } from '@jamesodwyer/gds-figma-vite';
|
|
175
|
+
|
|
176
|
+
const ButtonRow = styled.div`
|
|
177
|
+
display: flex;
|
|
178
|
+
gap: ${spacing.club};
|
|
179
|
+
`;
|
|
180
|
+
|
|
181
|
+
<ButtonRow>
|
|
182
|
+
<Button colorVariant="secondary">Cancel</Button>
|
|
183
|
+
<Button colorVariant="primary">Confirm</Button>
|
|
184
|
+
</ButtonRow>
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
77
189
|
## IMPORTANT: Code Generation Rules
|
|
78
190
|
|
|
79
191
|
### DO:
|
|
80
192
|
- Always wrap with `GdsProvider` or `ThemeProvider`
|
|
193
|
+
- Use compound component syntax (`Modal.Header`, `Card.Body`, etc.)
|
|
81
194
|
- Use semantic color tokens from theme (`theme.base.primary`, `theme.status.danger`)
|
|
82
195
|
- Use spacing tokens (`spacing.auditorium`, `spacing.arena`)
|
|
83
196
|
- Use textStyle for typography (`textStyle.rainier`, `textStyle.everest`)
|
|
@@ -86,6 +199,8 @@ function App() {
|
|
|
86
199
|
- Import components from `@jamesodwyer/gds-figma-vite`
|
|
87
200
|
|
|
88
201
|
### DO NOT:
|
|
202
|
+
- **Never import sub-components separately** - use dot notation (`Modal.Header` not `ModalHeader`)
|
|
203
|
+
- **Never use components that don't exist** - check the exports list above
|
|
89
204
|
- Never hardcode hex color values - always use theme tokens
|
|
90
205
|
- Never use pixel values for spacing - use spacing tokens
|
|
91
206
|
- Never use custom font sizes - use textStyle utilities
|
|
@@ -116,6 +231,7 @@ function App() {
|
|
|
116
231
|
### Layout Components
|
|
117
232
|
| Component | Purpose | Docs |
|
|
118
233
|
|-----------|---------|------|
|
|
234
|
+
| `Stack` | Spacing utility for vertical/horizontal layouts | [Stack.md](./components/Stack.md) |
|
|
119
235
|
| `Card` | Content containers with Title and Body | [Card.md](./components/Card.md) |
|
|
120
236
|
| `Modal` | Overlay dialogs requiring user attention | [Modal.md](./components/Modal.md) |
|
|
121
237
|
| `SidePanel` | Slide-in panels for supplementary content | [SidePanel.md](./components/SidePanel.md) |
|
|
@@ -8,6 +8,8 @@ Container component for grouping related content with optional elevation and sty
|
|
|
8
8
|
import { Card } from '@jamesodwyer/gds-figma-vite';
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
> **⚠️ IMPORTANT**: Card uses a compound component pattern. Sub-components are accessed via dot notation (`Card.Title`, `Card.Body`), NOT as separate imports.
|
|
12
|
+
|
|
11
13
|
## Purpose
|
|
12
14
|
|
|
13
15
|
Use Card to:
|
|
@@ -15,13 +17,60 @@ Use Card to:
|
|
|
15
17
|
- Create visual separation between content areas
|
|
16
18
|
- Display information in a contained, elevated surface
|
|
17
19
|
|
|
18
|
-
## Structure
|
|
20
|
+
## Structure (Compound Components)
|
|
21
|
+
|
|
22
|
+
Card uses **dot notation** for sub-components. These are NOT separate imports.
|
|
19
23
|
|
|
20
24
|
| Sub-component | Description |
|
|
21
25
|
|---------------|-------------|
|
|
22
|
-
| Card | Main container |
|
|
23
|
-
| Card.Title | Header/title area |
|
|
24
|
-
| Card.Body | Main content area |
|
|
26
|
+
| `Card` | Main container |
|
|
27
|
+
| `Card.Title` | Header/title area |
|
|
28
|
+
| `Card.Body` | Main content area |
|
|
29
|
+
|
|
30
|
+
### ❌ WRONG - Do Not Use These (They Don't Exist)
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
// These components DO NOT EXIST - do not import or use them:
|
|
34
|
+
<CardTitle> // ❌ WRONG
|
|
35
|
+
<CardBody> // ❌ WRONG
|
|
36
|
+
<CardContent> // ❌ WRONG - does not exist at all
|
|
37
|
+
<CardHeader> // ❌ WRONG
|
|
38
|
+
<CardActions> // ❌ WRONG
|
|
39
|
+
<CardFooter> // ❌ WRONG
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
### ✅ CORRECT - Use Dot Notation
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
// Always use dot notation:
|
|
46
|
+
<Card>
|
|
47
|
+
<Card.Title>My Title</Card.Title> // ✅ CORRECT
|
|
48
|
+
<Card.Body>My content</Card.Body> // ✅ CORRECT
|
|
49
|
+
</Card>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Note on CardContent
|
|
53
|
+
|
|
54
|
+
There is **NO `CardContent` component**. Put your content directly inside `Card.Body`:
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
// ❌ WRONG - CardContent doesn't exist
|
|
58
|
+
<Card>
|
|
59
|
+
<Card.Body>
|
|
60
|
+
<CardContent> {/* This will cause an error! */}
|
|
61
|
+
<p>Content</p>
|
|
62
|
+
</CardContent>
|
|
63
|
+
</Card.Body>
|
|
64
|
+
</Card>
|
|
65
|
+
|
|
66
|
+
// ✅ CORRECT - Put content directly in Card.Body
|
|
67
|
+
<Card>
|
|
68
|
+
<Card.Body>
|
|
69
|
+
<TextStyle>Content goes here</TextStyle>
|
|
70
|
+
<Button>Action</Button>
|
|
71
|
+
</Card.Body>
|
|
72
|
+
</Card>
|
|
73
|
+
```
|
|
25
74
|
|
|
26
75
|
## Basic Usage
|
|
27
76
|
|
|
@@ -8,6 +8,8 @@ Overlay dialog for focused user interactions requiring attention or action.
|
|
|
8
8
|
import { Modal } from '@jamesodwyer/gds-figma-vite';
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
+
> **⚠️ IMPORTANT**: Modal uses a compound component pattern. All sub-components are accessed via dot notation (`Modal.Header`, `Modal.Title`, etc.), NOT as separate imports.
|
|
12
|
+
|
|
11
13
|
## Purpose
|
|
12
14
|
|
|
13
15
|
Use Modal for:
|
|
@@ -16,18 +18,44 @@ Use Modal for:
|
|
|
16
18
|
- Important information that needs acknowledgment
|
|
17
19
|
- Alert dialogs
|
|
18
20
|
|
|
19
|
-
## Structure
|
|
21
|
+
## Structure (Compound Components)
|
|
22
|
+
|
|
23
|
+
Modal uses **dot notation** for sub-components. These are NOT separate imports.
|
|
20
24
|
|
|
21
25
|
| Sub-component | Description |
|
|
22
26
|
|---------------|-------------|
|
|
23
|
-
| Modal | Container with backdrop |
|
|
24
|
-
| Modal.Header | Header section |
|
|
25
|
-
| Modal.Title | Modal title |
|
|
26
|
-
| Modal.Content | Main content area |
|
|
27
|
-
| Modal.Description | Descriptive text |
|
|
28
|
-
| Modal.Image | Optional banner image |
|
|
29
|
-
| Modal.CloseButton | Close button |
|
|
30
|
-
| Modal.Actions | Action buttons container |
|
|
27
|
+
| `Modal` | Container with backdrop |
|
|
28
|
+
| `Modal.Header` | Header section |
|
|
29
|
+
| `Modal.Title` | Modal title |
|
|
30
|
+
| `Modal.Content` | Main content area |
|
|
31
|
+
| `Modal.Description` | Descriptive text |
|
|
32
|
+
| `Modal.Image` | Optional banner image |
|
|
33
|
+
| `Modal.CloseButton` | Close button |
|
|
34
|
+
| `Modal.Actions` | Action buttons container |
|
|
35
|
+
|
|
36
|
+
### ❌ WRONG - Do Not Use These (They Don't Exist)
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
// These components DO NOT EXIST - do not import or use them:
|
|
40
|
+
<ModalHeader> // ❌ WRONG
|
|
41
|
+
<ModalTitle> // ❌ WRONG
|
|
42
|
+
<ModalContent> // ❌ WRONG
|
|
43
|
+
<ModalDescription> // ❌ WRONG
|
|
44
|
+
<ModalActions> // ❌ WRONG
|
|
45
|
+
<ModalFooter> // ❌ WRONG
|
|
46
|
+
<ModalBody> // ❌ WRONG
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### ✅ CORRECT - Use Dot Notation
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
// Always use dot notation:
|
|
53
|
+
<Modal.Header> // ✅ CORRECT
|
|
54
|
+
<Modal.Title> // ✅ CORRECT
|
|
55
|
+
<Modal.Content> // ✅ CORRECT
|
|
56
|
+
<Modal.Description> // ✅ CORRECT
|
|
57
|
+
<Modal.Actions> // ✅ CORRECT
|
|
58
|
+
```
|
|
31
59
|
|
|
32
60
|
## Props
|
|
33
61
|
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# Stack Component
|
|
2
|
+
|
|
3
|
+
Simple layout utility for adding consistent spacing between child elements.
|
|
4
|
+
|
|
5
|
+
## Import
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Stack } from '@jamesodwyer/gds-figma-vite';
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Purpose
|
|
12
|
+
|
|
13
|
+
Use Stack to:
|
|
14
|
+
- Add consistent vertical spacing between elements
|
|
15
|
+
- Create horizontal layouts with gaps (using CSS)
|
|
16
|
+
- Replace non-existent `ButtonGroup` component
|
|
17
|
+
- Quickly layout form elements or content sections
|
|
18
|
+
|
|
19
|
+
## Props
|
|
20
|
+
|
|
21
|
+
| Prop | Type | Default | Description |
|
|
22
|
+
|------|------|---------|-------------|
|
|
23
|
+
| gap | SpacingToken | - | Gap between children using spacing scale |
|
|
24
|
+
|
|
25
|
+
### Available Gap Values
|
|
26
|
+
|
|
27
|
+
| Token | Value |
|
|
28
|
+
|-------|-------|
|
|
29
|
+
| `lounge` | 4px |
|
|
30
|
+
| `club` | 8px |
|
|
31
|
+
| `hall` | 12px |
|
|
32
|
+
| `auditorium` | 16px |
|
|
33
|
+
| `theatre` | 20px |
|
|
34
|
+
| `amphitheatre` | 24px |
|
|
35
|
+
| `arena` | 32px |
|
|
36
|
+
| `stadium` | 48px |
|
|
37
|
+
| `dome` | 64px |
|
|
38
|
+
| `field` | 88px |
|
|
39
|
+
|
|
40
|
+
## Basic Usage (Vertical Stack)
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import { GdsProvider, Stack, Button } from '@jamesodwyer/gds-figma-vite';
|
|
44
|
+
|
|
45
|
+
<GdsProvider>
|
|
46
|
+
<Stack gap="auditorium">
|
|
47
|
+
<Button colorVariant="primary">First Button</Button>
|
|
48
|
+
<Button colorVariant="secondary">Second Button</Button>
|
|
49
|
+
<Button colorVariant="tertiary">Third Button</Button>
|
|
50
|
+
</Stack>
|
|
51
|
+
</GdsProvider>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Horizontal Layout (Button Row)
|
|
55
|
+
|
|
56
|
+
> **Note**: `ButtonGroup` does not exist in GDS. Use Stack with flex styling instead.
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
import { GdsProvider, Stack, Button } from '@jamesodwyer/gds-figma-vite';
|
|
60
|
+
|
|
61
|
+
<GdsProvider>
|
|
62
|
+
<Stack gap="club" style={{ display: 'flex', flexDirection: 'row' }}>
|
|
63
|
+
<Button colorVariant="secondary">Cancel</Button>
|
|
64
|
+
<Button colorVariant="primary">Confirm</Button>
|
|
65
|
+
</Stack>
|
|
66
|
+
</GdsProvider>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## With Styled Components
|
|
70
|
+
|
|
71
|
+
For more control, extend Stack with styled-components:
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import styled from 'styled-components';
|
|
75
|
+
import { Stack, Button, spacing } from '@jamesodwyer/gds-figma-vite';
|
|
76
|
+
|
|
77
|
+
const ButtonRow = styled(Stack)`
|
|
78
|
+
display: flex;
|
|
79
|
+
flex-direction: row;
|
|
80
|
+
justify-content: flex-end;
|
|
81
|
+
`;
|
|
82
|
+
|
|
83
|
+
<ButtonRow gap="club">
|
|
84
|
+
<Button colorVariant="secondary">Cancel</Button>
|
|
85
|
+
<Button colorVariant="primary">Submit</Button>
|
|
86
|
+
</ButtonRow>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Form Layout Example
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import { GdsProvider, Stack, InputField, Button } from '@jamesodwyer/gds-figma-vite';
|
|
93
|
+
|
|
94
|
+
<GdsProvider>
|
|
95
|
+
<form>
|
|
96
|
+
<Stack gap="auditorium">
|
|
97
|
+
<InputField id="name">
|
|
98
|
+
<InputField.Label>Name</InputField.Label>
|
|
99
|
+
<InputField.Row marginTop="club">
|
|
100
|
+
<InputField.Input />
|
|
101
|
+
</InputField.Row>
|
|
102
|
+
</InputField>
|
|
103
|
+
|
|
104
|
+
<InputField id="email">
|
|
105
|
+
<InputField.Label>Email</InputField.Label>
|
|
106
|
+
<InputField.Row marginTop="club">
|
|
107
|
+
<InputField.Input type="email" />
|
|
108
|
+
</InputField.Row>
|
|
109
|
+
</InputField>
|
|
110
|
+
|
|
111
|
+
<Button colorVariant="primary" fullWidth>
|
|
112
|
+
Submit
|
|
113
|
+
</Button>
|
|
114
|
+
</Stack>
|
|
115
|
+
</form>
|
|
116
|
+
</GdsProvider>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Alternative: Styled Div
|
|
120
|
+
|
|
121
|
+
If you prefer more explicit control, use a styled div:
|
|
122
|
+
|
|
123
|
+
```tsx
|
|
124
|
+
import styled from 'styled-components';
|
|
125
|
+
import { spacing } from '@jamesodwyer/gds-figma-vite';
|
|
126
|
+
|
|
127
|
+
const VerticalStack = styled.div`
|
|
128
|
+
display: flex;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
gap: ${spacing.auditorium};
|
|
131
|
+
`;
|
|
132
|
+
|
|
133
|
+
const HorizontalStack = styled.div`
|
|
134
|
+
display: flex;
|
|
135
|
+
flex-direction: row;
|
|
136
|
+
gap: ${spacing.club};
|
|
137
|
+
`;
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Common Patterns
|
|
141
|
+
|
|
142
|
+
### Modal Actions (Replacing ButtonGroup)
|
|
143
|
+
|
|
144
|
+
```tsx
|
|
145
|
+
<Modal.Actions>
|
|
146
|
+
<Stack gap="club" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
|
|
147
|
+
<Button colorVariant="secondary" onClick={handleCancel}>
|
|
148
|
+
Cancel
|
|
149
|
+
</Button>
|
|
150
|
+
<Button colorVariant="primary" onClick={handleConfirm}>
|
|
151
|
+
Confirm
|
|
152
|
+
</Button>
|
|
153
|
+
</Stack>
|
|
154
|
+
</Modal.Actions>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Card Content Layout
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
<Card>
|
|
161
|
+
<Card.Body>
|
|
162
|
+
<Stack gap="auditorium">
|
|
163
|
+
<TextStyle>First section of content</TextStyle>
|
|
164
|
+
<TextStyle>Second section of content</TextStyle>
|
|
165
|
+
<Button colorVariant="primary">Action</Button>
|
|
166
|
+
</Stack>
|
|
167
|
+
</Card.Body>
|
|
168
|
+
</Card>
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## Related Components
|
|
172
|
+
|
|
173
|
+
- `Modal.Actions` - Container for modal action buttons
|
|
174
|
+
- `InputField.Row` - Row container with margin support for form inputs
|
|
@@ -2,6 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
All components are imported from `@jamesodwyer/gds-figma-vite`.
|
|
4
4
|
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## CRITICAL: Compound Component Pattern
|
|
8
|
+
|
|
9
|
+
Several GDS components use the **compound component pattern**. Sub-components are accessed via **dot notation**, NOT as separate imports.
|
|
10
|
+
|
|
11
|
+
### Components with Sub-components
|
|
12
|
+
|
|
13
|
+
| Component | Sub-components (use dot notation) |
|
|
14
|
+
|-----------|-----------------------------------|
|
|
15
|
+
| `Modal` | `.Header`, `.Title`, `.Content`, `.Description`, `.Image`, `.CloseButton`, `.Actions` |
|
|
16
|
+
| `Card` | `.Title`, `.Body` |
|
|
17
|
+
| `InputField` | `.Label`, `.Row`, `.Input`, `.Textarea`, `.Select`, `.Checkbox`, `.Radio`, `.StartIcon`, `.EndIcon`, `.Validation` |
|
|
18
|
+
| `Accordion` | `.Item`, `.Toggle`, `.Content` |
|
|
19
|
+
|
|
20
|
+
### Example Usage
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
// ✅ CORRECT - Use dot notation
|
|
24
|
+
<Modal>
|
|
25
|
+
<Modal.Header>
|
|
26
|
+
<Modal.Title>Title</Modal.Title>
|
|
27
|
+
</Modal.Header>
|
|
28
|
+
<Modal.Content>
|
|
29
|
+
<Modal.Description>Content</Modal.Description>
|
|
30
|
+
</Modal.Content>
|
|
31
|
+
</Modal>
|
|
32
|
+
|
|
33
|
+
// ❌ WRONG - These don't exist as separate components
|
|
34
|
+
<ModalHeader> // Does not exist
|
|
35
|
+
<ModalContent> // Does not exist
|
|
36
|
+
<CardContent> // Does not exist
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
---
|
|
40
|
+
|
|
5
41
|
## Layout Components
|
|
6
42
|
|
|
7
43
|
| Component | Description | Usage |
|
|
@@ -83,10 +119,39 @@ All components are imported from `@jamesodwyer/gds-figma-vite`.
|
|
|
83
119
|
|
|
84
120
|
| Component | Description | Usage |
|
|
85
121
|
|-----------|-------------|-------|
|
|
122
|
+
| Stack | Vertical/horizontal layout with spacing | Element spacing, button rows |
|
|
86
123
|
| Countdown | Timer countdown | Time-limited offers |
|
|
87
124
|
| CountdownTimer | Alternative timer | Countdown displays |
|
|
88
125
|
| ShareCard | Social sharing card | Share dialogs |
|
|
89
126
|
| BrandLogo | Brand logo display | Branding |
|
|
127
|
+
| VisuallyHidden | Screen reader only content | Accessibility |
|
|
128
|
+
| IconButton | Icon-only button utility | Icon actions |
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## Components That DO NOT Exist
|
|
133
|
+
|
|
134
|
+
> **WARNING**: The following components are NOT part of GDS. Do not use them.
|
|
135
|
+
|
|
136
|
+
| Non-Existent Component | Use Instead |
|
|
137
|
+
|------------------------|-------------|
|
|
138
|
+
| `ButtonGroup` | `Stack` with flex styling |
|
|
139
|
+
| `CardContent` | Put content in `Card.Body` |
|
|
140
|
+
| `CardHeader` | Use `Card.Title` |
|
|
141
|
+
| `CardActions` | Put buttons in `Card.Body` |
|
|
142
|
+
| `ModalDescription` | Use `Modal.Description` |
|
|
143
|
+
| `ModalHeader` | Use `Modal.Header` |
|
|
144
|
+
| `ModalBody` | Use `Modal.Content` |
|
|
145
|
+
| `ModalFooter` | Use `Modal.Actions` |
|
|
146
|
+
| `FormControl` | Use `InputField` |
|
|
147
|
+
| `Grid` | Use CSS Grid or styled div |
|
|
148
|
+
| `Box` | Use styled div with spacing tokens |
|
|
149
|
+
| `Container` | Use styled div with spacing tokens |
|
|
150
|
+
| `Typography` | Use `TextStyle` |
|
|
151
|
+
| `Divider` | Use styled hr or div |
|
|
152
|
+
| `Snackbar` | Use `Toast` |
|
|
153
|
+
| `Dialog` | Use `Modal` |
|
|
154
|
+
| `Drawer` | Use `SidePanel` |
|
|
90
155
|
|
|
91
156
|
## Import Examples
|
|
92
157
|
|