@jamesodwyer/gds-figma-vite 2.0.11 → 2.0.12

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.
Files changed (2) hide show
  1. package/guidelines/Guidelines.md +64 -22
  2. package/package.json +1 -1
package/guidelines/Guidelines.md CHANGED
@@ -98,7 +98,7 @@ import {
98
98
  Grid, // ❌ DOES NOT EXIST
99
99
  Box, // ❌ DOES NOT EXIST
100
100
  Container, // ❌ DOES NOT EXIST
101
- Typography, // ❌ DOES NOT EXIST - use TextStyle
101
+ Typography, // ❌ DOES NOT EXIST - use TextStyle.Rainier
102
102
  Stack, // ❌ DO NOT USE - causes prop warnings
103
103
  Divider, // ❌ DOES NOT EXIST
104
104
  IconButton, // ❌ DOES NOT EXIST - use CircleButton
@@ -108,30 +108,72 @@ import {
108
108
  } from "@jamesodwyer/gds-figma-vite"; // ❌ WILL CRASH
109
109
  ```
110
110
 
111
+ ### ❌ WRONG SUB-COMPONENT NAMES - WILL CRASH
112
+
113
+ ```tsx
114
+ // ❌ WRONG - These sub-components DO NOT EXIST:
115
+ <Accordion.Toggle> // ❌ WRONG - use Accordion.Header
116
+ <Accordion.Content> // ❌ WRONG - use Accordion.Panel
117
+ <TextStyle>text</TextStyle> // ❌ WRONG - TextStyle is not a component
118
+
119
+ // ✅ CORRECT:
120
+ <Accordion.Header>Section Title</Accordion.Header> // ✅ CORRECT
121
+ <Accordion.Panel>Section content</Accordion.Panel> // ✅ CORRECT
122
+ <TextStyle.Rainier>Body text</TextStyle.Rainier> // ✅ CORRECT
123
+ ```
124
+
111
125
  ### Sub-Components Use DOT NOTATION (Not Imports)
112
126
 
113
127
  ```tsx
114
128
  // ✅ CORRECT - Import parent, use dot notation for children
115
- import { Modal, Card, InputField } from '@jamesodwyer/gds-figma-vite';
116
-
117
- <Modal>
118
- <Modal.Header>...</Modal.Header> // ✅ Dot notation
119
- <Modal.Title>...</Modal.Title> // ✅ Dot notation
120
- <Modal.Content>...</Modal.Content> // ✅ Dot notation
121
- <Modal.Actions>...</Modal.Actions> // ✅ Dot notation
129
+ import { Modal, Card, InputField, Accordion, TextStyle } from '@jamesodwyer/gds-figma-vite';
130
+
131
+ // Modal compound component
132
+ <Modal isOpen={true} onClose={() => {}} ariaLabel="Modal" mobileMaxViewportWidth="768px">
133
+ <Modal.Header>
134
+ <Modal.Title>Title</Modal.Title>
135
+ <Modal.CloseButton label="Close" />
136
+ </Modal.Header>
137
+ <Modal.Content>
138
+ <Modal.Description>Description text</Modal.Description>
139
+ </Modal.Content>
140
+ <Modal.Actions>
141
+ <Button colorVariant="secondary">Cancel</Button>
142
+ <Button colorVariant="primary">Confirm</Button>
143
+ </Modal.Actions>
122
144
  </Modal>
123
145
 
146
+ // Card compound component
124
147
  <Card>
125
- <Card.Title>...</Card.Title> // ✅ Dot notation
126
- <Card.Body>...</Card.Body> // ✅ Dot notation
148
+ <Card.Title>Card Title</Card.Title>
149
+ <Card.Body>Card body content</Card.Body>
127
150
  </Card>
128
151
 
152
+ // InputField compound component
129
153
  <InputField id="email">
130
- <InputField.Label>...</InputField.Label> // ✅ Dot notation
154
+ <InputField.Label>Email</InputField.Label>
131
155
  <InputField.Row style={{ marginTop: '8px' }}>
132
- <InputField.Input /> // ✅ Dot notation
156
+ <InputField.Input type="email" />
133
157
  </InputField.Row>
134
158
  </InputField>
159
+
160
+ // Accordion compound component
161
+ <Accordion>
162
+ <Accordion.Item id="section1">
163
+ <Accordion.Header>Section 1</Accordion.Header>
164
+ <Accordion.Panel>Content for section 1</Accordion.Panel>
165
+ </Accordion.Item>
166
+ <Accordion.Item id="section2">
167
+ <Accordion.Header>Section 2</Accordion.Header>
168
+ <Accordion.Panel>Content for section 2</Accordion.Panel>
169
+ </Accordion.Item>
170
+ </Accordion>
171
+
172
+ // TextStyle - use sub-components for different sizes
173
+ <TextStyle.Rainier>Default body text (16px)</TextStyle.Rainier>
174
+ <TextStyle.Everest>Larger text (14px)</TextStyle.Everest>
175
+ <TextStyle.Blanc>Heading text (24-28px)</TextStyle.Blanc>
176
+ <TextStyle.Snowdon>Small caption text (12px)</TextStyle.Snowdon>
135
177
  ```
136
178
 
137
179
  ---
@@ -276,7 +318,7 @@ Many GDS components use the **compound component pattern**. Sub-components are a
276
318
  | Modal | `.Header`, `.Title`, `.Content`, `.Description`, `.Image`, `.CloseButton`, `.Actions` |
277
319
  | Card | `.Title`, `.Body` |
278
320
  | InputField | `.Label`, `.Row`, `.Input`, `.Textarea`, `.Select`, `.Checkbox`, `.Radio`, `.StartIcon`, `.EndIcon`, `.Validation` |
279
- | Accordion | `.Item`, `.Toggle`, `.Content` |
321
+ | Accordion | `.Item`, `.Header`, `.Panel` |
280
322
 
281
323
  ---
282
324
 
@@ -392,7 +434,7 @@ const ButtonRow = styled.div`
392
434
  | `Card` | Content containers with `.Title` and `.Body` |
393
435
  | `Modal` | Overlay dialogs with `.Header`, `.Title`, `.Content`, `.Description`, `.Actions` |
394
436
  | `SidePanel` | Slide-in panels for supplementary content |
395
- | `Accordion` | Collapsible content sections with `.Item`, `.Toggle`, `.Content` |
437
+ | `Accordion` | Collapsible content sections with `.Item`, `.Header`, `.Panel` |
396
438
  | `Header` | Page header with logo |
397
439
  | `Footer` | Page footer |
398
440
  | `BrandLogo` | Ticketmaster brand logo |
@@ -442,13 +484,13 @@ const ButtonRow = styled.div`
442
484
 
443
485
  ### Typography Components
444
486
 
445
- | Component | Purpose |
446
- | ---------------- | ---------------------------- |
447
- | `DisplayHeading` | Hero/display text (beta) |
448
- | `TitleHeading` | Page titles |
449
- | `SectionHeading` | Section headers (deprecated) |
450
- | `TextStyle` | Pre-styled text components |
451
- | `Link` | Styled hyperlinks |
487
+ | Component | Purpose |
488
+ | ---------------- | -------------------------------------------------------------------------- |
489
+ | `DisplayHeading` | Hero/display text (beta) |
490
+ | `TitleHeading` | Page titles |
491
+ | `SectionHeading` | Section headers (deprecated) |
492
+ | `TextStyle` | Text styles namespace - use `TextStyle.Rainier`, `TextStyle.Everest`, etc. |
493
+ | `Link` | Styled hyperlinks |
452
494
 
453
495
  ### Timer Components
454
496
 
@@ -507,7 +549,7 @@ function Page() {
507
549
  <TitleHeading>Welcome</TitleHeading>
508
550
  <Card>
509
551
  <Card.Body>
510
- <TextStyle>Content goes here</TextStyle>
552
+ <TextStyle.Rainier>Content goes here</TextStyle.Rainier>
511
553
  <Button colorVariant="primary">Get Started</Button>
512
554
  </Card.Body>
513
555
  </Card>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jamesodwyer/gds-figma-vite",
3
- "version": "2.0.11",
3
+ "version": "2.0.12",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },