@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
"styles": [
  "node_modules/@engie-group/fluid-design-tokens/lib/css/tokens.css",
],

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

Component WCAG tests

Name	keyboard navigation	Aria attribute
Button	✅

Components development state

You can check our state of development on our Confluence page