Socket
Socket
Sign inDemoInstall

hig-vanilla

Package Overview
Dependencies
Maintainers
5
Versions
384
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hig-vanilla - npm Package Compare versions

Comparing version 0.1.13 to 0.1.14

22

package.json
{
"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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc