National Poetry Month

    @engie-group/fluid-design-system-angular
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published

    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

    Install

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

    DownloadsWeekly Downloads

    142

    Version

    0.7.0

    License

    EPL-2.0

    Unpacked Size

    1.41 MB

    Total Files

    168

    Last publish

    Collaborators

    • kangaxx
    • johannfrizon
    • massibouneffa