@festo-ui/web-essentials 3.1.0 → 3.2.1

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

@@ -1,7 +1,17 @@
+/*!
+ * Festo UI - Web Essentials v3.2.1 (https://storybook.festo.design/)
+ * Copyright 2022 Festo SE & Co. KG
+ * Licensed under Apache-2.0
+ */
+
 @import "../../variables";
 
-span {
-  user-select: none;
+.fng-flatpickr {
+  span {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 }
 
 .flatpickr-calendar {
@@ -10,8 +20,8 @@ span {
   animation: none;
   direction: ltr;
   border: 0;
-  font-size: 14px;
-  line-height: 24px;
+  font-size: $font-size-md;
+  line-height: font-size-md + 10px;
   position: absolute;
   box-sizing: border-box;
   touch-action: manipulation;
@@ -153,6 +163,8 @@ span {
     line-height: 24px;
     text-align: center;
     position: relative;
+    -webkit-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     overflow: hidden;
     flex: 1;
@@ -279,20 +291,20 @@ span {
 }
 
 .flatpickr-current-month {
-  font-size: 16px;
-  font-weight: normal;
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
   position: absolute;
   width: 75%;
   left: 12.5%;
   padding: 7px 0 0 0;
-  line-height: 24px;
+  line-height: calc(#{$font-size-base} + 8px);
   height: 34px;
   display: inline-block;
   text-align: center;
   transform: translate3d(0, 0, 0);
   span.cur-month {
     font-family: inherit;
-    font-weight: 700;
+    font-weight: $font-weight-bold;
     color: inherit;
     display: inline-block;
     margin-left: 0.5ch;
@@ -397,7 +409,7 @@ span {
 
 span.flatpickr-weekday {
   cursor: default;
-  font-size: 14px;
+  font-size: $font-size-md;
   background: transparent;
   color: $text-light;
   line-height: 1;
@@ -405,7 +417,7 @@ span.flatpickr-weekday {
   text-align: center;
   display: block;
   flex: 1;
-  font-weight: normal;
+  font-weight: $font-weight-normal;
 }
 
 .dayContainer,
@@ -452,7 +464,7 @@ span.flatpickr-weekday {
   box-sizing: border-box;
   color: $text;
   cursor: pointer;
-  font-weight: 400;
+  font-weight: $font-weight-normal;
   width: 14.2857143%;
   -ms-flex-preferred-size: 14.2857143%;
   flex-basis: 14.2857143%;
@@ -757,7 +769,7 @@ span.flatpickr-weekday {
   height: inherit;
   line-height: inherit;
   color: $text;
-  font-size: 14px;
+  font-size: $font-size-md;
   position: relative;
   box-sizing: border-box;
   appearance: textfield;
@@ -769,7 +781,7 @@ span.flatpickr-weekday {
 
 .flatpickr-time input.flatpickr-minute,
 .flatpickr-time input.flatpickr-second {
-  font-weight: 400;
+  font-weight: $font-weight-normal;
 }
 
 .flatpickr-time input:focus {
@@ -785,6 +797,8 @@ span.flatpickr-weekday {
   color: $text;
   font-weight: $font-weight-bold;
   width: 2%;
+  -webkit-user-select: none;
+  -ms-user-select: none;
   user-select: none;
   align-self: center;
 }
@@ -794,7 +808,7 @@ span.flatpickr-weekday {
   width: 18%;
   cursor: pointer;
   text-align: center;
-  font-weight: 400;
+  font-weight: $font-weight-normal;
 }
 
 .flatpickr-time input:hover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/web-essentials",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "CSS framework and utils to build FESTO web applications",
   "main": "jest.config.js",
   "style": "dist/css/festo-web-essentials.css",

package/scss/_accordion.scss

@@ -0,0 +1,107 @@
+.fwe-accordion {
+  background-color: $white;
+
+  &-header {
+    display: flex;
+    align-items: center;
+    height: $spacer-xl;
+    padding: 0 $spacer-s 0 $spacer-m;
+    font-size: $font-size-md;
+    font-weight: $font-weight-bold;
+    color: $text;
+    border-bottom: 1px solid $gray-100;
+  }
+
+  &-item {
+    position: relative;
+    padding: 0 $spacer-s 0 $spacer-m;
+    border-top: 1px solid $gray-100;
+    border-bottom: 1px solid $gray-100;
+
+    &-header {
+      outline: none;
+      display: flex;
+      align-items: center;
+      padding: $spacer-m $spacer-xxl $spacer-m 0;
+      min-height: $spacer-xl;
+      cursor: pointer;
+    }
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      content: "";
+      width: $spacer-xxxs;
+      height: 0px;
+      background-color: $caerul;
+    }
+
+    &::after {
+      position: absolute;
+      top: 21px;
+      right: $spacer-s;
+      display: block;
+      font-family: $font-family-icons-32;
+      font-size: $font-size-xxl;
+      content: "\e900";
+      height: $spacer-l;
+      line-height: $spacer-l;
+      transition: transform 0.2s ease;
+      pointer-events: none;
+    }
+
+    &[open] {
+      .fwe-accordion-item-header {
+        font-weight: $font-weight-bold;
+      }
+
+      &::after {
+        transform: rotate(-180deg);
+      }
+
+      &::before {
+        height: 100%;
+      }
+    }
+
+    &:not([open]) .fwe-accordion-item-header {
+      font-weight: $font-weight-normal;
+    }
+
+    &-body {
+      overflow: hidden;
+      margin-right: 0;
+      margin-bottom: $spacer-m;
+
+      > :first-child {
+        margin-top: 0 !important;
+        padding-top: 0 !important;
+      }
+
+      > :last-child {
+        margin-bottom: 0 !important;
+        padding-bottom: 0 !important;
+      }
+
+      > :not(.fwe-accordion) {
+        margin-right: 0px;
+      }
+    }
+  }
+}
+
+@media (min-width: $grid-breakpoint-xs) {
+  .fwe-accordion {
+    &-item {
+      &-body {
+        margin-right: $spacer-xxl;
+      }
+    }
+  }
+}

package/scss/_badge.scss

@@ -9,7 +9,7 @@
   height: 19px;
   line-height: 17px;
   background-color: $hero;
-  font-weight: bold;
+  font-weight: $font-weight-bold;
 
   &.fwe-badge-sm {
     font-size: $font-size-small;

package/scss/_bottom-navigation.scss

@@ -0,0 +1,44 @@
+.fwe-bottom-navigation {
+  width: 100%;
+  display: flex;
+  background: $white;
+  align-items: flex-start;
+  justify-content: space-between;
+  border-top: 1px solid $border;
+  height: 84px;
+  padding: 22px 16px;
+  .fwe-bottom-navigation-button {
+    cursor: pointer;
+    user-select: none;
+    .fwe-icon {
+      line-height: 0px;
+    }
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    outline: none;
+    color: $icon-gray;
+    position: relative;
+    :after {
+      content: "";
+      position: absolute;
+      top: -23px;
+      left: 0px;
+      right: 0px;
+      height: 0px;
+      background: $hero;
+      transition: height 0.3s ease;
+    }
+    &.fwe-selected {
+      color: $hero;
+      cursor: default;
+      :after {
+        height: 4px;
+      }
+    }
+    &:active {
+      color: $hero-darker;
+    }
+  }
+}

package/scss/_breadcrumb.scss

@@ -1,4 +1,5 @@
 .fwe-breadcrumb {
+  white-space: nowrap;
   display: flex;
   justify-items: center;
   align-items: center;
@@ -15,8 +16,8 @@
     color: $text-light;
     text-decoration: none;
     user-select: none;
-    font-size: 14px;
-    line-height: 16px;
+    font-size: $font-size-md;
+    line-height: calc(#{$font-size-md} + 2px);
     &:focus {
       outline: none;
     }

package/scss/_button.scss

@@ -5,12 +5,13 @@ button.fwe-btn {
   display: inline-flex;
   align-items: center;
   text-align: center;
+  justify-content: center;
   font-family: $font-family-base;
   font-size: $font-size-base;
   padding: 4px 16px;
   min-height: 32px;
-  color: $text;
-  background: $control;
+  color: $btn-text;
+  background: $btn;
   border-radius: $control-border-radius;
   cursor: pointer;
   border: none;
@@ -25,12 +26,12 @@ button.fwe-btn {
   }
 
   &:hover {
-    color: $text;
-    background: $control-dark;
+    color: $btn-text-hover;
+    background: $btn-hover;
   }
 
   &:active {
-    background: $control-darker;
+    background: $btn-active;
   }
 
   &:focus {
@@ -40,33 +41,32 @@ button.fwe-btn {
   &:disabled,
   &.fwe-disabled {
     cursor: default;
-    background: $control-disabled;
-    color: $text-disabled;
+    background: $btn-disabled;
+    color: $btn-text-disabled;
   }
 
   &.fwe-btn-hero {
-    color: $white;
-    background: $hero;
+    color: $btn-hero-text;
+    background: $btn-hero;
 
     &:hover {
-      color: $white;
-      background: $hero-dark;
+      color: $btn-hero-text-hover;
+      background: $btn-hero-hover;
     }
 
     &:active {
-      background: $hero-darker;
+      background: $btn-hero-active;
     }
 
     &:disabled,
     &.fwe-disabled {
-      background: $control-disabled;
-      color: $text-disabled;
+      background: $btn-hero-disabled;
+      color: $btn-hero-text-disabled;
     }
   }
 
   &.fwe-btn-block {
     width: 100%;
-    justify-content: center;
   }
 
   &.fwe-btn-link {

package/scss/_cards.scss

@@ -83,7 +83,7 @@
       h6 {
         line-height: $font-size-base;
         font-size: $font-size-base;
-        font-weight: bold;
+        font-weight: $font-weight-bold;
         margin: 0;
         padding: 0;
       }

package/scss/_checkbox.scss

@@ -75,7 +75,7 @@ label.fwe-checkbox {
     background-color: $white;
     border-radius: 2px;
     margin-top: 2px;
-    font-size: 14px;
+    font-size: $font-size-md;
     @extend .fwe-icon;
     @extend .fwe-icon-menu-check;
     &:before {

package/scss/_chips.scss

@@ -1,5 +1,5 @@
 %chip-lg {
-  font-size: 16px;
+  font-size: $font-size-base;
   line-height: 22px;
   border-radius: 16px;
   padding: 3px 16px 5px 16px;
@@ -14,8 +14,8 @@
       &::after {
         top: 4px;
         font-family: $font-family-icons-24;
-        font-size: 24px;
-        line-height: 24px;
+        font-size: $font-size-xl;
+        line-height: $font-size-xl;
       }
     }
     &.fwe-filter {
@@ -45,8 +45,8 @@
   position: relative;
   display: flex;
   align-items: flex-end;
-  font-size: 14px;
-  line-height: 21px;
+  font-size: $font-size-md;
+  line-height: calc(#{$font-size-md} + 7px);
   text-align: center;
   border-radius: 12px;
   cursor: pointer;

package/scss/_fonts.scss

@@ -12,7 +12,7 @@
 }
 
 @font-face {
-  font-family: $font-family-icons-16;
+  font-family: "festo_icons-16";
   src: url("../fonts/festo_icons-16.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
@@ -20,7 +20,7 @@
 }
 
 @font-face {
-  font-family: $font-family-icons-24;
+  font-family: "festo_icons-24";
   src: url("../fonts/festo_icons-24.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
@@ -28,7 +28,7 @@
 }
 
 @font-face {
-  font-family: $font-family-icons-32;
+  font-family: "festo_icons-32";
   src: url("../fonts/festo_icons-32.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;

package/scss/_icons.scss

@@ -11,7 +11,7 @@
     text-transform: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: "#{$font-family-icons-16}";
+    font-family: $font-family-icons-16;
   }
 }
 
@@ -20,30 +20,30 @@
 }
 
 .fwe-icon-lg {
-  font-size: $font-size-xl;
+  font-size: 24px;
   &:before {
-    font-family: "#{$font-family-icons-24}" !important;
+    font-family: $font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-2x {
-  font-size: $font-size-xxl;
+  font-size: 32px;
   &:before {
-    font-family: "#{$font-family-icons-32}" !important;
+    font-family: $font-family-icons-32 !important;
   }
 }
 
 .fwe-icon-3x {
   font-size: 48px;
   &:before {
-    font-family: "#{$font-family-icons-24}" !important;
+    font-family: $font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-4x {
   font-size: 64px;
   &:before {
-    font-family: "#{$font-family-icons-32}" !important;
+    font-family: $font-family-icons-32 !important;
   }
 }
 
@@ -147,7 +147,7 @@
 .fwe-icon-communication-emergency-hotline:before {
   content: "\e919";
 }
-.fwe-icon-communication-audio-on:before {
+.fwe-icon-communication-headset:before {
   content: "\e91a";
 }
 .fwe-icon-communication-infoportal:before {
@@ -540,7 +540,7 @@
 .fwe-icon-file-search:before {
   content: "\e99c";
 }
-.fwe-icon-file-lock:before {
+.fwe-icon-file-secure:before {
   content: "\e99d";
 }
 .fwe-icon-file-share:before {
@@ -1311,3 +1311,138 @@
 .fwe-icon-simulation:before {
   content: "\ea9d";
 }
+.fwe-icon-control-valve:before {
+  content: "\ea9e";
+}
+.fwe-icon-country-selector:before {
+  content: "\ea9f";
+}
+.fwe-icon-dosing-heads:before {
+  content: "\eaa0";
+}
+.fwe-icon-single-valve:before {
+  content: "\eaa1";
+}
+.fwe-icon-show-course:before {
+  content: "\eaa2";
+}
+.fwe-icon-show-equipment:before {
+  content: "\eaa3";
+}
+.fwe-icon-show-group:before {
+  content: "\eaa4";
+}
+.fwe-icon-show-results:before {
+  content: "\eaa5";
+}
+.fwe-icon-show-user:before {
+  content: "\eaa6";
+}
+.fwe-icon-align-bottom:before {
+  content: "\eaa7";
+}
+.fwe-icon-align-center:before {
+  content: "\eaa8";
+}
+.fwe-icon-align-left:before {
+  content: "\eaa9";
+}
+.fwe-icon-align-middle:before {
+  content: "\eaaa";
+}
+.fwe-icon-align-right:before {
+  content: "\eaab";
+}
+.fwe-icon-align-top:before {
+  content: "\eaac";
+}
+.fwe-icon-artificial-intelligence-AI:before {
+  content: "\eaad";
+}
+.fwe-icon-assign-to-learner:before {
+  content: "\eaae";
+}
+.fwe-icon-augmented-reality:before {
+  content: "\eaaf";
+}
+.fwe-icon-bus-systems:before {
+  content: "\eab0";
+}
+.fwe-icon-cobotic:before {
+  content: "\eab1";
+}
+.fwe-icon-controlled:before {
+  content: "\eab2";
+}
+.fwe-icon-distribute-columns:before {
+  content: "\eab3";
+}
+.fwe-icon-electrics:before {
+  content: "\eab4";
+}
+.fwe-icon-energy-efficiency:before {
+  content: "\eab5";
+}
+.fwe-icon-fast-delivery:before {
+  content: "\eab6";
+}
+.fwe-icon-funk:before {
+  content: "\eab7";
+}
+.fwe-icon-hide-label:before {
+  content: "\eab8";
+}
+.fwe-icon-iiot:before {
+  content: "\eab9";
+}
+.fwe-icon-iot:before {
+  content: "\eaba";
+}
+.fwe-icon-learning-path1:before {
+  content: "\eabb";
+}
+.fwe-icon-mobotic:before {
+  content: "\eabc";
+}
+.fwe-icon-new-link:before {
+  content: "\eabd";
+}
+.fwe-icon-numeric-value:before {
+  content: "\eabe";
+}
+.fwe-icon-piezo:before {
+  content: "\eabf";
+}
+.fwe-icon-pneumatics:before {
+  content: "\eac0";
+}
+.fwe-icon-recycling:before {
+  content: "\eac1";
+}
+.fwe-icon-remove-link:before {
+  content: "\eac2";
+}
+.fwe-icon-remove-user:before {
+  content: "\eac3";
+}
+.fwe-icon-safety:before {
+  content: "\eac4";
+}
+.fwe-icon-show-label:before {
+  content: "\eac5";
+}
+.fwe-icon-show-link:before {
+  content: "\eac6";
+}
+.fwe-icon-smart:before {
+  content: "\eac7";
+}
+.fwe-icon-sustainable-materials:before {
+  content: "\eac9";
+}
+.fwe-icon-text-value:before {
+  content: "\eaca";
+}
+.fwe-icon-virtual-reality:before {
+  content: "\eacb";
+}

package/scss/_layout.scss

@@ -16,3 +16,46 @@
     }
   }
 }
+
+.fwe-layout-1920 {
+  display: flex;
+  justify-content: center;
+  padding: 0px !important;
+  .fwe-container {
+    padding: 0px !important;
+    max-width: 1920px - 128;
+    margin-right: 64px;
+    margin-left: 64px;
+    @media (max-width: $grid-breakpoint-lg) {
+      margin-right: 32px;
+      margin-left: 32px;
+    }
+    @media (max-width: $grid-breakpoint-sm) {
+      margin-right: 16px;
+      margin-left: 16px;
+    }
+    @media (max-width: $grid-breakpoint-xs) {
+      margin-right: 8px;
+      margin-left: 8px;
+    }
+    .fwe-app-logo-container {
+      position: unset;
+      margin-bottom: 17px;
+      margin-right: 24px;
+    }
+  }
+}
+
+.fwe-layout-1440 {
+  @extend .fwe-layout-1920;
+  .fwe-container {
+    max-width: 1440px - 128px;
+  }
+}
+
+.fwe-layout-1024 {
+  @extend .fwe-layout-1920;
+  .fwe-container {
+    max-width: 1024px - 64px;
+  }
+}