@engie-group/fluid-design-system-react

v2.10.2

Published

8 days ago

Fluid Design System React

Downloads

2,275

0High
0Medium
0Low

jintus-engie

kangaxx

engie fluid design design-system system react typescript

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 sometimes have to include some minor breaking changes in some minor versions.

Installation

Install the package inside your application:

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

This will install fluid-design-system-react and its dependencies: fluid-design-system and fluid-design-tokens.

If you use deprecated components or need our css reboot, you will need to install and use some styles from the @engie-group/fluid-4-deprecated package.
Please refer to the @engie-group/fluid-4-deprecated README.md for more information.
npm install @engie-group/fluid-4-deprecated

1. Import Font and Icons

Make sure to always include these fonts into your HTML <head>:

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

2. Import Styles

Our Fluid React components are bundled with their own styles, but also rely on our Tokens from @engie-group/fluid-design-tokens.

We also provide a base.css that sets the correct font properties on the <body> (color, font-weight, font-size and font-family).

⚠️ If you want to use some deprecated components, you also need to import some tokens and styles from @engie-group/fluid-4-deprecated. For example, we provide a reset.css in fluid-4-deprecated:

2.1 Import the styles directly in your JS

import '@engie-group/fluid-design-system/lib/base.css'
import '@engie-group/fluid-design-tokens/lib/css/tokens.css'

// Only if you use deprecated components and if not loaded elsewhere
import '@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css'
// With Reboot example
import '@engie-group/fluid-4-deprecated/vanilla/lib/reboot.css'

2.2 OR in your SASS/SCSS

@import "@engie-group/fluid-design-tokens/lib/css/tokens.css";
@import "@engie-group/fluid-design-system/lib/base.css";

// Only if you use deprecated components and if not loaded elsewhere
@import "@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css";
// With Reboot example
@import "@engie-group/fluid-4-deprecated/vanilla/lib/reboot.css";

2.3 OR in your HTML through the CDN (not recommended)

<!-- Don't forget to replace <VERSION> with your wanted version (e.g. 5.4.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/base.css">

<!-- 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">
<!-- With reboot example -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-4-deprecated/vanilla/lib/reboot.css">

Basic usage

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

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

export default function App() {
  return (
    <>
      <NJButton label="My button"/>
      <NJBadge variant="warning">7<NJBadge/>
      <NJAvatar label="My avatar" />
    </>
  );
}

How to Contribute new Components

These are the basic steps for contributing a new component. More detailed information will be added through a contribution guide soon. If you have trouble getting started on contribution, contact us directly on Teams or Github!

Basically, the component lives in fluid-react, and we use Storybook through fluid-doc-react to test it.

Create a component folder inside fluid-react/src/components:

    src/components -  
       / componentName -  
         / ComponentName.tsx  
         / test -  
            /ComponentName.test.tsx

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

Components development state

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

Troubleshooting

If you encounter any issues while setting up Fluid Design System, please create an issue or a request on our library git repository.