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