Skip to content

Home

Jump to bottom
Airike Jaska edited this page Dec 10, 2025 · 35 revisions

tedi-design-system aka TEDI

TEDI is an open-source design system used in TEHIK. Its goal is to provide a toolkit and building blocks for TEHIK partners, designers, developers, product owners, etc. It follows VEERA guidelines. TEDI includes specific components for designers and implements React and Angular components for developers. As a result, the provided solution saves development time.

TEDI contains two sets of components: community and TEDI (TEDI-READY). The community set is driven by the community and resolves special use cases, while the TEDI set ensures stability and quality, focusing on basic components.

Using TEDI Component Libraries

React installation

npm i @tedi-design-system/react

Include styles

import "@tedi-design-system/react/index.css";

Import components:

import { Button } from "@tedi-design-system/react/tedi";

Angular installation

npm i @tedi-design-system/angular

Include styles to angular.json or project.json:

"styles": [
  "node_modules/@tedi-design-system/angular/index.css"
]

Import components

import { ButtonComponent } from "@tedi-design-system/angular/community";

References

Development

Contributor Workflow

  1. Open an issue in GitHub. Add information what are you planning to do, for example propose component API, libraries that are planned to use etc.
  2. Fork the GitHub repository.
    • Under your forked repository, go to Settings → Pages:
      • Under "Build and deployment," set the "Source" field to GitHub Actions.
      • Enable Actions under the Actions tab.
      • Create a new environment named github-pages under Environments:
        • Ensure No restriction is selected under "Deployment branches and tags."
  3. Make changes and create a pull request against the rc branch in the origin repository.
  4. For changes to TEDI components, deploy your component in the test environment (GitHub Pages):
    • Deployment is automated via the "Continuous Deployment" GitHub Actions workflow.
    • If Actions were enabled before commits, the deployment should run automatically. Otherwise, run the workflow manually:
      • In the sidebar, select "Continuous Deployment" and click "Run workflow."
    • Monitor the progress under "Continuous Deployment" and copy the generated GitHub Pages link once the "Deploy" step completes.
    • Add the link to your pull request for review.

Maintainer Workflow

  1. Open an issue in GitHub.
  2. Create a new branch for your work.
  3. Make changes and create a pull request against the rc branch.
  4. Another maintainer will review and merge the pull request. The feature is then ready for use in the pre-release version.

TEDI-READY vs Community components

Description of difference between components can be found here https://github.com/TEDI-Design-System/general/wiki/Architecture#community-components

If Community would like to add extra value for creating Components that are as much as TEDI-READY compatible as possible, please follow this Definition of Done: https://github.com/TEDI-Design-System/general/wiki/Definition-of-Done#community-components

There will be always extra step (i.e validation and documentation) that needs to be done by TEDI team, but still you can be helpful.

Branches and Versioning

Refer to the Gitflow Guide for details on branch and version management.

Clone this wiki locally