Link to Fluid's Microsoft Teams channel Link to the support page

Fluid React

Fluid design system React components for React users.

npm (tag) Fluid React Licence

Documentation

React storybook documentation

React Fluid Design System by ENGIE

DISCLAIMER

When installing the package via npm or importing it via CDN we recommend fixing the version with the exact package version to avoid breaking change affecting your live website. With never-ending topics like Accessibility and BRAND GUIDELINES we also have to include some minor breaking changes in some minor versions

e.g:

npm install --save @engie-group/fluid-design-system-react@VERSION

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@VERSION/lib/css/tokens.css">

Quick Start

Install the package inside your application:

npm install --save @engie-group/fluid-design-system-react@2.0.0

If you use deprecated components you will need to use some styles exported by package @engie-group/fluid-4-deprecated and install it. Please refer to @engie-group/fluid-4-deprecated README.md for more information.

npm install --save @engie-group/fluid-4-deprecated

How to use

Font

In your html


<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&amp;display=swap"
      rel="stylesheet"/>

Styles

Tokens from @engie-group/fluid-design-tokens are needed in order for components to work.

You may need to import base.css from @engie-group/fluid-design-system which sets the correct font properties for you website

You may also need to import some tokens and styles from @engie-group/fluid-4-deprecated if you still want to use some deprecated packages. They can be imported in your html, JS, SASS or in some of your bundler config.

In your HTML


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@5.0.0/lib/css/tokens.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@5.0.0/lib/base.css">
If you use deprecated components
<!-- Only if you use deprecated components and if not loaded elsewhere-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css">

In your SASS/SCSS

@import "~@engie-group/fluid-design-tokens/lib/css/tokens.css"
@import "~@engie-group/fluid-design-system/lib/base.css"
If you use deprecated components
// Only if you use deprecated components and if not loaded elsewhere
@import "~@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css"

In JS

import '@engie-group/fluid-design-tokens/lib/css/tokens.css';
import '@engie-group/fluid-design-system/lib/base.css';
import {NJButton} from '@engie-group/fluid-design-system-react';

export default function App() {
  return (
    <NJButton label="My button"/>
  );
}

Components

All components are exported in @engie-group/fluid-design-system-react

import {NJButton} from '@engie-group/fluid-design-system-react';

export default function App() {
  return (
    <NJButton label="My button"/>
  );
}

How to Contribute new Components

  • Create a component folder inside src/components:
    src/components -  
       / componentName -  
         / ComponentName.tsx  
         / test -  
            /ComponentName.test.tsx
  • Update src/fluid-design-system-react.ts by adding component import/export
  • Create a component folder inside fluid-doc-react package: src/stories/componentName/ComponentName.stories.js

Components development state

You can check our state of development on our Notion Components page