Home

1. TEDI (TEHIK Design System) is open source design system used in TEHIK. Its goal is to provide toolkit and building blocks for TEHIK partners, designers, developers, product owners etc. It follows VEERA guidelines. It provides specific components for designers, implements React components for developers. As a result, provided solution saves development time.

TEDI contains two sets of components: community and TEDI (we call them TEDI-READY). Community set is driven by community and resolves special use-cases and TEDI set gives stability and quality therefore implements more basic components.

Usage

npm i @tehik-ee/tedi-design-system

Migration from old Disainipesa component library to TEDI

1. Remove old dependency from package.json: @tehik/react-components
2. Install TEDI component library npm i @tehik-ee/tedi-design-system
3. Find and replace from all files in project: from '@tehik/react-components' and replace from '@tehik-ee/tedi-design-system/community' (from is important to replace only import statements)
4. In addition you need to change style location as well: import '@tehik/react-components/index.css' and replace import '@tehik-ee/tedi-design-system/index.css'
5. Repeat the steps for every NPM project.

To get into more detail, please see here: https://github.com/TEHIK-EE/tedi-design-system/wiki/Migration-from-Disainipesa

References

• Repository: https://github.com/TEHIK-EE/tedi-design-system
• NPM: https://www.npmjs.com/package/@tehik-ee/tedi-design-system
• Storybook: https://tehik-ee.github.io/tedi-design-system/ (branch based test environment)
• Figma: https://www.figma.com/design/jWiRIXhHRxwVdMSimKX2FF/TEDI-Design-System-(draft)?m=auto
• Documentation: https://zeroheight.com/1ee8444b7/p/231068-color-variables
• Slack: https://tehikustiilijuhis.slack.com/

Development

Contributor

0. You should have open issue in Github.

1. Fork github repository

   • Under your forked repository go to Settings -> Pages
   • Under section "Build and deployment" set "Source" field to "Github Actions".
   • Under Actions tab enable actions.
   • Under Environments create new environment named "github-pages".
     • Make sure that under "Deployment branches and tags" select option "No restriction" is selected.

2. Make changes and create pull request against origin rc branch

3. If you have contributed to TEDI components, you have to deploy your component in test environment (Github Pages)

   • Deployment to github pages is done with a Github Actions workflow "Continious Deployment"
   • If Actions have been enabled before commits, then automatic deployment to Github pages should have run.
   • If Actions are enabled after the fact, manual run of workflow is needed.
     • On the side panel select workflow "Continious Deployment" and click "Run workflow" on the right side of the opened panel.
   • Click on the "Continious Deployment" item in the middle of the main panel to open the progress graph
   • Last step of the process is "Deploy". Once that step is done, github pages link will appear under its name.
   • Copy and paste that link to the pull request, so that reviewer can review the effects of your contribution.

4. For community components, pull request will be reviewed by maintainer and will be merged to rc branch. And feature is ready to use with pre-release version

Maintainer

0. You should have open issue in Github.
1. Create new branch
2. Make changes and create pull request against rc branch
3. Pull request will be reviewd by other maintainer and will be merged. And feature is ready to use with pre-release version

Branches and versioning

Gitflow is described here in detail: Gitflow