README

React Fluid Design System by ENGIE

Quick Start

Install the package inside your application:

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

How to use

Font & css

<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">

Using global React component library

import '@engie-group/fluid-design-system/lib/fluid-design-system.css'; //CSS optional if loaded via link tag
import {Button} from '@engie-group/fluid-design-system-react/lib/fluid-design-system-react.js';// JS library

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

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

With component library

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

Using sources

You can use typescript react sources as well with 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>

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

Update webpack.config.js with component build, be careful to match upper/lowercase:

     {
       ...BASE_CONFIG,
       ...{
         name: 'componentName',
         entry: './src/components/componentName/ComponentName.tsx',
         output: {
           ...BASE_CONFIG_OUTPUT,
           ...{
             filename: './components/componentName/ComponentName.js',
             library: 'ComponentName'
           }
         }
       }
     }

Create a component folder inside fluid-doc-react package:
```
src/stories/componentName/ComponentName.stories.js
```

Component tests on browsers and devices

Name	Chrome Mac 86 >	Safari
Alert	✅	✅
Autocomplete	✅	✅
Avatar	✅	✅
Badge	✅	✅
Breadcrumb	✅	✅
Button	✅	✅
Card	✅
Checkbox	✅
Dropdown	✅
Footer	✅
Icon	✅
Input	✅
InputSearch	✅
Link	✅
List	✅
Modal	✅	✅
Navbar	✅	✅
Pagination	✅	✅
Progress	✅	✅
Radio	✅	✅
Sidebar	✅
Slider	✅	✅
Spinner	✅	✅
Switch	✅	✅
Tabs	✅	✅
Tag	✅	✅
Toggle	✅
Tooltip	✅

Component WCAG tests

Name	keyboard navigation	Aria attribute
Alert	✅
Autocomplete	✅	✅
Avatar	✅	✅
Breadcrumb	✅	✅
Button	✅	✅
Card	✅
Checkbox	✅	✅
Dropdown	✅	✅
Footer	✅
Icon	✅
Input	✅	✅
InputSearch	✅	✅
Link	✅	✅
List	✅	✅
Modal	✅	✅
Navbar	✅	✅
Pagination	✅	✅
Progress	✅	✅
Radio	✅	✅
Sidebar	✅	✅
Slider	✅
Spinner	✅
Switch	✅	✅
Tabs	✅	✅
Tag	✅	✅
Toggle	✅	✅
Tooltip	✅

Components development state

You can check our state of development on our Confluence page

Usage no npm install needed!