# AGENTS.md — components-web

> Web-only React components built with styled-components on top of components-base.

## Package

`@telus-uds/components-web` — 40+ web components in `src/`.
Imports base utilities from `@telus-uds/components-base`.
Entry point includes `'use client'` directive for Next.js compatibility.

## Component pattern

See [`.claude/rules/package-source.instructions.md`](../../.claude/rules/package-source.instructions.md) for the full pattern, including the web-specific section on importing base utilities and styled-components usage.

## Transient props (critical)

**Always use `$` prefix** for styled-components props to prevent DOM leakage:

- `$background` not `background`
- `$padding` not `padding`
- `$isOpen` not `isOpen`

Without the `$` prefix, React passes unknown props to the DOM → `console.error` → test fails.

## File structure

Same as components-base: `src/MyComponent/MyComponent.jsx` + `index.js`.
`src/index.js` — All named exports, no defaults.

## Testing

- Renderer: `@testing-library/react` (NOT `react-native`)
- **Always wrap in `<Theme>`**: `import { Theme } from '../../__fixtures__/Theme'`
- **jest-axe required** for accessibility in every test
- `jest-fail-on-console` active — `console.error` fails tests (`console.warn` currently allowed); avoid both

## Jest

```bash
pnpm test --selectProjects components-web
```

## Formatting

See root [`.prettierrc.cjs`](../../.prettierrc.cjs) and run `pnpm run lint:fix`.

## Lint

See [`packages/components-web/.eslintrc.cjs`](.eslintrc.cjs) (extends root config).