@jamesodwyer/gds-figma-vite 2.0.7 → 2.0.9

package/guidelines/Guidelines.md

@@ -3,6 +3,17 @@
 > **IMPORTANT FOR AI AGENTS**: This is the entry point for AI-assisted design-to-code generation.
 > Read this entire document before generating any code.
 
+## ⚠️ CRITICAL: Props That Cause Errors
+
+**DO NOT use these props - they cause React DOM warnings:**
+
+| DO NOT USE | USE INSTEAD |
+|------------|-------------|
+| `<InputField.Row marginTop="...">` | `<InputField.Row style={{ marginTop: '8px' }}>` |
+| `<Stack marginTop="...">` | `<Stack style={{ marginTop: '8px' }}>` |
+
+Always use inline `style` prop for margins instead of custom margin props.
+
 ## Package Information
 
 - **Package Name**: `@jamesodwyer/gds-figma-vite`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jamesodwyer/gds-figma-vite",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "publishConfig": {
     "access": "public"
   },

package/guidelines/guidelines-template.md

@@ -1,399 +0,0 @@
-# Ticketmaster Global Design System (GDS) - AI Guidelines
-
-> **FOR AI AGENTS**: This is the entry point for the GDS design system.
-
-## Important: Full Documentation Location
-
-The complete component documentation, design tokens, and usage guidelines are available in the `@jamesodwyer/gds-figma-vite` npm package under the `guidelines/` folder:
-
-- `guidelines/Guidelines.md` - Full documentation entry point
-- `guidelines/components/` - Detailed docs for each component
-- `guidelines/design-tokens/` - Colors, spacing, typography, elevation
-- `guidelines/overview-components.md` - Component overview
-- `guidelines/overview-icons.md` - Icons and stickers
-
-**When generating code, reference the guidelines from the npm package for the most accurate and complete information.**
-
-## Package Information
-
-- **Package**: `@jamesodwyer/gds-figma-vite`
-- **Framework**: React 18+ with styled-components
-- **Themes**: TM (Ticketmaster/blue), LN (Live Nation/red)
-
----
-
-## REQUIRED: GdsProvider Wrapper
-
-Every application MUST wrap components with `GdsProvider`:
-
-```tsx
-import { GdsProvider, Button } from '@jamesodwyer/gds-figma-vite';
-
-function App() {
-  return (
-    <GdsProvider theme="TM">
-      <Button colorVariant="primary">Click Me</Button>
-    </GdsProvider>
-  );
-}
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| theme | 'TM' \| 'LN' | 'TM' | Brand theme |
-| includeGlobalStyles | boolean | true | Include global CSS |
-
----
-
-## CRITICAL: Compound Component Pattern
-
-Many GDS components use **dot notation** for sub-components. These are NOT separate imports.
-
-### Correct Usage
-
-```tsx
-// CORRECT - Use dot notation
-<Modal>
-  <Modal.Header>
-    <Modal.Title>Title</Modal.Title>
-    <Modal.CloseButton label="Close" />
-  </Modal.Header>
-  <Modal.Content>
-    <Modal.Description>Content here</Modal.Description>
-  </Modal.Content>
-  <Modal.Actions>
-    <Button colorVariant="secondary">Cancel</Button>
-    <Button colorVariant="primary">Confirm</Button>
-  </Modal.Actions>
-</Modal>
-
-<Card>
-  <Card.Title>Card Title</Card.Title>
-  <Card.Body>Card content</Card.Body>
-</Card>
-
-<InputField id="email">
-  <InputField.Label>Email</InputField.Label>
-  <InputField.Row style={{ marginTop: '8px' }}>
-    <InputField.Input type="email" />
-  </InputField.Row>
-</InputField>
-```
-
-### Components with Sub-components
-
-| Component | Sub-components (use dot notation) |
-|-----------|-----------------------------------|
-| `Modal` | `.Header`, `.Title`, `.Content`, `.Description`, `.Image`, `.CloseButton`, `.Actions` |
-| `Card` | `.Title`, `.Body` |
-| `InputField` | `.Label`, `.Row`, `.Input`, `.Textarea`, `.Select`, `.Checkbox`, `.Radio`, `.StartIcon`, `.EndIcon`, `.Validation` |
-| `Accordion` | `.Item`, `.Toggle`, `.Content` |
-
----
-
-## CRITICAL: Components That DO NOT Exist
-
-> **WARNING**: These components are NOT in GDS. Do NOT use them.
-
-| DO NOT USE | Use Instead |
-|------------|-------------|
-| `ButtonGroup` | `<div style={{display:'flex',gap:'8px'}}>` or styled div |
-| `CardContent` | Put content directly in `Card.Body` |
-| `CardHeader` | Use `Card.Title` |
-| `CardActions` | Put buttons in `Card.Body` |
-| `ModalDescription` | Use `Modal.Description` (dot notation) |
-| `ModalHeader` | Use `Modal.Header` (dot notation) |
-| `ModalBody` | Use `Modal.Content` (dot notation) |
-| `ModalFooter` | Use `Modal.Actions` (dot notation) |
-| `FormControl` | Use `InputField` |
-| `FormLabel` | Use `InputField.Label` |
-| `Grid` | Use CSS Grid or styled div |
-| `Box` | Use styled div |
-| `Container` | Use styled div |
-| `Typography` | Use `TextStyle` |
-| `Divider` | Use styled hr or div |
-| `Snackbar` | Use `Toast` |
-| `Dialog` | Use `Modal` |
-| `Drawer` | Use `SidePanel` |
-
-### Button Row Example (Instead of ButtonGroup)
-
-```tsx
-// For horizontal button layouts:
-<div style={{ display: 'flex', gap: '8px' }}>
-  <Button colorVariant="secondary">Cancel</Button>
-  <Button colorVariant="primary">Confirm</Button>
-</div>
-```
-
----
-
-## Available Components
-
-### Layout
-- `Card` - Container with `.Title`, `.Body`
-- `Modal` - Dialog with `.Header`, `.Title`, `.Content`, `.Description`, `.CloseButton`, `.Actions`
-- `SidePanel` - Slide-in panel
-- `Accordion` - Collapsible sections
-- `Header` - Page header
-- `Footer` - Page footer
-
-### Buttons
-- `Button` - Primary button (colorVariant: 'primary' | 'secondary' | 'tertiary')
-- `CircleButton` - Circular icon button
-- `SquareButton` - Square icon button
-- `PillButton` - Pill-shaped button
-
-### Form Inputs
-- `InputField` - Compound form input (see sub-components above)
-- `TextInput` - Simple text input
-- `TextArea` - Multi-line input
-- `Checkbox` - Boolean selection
-- `RadioButton` - Single selection
-- `SelectInput` - Dropdown
-- `ToggleSwitch` - On/off switch
-- `PasswordInput` - Password with toggle
-- `PhoneNumber` - Phone with country code
-- `DateOfBirth` - Date input
-- `CountryPicker` - Country dropdown
-- `Stepper` - Increment/decrement
-
-### Feedback
-- `Toast` - Temporary notification
-- `AlertBox` - Inline alert (status: 'info' | 'success' | 'warning' | 'danger')
-- `LoadingSpinner` - Loading indicator
-- `Skeleton` - Loading placeholder
-- `ErrorMessage` - Error text
-- `SuccessMessage` - Success text
-- `Badge` - Status label
-- `Tooltip` - Hover tooltip
-
-### Typography
-- `TextStyle` - Styled text spans
-- `TitleHeading` - Page titles
-- `DisplayHeading` - Hero text
-- `Link` - Styled links
-
----
-
-## Spacing Tokens
-
-Use spacing tokens instead of pixel values:
-
-```tsx
-import { spacing } from '@jamesodwyer/gds-figma-vite';
-```
-
-| Token | Value | Usage |
-|-------|-------|-------|
-| `spacing.lounge` | 4px | Tight spacing, icon gaps |
-| `spacing.club` | 8px | Small gaps |
-| `spacing.hall` | 12px | Small padding |
-| `spacing.auditorium` | 16px | Default padding |
-| `spacing.theatre` | 20px | Medium spacing |
-| `spacing.amphitheatre` | 24px | Large padding |
-| `spacing.arena` | 32px | Section spacing |
-| `spacing.stadium` | 48px | Large sections |
-| `spacing.dome` | 64px | Page sections |
-| `spacing.field` | 88px | Hero spacing |
-
-```tsx
-import styled from 'styled-components';
-import { spacing } from '@jamesodwyer/gds-figma-vite';
-
-const Container = styled.div`
-  padding: ${spacing.auditorium};
-  gap: ${spacing.club};
-  margin-bottom: ${spacing.arena};
-`;
-```
-
----
-
-## Typography (textStyle)
-
-Use `textStyle` for consistent typography:
-
-```tsx
-import { textStyle } from '@jamesodwyer/gds-figma-vite';
-```
-
-| Style | Size | Weight | Usage |
-|-------|------|--------|-------|
-| `textStyle.mauna` | 44-54px | 700 | Hero displays |
-| `textStyle.everest` | 32-44px | 700 | Page titles |
-| `textStyle.kilimanjaro` | 24-32px | 700 | Section headers |
-| `textStyle.matterhorn` | 24-28px | 700 | Large headings |
-| `textStyle.vinson` | 22-24px | 700 | Subheadings |
-| `textStyle.blanc` | 18-20px | 700 | Small headers |
-| `textStyle.fiji` | 18px | 600 | Emphasized body |
-| `textStyle.rainier` | 16px | 400 | Body text (default) |
-| `textStyle.etna` | 14px | 400 | Small text |
-| `textStyle.snowdon` | 12px | 600 | Labels/captions |
-
-```tsx
-import styled from 'styled-components';
-import { textStyle } from '@jamesodwyer/gds-figma-vite';
-
-const Title = styled.h1`
-  ${textStyle.everest}
-`;
-
-const Body = styled.p`
-  ${textStyle.rainier}
-`;
-```
-
----
-
-## Elevation (Shadows)
-
-```tsx
-import { elevation } from '@jamesodwyer/gds-figma-vite';
-```
-
-| Level | Usage |
-|-------|-------|
-| `elevation.level0` | Default (no shadow) |
-| `elevation.level1` | Cards, content blocks |
-| `elevation.level2` | Sticky headers |
-| `elevation.level3` | Multiple sticky elements |
-| `elevation.level4` | Modals, dialogs |
-
-```tsx
-const Card = styled.div`
-  ${elevation.level1}
-  background: white;
-`;
-```
-
----
-
-## Theme Colors
-
-Access colors through theme props:
-
-```tsx
-const Component = styled.div`
-  background: ${props => props.theme.base.bg};
-  color: ${props => props.theme.text.primary};
-  border-color: ${props => props.theme.base.border};
-
-  &.error { color: ${props => props.theme.status.danger}; }
-  &.success { color: ${props => props.theme.status.success}; }
-`;
-```
-
-### Theme Color Categories
-- `theme.base.primary` - Brand primary color
-- `theme.base.bg` - Background
-- `theme.base.border` - Border color
-- `theme.text.primary` - Primary text
-- `theme.text.secondary` - Secondary text
-- `theme.status.success` - Success green
-- `theme.status.danger` - Error red
-- `theme.status.warning` - Warning yellow
-
----
-
-## Icons
-
-Import icons directly:
-
-```tsx
-import { HeartIcon, CheckmarkIcon, CloseIcon } from '@jamesodwyer/gds-figma-vite';
-
-// Usage
-<HeartIcon size="24" />
-<Button startIcon={<CheckmarkIcon />}>Confirm</Button>
-```
-
-Icon props: `size` (string like "24" or "1.5rem"), `fillColor` (optional)
-
----
-
-## Button Props
-
-```tsx
-<Button
-  colorVariant="primary"    // 'primary' | 'secondary' | 'tertiary'
-  fullWidth={false}         // boolean
-  disabled={false}          // boolean
-  startIcon={<Icon />}      // ReactNode
-  endIcon={<Icon />}        // ReactNode
-  onClick={() => {}}        // function
->
-  Button Text
-</Button>
-```
-
----
-
-## Modal Props
-
-```tsx
-<Modal
-  isOpen={true}                    // boolean
-  onClose={() => setOpen(false)}   // function (required)
-  ariaLabel="Modal title"          // string (required)
-  mobileMaxViewportWidth="768px"   // string (required)
-  role="dialog"                    // 'dialog' | 'alertdialog'
-  size="standard"                  // 'standard' | 'large'
-  variant="default"                // 'default' | 'danger'
->
-  <Modal.Header>
-    <Modal.Title>Title</Modal.Title>
-    <Modal.CloseButton label="Close modal" />
-  </Modal.Header>
-  <Modal.Content>
-    <Modal.Description>Content</Modal.Description>
-  </Modal.Content>
-  <Modal.Actions>
-    <Button colorVariant="secondary">Cancel</Button>
-    <Button colorVariant="primary">Confirm</Button>
-  </Modal.Actions>
-</Modal>
-```
-
----
-
-## InputField Props
-
-```tsx
-<InputField id="fieldId">  {/* id is required */}
-  <InputField.Label>Label Text</InputField.Label>
-  <InputField.Row style={{ marginTop: '8px' }}>
-    <InputField.Input
-      type="text"           // 'text' | 'email' | 'password' | etc.
-      placeholder="..."
-      isErrored={false}     // boolean - shows error styling
-    />
-  </InputField.Row>
-  <InputField.Validation
-    type="error"            // 'error' | 'success'
-    screenReaderErrorPrefix="Error:"
-  >
-    Error message here
-  </InputField.Validation>
-</InputField>
-```
-
-> **Note**: Use inline `style={{ marginTop: '8px' }}` instead of the `marginTop` prop to avoid React DOM warnings.
-
----
-
-## Code Generation Rules
-
-### DO:
-- Wrap with `GdsProvider`
-- Use compound component syntax (`Modal.Header`, `Card.Body`)
-- Use spacing tokens (`spacing.auditorium`)
-- Use textStyle for typography
-- Use theme colors (`props.theme.base.primary`)
-
-### DO NOT:
-- Import sub-components separately (use dot notation)
-- Use components that don't exist (ButtonGroup, CardContent, etc.)
-- Hardcode hex colors
-- Hardcode pixel values for spacing
-- Skip the GdsProvider wrapper