Automate Designsystem

https://automate-designsystem.cirro.io/ (Live deployment)

Installation in a ROR project

1. Install the package and save it as a dependency:

   yarn add automate-designsystem

2. Import the system in your Sass manifest:

   @import "automate-designsystem/src/_assets/stylesheets/app";

3. Make sure your postcss.config.js looks like below:

   module.exports = {
     plugins: [
       require('postcss-import'),
       require('postcss-nesting'),
       require('tailwindcss')('./node_modules/automate-designsystem/src/_assets/stylesheets/tailwind.config.js'),
       require('autoprefixer'),
     ]
   }

4. Install resolve-url-loader package and following snippet in your config/webpack/environment.js

   environment.loaders.get('css').use.splice(-1, 0, {
     loader: 'resolve-url-loader'
   });
   

Development

Requirements

1. Node.js
2. NPM (comes with Node.js)

Install dependencies

npm install

Working locally

Starts watch tasks to compile when changes detected

npm start

Creating a production build

Minify HTML, compress JS, inline and minify CSS.

npm run build

Publishing to registry

• Make sure to update the version number in package.json file for every pull request
• CircleCi will take care of publishing to npm and also adding a tag when the commits are merged to master
• CircleCI will publish it only if the package version has been increased