@design-factory/design-factory 19.1.3 → 20.0.0-next.1

package/package.json

@@ -2,22 +2,22 @@
   "name": "@design-factory/design-factory",
   "description": "Amadeus design system",
   "license": "BSD-3-Clause",
-  "version": "19.1.3",
+  "version": "20.0.0-next.1",
   "dependencies": {
     "tslib": "^2.0.0"
   },
   "peerDependencies": {
-    "@agnos-ui/angular-bootstrap": "~0.8.0",
-    "@agnos-ui/core-bootstrap": "~0.8.0",
-    "@angular/common": "^19.0.0",
-    "@angular/core": "^19.0.0",
-    "@angular/localize": "^19.0.0",
-    "@angular/router": "^19.0.0",
-    "@ng-bootstrap/ng-bootstrap": "~18.0.0",
-    "@ng-select/ng-select": "^14.1.0",
+    "@agnos-ui/angular-bootstrap": "~0.9.0",
+    "@agnos-ui/core-bootstrap": "~0.9.0",
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/localize": "^20.0.0",
+    "@angular/router": "^20.0.0",
+    "@ng-bootstrap/ng-bootstrap": "~19.0.0",
+    "@ng-select/ng-select": "^15.0.0",
     "ag-grid-angular": "^32.0.0",
     "ag-grid-community": "^32.0.0",
-    "bootstrap": "5.3.3"
+    "bootstrap": "5.3.6"
   },
   "peerDependenciesMeta": {
     "@angular/router": {
@@ -42,12 +42,6 @@
     "./styles/scss/*": {
       "sass": "./styles/scss/*.scss"
     },
-    ".": {
-      "sass": "./design-factory.scss",
-      "style": "./design-factory.css",
-      "types": "./index.d.ts",
-      "default": "./fesm2022/design-factory.mjs"
-    },
     "./design-factory.scss": "./design-factory.scss",
     "./design-factory.css": "./design-factory.css",
     "./design-factory-initial-branding.scss": "./design-factory-initial-branding.scss",
@@ -58,6 +52,10 @@
     },
     "./package.json": {
       "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/design-factory.mjs"
     }
   },
   "ng-update": {

package/schematics/migrations/20_0_0/navbar-toggler-logo-svg/index.d.ts

@@ -0,0 +1,7 @@
+import { type Rule } from '@angular-devkit/schematics';
+/**
+ * This migration updates templates to use inline svg instead of navbar span for the toggler icon.
+ *
+ * @returns the Rule to migrate the navbar logo
+ */
+export default function navbarTogglerLogo(): Rule;

package/schematics/migrations/20_0_0/navbar-toggler-logo-svg/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = navbarTogglerLogo;
+const schematics_1 = require("@angular-devkit/schematics");
+const project_tsconfig_paths_1 = require("../../utils/project_tsconfig_paths");
+const compiler_host_1 = require("../../utils/typescript/compiler_host");
+const template_updater_1 = require("../../utils/template-updater");
+function replaceHtmlContentFactory(loggingContext) {
+    function replaceHtmlContent(content) {
+        content = content.replace(/<span\s+class="navbar-toggler-icon"><\/span>/g, `<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>`);
+        loggingContext.foundComplexCase =
+            loggingContext.foundComplexCase || /([ \t]*<span[^>]+navbar-toggler-icon)/g.test(content);
+        content = content.replace(/([ \t]*<span[^>]+navbar-toggler-icon)/g, '<!-- TODO Avoid using spans with navbar-toggler-icon and replace with inline svgs. -->\n' +
+            '<!-- You can check an example of the inline svg in the SideNav example: https://design-factory.amadeus.net/components/sidenav/examples#basic -->\n$1');
+        return content;
+    }
+    return replaceHtmlContent;
+}
+/**
+ * This migration updates templates to use inline svg instead of navbar span for the toggler icon.
+ *
+ * @returns the Rule to migrate the navbar logo
+ */
+function navbarTogglerLogo() {
+    return async (tree, context) => {
+        const { buildPaths, testPaths } = await (0, project_tsconfig_paths_1.getProjectTsConfigPaths)(tree);
+        const basePath = process.cwd();
+        const allPaths = [...buildPaths, ...testPaths];
+        if (!allPaths.length) {
+            throw new schematics_1.SchematicsException('Could not find any tsconfig file. Cannot run the `Font Awesome 6` migration.');
+        }
+        const loggingContext = { foundComplexCase: false };
+        const templateUpdater = new template_updater_1.TemplateUpdater(tree, replaceHtmlContentFactory(loggingContext));
+        for (const tsconfigPath of allPaths) {
+            const program = (0, compiler_host_1.createMigrationProgram)(tree, tsconfigPath, basePath);
+            const sourceFiles = program
+                .getSourceFiles()
+                .filter((sourceFile) => (0, compiler_host_1.canMigrateFile)(basePath, sourceFile, program));
+            for (const sourceFile of sourceFiles) {
+                templateUpdater.update(sourceFile, program.getTypeChecker());
+            }
+        }
+        if (loggingContext.foundComplexCase) {
+            context.logger.warn('Found a more complex case of span with navbar-toggler-icon. Please check the comments in the code and replace it with an inline svg.');
+        }
+    };
+}

package/schematics/migrations/migration.json

@@ -42,6 +42,12 @@
       "description": "As of Design Factory version 18, in-house icons are separated from the Font Awesome ones. FW6 has renamed some icons to better depict their meaning.",
       "version": "18.0.0",
       "factory": "./18_0_0/font-awesome-6"
+    },
+    "navbar-toggler-logo-svg": {
+      "description": "Use inline svg for navbar toggler logo instead of span. Recommended for apps using the new amadeus branding.",
+      "version": "20.0.0",
+      "factory": "./20_0_0/navbar-toggler-logo-svg",
+      "optional": true
     }
   }
 }

package/styles/scss/_common.scss

@@ -13,7 +13,7 @@
 
 @each $extension, $ratio in $df-size-ratios {
   .df-font-#{$extension} {
-    --#{$prefix}body-font-size: #{$font-size-base * $ratio};
+    --#{$prefix}body-font-size: #{get-sizing-brand2023($extension, $ratio)};
     font-size: var(--#{$prefix}body-font-size);
   }
 }

package/styles/scss/_common.variables.scss

@@ -13,13 +13,15 @@ $df-mandatory-indicator-font-weight: 700 !default;
 $df-mandatory-indicator-margin: 0.125rem !default;
 $df-subtitle-color: $gray-600 !default;
 $df-zindex-topmost: 10000 !default;
-
+$df-font-size-xs: $font-size-sm !default;
+$df-form-placeholder-font-style: italic !default;
 // Merge DF Spacer with BS ones
+// @deprecated - will be removed in version 21, use $spacer-4 instead of '75'
 // stylelint-disable-next-line scss/dollar-variable-pattern, scss/dollar-variable-default
 $spacers: map.merge(
   (
     '75': (
-      $spacer * 0.75
+      calc($spacer * 0.75)
     )
   ),
   $spacers

package/styles/scss/_variables.scss

@@ -55,6 +55,7 @@
 @import 'components/sidenav/sidenav.variables';
 @import 'components/footer/footer.variables';
 @import 'components/separator/separator.variables';
+@import 'components/timepicker/timepicker.variables';
 @import 'components/toast/toast.variables';
 @import 'components/scrollspy/scrollspy.variables';
 @import 'components/tooltip/tooltip.variables';

package/styles/scss/agnosui/_variables.scss

@@ -15,7 +15,7 @@
     0 0 0 4px #{shades-css-var('primary', 'text-hover-color')}
   )
   !default,
-  $au-slider-label-now-font-weight: 500 !default,
+  $au-slider-label-now-font-weight: var(--#{$prefix}typo-weight-medium) !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,
@@ -23,6 +23,6 @@
   $au-tree-expand-icon-color-default: $primary !default,
   $au-tree-expand-icon-color-hover: $primary-800 !default,
   $au-tree-expand-icon-background-color-hover: var(--#{$prefix}primary-200) !default,
-
+  $au-tree-expand-icon-margin-inline-end: var(--#{$prefix}spacing-3) !default,
   $au-slider-tick-neutral-color: $gray-600 !default
 );

package/styles/scss/bootstrap/_variables.scss

@@ -1,6 +1,8 @@
 @use 'sass:math';
 @use 'sass:map';
 @use 'sass:color';
+@use 'sass:meta';
+
 // stylelint-disable scss/dollar-variable-pattern
 // Variables
 //
@@ -1037,13 +1039,16 @@ $cyans-mapping: (
 $links-mapping: (
   'text-color': var(--#{$prefix}primary-500),
   'bg-color': transparent,
+  'box-shadow-color': var(--#{$prefix}primary-500),
   'text-hover-color': var(--#{$prefix}primary-500),
+  'box-shadow-hover-color': var(--#{$prefix}primary-500),
   'bg-hover-color': var(--#{$prefix}primary-100),
   'text-active-color': var(--#{$prefix}primary-800),
+  'box-shadow-active-color': var(--#{$prefix}primary-800),
   'bg-active-color': transparent,
   'text-visited-color': var(--#{$prefix}purple-500),
   'text-visited-hover-color': var(--#{$prefix}purple-500),
-  'bg-visisted-hover-color': var(--#{$prefix}primary-100),
+  'bg-visited-hover-color': var(--#{$prefix}primary-100),
   'text-visited-active-color': var(--#{$prefix}primary-800),
   'bg-visited-active-color': transparent
 ) !default;
@@ -1057,12 +1062,9 @@ $shade-maps: map.set($shade-maps, 'blue', $blues-mapping);
 $shade-maps: map.set($shade-maps, 'cyan', $cyans-mapping);
 $shade-maps: map.set($shade-maps, 'teal', $teals-mapping);
 $shade-maps: map.set($shade-maps, 'green', $greens-mapping);
-$shade-maps: map.set($shade-maps, 'yellow', $yellows-mapping);
 $shade-maps: map.set($shade-maps, 'orange', $oranges-mapping);
 $shade-maps: map.set($shade-maps, 'red', $reds-mapping);
 $shade-maps: map.set($shade-maps, 'pink', $pinks-mapping);
-$shade-maps: map.set($shade-maps, 'love', $loves-mapping);
-$shade-maps: map.set($shade-maps, 'mystery', $mysteries-mapping);
 $shade-maps: map.set($shade-maps, 'info', $infos-mapping);
 $shade-maps: map.set($shade-maps, 'success', $successes-mapping);
 $shade-maps: map.set($shade-maps, 'warning', $warnings-mapping);
@@ -1072,12 +1074,17 @@ $shade-maps: map.set($shade-maps, 'indigo', $indigos-mapping);
 $shade-maps: map.set($shade-maps, 'primary', $primaries-mapping);
 $shade-maps: map.set($shade-maps, 'white', $whites-mapping);
 $shade-maps: map.set($shade-maps, 'light', $lights-mapping);
-$shade-maps: map.set($shade-maps, 'dark', $darks-mapping);
 $shade-maps: map.set($shade-maps, 'pacific', $pacifics-mapping);
 $shade-maps: map.set($shade-maps, 'gray', $grays-mapping);
 $shade-maps: map.set($shade-maps, 'secondary', $secondaries-mapping);
+$shade-maps: map.set($shade-maps, 'dark', $darks-mapping);
 $shade-maps: map.set($shade-maps, 'links', $links-mapping);
 
+// TODO: Brand2023 - these colors are for the old branding only, to be removed
+$shade-maps: map.set($shade-maps, 'mystery', $mysteries-mapping);
+$shade-maps: map.set($shade-maps, 'yellow', $yellows-mapping);
+$shade-maps: map.set($shade-maps, 'love', $loves-mapping);
+
 $shade-colors: map.merge(
   $map1: $shade-colors,
   $map2: $infos
@@ -1337,7 +1344,7 @@ $link-color: shades-css-var('primary') !default;
 $link-decoration: none !default;
 // $link-shade-percentage:                   20% !default;
 $link-hover-color: $link-color !default;
-$link-hover-decoration: underline !default;
+$link-hover-decoration: none !default;
 
 // $stretched-link-pseudo-element:           after !default;
 // $stretched-link-z-index:                  1 !default;

package/styles/scss/components/accordion/_accordion.scss

@@ -72,6 +72,13 @@
     .df-accordion-number {
       color: var(--#{$prefix}accordion-title-number-color);
     }
+
+    &:focus {
+      box-shadow: none;
+    }
+    &:focus-visible {
+      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+    }
   }
 
   // Reverse accordion
@@ -174,7 +181,7 @@
       .accordion-button {
         padding: calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-y))
           calc(#{$ratio} * var(--#{$prefix}accordion-button-padding-x));
-        font-size: $ratio * $font-size-base;
+        font-size: get-sizing-brand2023($extension, $ratio);
 
         &::after {
           width: $icon-with;
@@ -183,6 +190,10 @@
         }
       }
 
+      .accordion-body {
+        font-size: get-sizing-brand2023($extension, $ratio, $font-size-base, true);
+      }
+
       &.df-accordion-reverse {
         .accordion-button {
           &::before {

package/styles/scss/components/alert/_alert.scss

@@ -23,6 +23,7 @@
   --#{$prefix}alert-collapse-link-hover-bg: #{$df-alert-collapse-link-hover-bg};
 
   --#{$prefix}alert-collapse-icon-margin-start: #{$df-alert-collapse-icon-margin-start};
+  --#{$prefix}alert-font-size: #{$font-size-base};
 
   color: var(--#{$prefix}alert-color);
   background-color: var(--#{$prefix}alert-bg-color);
@@ -72,12 +73,8 @@
     }
 
     .df-alert-collapsed-text {
-      @include ltr {
-        margin-left: var(--#{$prefix}alert-icon-margin-start);
-      }
-      @include rtl {
-        margin-right: var(--#{$prefix}alert-icon-margin-start);
-      }
+      margin-block-start: var(--#{$prefix}spacing-5);
+      margin-inline-start: var(--#{$prefix}alert-icon-margin-start);
     }
   }
 
@@ -85,6 +82,13 @@
   .btn-close {
     padding-top: var(--#{$prefix}alert-btn-close-padding-y);
     padding-bottom: var(--#{$prefix}alert-btn-close-padding-y);
+
+    &:focus {
+      box-shadow: none;
+    }
+    &:focus-visible {
+      box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    }
   }
 
   // Variants of the alerts
@@ -175,7 +179,11 @@
     border-bottom-color: var(--#{$prefix}alert-border-bottom-color);
     @each $state, $value in $theme-colors {
       &.alert-#{$state} {
-        --#{$prefix}alert-border-bottom-color: #{shades-css-var($state, 'border-color')};
+        --#{$prefix}alert-border-bottom-color: #{shades-css-var-brand2023(
+            'color-#{$state}-main-default-border',
+            $state,
+            'border-color'
+          )};
       }
     }
     &.alert-tip {

package/styles/scss/components/badge/_badge.mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 @mixin df-disable-badge($color, $bg-color, $changeBorder: false) {
   cursor: var(--#{$prefix}disabled-cursor);
   color: $color !important;
@@ -11,3 +13,13 @@
     box-shadow: none;
   }
 }
+
+@mixin df-badge-sizing($height, $font-size, $padding-inline, $close-btn-width) {
+  font-size: $font-size;
+  height: $height;
+  --#{$prefix}badge-padding-x: #{$padding-inline};
+
+  button {
+    width: $close-btn-width;
+  }
+}