Mavenlink Design System ·

A set of React components created by, and for, Mavenlink. See all the available components at our Github Page.

For a living style guide of design patterns, visit our site on Notion.

Installation

• Install with NPM or Yarn

  npm install --save @mavenlink/design-system
  
  # or
  
  yarn add @mavenlink/design-system

• Setup React JSX processing. One way of doing that is with babel-loader for Webpack.

• Setup CSS modules. One way of doing that is with style-loader for Webpack and css-loader for Webpack.

• Setup SVG processing. One way of doing that is with svg-sprite-loader for Webpack.

  // Webpack configuration
  const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
  
  module.exports = {
    module: {
      rules: [{
        test: /\.jsx?$/,
        use: [{
          loader: 'babel-loader',
        }],
      }, {
        test: /\.css$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            modules: true
          },
        }],
      }, {
        test: /\.svg$/,
        use: [{
          loader: 'svg-sprite-loader',
        }],
      }],
    },
    plugins: [
      new SpriteLoaderPlugin(),
    ],
  };

• Use in your project

  import Input from '@mavenlink/design-system/src/components/input/input.jsx';
  
  function App() {
    return <Input id="hello!" />;
  }

Style linter

We periodically update and upgrade styles. We have also created linters to help with those changes! To use, do the following:

• Install stylelint into your project

• In your stylelint configuration file (.stylelintrc.json, .stylelintrc, stylelint.config.js) include the following:

  const path = require('path');
  
  module.exports = {
    plugins: [
      path.resolve('@mavenlink/design-system/src/linters/colors.js'),
    ],
    rules: {
      'mds/colors': true,
    },
  };

• Run stylelint to see failures

Build Test and Deploy

For building/test/deploying, be on a computer with node ~= v14

linting

yarn install
yarn lint
yarn test --runInBand

testing

yarn start &
yarn run wait-on http://localhost:6060 && yarn cypress run

deploying

yarn build
git checkout gh-pages
git pull
mv -v build/* $BRANCH_OR_DIR
git add .
git diff-index --quiet HEAD || git commit -m 'Update Github pages for $BRANCH_OR_DIR'
git push origin gh-pages

Documentation

• Code of conduct
• Contributing
• Component Design Principles
• Making a New Release
• Testing Philosophy