Welcome to the Angular component library of the official ENGIE Design System: Fluid.
This library provides a comprehensive set of Angular components built as standalone components, making them easy to integrate into your Angular applications.
Before you begin, ensure that your Angular project meets the following requirements:
- Angular 16 or higher. This library does not support Angular versions prior to version 16
- An initialized Angular project
Install the required packages using your preferred package manager:
# Using pnpm
pnpm add --save-exact @engie-group/fluid-design-system-angular @engie-group/fluid-design-tokens
# Using npm
npm install --save-exact @engie-group/fluid-design-system-angular @engie-group/fluid-design-tokens
# Using yarn
yarn add --exact @engie-group/fluid-design-system-angular @engie-group/fluid-design-tokensNote: We recommend using the
--save-exactflag as we don't strictly follow semantic versioning, and some minor versions may contain breaking changes.
Important: Check the CHANGELOG for any breaking changes or updates before upgrading.
Some deprecated components use some styles from the @engie-group/fluid-4-deprecated package, you may need to install this package:
# Using pnpm
pnpm add --save-exact @engie-group/fluid-4-deprecated
# Using npm
npm install --save-exact @engie-group/fluid-4-deprecated
# Using yarn
yarn add --exact @engie-group/fluid-4-deprecatedPlease refer to the @engie-group/fluid-4-deprecated README.md for more information on using deprecated components.
Note: The
@engie-group/fluid-4-deprecatedpackage is not required for the current components in the Fluid Design System. It is only needed if you are using components that were part of the previous Fluid 4 design system.
Add the following link tag to the <head> section of your src/index.html file to include the required Material Icons and Lato fonts:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap" rel="stylesheet"/>Design tokens are the visual design atoms of the design system. They store visual design attributes such as colors, typography, spacing, and more. Using design tokens ensures consistency across your application and enables features like light and dark mode theming.
You need to include the design system CSS files in your project. The method depends on your build setup:
Add the following styles to the styles array in your angular.json file:
If you're using Nx or other tools that don't use angular.json, refers you to the tool documentation, or you can also import the styles directly in your global src/styles.css file:
@import '@engie-group/fluid-design-tokens/lib/css/tokens.css';
/*Only if you use deprecated components :
@import '@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css'; */
@import '@engie-group/fluid-design-system-angular/lib/styles/fluid-design-system.css';
/* Your custom styles here */Important: We recommend importing Fluid stylesheets before your own stylesheets to avoid any potential style overrides.
The Fluid Design System components require Angular animations to work properly. You need to install and configure the animations package:
For detailed instructions on setting up animations for both standalone applications and NgModule-based applications, please refer to the official Angular animations guide.
All Fluid components are standalone Angular components. Import them individually as needed:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonComponent } from '@engie-group/fluid-design-system-angular';
@Component({
selector: 'app-root',
imports: [RouterOutlet, ButtonComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'my-fluid-app';
}Once imported, you can use the components in your templates:
<nj-button>Hello from Fluid</nj-button>Here's a complete example of a component using Fluid Design System:
app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonComponent } from '@engie-group/fluid-design-system-angular';
@Component({
selector: 'app-root',
imports: [RouterOutlet, ButtonComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'my-fluid-app';
onButtonClick() {
console.log('Fluid button clicked!');
}
}app.component.html
<div class="app-container">
<h1>Welcome to {{ title }}</h1>
<nj-button (click)="onButtonClick()">
Hello from Fluid Design System
</nj-button>
<router-outlet></router-outlet>
</div>- Explore the available components in Storybook documentation.
- Check out the design system overall documentation Fluid documentation.
- Customize your application using design tokens for consistent theming
If you encounter any issues or would like to request a feature, please open an issue in our GitHub repository
Happy coding with Fluid Design System! 🚀
{ "projects": { "your-project-name": { "architect": { "build": { "options": { "styles": [ "@engie-group/fluid-design-tokens/lib/css/tokens.css", // Only if you use deprecated components // "@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css", "@engie-group/fluid-design-system-angular/lib/styles/fluid-design-system.css", "src/styles.css" ] } } } } } }