NetGroup UI Component Library

Library for React components that are commonly used, visulaized with the help of Storybook

Getting started

Clone repo from http://tfs:8080/tfs/DefaultCollection/NG%20UI%20Component%20Library/_git/Component-Library?_a=contents&version=GBmaster

Prerequisites

Node.js, Npm

Installing

Install:

yarn/npm install

Run storybook:

yarn/npm run storybook

Open storybook in browser:

localhost:9001

Running tests

yarn/npm run test

Helpers

To add custom classes to any component use 'classes' prop. Example: classes="customclassname". Available for all components, except Icon. To add margins to any element, pass on of these 'margin-xl, margin-lg, margin-md, margin-sm, margin-xs' classes to a component with 'classes' attribute. classes="customclassname margin-xs" class

class name | used for ---------- | ------------- "margin-t-xs" | margin top "margin-b-xs" | margin bottom "margin-l-xs" | margin left "margin-r-xs" | margin right

class name | margin value ---------- | ------------- margin-xl | 2 rem margin-lg | 1 rem margin-md | 0.8 rem margin-sm | 0.4 rem margin-xs | 0.2 rem

Bundling for distribution

To publish this library as @netgroup/component-library on npmjs.com just issue the publish command. This will run the "prepare" script which bundles the code into /dist directory prior to uploading it to npmjs.com package repository.

npm publish

To just bundle to /dist without publishing:

npm run build