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

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&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": [
  "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