Feature/v3.2.0 (#9)

* Update modules and build system

* Prepare for circle ci

* Update Readme and version

* Update build system

The script files on the design system were being processed by the dependant's browserify (because of the definition on package.json).
When the plugins and presets between dependant/dependency were different the build would throw a module not found error.
This improved build system changes the browserify transform key so that the definitions are not picked up and also includes the transpiled files to prevent errors when the dependant's transpiler is different.

* Update icons and modules

* Include transpiled files

* Update meta images

* Update base typography and colors

* Update development instructions

* Update OpenAQ logo

* Tweak base palette and tertiary color

* Update page and inpage headers appearance

* Improve inpage header typography

* Improve sandbox page title

* Update icon library and include exported layout images

* Update base and heading font color

* Update icon library

* Upgrade collecticons

* Update headings style

* Fix definition list styles

* Tidy graphic assets

* Improve heading styles

* Update buttons appearance

Also, include ghost button variation.

* Improve form input appearance

* Refactor cards and include toolbar styles

* Update variables and mixins

* Tweak form input appearance

* Include link wrapper styles

* Tweak card media styles

* Tweak card subtitle typography

* Update icon library

* Update button typography

* Upgrade to React 17

* Add datasets icon

* compiling new icon?

* runs the right script

Co-authored-by: Daniel da Silva <daniel@developmentseed.org>
Co-authored-by: Ricardo Mestre <ricardo@duplos.org>
Co-authored-by: Alice Rühl <alice.ruehl@gmail.com>
Co-authored-by: Necoline <necoline@developmentseed.org>
Co-authored-by: Necoline Hubner <hnhubner@gmail.com>

.circleci/config.yml

@@ -0,0 +1,64 @@
+# https://github.com/developmentseed/how/issues/149
+# ssh-keygen -m pem -t rsa -b 4096 -C openaq/openaq-design-system -f deploy_key
+version: 2
+jobs:
+  build:
+    docker:
+      - image: node:10
+
+    working_directory: ~/repo
+
+    environment:
+      - PRODUCTION_BRANCH: master
+      - GH_REF: git@github.com:openaq/openaq-design-system.git
+      - GH_NAME: "Development Seed"
+      - GH_EMAIL: "dev@developmentseed.org"
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+
+      - run: yarn test
+
+      - add_ssh_keys:
+          fingerprints:
+            - ""
+
+      - run:
+          name: Building site
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "${PRODUCTION_BRANCH}" ]; then
+              yarn build
+            else
+              echo "Skip building site"
+            fi
+
+      - run:
+          name: Deploy to GH Pages
+          command: |
+            if [ "${CIRCLE_BRANCH}" == "${PRODUCTION_BRANCH}" ]; then
+              cd build
+              git init
+              git config user.name "$GH_NAME"
+              git config user.email "$GH_EMAIL"
+              git add .
+              git commit -m "CI deploy [skip ci]"
+              git remote add origin $GH_REF
+              git push origin --force --quiet HEAD:gh-pages
+              rm -rf .git
+            else
+              echo "Skip deploying to Github"
+            fi

.eslintrc

@@ -4,32 +4,18 @@
     "es6": true,
     "browser": true
   },
-  "plugins": [
-    "react"
-  ],
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 2018,
     "ecmaFeatures": {
       "jsx": true
     }
   },
   "rules": {
     "semi": [2, "always"],
+    "jsx-quotes": [2, "prefer-single"],
+    "no-console": 2,
     "no-extra-semi": 2,
     "semi-spacing": [2, { "before": false, "after": true }],
-    "react/display-name": 1 ,
-    "react/jsx-no-duplicate-props": 2,
-    "react/jsx-no-undef": 2,
-    "react/jsx-uses-react": 2,
-    "react/jsx-uses-vars": 2,
-    "react/no-danger": 0,
-    "react/no-deprecated": 2,
-    "react/no-did-mount-set-state": [2, "allow-in-func"],
-    "react/no-did-update-set-state": [2, "allow-in-func"],
-    "react/no-direct-mutation-state": 2,
-    "react/no-is-mounted": 2,
-    "react/no-unknown-property": 2,
-    "react/prop-types": 2,
-    "react/react-in-jsx-scope": 2
+    "prefer-promise-reject-errors": 0
   }
-}
+}

.gitignore

@@ -109,5 +109,5 @@ nbproject
 temp
 tmp
 .tmp
-dist
+build
 _site

.npmignore

@@ -1,8 +1,9 @@
 sandbox
 .gitignore
 .travis.yml
-.build_scripts
+.circleci
 .eslintrc
 .gitattributes
 gulpfile.js
-.tmp
+.tmp
+build

.nvmrc

@@ -0,0 +1 @@
+10

DEVELOPMENT.md

@@ -11,13 +11,13 @@ The main purpose of this system is to modularize the assets, therefore is import
 ## Development environment
 The development environment is the same for both parts and has the following dependencies:
 
-- Node (v4.2.x) & Npm ([nvm](https://github.com/creationix/nvm) usage is advised)
+- Node (v10) & yarn ([nvm](https://github.com/creationix/nvm) usage is advised)
 
 > The versions mentioned are the ones used during development. It could work with newer ones.
 
 After these basic requirements are met, run the following commands in the website's folder:
 ```
-$ npm install
+$ yarn
 ```
 
 ### Design system development
@@ -45,14 +45,14 @@ These files can then be liked in the doc's files and used.
 Svg icons to be compiled into a webfont. The resulting compiled file must be committed with the rest of the styles.  
 To manually compile the `openaq-design-system` icons run:
 ```
-$ npm run openaq-icons
+$ yarn openaq-icons
 ```
 
 ### Sandbox
 The sandbox site resides in `sandbox/`.
 
 ```
-$ npm run serve
+$ yarn serve
 ```
 Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:3000/`  
 The system will watch files and execute tasks whenever one of them changes.  
@@ -79,9 +79,8 @@ import componentName from '../../../assets/scripts/componentName';
 **Important:** If you need to install new node modules, install them as **dependencies** if they are for the `openaq-design-system` and as **devDependencies** if they're for the sandbox.
 
 ## Deployment
-The .travis.yml file enables the usage of [Travis](http://travis.org) as a test and deployment system.  
-In this particular case, Travis will only publish new versions to the npm registry.
+The .circleci/config.yml file enables the usage of [Circle CI](http://circleci.com/) as a test and deployment system.
 
 ## Linting
 Code follows the `semistandard` code style and should be linted.
-- `npm run lint` - will run linter and warn of any errors.
+- `yarn lint` - will run linter and warn of any errors.

README.md

@@ -10,7 +10,7 @@ Style guide and UI components library that aims to standardize the look and feel
 
 Install it as an `node module`: (Not available on `npm`, use direct link)
 ```
-npm install https://github.com/openaq/openaq-design-system#v1.0.0
+npm install https://github.com/openaq/openaq-design-system#v3.0.0
 ```
 For the most recent version omit the tag.
 
@@ -41,7 +41,7 @@ Add the module path to the `includePaths` of gulp-sass. Should look something li
 .pipe($.sass({
   outputStyle: 'expanded',
   precision: 10,
-  includePaths: require('node-bourbon').with('node_modules/jeet/scss', require('openaq-design-system/gulp-addons').scssPath)
+  includePaths: require('node-bourbon').includePaths.concat('node_modules/jeet/scss', require('openaq-design-system/gulp-addons').scssPath)
 }))
 ```
 
@@ -58,7 +58,7 @@ Now you can include it in the main scss file:
 // Bourbon is a dependency
 @import "bourbon";
 
-@import "jeet/index";
+@import "jeet";
 
 @import "openaq-design-system";
 ```
@@ -106,9 +106,12 @@ browserSync({
 You also need to ensure that the images are copied over on build.
 This ensures that the graphics are copied over when building the project.
 ```js
-gulp.task('images', function () {
-  return gulp.src(['app/assets/graphics/**/*', require('openaq-design-system/gulp-addons').graphicsPath + '/**/*'])
-    .pipe($.cache($.imagemin({
+function imagesImagemin () {
+  return gulp.src([
+    'app/assets/graphics/**/*',
+    require('openaq-design-system/gulp-addons').graphicsPath + '/**/*'
+  ])
+    .pipe($.imagemin([
 ```
 
 **USAGE**