metatrust-design-system

metatrust-design-system

This repository provides Figma Design Tokens and reusable components with Storybook documentation.

Storybook documentation

Developers guide

Designers guide

---

How to install (for developers)

Pre-requirements

You need to have got installed NodeJs+NPM.

1. Go to Official NodeJs page and download LTS version of installer for your device
2. Install the application
3. Verify successfull installation
   1. Open Terminal on your device
   2. Execute node -v then npm -v commands
   3. Both commands should return some version number, if not, try to restart your device and execute commands again
   4. If it still doesnt work, contact some developer to get help
4. Install yarn
   1. Open Terminal on your device (Git Bash on Windows devices)
   2. Execute command npm i -g yarn
   3. Wait till operation is done
   4. Close Terminal and open new Terminal window (Git Bash on Windows devices)
   5. Execute command yarn -v
   6. The command should return some version number, if not, try to restart your device and execute command again
   7. If it still doesnt work, contact some developer to get help

Installation

Execute: yarn add https://github.com/everestate/metatrust-design-system

NOTE: To install this package you need to authorize/login to your github account during installation process as this repository is hosted by everestate organization.

To use Icons provided by this module in your project, you need to install @svgr/webpack module and add the following rule to your webpack config file:

{
        test: /\.svg$/,
        include: /node_modules\/metatrust-design-system/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              icon: true,
            },
          },
        ],
      }

How to configure in Figma (for designers):

Configuration

1. Create GitHub Token:
   1. Go to Settings in your GitHub page
   2. Scroll down to Developer settings option and click it
   3. Click Personal access tokens option
   4. Click Generate new token button
   5. Give it a name (Note) you want, decide should and when it expoire
   6. Select repo checkbox (only this one - it select all other required option within repo section)
   7. Click Generate token button at the bottom
   8. Copy the token
2. Open Figma Design Tokens plugin window
   1. Go to Settings tab
   2. Select GitHub button
   3. Click Add new credentials
   4. Paste the GitHub token into Personal Access Token field
   5. Name your GitHub connection in the first field Name
   6. For field Repository (username/repo) enter everestate/metatrust-design-system
   7. For field Default Branch enter figma-design-tokens
   8. For field File Path enter src/tokens/metatrust.tokens.json
   9. Save your changes by clicking Save button
3. Click Pull arrow button at the bottom-left WARNING: Pull action always overwrites local data!

How to work with Token updates

It is strongly recommended to create separate branch during each tokens update.

1. Before starting the work, pull changes

2. When you want to push your changes, after making changes, click Push button at borrim left

3. In new window you need to enter Commit message, make it relevant to changes and task itself, add [MET-XXXXXX] at the end what reflects JIRA ticket number

4. Enter Branch name that reflects changes made for specific JIRA ticket followed by pattern:

   feat/MET-XXXXXX_short_description_of_the_ticket

   Keep Pushing to this branch till all changes required by the ticket are done. You can do it many times.

5. Click Push button

6. When operation is done, you should see new window with Create pull request button. Click it when you do first push for the JIRA ticket`

7. New browser window should be oppened

8. REMEMBER to change base branch as main is selected by default always

   1. Click the base: main dropdown
   2. Select figma-design-tokens option
   3. Click Create pull request button
   4. Share Pull Request link with your colleagues to do Core Review and look for possible mistakes
   5. One Code Review approval is required to merge changes
   6. When Pull Request is approved you can merge it by clicking Squash and merge button
   7. You can now to let know developers about Design Tokens update

Documentation

See static Storybook

Or locally:

1. Checkout the code
2. Execute in terminal yarn install
3. Execute in terminal yarn run storybook
4. Open (if it was not done automatically) http://localhost:6006/ in your browser