@engie-group/fluid-4-deprecated

Fluid v4 deprecated items from FLUID Design System by ENGIE

This package regroups deprecated items that should be in v5 but are kept in separate package to allow us a clean refactoring

Quick Start

Install the package inside your application:

npm install --save @engie-group/fluid-4-deprecated

How to use

In this package you will find deprecated items of lib vanilla and tokens seperated in folders. Each folder has a src/ folder where you can find sources and a lib/ where you can find compiled files. Here's an overview of the package:

.
├── CHANGELOG.md
├── README.md
├── package.json
├── tokens ==> Deprecated tokens
│   ├── lib ==> Generated tokens to import if you want to use some deprecated components
│   │   ├── css
│   │   ├── js
│   │   ├── json
│   │   └── scss
│   └── src ==> Sources of deprecated tokens
│       ├── backdrop.json
│       ├── background.json
│       ├── base.json
│       ├── border.json
│       ├── icon.json
│       ├── placeholder.json
│       ├── text.json
│       └── utils.json
└── vanilla ==> Deprecated vanilla components and utils
    ├── lib ==> Generated component to import if you want to use some deprecated components
    │   └── components
    │       └── util
    └── src  ==> Sources of deprecated components and utils
        ├── components
        │   └── util
        └── globals  ==> Sources of deprecated global scss variables and mixines
            └── scss

Use deprecated components in Fluid React, Vanilla or Angular v5

If you want to use some deprecated component in V5, like the deprecated forms or Alert you will have to import the deprecated css tokens. Components will be marked deprecated in the storybooks

In JS:

import '@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css';

In html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css">

In sass

@import '~@engie-group/fluid-4-deprecated/tokens/lib/css/tokens.css';

If you want to use a deprecated component you may need to import its styles as well

In JS:

import '@engie-group/fluid-4-deprecated/vanilla/lib/components/utils/index.css';

In html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-4-deprecated/vanilla/lib/components/utils/index.css">

Use deprecated sass variables and utils

e.g:

In your sass/scss files import

@import "~@engie-group/fluid-4-deprecated/vanilla/src/globals/scss/index";