TypeScript Web Components with Form Submission
npm install touchpoints-wcA 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.
``bash`
npm install touchpoints-wc
Import and use the component in your HTML:
`html`
Or import in JavaScript/TypeScript:
`javascript
import 'touchpoints-wc';
// Component is now available as
`
- 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
| 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 |
You can customize the icons by providing your own content in these slots:
`html`
html
`$3
`html
form-id="abc123"
yes-label="Helpful"
no-label="Not helpful">
`$3
`html
👍
👎
`
Development
`bash
Install dependencies
pnpm installDevelopment mode with hot reload
pnpm devBuild for production
pnpm buildLint 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:versionBuild and publish to npm
pnpm changeset:publish
``- 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