hig-vanilla
Advanced tools
Comparing version 0.1.13 to 0.1.14
{ | ||
"name": "hig-vanilla", | ||
"version": "0.1.13", | ||
"version": "0.1.14", | ||
"description": "Stateless implementation in pure CSS, HTML and JS with no framework dependecies", | ||
@@ -12,12 +12,14 @@ "main": "lib/hig.js", | ||
"scripts": { | ||
"lib": "NODE_ENV=production webpack -p", | ||
"watch": "webpack --watch", | ||
"build-icons": "node src/basics/icons/build/build.js", | ||
"deploy": "npm run lib && surge .", | ||
"generate-index": "node ./dev/generate-index.js", | ||
"build-icons": "node src/basics/icons/build/build.js", | ||
"dev-server": "webpack-dev-server --open --config webpack.dev.js", | ||
"gemini": "concurrently 'http-server' 'gemini test dev/gemini/*' --kill-others", | ||
"gemini-ci": "gemini test dev/gemini/* --reporter html --reporter flat", | ||
"gemini-report": "concurrently 'http-server' 'gemini test dev/gemini/* --reporter html --reporter flat' --kill-others", | ||
"gemini-update": "concurrently 'http-server' 'gemini update dev/gemini/*' --kill-others", | ||
"gemini-ci": "gemini test dev/gemini/*", | ||
"test": "npm run gemini" | ||
"generate-index": "node ./dev/generate-index.js", | ||
"lib": "webpack -p --config webpack.prod.js", | ||
"lint": "eslint --ext .jsx,.js dev src", | ||
"test": "npm run gemini", | ||
"watch": "webpack --watch --config webpack.dev.js" | ||
}, | ||
@@ -64,7 +66,9 @@ "repository": { | ||
"svgo": "^0.7.2", | ||
"webpack": "^3.5.5" | ||
"webpack": "^3.5.5", | ||
"webpack-dev-server": "^2.9.5", | ||
"webpack-merge": "^4.1.1" | ||
}, | ||
"dependencies": { | ||
"hig-interface": "^0.1.8" | ||
"hig-interface": "^0.1.9" | ||
} | ||
} |
@@ -1,2 +0,2 @@ | ||
## Web Implementation | ||
# hig-vanilla | ||
The HIG Web implementation consists of `html`, `css` and `js`. You can opt to only consume the `html` and `css` part and write the wrapper against the `interface.json` yourself (hard) or opt to use our `js` wrapper directly (easy). | ||
@@ -8,3 +8,3 @@ | ||
npm install | ||
npm run lib | ||
npm run lib # compiles library into lib/ | ||
``` | ||
@@ -29,37 +29,4 @@ | ||
## Developing | ||
So you want to help out? Great! Let's get you up and running: | ||
## Contribute | ||
```bash | ||
npm install | ||
npm run watch | ||
``` | ||
## Writing a new component | ||
Creating a new component (or subcomponent) consists of 2 parts: | ||
1. Write the `interface.json` outline | ||
2. Write your html/css/js implementation, for this provide `plop skeleton templates` to get you started, type the following command to start the interactive shell: | ||
```bash | ||
plop | ||
``` | ||
Use the arrows to select the `hig_skeleton`, type your component name (ex: `component123`), next type the location where you would want your component directory to live (ex: `src/components/component123_parent`). This will generate a `html`, `sass` and `js` file in the directory you provided, in our example it would create: | ||
``` | ||
src/components/component123_parent/component123/component123.html | ||
src/components/component123_parent/component123/component123.sass | ||
src/components/component123_parent/component123/component123.js | ||
``` | ||
## Adding a new icon | ||
To add a new svg icon to our stack, simply add the `svg` file to the [src/basics/icons/src](src/basics/icons/src) directory. | ||
Next run the following command: | ||
```bash | ||
npm run build-icons | ||
``` | ||
which will trigger our build script to create an updated release file in [src/basics/icons/release](src/basics/icons/release). The build script in itself simply does a `SVGO` optimize of the svg, and stores the optimized svg as a string in a key-value object in our release file, read more about the script here: [src/basics/icons/build/build.js](src/basics/icons/build/build.js). | ||
## Running visual regression tests | ||
- create a local file called `.env` and contact someone on the #orion-hig-web-dev slack channel for credentials (you'll need a `SAUCE_USERNAME=xxxxx` and a `SAUCE_ACCESS_KEY=xxxxx`) | ||
- Run the gemini tests and generate a report: `$ npm run gemini-report` | ||
- View the report: `$ open ./gemini-report/index.html` | ||
Please see [DEVELOPING.md](./DEVELOPING.md). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
583018
455
35
31
Updatedhig-interface@^0.1.9