touchpoints-wc

A TypeScript web component built with Lit for collecting yes/no feedback using Touchpoints forms. Features accessible design following USWDS standards with built-in icons and customizable styling.

Installation

``bash
npm install touchpoints-wc
`

Usage

Import and use the component in your HTML:

`html

`

Or import in JavaScript/TypeScript:

`javascript
import 'touchpoints-wc';

// Component is now available as
`

Features

- Accessible: WCAG compliant with proper focus management and ARIA attributes
- Customizable: Override icons and labels via attributes or slots
- Responsive: Works on all screen sizes
- TypeScript: Full TypeScript support with type definitions
- Lightweight: ~6KB gzipped, no external dependencies except Lit
- Shadow DOM: Encapsulated styling prevents CSS conflicts

Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| form-id | string | required | The ID of the Touchpoints form to submit feedback to |
| yes-label | string | "Yes" | Custom label for the positive feedback button |
| no-label | string | "No" | Custom label for the negative feedback button |

Slots

You can customize the icons by providing your own content in these slots:

`html




`

Examples

$3


`html

`

$3

`html
form-id="abc123"
yes-label="Helpful"
no-label="Not helpful">

`

$3

`html

👍
👎

`

Development

`bash


Install dependencies

pnpm install

Development mode with hot reload

pnpm dev

Build for production

pnpm build

Lint package for npm publishing

pnpm publint
`

Release Management

This project uses Changesets for version management and publishing. Changesets help maintain semantic versioning and generate changelogs automatically.

$3

When you make changes that should trigger a release, create a changeset:

`bash


Create a new changeset


pnpm changeset
`

This will prompt you to:
1. Select which packages have changed (for monorepos)
2. Choose the type of change:
- patch: Bug fixes, small improvements
- minor: New features, backwards compatible changes
- major: Breaking changes
3. Write a summary of the changes

$3

The release process is automated via GitHub Actions:

1. During Development: Create changesets for your changes
2. Release PR: When changesets are merged to main, a "Release PR" is automatically created
3. Publishing: Merging the Release PR will:
- Update versions in package.json
- Generate/update CHANGELOG.md
- Create a GitHub release
- Publish to npm

$3

For manual releases or testing:

`bash


Update package versions based on changesets

pnpm changeset:version

Build and publish to npm

pnpm changeset:publish
``

Technical Details

- Built with Lit for reactive web components
- Styled with UnoCSS using USWDS design system
- Compiled with tsdown for optimal bundle size
- Type definitions included for TypeScript projects