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.

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

• Create GitHub Token:
  • Go to Settings in your GitHub page
  • Scroll down to Developer settings option and click it
  • Click Personal access tokens option
  • Click Generate new token button
  • Give it a name (Note) you want, decide should and when it expoire
  • Select repo checkbox (only this one - it select all other required option within repo section)
  • Click Generate token button at the bottom
  • Copy the token
• Open Figma Design Tokens plugin window
  • Go to Settings tab
  • Select GitHub button
  • Click Add new credentials
  • Paste the GitHub token into Personal Access Token field
  • Name your GitHub connection in the first field Name
  • For field Repository (username/repo) enter everestate/metatrust-design-system
  • For field Default Branch enter figma-design-tokens
  • For field File Path enter src/tokens/metatrust.tokens.json
  • Save your changes by clicking Save button
• 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.

• Before starting the work, pull changes

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

• 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

• 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.

• Click Push button

• 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`

• New browser window should be oppened

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

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

Documentation

See static Storybook

Or locally:

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