Fluid React
Fluid design system React components for React users.
Documentation
Installation
Fluid Design System React has its own npm package.
npm install @engie-group/fluid-design-system-react
CSS, Fonts & Icons
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&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system/lib/fluid-design-system.css">
Usage
Import multiple components from 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')
);
Import single 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.