@vismaux/ngx-vud

ngx-vud

Common Visma Unified Design components for Angular.

• 🔥 Follows the official Visma Unified Design;
• 🔥 Uses storybook;
• 🔥 Dark mode ready;
• 🔥 Follows semantic versioning;
• 🔥 Uses conventional commits together with standard version for a better changelog;
• 🔥 Accessibility in mind;

Demo & documentation

https://ngx-vud.web.app

Compatibility table

@vismaux/ngx-vud	@vismaux/vud	@angular/*
^13.0.0	^1.7.0	^17.0.0
^12.0.0	^1.6.3	^16.0.0
^11.0.0	^1.6.3	^15.0.0
^10.0.0	^1.6.3	^14.1.0

still looking for outdated nordic-cool version? switch branch

Installation

ng add @vismaux/ngx-vud

Manual installation

1. Install this package together with two peer dependencies:

   npm i @vismaux/ngx-vud @vismaux/vud @angular/cdk
   

2. Import required styles inside your global (e.g. style.scss) file:

   // One import that includes both global `@vismaux/vud` styles (dark-light) and extensions needed for the library.
   @use '@vismaux/ngx-vud';
   
   // In case you don't need the dark mode, don't use SCSS, or just want to have a more granual control, import these prebuilt files manully:
   // @import '@vismaux/vud/dist/css/vud.light-dark.mode.min.css';
   // @import '@angular/cdk/overlay-prebuilt.css';
   

3. Setup animations by importing BrowserAnimationsModule in your app.module.ts.

   Use NoopAnimationsModule in case you don't want animations.

4. (Optional) Setup the icons if you plan to use the <vud-icon /> component.

Icons

The required assets for the icons are not built into the package and requires setting them up separately.
This is mandatory if you plan to use the <vud-icon /> component.
There are two ways to setup this.

// Option A (recommended): import from local assets
// this requires `@vismaux/vud-icons` npm package to be installed
@import '@vismaux/vud-icons/dist/css/vud-icons.min.css';

// Option B: import straight from CDN
// instructions taken from https://ux.visma.com/weblibrary/latest/index.php
@import 'https://vud-icons.s3.eu-north-1.amazonaws.com/latest/dist/css/vud-icons.min.css';

Browser support

Follows PDAB Compatibility Policy:
the latest major stable version of Firefox, Chrome, Safari and Edge are supported. No support for IE.

Contributing to the library

You are more than welcome to open an issue or create a pull-request.
In the latter case, please make sure the changes follows the same coding principles,
is covered with unit tests and meets the official Visma Unified Design guidelines. 🙏