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.
- Installation
- Basic usage
- How to Contribute new Components
- Components development state
- Troubleshooting
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-deprecated
package.Please refer to the
@engie-group/fluid-4-deprecated
README.md
for 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).
@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.
- Create a component folder inside
fluid-react/src/components
:
src/components -
/ componentName -
/ ComponentName.tsx
/ test -
/ComponentName.test.tsx
- Update
fluid-react/src/fluid-design-system-react.ts
by adding the new component import / export. - Create a component folder inside the
fluid-doc-react
package:fluid-doc-react/src/stories/componentName/ComponentName.stories.js
You 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.