@engie-group/fluid-4-deprecated
v0.2.3
Published
This package contains some deprecated features of fluid 4 that you might use to ease the transition to fluid 5
Downloads
1,790
Readme
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";