A collection of reusable web components that extend the Government of Canada Design System (GCDS) with additional functionality for Canada.ca managed web services.
Built with Stencil, the library produces framework-agnostic Web Components that can be used in static sites, CMS platforms, and modern JavaScript frameworks.
- Framework-agnostic Web Components
- Built with Stencil
- Shadow DOM encapsulation
- TypeScript support
- Accessibility-first development
- Automated component documentation
- Eleventy-powered documentation site
- Bilingual documentation support (English and French)
- Compatible with GCDS components
- Node.js 22 or later
- npm 10 or later
Clone the repository:
git clone https://github.com/ServiceCanada/gcds-ext-canada.git
cd gcds-ext-canadaInstall dependencies:
npm installStart the component library and documentation site in watch mode:
npm startThis command:
- Rebuilds Stencil components when source files change
- Regenerates documentation pages
- Serves the Eleventy documentation site locally
Build the component library:
npm run buildBuild the component library and documentation site:
npm run docs:buildBuild and launch the documentation site locally:
npm run docs:serveDocumentation is generated using Eleventy and includes:
- Component overview
- Live examples
- Usage guidance
- Properties
- Events
- Slots
- Accessibility considerations
- Source code examples
Component API metadata is generated directly from the Stencil source to ensure documentation remains synchronized with implementation.
After building the project, load the generated component bundle:
<script type="module" src="/build/gcds-ext-mws.esm.js"></script>Accessibility is a core requirement for all components.
Components are designed to:
- Support keyboard navigation
- Provide appropriate ARIA semantics
- Work with assistive technologies
- Follow WCAG guidance where applicable
- Align with Government of Canada accessibility requirements
Contributions are welcome.
Before submitting a pull request:
- Create or update documentation.
- Add or update tests.
- Verify accessibility requirements.
- Ensure all builds and tests pass.
MIT