Tecnologia web components

This is a Work in Progress Web components library made by BPM Suite team.

Browser Support

| Chrome | New Edge (Chromium) | Safari | Firefox | Older Edge | IE | | ------ | ------------------- | ------ | ------- | ----------------- | ----------------- | | 60+ | 79+ | 10.1+ | 63+ | 16-18 (polyfills) | >= 11 (polyfills) |

See complete docs

How to install

NPM

Install dependency:

npm i jhornan2-design-system

And import jhornan2-design-system.esm.js:

<script src="jhornan2-design-system/dist/jhornan2-design-system/jhornan2-design-system.esm.js" type="module"></script>

For legacy projects import jhornan2-design-system.js:

<script src="jhornan2-design-system/dist/jhornan2-design-system/jhornan2-design-system.js" type="text/javascript"></script>

For use in frameworks, see the Stencil page.

Via CDN (release candidate)

Now you can test components in a HTML page importing via script from CDN.

Stable

<script src="https://cdn.tecnologia.senior.com.br/platform/jhornan2-design-system/master/jhornan2-design-system/jhornan2-design-system.esm.js" type="module"></script>

For legacy projects use:

<script src="https://cdn.tecnologia.senior.com.br/platform/jhornan2-design-system/master/jhornan2-design-system/jhornan2-design-system.js" type="text/javascript"></script>

Release candidate (develop branch)

(ATTENTION!! Not use for production!)

<script src="https://cdn.tecnologia.senior.com.br/platform/jhornan2-design-system/develop/jhornan2-design-system/jhornan2-design-system.js"></script>

Other alternative is use UNPKG, for this, overwrite with the following URL: https://unpkg.com/jhornan2-design-system@latest/dist/jhornan2-design-system/jhornan2-design-system.js

Angular applications

npm i jhornan2-design-system

In your app.module.ts declare CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  // <-- import from here

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]   // <-- declare this
})
export class AppModule { }

And in main.ts end of file, add following imports:

import { applyPolyfills, defineCustomElements } from 'jhornan2-design-system/loader';

defineCustomElements();

// for IE support (optional)
applyPolyfills().then(() => {
  defineCustomElements()
})

React applications

yarn add jhornan2-design-system

In your src/index.js or src/index.tsx (typescript project) file, add following imports preferably before of the React Render:

import { applyPolyfills, defineCustomElements } from 'jhornan2-design-system/loader';

defineCustomElements();

// for IE support (optional)
applyPolyfills().then(() => {
  defineCustomElements()
})

I want to contribute

View contribution guide.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!