@engie-group/fluid-design-system-webcomponents NPM

Fluid design system Web Components

Description

A platform-agnostic Web Components implementation of the ENGIE Fluid Design System components.

This library provides reusable, accessible, and customizable UI components that can be used in any web application, regardless of the framework.

Key Features

🔧 Framework-agnostic - Works with any framework or no framework
♿️ Accessible - Built with WCAG 2.1 guidelines in mind
📱 Responsive - Works across all device sizes
🌐 Modern - Built using the latest Web Components standards

Versioning

⚠️ This package is not stable yet. It 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.

Installation

Package manager

Library are distributed on NPM, you can install it in your node package with following commands:

# Using pnpm
pnpm add @engie-group/fluid-design-system-webcomponents@next @engie-group/fluid-design-tokens

# Using npm
npm install @engie-group/fluid-design-system-webcomponents@next @engie-group/fluid-design-tokens

# Using yarn
yarn add @engie-group/fluid-design-system-webcomponents@next @engie-group/fluid-design-tokens

Fonts and Icons

In order for the components to work properly, you need to include the Google's Material Icons, Lato and Roboto Mono fonts in your project.

You should include them in your HTML <head>:

<!-- Material icons, Lato and Roboto Mono fonts -->
<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"/>

CSS

Component styling is based on CSS classes and some CSS custom properties (called design tokens). In order for each component to be rendered as expected, you need to include CSS files as global stylesheet in your project.

You can include them in your HTML <head>:

Using CDN

<!-- tokens.css = Styles to import tokens needed by components -->
<link href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/token.css" rel="stylesheet">
<!-- fluid-design-system.css = Styles of all components -->
<link href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-webcomponents@<VERSION>/dist/fluid/fluid.css" rel="stylesheet">

Using package manager

In your HTML <head>

<!-- tokens.css = Styles to import tokens needed by components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/token.css" rel="stylesheet">
<!-- fluid-design-system.css = Styles of all components -->
<link href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system-webcomponents/dist/fluid/fluid.css" rel="stylesheet">

or in your JavaScript entry file :

import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system-webcomponents/css';

or in your CSS entry file :

@import '@engie-group/fluid-design-tokens/css';
@import '@engie-group/fluid-design-system-webcomponents/css';

/* Or
@import '@engie-group/fluid-design-tokens/lib/css/token.css'
@import '@engie-group/fluid-design-system-webcomponents/dist/fluid/fluid.css'

depending on you bundler configuration */

ℹ️ We recommend including the Fluid Design System CSS before your own stylesheets to avoid any conflicts.

Usage

Import

CDN import

<script type="module" src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system-webcomponents@<VERSION>/dist/esm/fluid.js" />

Package manager import

In your javascript entry file:

// In your javascript / typescript entry file
import '@engie-group/fluid-design-system-webcomponents';

or in a script tag:

<script type="module" src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system-webcomponents/dist/esm/fluid.js" />

Component usage

In HTML files

<!-- Icon component -->
<nj-icon name="bolt" variant="brand" size="2xl"></nj-icon>

In JavaScript files

// Create and append a bullet programmatically
const icon = document.createElement('nj-icon');
icon.setAttribute('name', 'bolt');
icon.setAttribute('variant', 'brand');
icon.setAttribute('size', '2xl');
document.body.appendChild(icon);

Support

TypeScript & ESM Support

This library is ES module compatible and includes TypeScript declarations. You can import types directly:

import { NjBullet } from '@engie-group/fluid-design-system-webcomponents/bullet';

Browser Support

Chrome/Chromium (latest 2 versions)
Firefox (latest 2 versions)
Safari (latest 2 versions)
Edge (latest 2 versions)

CSS Custom Properties

Some components can be customized using CSS custom properties see respective documentation for further details

Documentation

For detailed documentation and examples, visit our Storybook documentation.

Support

For support and issues:

Check our documentation
Open an issue in our GitHub repository
Join the Fluid Design System team on Teams

@engie-group/fluid-types

0.1.0-next.2

6 months ago

0.1.0-next.1

6 months ago

0.1.0-next.0

7 months ago