Fluid Angular
Fluid Angular components for Angular v14 framework.
Documentation
Angular storybook 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&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