@engie-group/fluid-design-system-angular

Angular Fluid Design System by ENGIE

DISCLAIMER

When installing the package via NPM or importing it via CDN, we recommend fixing the version with the exact package version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and Brand guidelines, we sometimes have to include some minor breaking changes in some minor versions.

• Installation
  • 1. Font & styles
  • 2. Allow Json imports
  • 3. Enabling the animations module
• Using a component in your codebase
• How to Contribute new Components
• Components development state
• Troubleshooting

Installation

Install the package inside your application:

npm install --save-exact @engie-group/fluid-design-system-angular

If you use deprecated components or need our css reboot, you will need to install and use some styles from the @engie-group/fluid-4-deprecated package.

Please refer to the @engie-group/fluid-4-deprecated README.md for more information.

npm install @engie-group/fluid-4-deprecated

1. Font & Styles

<!--Not necessary if you already import Lato and don't use Material icons-->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&amp;display=swap" rel="stylesheet"/>

// In angular.json in build.styles of your project you'll need to import the fluid css variables and the fluid icons (ONLY if you're planning on using them) 
"styles": [
  // Imports tokens, needed for components
  "node_modules/@engie-group/fluid-design-tokens/lib/css/tokens.css", 
  // Sets the correct font properties for you website
  "node_modules/@engie-group/fluid-design-system/lib/base.css", 
  // Only if you want to use engie icons
  "node_modules/@engie-group/fluid-design-system/lib/components/icon/fluid.css",
  // Only if you use deprecated components
  "node_modules/@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css", 
], 

2. Allow Json imports

In Fluid angular, some types are generated using tokens. To get to these tokens, we import a json file tokens.json provided by @engie-group/fluid-design-tokens. Since we rely on these import you'll need to add json imports support in your tsconfig file.

In your tsconfig.json, in the compilerOptions section, add the following:

// tsconfig.json

  "resolveJsonModule": true,
  "esModuleInterop": true,

Your tsconfig should look like something like this:

// tsconfig.json

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    "esModuleInterop": true,
  },
  ...
}

Troubleshooting: you may need to adjust some existing imports in your project.

// If in your project you used to import like this:
import * as alias from 'lib';

// Should be replaced by:
import alias from 'lib';

3. Enabling the animations module

For application bootstrapped with the bootstrapApplication() function (usually in main.ts), add the provideAnimations() function in the provider list:

import {provideAnimations} from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [
    provideAnimations(),
  ]
});

Or for NgModule based applications import BrowserAnimationModule, which introduces the animation capabilities into your module:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    declarations: [],
    imports: [
        BrowserAnimationModule
    ],
    exports: [],
    providers: []
})
export class AppModule {
}

See Angular documentation

Using a component in your codebase

When you need to use a Fluid component, you must import it in the component or the module where it is used:

import {NgModule} from "@angular/core";
import {ButtonComponent} from '@engie-group/fluid-design-system-angular/lib'

@NgModule({
  imports: [ButtonComponent]
})
export class AppModule {}

or

import {Component} from "@angular/core";
import {ButtonComponent} from '@engie-group/fluid-design-system-angular/lib'

@Component({
  template: '<nj-button>Label</nj-button>',
  imports: [ButtonComponent]
})
export class CustomComponent {}

How to Contribute new Components

• Create a component folder inside src/components:

  src/components - / component-name.component.html - / component-name.component.scss / component-name.component.ts / component-name.component.spec.ts -

  Make sure that your component is a standalone component

• Update src/public-api.ts by exporting your component

• Create a component StoryBook story inside fluid-doc-angular package: src/stories/component-name/component-name.stories.tsx

Components development state

You can check our state of development on our Components status page

Troubleshooting

If you encounter any issues while setting up Fluid Design System, please create an issue or a request on our library git repository.