Numerous Problems Multiplied

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

    0.2.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.

    You'll need to add the following in your tsconfig.json: "resolveJsonModule": true in the compilerOptions section.

    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

    Component WCAG tests

    Name keyboard navigation Aria attribute
    Button
    Toggle
    Checkbox
    Spinner
    Icon
    Progress
    Radio
    Link

    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

    5

    Version

    0.2.0

    License

    EPL-2.0

    Unpacked Size

    1.42 MB

    Total Files

    140

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar