@engie-group/fluid-design-system-react
Advanced tools
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.
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-deprecatedpackage.Please refer to the
@engie-group/fluid-4-deprecatedREADME.mdfor more information.npm install @engie-group/fluid-4-deprecated
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"/>
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:
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'
@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";
<!-- 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">
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" />
</>
);
}
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.
fluid-react/src/components: src/components -
/ componentName -
/ ComponentName.tsx
/ test -
/ComponentName.test.tsx
fluid-react/src/fluid-design-system-react.ts by adding the new component import / export.fluid-doc-react package:
fluid-doc-react/src/stories/componentName/ComponentName.stories.jsYou can check our state of development on our Components status page
If you encounter any issues while setting up Fluid Design System, please create an issue or a request on our library git 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
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
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.