Fluid Angular

Fluid Angular components for Angular v14 framework.

Documentation
Quick Start
How to use
How to Contribute new Components
Components development state

Documentation

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 also have to include some minor breaking changes in some minor versions

e.g:

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

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@VERSION/lib/css/tokens.css">

Quick Start

Install the package inside your application:

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

If you use deprecated components you will need to use some styles exported by package @engie-group/fluid-4-deprecated and install it. Please refer to @engie-group/fluid-4-deprecated README.md for more information

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

How to use

Font & css

<!--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", 
],

Allow json imports

In Fluid angular lib 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 add json imports support in your tsconfig file.

In the compilerOptions section you’ll need to add the following in your tsconfig.json:

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

Your tsconfig should look like something like this:

  "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';

Importing BrowserAnimationsModule in main module AppModule

In the main angular module AppModule import BrowserAnimationModule

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

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

Using global Angular component library

In the angular module where you need to use a fluid component (usually in src/app.module.ts, you’ll need to import the FluidModule

import {FluidModule} from '@engie-group/fluid-design-system-angular/lib';

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

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 -
Update fluid.module.ts module by adding new component in declarations & exports arrays
Update src/public-api.ts by adding component import/export
Create a component folder 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 Notion Components page