@infrabel-ui/components NPM

@infrabel-ui/components

Collection of components implementing infrabel build/signaling design system.

Installation

yarn add @infrabel-ui/components

Usage

To use components from this library, you will need to do the following:

import InfrabelComponentsModule into your Angular Module

import { InfrabelComponentsModule } from '@infrabel-ui/components';
...
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, InfrabelComponentsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import the scss files to your project, for example adding it to an angular project make sure to add it to this array:

angular.json (workspace.json) > projects > {NAME_OF_YOUR_PROJECT} > architect > build > options

// Content of angular.json
...
"options": {
    "stylePreprocessorOptions": {
        "includePaths": [
        ...
        "./node_modules/@infrabel-ui/styles/src",
        "./node_modules/@infrabel-ui/styles/src/infrabel-ui",
        "./node_modules/@infrabel-ui/components/src/infrabel-ui-components"
        ]
    },
}

Add @import "infrabel-ui-components"; to your main style file in your project (e.g. style.scss).

Icons configration

Material design icons are supported by default, if you need to load other icon set (e.g. Font Awesome), you will need to load the fonts inside your app. for example:

  ... Inside <head> tag:
  <script src="https://kit.fontawesome.com/YOUR_FONT_AWESOME_KEY.js" crossorigin="anonymous"></script>

And use them inside your app like this:

  // Somewhere inside your app:
  this.appService.initialize({
    navigationConfig: {
      head: {
        icon: 'fa-address-book',
        iconSet: 'fas',
        label: 'B-S Design System',
        target: 'home'
      },
      items: []
    })

Example

TBD

Name	type	Description
`infrabel-ui-button`	component	Base and variant styles button
`infrabel-ui-app-shell`	component	Application shell contining: Menu, Context Menu, Frame, Navigation and more
`AppConfigService`	service	Angular root service providing an API to interact with app shell

Development

To use the library locally follow the fellowing steps:

Run yarn link inside dist/libs/components.
Run yarn link "@infarbel-ui/components" inside the root folder of your own project.
Run yarn build --watch inside the root folder of this library.
To trigger a change you must save any .ts file, saving .scss won't do anything.
To unlink your project from the local development run yarn unlink "@infrabel-ui/components" inside the root folder of your own project.