{"id":45775804,"url":"https://github.com/ongov/ontario-design-system","last_synced_at":"2026-04-02T22:00:28.708Z","repository":{"id":261113134,"uuid":"739532217","full_name":"ongov/ontario-design-system","owner":"ongov","description":"Web components and npm packages for the Ontario Design System, designed to help you create great digital products for the Ontario government.","archived":false,"fork":false,"pushed_at":"2026-03-31T17:56:10.000Z","size":57997,"stargazers_count":9,"open_issues_count":22,"forks_count":1,"subscribers_count":0,"default_branch":"develop","last_synced_at":"2026-03-31T19:38:36.867Z","etag":null,"topics":["angular","component-library","design-system","design-systems","design-tokens","ontario-design-system","react","web-components"],"latest_commit_sha":null,"homepage":"https://designsystem.ontario.ca/developer-docs/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ongov.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-05T19:48:42.000Z","updated_at":"2026-03-17T19:12:45.000Z","dependencies_parsed_at":"2024-12-09T22:30:03.497Z","dependency_job_id":"64f2a1ce-1fb2-4b70-8577-9525f46cb4c6","html_url":"https://github.com/ongov/ontario-design-system","commit_stats":null,"previous_names":["ongov/ods-web-components","ongov/ontario-design-system"],"tags_count":93,"template":false,"template_full_name":null,"purl":"pkg:github/ongov/ontario-design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongov%2Fontario-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongov%2Fontario-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongov%2Fontario-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongov%2Fontario-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ongov","download_url":"https://codeload.github.com/ongov/ontario-design-system/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ongov%2Fontario-design-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31317830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T21:35:00.834Z","status":"ssl_error","status_checked_at":"2026-04-02T21:34:59.806Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","component-library","design-system","design-systems","design-tokens","ontario-design-system","react","web-components"],"created_at":"2026-02-26T09:40:02.687Z","updated_at":"2026-04-02T22:00:28.687Z","avatar_url":"https://github.com/ongov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![A depiction of the lower peddle of the Ontario Trillium logo, stylized in the colours of the Ontario Design System](readme-assets/ods-hero-banner.png 'Ontario Design System Hero Banner')\n\n# Ontario Design System Components\n\n[![Node.js](https://img.shields.io/badge/node-22.22.0-339933?logo=node.js\u0026logoColor=white)](./.nvmrc)\n[![pnpm](https://img.shields.io/github/package-json/packageManager/ongov/ontario-design-system?label=pnpm\u0026logo=pnpm\u0026logoColor=white)](https://pnpm.io/)\n[![Stencil](https://img.shields.io/github/package-json/dependency-version/ongov/ontario-design-system/%40stencil%2Fcore?filename=packages/ontario-design-system-component-library/package.json\u0026label=stencil\u0026logo=stencil)](https://stenciljs.com/)\n[![TypeScript](https://img.shields.io/github/package-json/dependency-version/ongov/ontario-design-system/dev/typescript?filename=packages/ontario-design-system-component-library/package.json\u0026label=typescipt\u0026logo=typescript)](https://www.typescriptlang.org/)\n\nThis project contains the Ontario Design System Web Components and npm packages.\n\nWeb Components provide strong encapsulation for reusable components that can be integrated into web applications.\n\nTool versions are standardized at the repo root: Node via [`.nvmrc`](./.nvmrc), and package manager/engine ranges via [`package.json`](./package.json).\n\n## Documentation\n\nThe Ontario Design System components are an implementation of the best practices of the Ontario Design System.\n\n- Visit our [Component Developer Documentation](https://designsystem.ontario.ca/developer-docs/) for more information about the npm packages and each available component.\n- Visit our [Ontario Design System Guidance](https://designsystem.ontario.ca/) for more information about the Ontario Design System, our best practices, and other design system features.\n\n## Built using Stencil\n\n[Stencil](https://stenciljs.com) is _a toolchain for building reusable, scalable Design Systems._\n\nLearn more in the [Stencil Docs](https://stenciljs.com/docs/introduction).\n\n## Quick Start\n\nUsing [Lerna](https://github.com/lerna/lerna), this project is made up of multiple packages that are linked together, called a _monorepo_. Lerna takes care of bootstrapping the packages within this repository together with their dependencies. It will install the `node_modules` for each package, then link the internal project packages together.\n\nThe fastest way to hit the ground running is to run,\n\n```bash\npnpm install # Install the root packages\npnpm run refresh # Ready the project for development\n```\n\n_Note_: The `refresh` script encompass cleaning, bootstrapping, and building of all the core Ontario Design System npm packages within the repository.\n\n## Detailed Start\n\n### Installing Lerna\n\nFirstly, Lerna needs to be installed at the root level of the project.\n\nAt the repository root run,\n\n```bash\npnpm install\n```\n\n### Building `ontario-design-system` Packages\n\nThe `ontario-design-system` packages are all designed to be published as npm packages. In order to do any development, or to just build the project in general, the packages have to be built/updated before they can be used.\n\nSimply run at the root of the repository,\n\n```bash\npnpm run build-libs\n```\n\nThis will build the packages that are marked as public and prep them for use with any app.\n\n### Next Steps\n\nCheckout each package in the [`packages`](#packages) folder. They each have their own Readme and instructions on how to get started.\n\n## Packages\n\nThis project is made up of five packages.\n\n### `ontario-design-system-design-tokens`\n\n#### Building the Library\n\nWanting to build and test within one of the framework applications? Running the [`build-libs`](#building-ontario-design-system-packages) script from the root triggers this behaviour.\n\nThe library can be built independently by running,\n\n```bash\npnpm run build\n```\n\n### `ontario-design-system-global-styles`\n\n_Content coming soon._\n\n#### Building the Library\n\nWanting to build and test within one of the framework applications? Running the [`build-libs`](#building-ontario-design-system-packages) script from the root triggers this behaviour.\n\nThe library can be built independently by running,\n\n```bash\npnpm run build\n```\n\n### `ontario-design-system-component-library`\n\nThe `ontario-design-system-component-library` is the heart of the project, it contains each of the the custom web components. It uses the Stencil toolchain to allow for easy creation and compilation of custom components.\n\nThe build process of this library emits npm package compatible packages as well as component libraries for other JavaScript UI Frameworks.\n\n#### Building the Library\n\nWanting to build and test within one of the framework applications? Running the [`build-libs`](#building-ontario-design-system-packages) script from the root triggers this behaviour.\n\nThe library can be built independently by running,\n\n```bash\npnpm run build\n```\n\n#### Component Development\n\nThe project contains an HTML file called `index.html` that is immediately loaded when the development server is started it. It is a simple place to stage a component for development.\n\nA development server can be run by running,\n\n```bash\npnpm run start\n```\n\n##### Generating a New Component\n\nStencil CLI can generate a new component within the `src/components` folder. With the `ontario-design-system-component-library` being your current directory run,\n\n```bash\nstencil generate name-of-component\n```\n\nIf you don't have `stencil` installed globally, prefix the command with `npx`,\n\n```bash\nnpx stencil generate name-of-component\n```\n\n### `ontario-design-system-component-library-react`\n\nThe `ontario-design-system-component-library-react` package is a React wrapper for custom web components generated by the `ontario-design-system-component-library`. It handles all the boilerplate code to wrap the components for import into any React app. Material emitted from the `ontario-design-system-component-library` build process is injected into this process every time there is a new build made within that package.\n\nSee the [Stencil Docs on React](https://stenciljs.com/docs/react) for more information.\n\n_Note: This library doesn't currently support Next.js Server-Side Rendering. For now, use `use client` in wrappers around the components._\n\n#### Building the Library\n\nWanting to build and test within one of the framework applications? Running the [`build-libs`](#building-ontario-design-system-packages) script from the root triggers this behaviour.\n\nThe library can be built independently by running,\n\n```bash\npnpm run build\n```\n\n### `ontario-design-system-component-library-angular`\n\nThe `ontario-design-system-component-library-angular` package is a Angular wrapper for custom web components generated by the `ontario-design-system-component-library`. It handles all the boilerplate code to wrap the components for import into any React app. Material emitted from the `ontario-design-system-component-library` build process is injected into this process every time there is a new build made within that package.\n\nSee the [Stencil Docs on Angular](https://stenciljs.com/docs/angular) for more information.\n\n#### Building the Library\n\nWanting to build and test within one of the framework applications? Running the [`build-libs`](#building-ontario-design-system-packages) script from the root triggers this behaviour.\n\nThe library can be built independently by running,\n\n```bash\npnpm run build\n```\n\n### `app-react`\n\nA React frontend to show off the whole process, from `ontario-design-system-component-library` components to React components. It is a simple [Create React App](https://github.com/facebook/create-react-app) application and demos the simplicity of using the generated components.\n\n#### Running the App for Development\n\nThe application can be run in development by running,\n\n```bash\npnpm run start\n```\n\n#### Building the App for Production\n\nThe application can be build for production by running,\n\n```bash\npnpm run build\n```\n\n### `app-angular`\n\nAn Angular frontend to show off the whole process, from `ontario-design-system-component-library` components to Angular components. It is a simple Angular application and demos the simplicity of using the generated components.\n\n#### Running the App for Development\n\nThe application can be run in development by running,\n\n```bash\npnpm run start\n```\n\n#### Building the App for Production\n\nThe application can be build for production by running,\n\n```bash\npnpm run build\n```\n\n### `app-web-components-documentation`\n\nBuilt using [Docusaurus](https://docusaurus.io/), this package contains the React based documentation platform for easy deployment of the npm package and web components component documentation.\n\n#### Running the App for Development\n\nThe documentation is sourced from the npm packages Readme files, as well as the Readme files of each component. To populate the documentation see the [Quick Start](#quick-start) section or each package section about building the package.\n\nTo update the documentation, simply rebuild the libraries and then re-run the development server.\n\nThe application can be run in development by running,\n\n```bash\npnpm run start\n```\n\nThis will start a development server that can be used to test out changes to the documentation.\n\n#### Building the App for Production\n\nThe application can be build for production by running,\n\n```bash\npnpm run build\n```\n\n## Package/Project Clean-up\n\nEach package, as well as the root of the repository, contain `package.json` scripts to clean up each package/project.\n\n### `clean`\n\nThe `clean` script is used to clean up any build artefacts that might be produced. It should not touch any installed dependencies and is good for making sure the builds build cleanly. Try this is you're running into any weird, non package related build issues.\n\nIn any project, or at the root of the repository run,\n\n```bash\npnpm run clean\n```\n\nIf run at the root of the repository Lerna will execute each package's `clean` script, allowing the entire project to be cleaned up.\n\n### `clean:full`\n\nThe `clean:full` script is used to clean any build artefacts as well as nuke the package's `node_modules` folder. For a non module clean see [`clean`](#clean).\n\nIn any project, or at the root of the repository run,\n\n```bash\npnpm run clean:full\n```\n\nIf run at root this will run the `clean:full` script on each package, which will clean build artefacts and nuke the `node_modules` directory. _The root level `node_modules` directory will not be touched._ This makes sure that Lerna is left around.\n\n## Testing\n\n- Run all tests across the monorepo:\n\n```bash\npnpm run test:e2e # Runs all e2e tests across monorepo\npnpm run test:unit # Runs all unit tests across monorepo\n```\n\n## Common Issues \u0026 Troubleshooting\n\n- **Dependency issues:** Clear lockfile or `node_modules` if needed\n- **Permission issues:** Ensure PNPM is correctly installed and configured\n- **Build/test failures:** Check logs for specific errors and verify that dependencies are correctly installed\n\n## Resources\n\nHere are some helpful resources one can use to learn more.\n\n- [Ontario Design System Guidance](https://designsystem.ontario.ca/)\n- [Ontario Design System Developer Documentation](https://designsystem.ontario.ca/developer-docs/)\n- [Stencil](https://stenciljs.com/)\n- [webcomponents.org](https://www.webcomponents.org/)\n- [MDN: Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)\n- [ReactJS: Web Components](https://reactjs.org/docs/web-components.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fongov%2Fontario-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fongov%2Fontario-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fongov%2Fontario-design-system/lists"}