README

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 >	Safari
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

Usage no npm install needed!