Yammer Teams Slack email

Fluid React

Fluid design system React components for React users.

npm (tag) Fluid React Licence

Installation

Fluid Design System React has its own npm package.

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

Documentation

React storybook documentation

How to use

CSS

The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the dedicated section.

ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.

Be sure to include these css into your main CSS file.

@import url('https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system/lib/fluid-design-system.css');

Or via script tag

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&amp;display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system/lib/fluid-design-system.css">

Fluid React components library

Our library contains all Fluid React components from this components export.

import {Button} from '@engie-group/fluid-design-system-react/lib/fluid-design-system-react.js';

function App() {
   return (
   <div>
    <Button label="Mon label" />
   </div>
  );
}

ReactDOM.render(
 <App />,
 document.getElementById('root')
);

Solo Component library

import '@engie-group/fluid-design-system/lib/components/button/index.css'; //CSS import optional
import {Button} from "@engie-group/fluid-design-system-react/lib/components/button/Button";

Sources

You can use typescript react sources as well and CSS Modules:

import '@engie-group/fluid-design-system/src/components/button/_index.scss'; //SASS import optional or CSS
import {Button} from "@engie-group/fluid-design-system-react/src/components/button/Button";

From browser

...
<body>
    <div id="root">
    </div>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-react/lib/components/button/Button.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-react/lib/components/footer/Footer.js"></script>
    <script>

      document.addEventListener("DOMContentLoaded", function () {
        ReactDOM.render(
          React.createElement("div", null,
            React.createElement(Button.Button, {label: "Label", variant: "success"}, "button"),
            React.createElement(Footer.Footer, null, "footer")
          )
          ,
          document.getElementById('root')
        );
      });
    </script>
</body>
</html>

Example

You could have a look at Fluid React example.

Troubleshooting

If you have any issues while getting set up with Fluid React, please create an issue or a request on our library git mono repository.