Add updates and fix sass warnings

infor-design · Aug 6, 2024 · 91b3c69 · 91b3c69
1 parent 1c89932
commit 91b3c69
Show file tree

Hide file tree

Showing 10 changed files with 1,670 additions and 1,731 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,24 +77,24 @@
     "not ie 11"
   ],
   "dependencies": {
-    "d3": "^7.8.5",
+    "d3": "^7.9.0",
     "ids-identity": "^4.17.1",
     "jquery": "^3.7.1"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.9.1",
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/core": "^7.25.2",
+    "@babel/eslint-parser": "^7.25.1",
     "@babel/plugin-external-helpers": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@percy/cli": "^1.28.9",
+    "@babel/preset-env": "^7.25.3",
+    "@percy/cli": "^1.29.1",
     "@percy/playwright": "^1.0.6",
-    "@percy/sdk-utils": "^1.28.9",
-    "@playwright/test": "^1.44.1",
+    "@percy/sdk-utils": "^1.29.1",
+    "@playwright/test": "^1.46.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@types/node": "^20.14.9",
+    "@types/node": "^22.1.0",
     "archiver": "^7.0.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-transform-default-named-imports": "^1.2.2",
@@ -106,41 +106,41 @@
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-compat": "4.2.0",
+    "eslint-plugin-compat": "6.0.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jasmine": "^4.1.3",
+    "eslint-plugin-jasmine": "^4.2.0",
     "eslint-plugin-jasmine-jquery": "^1.0.0",
     "express": "^4.19.2",
     "express-csp": "^0.1.3",
     "express-session": "^1.18.0",
     "extend": "^3.0.2",
     "form-data": "^4.0.0",
     "front-matter": "^4.0.2",
-    "glob": "^10.4.3",
+    "glob": "^11.0.0",
     "handlebars": "^4.7.8",
     "handlebars-wax": "^6.1.0",
-    "highlight.js": "^11.9.0",
-    "html-loader": "^5.0.0",
+    "highlight.js": "^11.10.0",
+    "html-loader": "^5.1.0",
     "ids-css": "^1.5.0",
     "js-yaml": "^4.1.0",
     "markdownlint-cli": "^0.41.0",
-    "marked": "^13.0.1",
+    "marked": "^13.0.3",
     "mmm": "^0.2.2",
     "nodemon": "^3.1.4",
     "nyc": "^17.0.0",
     "r2": "^2.0.1",
-    "release-it": "^17.4.0",
-    "rimraf": "^5.0.8",
-    "rollup": "^4.18.0",
+    "release-it": "^17.6.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.20.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-istanbul": "^5.0.0",
-    "rollup-plugin-license": "^3.5.1",
-    "sass": "1.77.6",
+    "rollup-plugin-license": "^3.5.2",
+    "sass": "1.77.8",
     "slash": "^5.1.0",
-    "stylelint": "^16.6.1",
+    "stylelint": "^16.8.1",
     "stylelint-config-standard-scss": "^13.1.0",
-    "stylelint-scss": "^6.3.2",
-    "terser": "^5.31.1",
+    "stylelint-scss": "^6.5.0",
+    "terser": "^5.31.3",
     "vinyl": "^3.0.0",
     "vinyl-fs": "^4.0.0",
     "yargs": "^17.7.2",

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
@@ -534,12 +534,12 @@
   }
 
   > [class^='btn'] {
-    @include btn-chevron-style;
-
     border-radius: 8px;
     width: 38px;
     height: 38px;
     margin: unset;
+
+    @include btn-chevron-style;
   }
 
   > [class^='btn'],

diff --git a/src/components/cards/_cards.scss b/src/components/cards/_cards.scss
@@ -1,33 +1,5 @@
 // Cards/Widgets
 //=======================================================
-
-// @import '../button/button-chevron';
-
-@mixin auto-height {
-  height: auto;
-  min-height: 0;
-  max-height: none;
-
-  .widget-content,
-  .card-content {
-    height: auto;
-    min-height: auto;
-    max-height: none;
-  }
-}
-
-@mixin auto-width {
-  min-width: 0;
-  width: auto;
-
-  .widget-content,
-  .card-content {
-    min-width: 0;
-    width: auto;
-  }
-}
-
-
 $card: '.card', '.widget', '.small-widget';
 $card-content: '.card-content', '.widget-content';
 $card-header: '.card-header', '.widget-header';
@@ -129,13 +101,21 @@ $card-header-section: '.card-header-section', '.widget-header-section';
   }
 
   &.card-variant {
-    @include auto-height;
-
+    height: auto;
+    min-height: 0;
+    max-height: none;
     align-items: center;
     display: flex;
     flex-flow: nowrap;
     justify-content: space-between;
 
+    .widget-content,
+    .card-content {
+      height: auto;
+      min-height: auto;
+      max-height: none;
+    }
+
     .card-image {
       padding: 15px 0 15px 15px;
       flex: 0 0 auto;
@@ -295,7 +275,16 @@ $card-header-section: '.card-header-section', '.widget-header-section';
 
   // Expandable card headers set auto-height automatically
   &.expandable-area {
-    @include auto-height;
+    height: auto;
+    min-height: 0;
+    max-height: none;
+
+    .widget-content,
+    .card-content {
+      height: auto;
+      min-height: auto;
+      max-height: none;
+    }
 
     .expandable-header {
       &:first-child {
@@ -334,8 +323,20 @@ $card-header-section: '.card-header-section', '.widget-header-section';
   }
 
   &.auto-size {
-    @include auto-height;
-    @include auto-width;
+    height: auto;
+    min-height: 0;
+    max-height: none;
+    min-width: 0;
+    width: auto;
+
+    .widget-content,
+    .card-content {
+      min-width: 0;
+      width: auto;
+      height: auto;
+      min-height: auto;
+      max-height: none;
+    }
   }
 }
 
@@ -470,12 +471,12 @@ $card-header-section: '.card-header-section', '.widget-header-section';
   .card-title,
   .widget-title {
     ~ svg.icon {
-      @include colorPalettesProperty(color);
-
       background: transparent;
       cursor: pointer;
       margin-left: 5px;
       position: relative;
+
+      @include colorPalettesProperty(color);
     }
   }
 

diff --git a/src/components/counts/_counts.scss b/src/components/counts/_counts.scss
@@ -15,9 +15,6 @@
   width: 120px;
 
   .count {
-    @include font-size(16);
-    @include colorPalettesProperty(border-color);
-
     background: transparent;
     border: 1px solid;
     border-radius: 50%;
@@ -30,18 +27,21 @@
     text-align: center;
     vertical-align: middle;
     width: 80px;
+
+    @include font-size(16);
+    @include colorPalettesProperty(border-color);
   }
 
   svg.icon {
-    @include colorPalettesProperty(color);
-
     background: $cardlist-bg-color;
     height: 19px;
     position: absolute;
     right: 23px;
     top: 0;
     width: 20px;
 
+    @include colorPalettesProperty(color);
+
     &.icon-alert {
       right: 22px;
       top: -3px;

diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -75,8 +75,6 @@ select.dropdown-xs {
 div.dropdown,
 div.multiselect {
   @include input-style();
-  @include css3(touch-callout, none);
-  @include css3(user-select, none);
   @include transition(background-color 0.2s ease);
 
   background-color: $input-color-initial-background;
@@ -90,6 +88,9 @@ div.multiselect {
   vertical-align: middle;
   white-space: nowrap;
 
+  @include css3(touch-callout, none);
+  @include css3(user-select, none);
+
   &.text-align-reverse {
     text-align: right;
   }

diff --git a/src/components/form/_form.scss b/src/components/form/_form.scss
@@ -185,24 +185,24 @@
           .container.drop-area {
             padding: 20px 15px;
           }
-    
+
           .container {
             .file-row {
               .description {
                 max-width: calc(100% - 45px);
               }
-    
+
               .size {
                 margin: 0;
                 width: calc(100% - 10px);
               }
             }
-    
+
             .l-pull-right {
               float: unset;
               text-align: center;
             }
-    
+
             &.completed {
               .file-row {
                 .size {
@@ -276,12 +276,12 @@ html {
 }
 
 .input-hide-text {
+  -webkit-text-security: disc;
+
   &::-ms-reveal,
   &::-ms-clear {
     display: none !important;
   }
-
-  -webkit-text-security: disc;
 }
 
 html[dir='rtl'] {

diff --git a/src/components/grid/_grid.scss b/src/components/grid/_grid.scss
@@ -10,21 +10,21 @@ $gutter-neg-size: -20px;
 //$breakpoint-tablet-to-desktop: 1160px;
 //$breakpoint-desktop-to-extralarge: 1440px;
 .row {
-  &.flex-align-bottom {
-    &.has-messages {
-      // align-items: center;
-      input:not(.error) {
-        margin-bottom: 22px;
-      }
-    }
-  }
-
   clear: both;
   font-size: $ids-size-font-sm;
   margin: 0 auto;
   max-width: $breakpoint-tablet-to-desktop;
   width: 100%;
 
+    &.flex-align-bottom {
+      &.has-messages {
+        // align-items: center;
+        input:not(.error) {
+          margin-bottom: 22px;
+        }
+      }
+    }
+
   &.full-width {
     margin-top: 20px;
     max-width: 100%;

diff --git a/src/components/homepage/_homepage.scss b/src/components/homepage/_homepage.scss
@@ -263,7 +263,16 @@
 
 .card.auto-height,
 .widget.auto-height {
-  @include auto-height;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+
+  .widget-content,
+  .card-content {
+    height: auto;
+    min-height: auto;
+    max-height: none;
+  }
 
   .chart-container {
     margin-top: 0;
@@ -273,7 +282,16 @@
 }
 
 .small-widget.auto-height {
-  @include auto-height;
+  height: auto;
+  min-height: 0;
+  max-height: none;
+
+  .widget-content,
+  .card-content {
+    height: auto;
+    min-height: auto;
+    max-height: none;
+  }
 
   .chart-container {
     padding-bottom: 24px;