@design-factory/design-factory
v18.1.1
Published
Amadeus design system
Downloads
6,119
Readme
Description
Design Factory is an InnerSource design system made of:
- A UI library for Amadeus external and internal interfaces and applications, based on our four pillars
- A set of design and coding best practices
- A cross-functional community from all Amadeus business units
If you want to get more information about Design Factory, please contact Design Factory team.
Getting started
You can easily add Design Factory library in your project thanks our schematics. Just run the following:
ng add @design-factory/design-factory
It will install Design Factory for the default application specified in your angular.json. If you have multiple projects and you want to target a specific application, you could specify the --project option
ng add @design-factory/design-factory --project myProject
CSS namespace feature
For some specific cases, you may have to use the CSS namespace feature which allow you to apply DF styles only under a selector defined by $df-css-namespace-selector variable (by default ==.design-factory-v2==). In order to use this feature, just import the following:
@import '@design-factory/design-factory/styles/scss/themes/brand2023/variables';
@import '@design-factory/design-factory/styles/scss/df-styles-namespace';
in your styles.scss and add the defined selector in your HTML element where you want to apply DF style.
If you want to use this feature with the initial brand, just import:
@import '@design-factory/design-factory/styles/scss/df-styles-namespace';
in your styles.scss
Dependencies
Dependencies
The dependencies are Angular, Bootstrap 5, Ng-bootstrap, AgnosUI, Ng-select, Ag-grid and ngx-slider. The supported versions are:
| Design Factory | Angular | Bootstrap CSS | Ng-Bootstrap | Ng-select | Ag-grid | ngx-slider | AgnosUI | | -------------- | ------- | ------------- | ------------ | --------- | ------- | ---------- | -------------- | | 9.x.x | 11.0.0 | 4.5.0 | 9.1.0 | 5.0.14 | | 2.0.3 | | | 10.x.x | 12.0.0 | 4.5.3 | 10.0.0 | 7.2.0 | | 2.0.3 | | | 11.x.x | 13.2.0 | 4.5.3 | 11.0.0 | 8.1.1 | | 2.0.3 | | | 12.x.x | 13.2.0 | 5.1.3 | 12.1.2 | 8.1.1 | 27.3.0 | 2.0.3 | | | 13.x.x | 14.1.0 | 5.2.0 | 13.1.0 | 9.0.2 | 27.3.0 | 2.0.4 | | | 14.x.x | 15.1.0 | 5.2.0 | 14.0.1 | 10.0.3 | 27.3.0 | 2.0.4 | | | 15.x.x | 16.0.0 | 5.2.0 | 15.0.0 | 11.0.0 | 29.3.5 | | | | 16.x.x | 16.x.x | 5.2.0 | 15.1.0 | 11.2.0 | 30.2.x | | | | 17.0.x | 17.x.x | 5.3.2 | 16.0.x | 12.0.x | 31.0.x | | 0.0.1-alpha.10 | | 17.1.x | 17.x.x | 5.3.3 | 16.0.x | 12.0.x | 31.1.x | | 0.2.0 | | 18.0.x | 18.x.x | 5.3.3 | 17.0.x | 13.2.x | 31.3.x | | 0.4.x |
How to work with the icons
Icons are a mix of Font Awesome (FW) and in-house produced pictograms.
Since DF 18.0.0 release in-house icons and FW icons are split into different fonts.