@engie-group/fluid-design-system-react
Advanced tools
Fluid is the Engie's design system, a collection of reusable components and styles used to build Engie's digital products.
Here is the package to benefit from Fluid's components and styles in your React project.
⚠️ This package doesn't follow semantic versioning, breaking changes may be introduced in minor versions.
We recommend fixing the version with the exact package version to avoid breaking changes affecting your live website. Moreover, we recommend checking the CHANGELOG before updating the package after a release.
This package can be installed directly with NPM:
# Using npm
npm install --save-exact @engie-group/fluid-design-system-react
# Using pnpm
pnpm add --save-exact @engie-group/fluid-design-system-react
# Using yarn
yarn add --save-exact @engie-group/fluid-design-system-react
ℹ️ If you use deprecated components or need the reboot.css, you will need to install and use some styles from the
@engie-group/fluid-4-deprecatedpackage.Please refer to the
@engie-group/fluid-4-deprecatedREADME.mdfor more information.# Using npm npm install @engie-group/fluid-4-deprecated # Using pnpm pnpm add @engie-group/fluid-4-deprecated # Using yarn yarn add @engie-group/fluid-4-deprecated
In order for the components to work properly, you need to include the Material Icons and Lato font in your project.
You should include them in your HTML <head>:
<!-- Material icons, Lato font and Roboto Mono font -->
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900|Roboto+Mono:300,400,700,900&display=swap" rel="stylesheet"/>
Component styling is based on CSS classes and some CSS variables (called design tokens). In order for each component to be rendered as expected, you need to include a CSS file as global stylesheet in your project.
You can include it in your HTML <head> :
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system-react/lib/fluid-design-system.css" rel="stylesheet">
or in your JavaScript entry point:
import '@engie-group/fluid-design-system-react/css';
or in your CSS entry file :
@import '@engie-group/fluid-design-system-react/css';
ℹ️ We recommend including it before your own stylesheets to avoid any conflicts.
For a better comprehension of the components and their usage, we recommend checking our Storybook documentation.
For Fluid overall documentation, you can check our Fluid documentation.
If you have correctly followed the installation steps, you should be able to use Fluid components in your project.
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" />
</>
);
}
If you encounter any issues, or you want any component or feature to be implemented, please create an issue or a feature request on our GitHub repository.
FAQs
Fluid Design System React
We found that @engie-group/fluid-design-system-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.