Angular Fluid Design System by ENGIE
Quick Start
Install the package inside your application:
npm install @engie-group/fluid-design-system-angular
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": [
"node_modules/@engie-group/fluid-design-tokens/lib/css/tokens.css",
// Only if you want to use engie icons
"node_modules/@engie-group/fluid-design-system/lib/components/icon/fluid.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';
@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
Component tests on browsers and devices
Name | Chrome Mac 86 > | Firefox | Safari | IOS Safari | Chrome android |
---|---|---|---|---|---|
Button | |||||
Toggle | |||||
Checkbox | |||||
Spinner | |||||
Icon | |||||
Progress | |||||
Radio | |||||
Link | |||||
Switch | |||||
Tabs | |||||
Badge | |||||
Bullet | |||||
Avatar | |||||
Breadcrumb |
Component WCAG tests
Name | keyboard navigation | Aria attribute |
---|---|---|
Button | ||
Toggle | ||
Checkbox | ||
Spinner | ||
Icon | ||
Progress | ||
Radio | ||
Link | ||
Switch | ||
Tabs | ||
Badge | ||
Bullet | ||
Avatar | ||
Breadcrumb |
Components development state
You can check our state of development on our Confluence page