@design-factory/design-factory 18.0.1 → 18.0.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "18.0.1",
+  "version": "18.0.3",
   "dependencies": {
     "tslib": "^2.0.0"
   },
@@ -53,6 +53,8 @@
       "esm": "./esm2022/design-factory.mjs",
       "default": "./fesm2022/design-factory.mjs"
     },
+    "./design-factory.scss": "./design-factory.scss",
+    "./design-factory.css": "./design-factory.css",
     "./themes/initial-branding": {
       "sass": "./design-factory-initial-branding.scss",
       "style": "./design-factory-initial-branding.css"

package/schematics/migrations/18_0_0/font-awesome-6/index.js

@@ -685,33 +685,33 @@ const fontAwesomeMapping = {
     'wine-glass-alt': 'wine-glass-empty'
 };
 const dfIconsMapping = {
-    'icon-amadeus-facebook': 'icon-df-facebook',
-    'icon-amadeus-linkedin': 'icon-df-linkedin',
-    'icon-amadeus-twitter': 'icon-df-twitter',
-    'icon-amadeus-youtube': 'icon-df-youtube',
-    'icon-df-icon-amadeus-insurance': 'icon-df-insurance',
-    'icon-amadeus-corporate': 'icon-df-corporate',
-    'icon-amadeus-download': 'icon-df-download',
-    'icon-amadeus-filter': 'icon-df-filter',
-    'icon-amadeus-hotel': 'icon-df-hotel',
-    'icon-amadeus-mob': 'icon-df-amadeus-mob',
-    'icon-amadeus-mobility': 'icon-df-mobility',
-    'icon-amadeus-railways': 'icon-df-railways'
+    'amadeus-facebook': 'df-facebook',
+    'amadeus-linkedin': 'df-linkedin',
+    'amadeus-twitter': 'df-twitter',
+    'amadeus-youtube': 'df-youtube',
+    'df-icon-amadeus-insurance': 'df-insurance',
+    'amadeus-corporate': 'df-corporate',
+    'amadeus-download': 'df-download',
+    'amadeus-filter': 'df-filter',
+    'amadeus-hotel': 'df-hotel',
+    'amadeus-mob': 'df-amadeus-mob',
+    'amadeus-mobility': 'df-mobility',
+    'amadeus-railways': 'df-railways'
 };
 const updates = (mapping) => Object.keys(mapping).map((key) => ({
     key,
-    regex: new RegExp(`(<[a-z]+\\s[^>]*\\sclass="|<[a-z]+\\sclass=")([^"]*)${key}([^"]*")`, 'g'),
+    regex: new RegExp(`(.*)icon-${key}(.*)`, 'g'),
     replacement: mapping[key]
 }));
 function replaceHtmlContent(content) {
     for (const update of updates(dfIconsMapping)) {
-        content = content.replace(update.regex, (_match, g1, g2, g3) => `${g1}${g2}${dfIconsMapping[update.key]}${g3}`);
+        content = content.replace(update.regex, (_match, g1, g2) => `${g1}icon-${dfIconsMapping[update.key]}${g2}`);
     }
     for (const update of updates(fontAwesomeMapping)) {
-        content = content.replace(update.regex, (_match, g1, g2, g3) => `${g1}${g2}${fontAwesomeMapping[update.key]}${g3}`);
+        content = content.replace(update.regex, (_match, g1, g2) => `${g1}icon-${fontAwesomeMapping[update.key]}${g2}`);
     }
     // update the icon- to fa- for the FW icons
-    content = content.replace(new RegExp(`(.*[^df-])icon-(?!df-|amadeus-)(.*)`, 'g'), (_match, g1, g2) => `${g1}fa-${g2}`);
+    content = content.replace(new RegExp(`(.*?[^df-])icon-(?!df-|amadeus-)(.*?)`, 'g'), (_match, g1, g2) => `${g1}fa-${g2}`);
     // update df-icon-solid for the FW icons
     content = content.replace(new RegExp(`(.*)(df-icon-solid)(.*fa-)`, 'g'), (_match, g1, _, g3) => `${g1}fa-solid${g3}`);
     content = content.replace(new RegExp(`(.*fa-.*)(df-icon-solid)(.*)`, 'g'), (_match, g1, _, g3) => `${g1}fa-solid${g3}`);

package/styles/scss/agnosui/_variables.scss

@@ -1,18 +1,20 @@
-@use '@agnos-ui/core-bootstrap/scss/variables' with (
-  $prefix: 'df-',
-  $au-slider-color-background: var(--#{$prefix}gray-300),
-  $au-slider-handle-hover-color: #{shades-css-var('primary', 'text-hover-color')},
-  $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')},
+@forward '@agnos-ui/core-bootstrap/scss/variables' with (
+  $prefix: 'df-' !default,
+  $au-slider-color-background: var(--#{$prefix}gray-300) !default,
+  $au-slider-handle-hover-color: #{shades-css-var('primary', 'text-hover-color')} !default,
+  $au-slider-handle-border-hover: var(--#{$prefix}border-width) solid #{shades-css-var('primary', 'text-hover-color')} !default,
   $au-slider-handle-focus-box-shadow: (
-    0 0 0 2px var(--#{$prefix}body-bg),
+    0 0 0 2px var (--#{$prefix}body-bg),
     0 0 0 4px var(--#{$prefix}primary)
-  ),
+  )
+  !default,
   $au-slider-handle-focus-hover-box-shadow: (
-    0 0 0 2px var(--#{$prefix}body-bg),
+    0 0 0 2px var (--#{$prefix}body-bg),
     0 0 0 4px #{shades-css-var('primary', 'text-hover-color')}
-  ),
-  $au-slider-label-now-font-weight: 500,
-  $au-slider-label-vertical-min-top: calc(100% - 0.5rem),
-  $au-slider-label-vertical-max-top: 0.25rem,
-  $au-slider-disabled-color: var(--#{$prefix}disabled-color)
+  )
+  !default,
+  $au-slider-label-now-font-weight: 500 !default,
+  $au-slider-label-vertical-min-top: calc(100% - 0.5rem) !default,
+  $au-slider-label-vertical-max-top: 0.25rem !default,
+  $au-slider-disabled-color: var(--#{$prefix}disabled-color) !default
 );

package/styles/scss/df-styles-namespace.scss

@@ -58,6 +58,8 @@ $df-css-namespace-selector: '.design-factory-v2' !default;
   @import 'common';
   @import 'components/accordion/accordion';
   @import 'components/fonts/icon-font';
+  @import 'components/fonts/font-awesome-icons';
+  @import 'components/fonts/font-awesome-icons-brands';
   @import 'components/fonts/fonts';
   @import 'components/separator/separator';
   @import 'components/button/button';