@festo-ui/web-essentials 5.0.0 → 5.1.0-dev.162

package/dist/scss/organisms/_side-menu.scss

@@ -3,11 +3,14 @@
   width: 240px;
   display: flex;
   flex-direction: column;
-  border-left: 1px solid $border;
   .fwe-side-menu-item {
+    border-left: 1px solid $border;
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    height: 42px;
     cursor: pointer;
     margin-left: -1px;
-    line-height: 42px;
     color: $text;
     padding: 0px 8px 0px 16px;
     position: relative;
@@ -15,11 +18,11 @@
       position: absolute;
       content: "";
       top: 0px;
-      left: 0px;
+      left: -1px;
       bottom: 0px;
       width: 0px;
       background: $hero;
-      transition: width 0.2s;
+      transition: width 0.2s, height 0.2s;
     }
     &.fwe-active {
       color: $hero;
@@ -32,23 +35,34 @@
   @media (max-width: 900px) {
     width: 190px;
   }
-}
 
-.fwe-side-menu-layout {
-  margin-top: 64px;
-  display: flex;
-  align-items: flex-start;
-  .fwe-content-container {
-    max-width: 600px;
-    flex-shrink: 1;
-    flex-grow: 1;
-    @media (max-width: 750px) {
-      max-width: unset;
-      margin-top: 32px;
+  &--horizontal {
+    @include custom-scrollbar;
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: auto;
+
+    .fwe-side-menu-item {
+      border: unset;
+      height: 48px;
+      padding: 0px 16px;
+      margin: 0px;
+      white-space: nowrap;
+      &::before {
+        top: unset;
+        right: 16px;
+        left: 16px;
+        width: unset;
+        height: 0px;
+      }
+      &.fwe-active {
+        &::before {
+          width: unset;
+          height: 4px;
+        }
+      }
     }
   }
-  @media (max-width: 750px) {
-    flex-direction: column;
-    margin-top: 32px;
-  }
 }

package/dist/scss/organisms/festo-web-essentials-organisms.scss

@@ -5,6 +5,7 @@
  */
 
 @import "../variables";
+@import "../mixins";
 
 @import "footer";
 @import "teaser";

package/dist/scss/themes/flatpickr/festo.scss

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v5.0.0 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v5.1.0-dev.162 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "5.0.0",
+  "version": "5.1.0-dev.162",
   "description": "CSS framework and utils to build FESTO web applications",
   "keywords": [
     "css",
@@ -21,8 +21,8 @@
     "scss"
   ],
   "scripts": {
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "fwe:build": "npm-run-all fwe:css fwe:copy",
     "fwe:css:version": "node build/change-version.js",
     "fwe:css": "npm-run-all fwe:css:lint fwe:css:build fwe:css:minify fwe:css:minify:flatpickr fwe:css:minify:organisms",
@@ -43,23 +43,23 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "6.5.12",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addons": "6.5.12",
-    "@storybook/builder-webpack4": "^6.5.15",
-    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/cli": "^6.5.15",
-    "@storybook/core-server": "6.5.12",
-    "@storybook/html": "^6.5.15",
-    "@storybook/manager-webpack4": "^6.5.15",
-    "@storybook/manager-webpack5": "6.5.12",
+    "@babel/preset-env": "^7.22.14",
+    "@babel/preset-typescript": "^7.22.11",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-docs": "7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-interactions": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addon-mdx-gfm": "^7.4.0",
+    "@storybook/addons": "7.4.0",
+    "@storybook/cli": "^7.4.0",
+    "@storybook/core-server": "7.4.0",
+    "@storybook/html": "^7.4.0",
+    "@storybook/html-webpack5": "^7.4.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.5.12",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "6.5.12",
+    "@storybook/react": "7.4.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/theming": "7.4.0",
     "autoprefixer": "10.4.8",
     "babel-jest": "27.5.1",
     "babel-loader": "^8.3.0",
@@ -78,7 +78,7 @@
     "eslint-plugin-prefer-arrow": "^1.2.2",
     "eslint-plugin-react": "7.30.1",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.6.13",
     "globby": "^13.1.3",
     "html-webpack-plugin": "^5.3.2",
     "ng-packagr": "14.1.0",
@@ -95,6 +95,7 @@
     "sass": "^1.57.1",
     "sass-loader": "12.6.0",
     "sort-package-json": "^2.1.0",
+    "storybook": "^7.4.0",
     "style-loader": "^3.2.1",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.4",

package/scss/_checkbox.scss

@@ -23,7 +23,9 @@ $lgWidth: 24px;
 
 %checkmark-lg {
   height: $lgHeight;
+  min-height: $lgHeight;
   width: $lgWidth;
+  min-width: $lgWidth;
   border-radius: $border-radius-s;
   @extend .fwe-icon-lg;
   &:before {
@@ -70,7 +72,9 @@ label.fwe-checkbox {
     box-sizing: border-box;
     position: relative;
     height: $defaultHeight;
+    min-height: $defaultHeight;
     width: $defaultWidth;
+    min-width: $defaultWidth;
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 2px;

package/scss/_fonts.scss

@@ -39,21 +39,48 @@
 .fwe-font-size-small {
   font-size: $font-size-small;
 }
+
 .fwe-font-size-md {
   font-size: $font-size-md;
 }
+
 .fwe-font-size-base {
   font-size: $font-size-base;
 }
+
 .fwe-font-size-xl {
   font-size: $font-size-xl;
 }
+
 .fwe-font-size-xxl {
   font-size: $font-size-xxl;
 }
+
 .fwe-line-height-base {
   line-height: $line-height-base;
 }
+
 .fwe-line-height-1 {
   line-height: 1;
 }
+
+.fwe-font-weight-base {
+  font-weight: $font-weight-base;
+}
+
+.fwe-font-weight-normal {
+  font-weight: $font-weight-normal;
+}
+
+.fwe-font-weight-bold {
+  font-weight: $font-weight-bold;
+}
+
+.fwe-font-family-sans-serif {
+  font-family: $font-family-sans-serif;
+}
+
+.fwe-font-family-monospace,
+.fwe-font-family-code {
+  font-family: $font-family-monospace;
+}

package/scss/_grid.scss

@@ -7,6 +7,16 @@
       .fwe-col#{$infix}-#{$i} {
         grid-column-end: span $i;
       }
+
+      .fwe-grid-line-break#{$infix} {
+        grid-column-start: 1;
+      }
+
+      @if $i < $grid-columns {
+        .fwe-offset#{$infix}-#{$i} {
+          grid-column-start: $i + 1;
+        }
+      }
     }
   }
 }

package/scss/_misc.scss

@@ -0,0 +1,47 @@
+.fwe-object-fit-contain {
+  object-fit: contain !important;
+}
+
+.fwe-object-fit-cover {
+  object-fit: cover !important;
+}
+
+.fwe-object-fit-fill {
+  object-fit: fill !important;
+}
+
+.fwe-object-fit-scale-down {
+  object-fit: scale-down !important;
+}
+
+.fwe-w-100 {
+  width: 100% !important;
+}
+
+.fwe-h-100 {
+  height: 100% !important;
+}
+
+.fwe-text-align-center {
+  text-align: center;
+}
+
+.fwe-text-align-right {
+  text-align: right;
+}
+
+.fwe-text-align-left {
+  text-align: right;
+}
+
+.fwe-text-align-justify {
+  text-align: justify;
+}
+
+.fwe-text-align-end {
+  text-align: end;
+}
+
+.fwe-text-align-start {
+  text-align: start;
+}

package/scss/_mixins.scss

@@ -24,22 +24,25 @@
 @mixin custom-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: $control-scrollbar $gray-100;
-  &::-webkit-scrollbar {
-    width: 14px;
-  }
 
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
+  @media (pointer: fine) {
+    &::-webkit-scrollbar {
+      width: 14px;
+    }
 
-  &::-webkit-scrollbar-thumb {
-    overflow: visible;
-    background-color: $control-scrollbar;
-    // use $gray-100 with opacity 0 for effect of margins of scrollbar
-    border: 3px solid rgba(242, 243, 245, 0);
-    // hide the background with background clip
-    -webkit-background-clip: padding-box;
-    background-clip: padding-box;
-    border-radius: 8px;
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      overflow: visible;
+      background-color: $control-scrollbar;
+      // use $gray-100 with opacity 0 for effect of margins of scrollbar
+      border: 3px solid rgba(242, 243, 245, 0);
+      // hide the background with background clip
+      -webkit-background-clip: padding-box;
+      background-clip: padding-box;
+      border-radius: 8px;
+    }
   }
 }

package/scss/_navbar.scss

@@ -256,3 +256,8 @@ header.fwe-fixed-header {
     align-items: center;
   }
 }
+
+// Margin for fixed overlay elements used with fixed navbar
+.fwe-navbar-margin {
+  margin-top: $navbar-height;
+}

package/scss/_radio.scss

@@ -27,12 +27,20 @@ $lgWidth: 24px;
       .fwe-radio-checkmark {
         height: $lgHeight;
         width: $lgWidth;
+        min-height: $lgHeight;
+        min-width: $lgWidth;
 
         &:after {
           height: $lgHeight;
           width: $lgWidth;
+          min-height: $lgHeight;
+          min-width: $lgWidth;
         }
       }
+
+      .fwe-radio-label-content {
+        line-height: 32px;
+      }
     }
   }
 
@@ -62,6 +70,8 @@ label.fwe-radio {
     position: relative;
     height: $defaultHeight;
     width: $defaultWidth;
+    min-height: $defaultHeight;
+    min-width: $defaultWidth;
     border: 1px solid $control-border;
     background-color: $white;
     border-radius: 50%;
@@ -77,6 +87,8 @@ label.fwe-radio {
       top: -1px;
       height: $defaultHeight;
       width: $defaultWidth;
+      min-height: $defaultHeight;
+      min-width: $defaultWidth;
       transition: transform ease-out 0.3s, background-color ease-out 0.3s;
       transform: scale(0.001);
     }
@@ -86,12 +98,20 @@ label.fwe-radio {
     .fwe-radio-checkmark {
       height: $lgHeight;
       width: $lgWidth;
+      min-height: $lgHeight;
+      min-width: $lgWidth;
 
       &:after {
         height: $lgHeight;
         width: $lgWidth;
+        min-height: $lgHeight;
+        min-width: $lgWidth;
       }
     }
+
+    .fwe-radio-label-content {
+      line-height: 32px;
+    }
   }
 
   .fwe-radio-label-content {
@@ -112,7 +132,7 @@ label.fwe-radio {
     opacity: 0;
     cursor: pointer;
 
-    &:hover ~ .fwe-radio-checkmark {
+    &:hover:not(:disabled) ~ .fwe-radio-checkmark {
       background-color: $control;
     }
 
@@ -125,7 +145,7 @@ label.fwe-radio {
       border-color: $hero;
     }
 
-    &:hover:checked ~ .fwe-radio-checkmark {
+    &:hover:checked:not(:disabled) ~ .fwe-radio-checkmark {
       background-color: $hero-dark;
       border-color: $hero-dark;
     }

package/scss/_root.scss

@@ -63,7 +63,6 @@
   --fwe-control-scrollbar: #d2d5d9; // 80% * --fwe-control-dark + 20% * #FFFFFF
 
   --fwe-background: #f2f3f5;
-  --fwe-background-image-gallery: #707070;
 
   --fwe-border: #d8dce1;
   --fwe-border-disabled: #e6e9ec; // 64% * --fwe-gray-300 + 36% * #FFFFFF

package/scss/_scroll.scss

@@ -1,6 +1,6 @@
 // styles for native browser scrollbar
 .fwe-scrollbar {
-  @include custom-scrollbar();
+  @include custom-scrollbar;
 }
 
 // styles for js scrollbar (simplebar.js)

package/scss/_sidebar-overlay.scss

@@ -0,0 +1,39 @@
+$fwe-sidebar-overlay-width: 480px;
+
+.fwe-sidebar-overlay {
+  z-index: $zindex-sticky;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
+  padding: 32px;
+  position: fixed;
+  right: 0px;
+  top: 0px;
+  bottom: 0px;
+  width: $fwe-sidebar-overlay-width;
+  background: $white;
+  transform: translateX($fwe-sidebar-overlay-width);
+  transition: opacity 400ms, transform 400ms;
+  opacity: 0;
+  &--open {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+  .fwe-close-icon-button {
+    line-height: 1;
+    display: block;
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    margin: 0 0 0 auto;
+    outline: none;
+    text-align: right;
+    cursor: pointer;
+    &:hover {
+      color: $hero;
+    }
+  }
+  @media (max-width: $grid-breakpoint-xs) {
+    left: 0px;
+    width: unset;
+    transform: translateX(100%);
+  }
+}

package/scss/_table.scss

@@ -70,8 +70,8 @@ table.fwe-table {
 
       background-color: $white;
       border-bottom: 2px solid $background;
-      padding-top: 11px;
-      padding-bottom: 13px;
+      padding-top: 12px;
+      padding-bottom: 12px;
       padding-left: 16px;
       padding-right: 16px;
       vertical-align: top;

package/scss/_tree.scss

@@ -1,5 +1,5 @@
 .fwe-tree {
-  @include custom-scrollbar();
+  @include custom-scrollbar;
   position: relative;
 
   &-node {

package/scss/_variables.scss

@@ -64,7 +64,6 @@ $control-border-darker: var(--fwe-control-border-darker) !default;
 
 $background: var(--fwe-background) !default;
 $background-modal: rgba(black, 0.7) !default;
-$background-image-gallery: var(--fwe-background-image-gallery) !default;
 
 $border: var(--fwe-border) !default;
 $border-disabled: var(--fwe-border-disabled) !default;

package/scss/festo-web-essentials.scss

@@ -16,6 +16,7 @@
 @import "normalize";
 @import "utils";
 
+@import "misc";
 @import "display";
 @import "spacing";
 @import "border";
@@ -56,3 +57,4 @@
 @import "bottom-navigation";
 @import "accordion";
 @import "tree";
+@import "sidebar-overlay";

package/scss/organisms/_image-gallery.scss

@@ -8,7 +8,7 @@
   max-width: unset;
   max-height: 100vh;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
 
   .fwe-btn-link i.fwe-icon-menu-close.fwe-modal-image-gallery-close {
     padding-right: 0px;
@@ -40,7 +40,7 @@
 .fwe-image-gallery-container {
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow: hidden;
 }
 
 .fwe-image-gallery-content {
@@ -59,7 +59,7 @@
 .fwe-image-gallery {
   width: 100%;
   height: 288px;
-  background-color: $background-image-gallery;
+  background-color: white;
   user-select: none;
 
   svg,
@@ -92,6 +92,7 @@
       height: 64px;
       opacity: 0.33;
       transition: opacity 0.3s;
+      cursor: pointer;
 
       &:last-child {
         margin-right: 0px;
@@ -113,17 +114,19 @@
         object-fit: cover;
         width: 88px;
         height: 56px;
-        background-color: $background-image-gallery;
+        background-color: white;
       }
 
       &.swiper-slide-thumb-active,
       &:hover {
         opacity: 1;
-
         &::after {
           opacity: 1;
         }
       }
+      &.swiper-slide-thumb-active {
+        cursor: default;
+      }
     }
   }
 
@@ -141,13 +144,14 @@
     margin-right: 8px;
     opacity: 0.33;
     transition: opacity 0.3s;
+    cursor: pointer;
 
     img {
       position: absolute;
       height: 56px;
       width: 88px;
       min-width: 88px;
-      background: $background-image-gallery;
+      background: white;
       object-fit: cover;
     }
 
@@ -169,11 +173,14 @@
     &.fwe-active,
     &:hover {
       opacity: 1;
-
       &::after {
         opacity: 1;
       }
     }
+
+    &.fwe-active {
+      cursor: default;
+    }
   }
 }
 
@@ -225,12 +232,6 @@
         margin-top: none;
       }
     }
-
-    &--with-thumbnails {
-      .fwe-image-gallery-wrapper {
-        width: 984px;
-      }
-    }
   }
 
   .fwe-image-gallery,