@expressms/smartapp-ui 1.1.6 → 1.1.7

package/build/main/assets/icons/refresh.svg

@@ -1,3 +1,3 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.56794 9.99964C3.56794 8.12635 4.388 6.44602 5.67438 5.2722L7.58787 7.18569V2.36176H2.76395L4.53272 4.13054C2.95691 5.59379 1.95996 7.67612 1.95996 9.99964C1.95996 13.8617 4.6804 17.0832 8.30458 17.8602C8.77703 17.9615 9.19585 17.5803 9.19585 17.0972C9.19585 16.6848 8.88658 16.3426 8.48574 16.2459C5.66795 15.5657 3.56794 13.0229 3.56794 9.99964ZM18.0397 9.99964C18.0397 6.13764 15.3193 2.91614 11.6951 2.1391C11.2226 2.03781 10.8038 2.41894 10.8038 2.90212C10.8038 3.31447 11.1131 3.65666 11.5139 3.75342C14.3317 4.4336 16.4317 6.97643 16.4317 9.99964C16.4317 11.8729 15.6117 13.5533 14.3253 14.7271L12.4118 12.8136V17.6375H17.2357L15.4669 15.8688C17.0428 14.4055 18.0397 12.3232 18.0397 9.99964Z" fill="#111111" fill-opacity="0.3"/>
+<path d="M3.56794 9.99964C3.56794 8.12635 4.388 6.44602 5.67438 5.2722L7.58787 7.18569V2.36176H2.76395L4.53272 4.13054C2.95691 5.59379 1.95996 7.67612 1.95996 9.99964C1.95996 13.8617 4.6804 17.0832 8.30458 17.8602C8.77703 17.9615 9.19585 17.5803 9.19585 17.0972C9.19585 16.6848 8.88658 16.3426 8.48574 16.2459C5.66795 15.5657 3.56794 13.0229 3.56794 9.99964ZM18.0397 9.99964C18.0397 6.13764 15.3193 2.91614 11.6951 2.1391C11.2226 2.03781 10.8038 2.41894 10.8038 2.90212C10.8038 3.31447 11.1131 3.65666 11.5139 3.75342C14.3317 4.4336 16.4317 6.97643 16.4317 9.99964C16.4317 11.8729 15.6117 13.5533 14.3253 14.7271L12.4118 12.8136V17.6375H17.2357L15.4669 15.8688C17.0428 14.4055 18.0397 12.3232 18.0397 9.99964Z" fill="currentColor" fill-opacity="1"/>
 </svg>

package/build/main/constants/constants.d.ts

@@ -2,6 +2,7 @@ export declare const DEFAULT_BLUE_LIGHT_ICON_COLOR = "#4799E30D";
 export declare const DEFAULT_BLUE_ICON_COLOR = "#4799E3";
 export declare const DEFAULT_BLUE_ICON_HOVER_COLOR = "#3C82C1";
 export declare const DEFAULT_RED_ICON_COLOR = "#EB5545";
+export declare const DEFAULT_WHITE_LIGHT_ICON_COLOR = "#FFFFFF80";
 export declare const DEFAULT_GRAY_ICON_COLOR = "#1111114D";
 export declare const DEFAULT_BLACK_ICON_COLOR = "#111111";
 export declare const DEFAULT_HEADER_TEXT_COLOR = "#111111";

package/build/main/constants/constants.js

@@ -2,6 +2,7 @@ export var DEFAULT_BLUE_LIGHT_ICON_COLOR = '#4799E30D';
 export var DEFAULT_BLUE_ICON_COLOR = '#4799E3';
 export var DEFAULT_BLUE_ICON_HOVER_COLOR = '#3C82C1';
 export var DEFAULT_RED_ICON_COLOR = '#EB5545';
+export var DEFAULT_WHITE_LIGHT_ICON_COLOR = '#FFFFFF80';
 export var DEFAULT_GRAY_ICON_COLOR = '#1111114D';
 export var DEFAULT_BLACK_ICON_COLOR = '#111111';
 export var DEFAULT_HEADER_TEXT_COLOR = '#111111';

package/build/main/helpers/index.d.ts

@@ -3,4 +3,5 @@ export declare const isWebPlatform: (platform: string) => boolean;
 export declare const isIosPlatform: (platform: string) => boolean;
 export declare const isAndroidPlatform: (platform: string) => boolean;
 export declare const isMobilePlatform: (platform: string) => boolean;
-export declare const getClassNames: (className: string, delimiter: string, additionalClassName: string) => string;
+export declare const getClassNames: (className: string, delimiter: string, additionalClassName: string | string[]) => string;
+export declare const getDefaultColorForCloseIcon: (theme: string) => "#FFFFFF80" | "#1111114D";

package/build/main/helpers/index.js

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { PLATFORM } from '../constants';
+import { isArray } from 'lodash';
+import { DEFAULT_GRAY_ICON_COLOR, DEFAULT_WHITE_LIGHT_ICON_COLOR, PLATFORM, THEME } from '../constants';
 export var getColor = function (color, defaultColor) {
     return (color && CSS.supports('color', color)) ? color : defaultColor;
 };
@@ -7,4 +8,7 @@ export var isWebPlatform = function (platform) { return platform === PLATFORM.we
 export var isIosPlatform = function (platform) { return platform === PLATFORM.ios; };
 export var isAndroidPlatform = function (platform) { return platform === PLATFORM.android; };
 export var isMobilePlatform = function (platform) { return isAndroidPlatform(platform) || isIosPlatform(platform); };
-export var getClassNames = function (className, delimiter, additionalClassName) { return (classNames(className, "".concat(className).concat(delimiter).concat(additionalClassName))); };
+export var getClassNames = function (className, delimiter, additionalClassName) { return (isArray(additionalClassName)
+    ? classNames(className, additionalClassName.map(function (name) { return "".concat(className).concat(delimiter).concat(name); }))
+    : classNames(className, "".concat(className).concat(delimiter).concat(additionalClassName))); };
+export var getDefaultColorForCloseIcon = function (theme) { return theme === THEME.default ? DEFAULT_GRAY_ICON_COLOR : DEFAULT_WHITE_LIGHT_ICON_COLOR; };

package/build/main/styles/stories.module.scss

@@ -2,17 +2,24 @@
 @import 'react-datepicker/dist/react-datepicker';
 
 $color-black: rgba(17, 17, 17, 1);
+$color-light-black-50: rgba(17, 17, 17, 0.5);
+$color-light-black-30: rgba(17, 17, 17, 0.3);
+$color-light-black-10: rgba(17, 17, 17, 0.1);
+$color-black-60: rgba(0, 0, 0, 0.6);
+$color-black-20: rgba(0, 0, 0, 0.2);
 $color-black-10: rgba(0, 0, 0, 0.1);
 $color-black-8: rgba(0, 0, 0, 0.08);
-$color-dark-gray: rgba(17, 17, 17, 0.5);
-$color-darker-gray: rgba(17, 17, 17, 0.3);
-$color-darker-gray-opacity: rgba(0, 0, 0, 0.2);
-$color-darkest-gray-opacity: rgba(204, 204, 204, 1);
-$color-gray: rgba(17, 17, 17, 0.1);
-$color-light-gray: rgba(239, 242, 244, 1);
+$color-black-5: rgba(0, 0, 0, 0.05);
+$color-darkest-gray: rgba(61, 61, 61, 1);
+$color-darker-gray: rgba(102, 102, 102, 1);
+$color-dark-gray: rgba(128, 128, 128, 1);
+$color-gray: rgba(140, 140, 140, 1);
+$color-light-gray: rgba(204, 204, 204, 1);
 $color-lighter-gray: rgba(224, 228, 236, 1);
-$color-lightest-gray: rgba(0, 0, 0, 0.05);
+$color-lightest-gray: rgba(239, 242, 244, 1);
 $color-white: rgba(255, 255, 255, 1);
+$color-white-30: rgba(255, 255, 255, 0.3);
+$color-white-5: rgba(255, 255, 255, 0.05);
 $color-dark-red: rgba(222, 97, 97, 1);
 $color-red: rgba(235, 85, 69, 1);
 $color-light-red: rgba(200, 66, 53, 1);
@@ -24,14 +31,8 @@ $color-orange: rgba(252, 158, 90, 1);
 $color-orange-10: rgba(252, 158, 90, 0.1);
 $color-light-orange: rgba(253, 246, 228, 1);
 
-$border-dark-gray-color: rgba(102, 102, 102, 1);
-$border-gray-color: rgba(128, 128, 128, 1);
-
 $popup-background: rgba(37, 77, 145, 0.2);
 
-$box-shadow-light-color: rgba(0, 0, 0, 0.05);
-$box-shadow-dark-color: rgba(0, 0, 0, 0.6);
-
 .smartapp-action-modal {
   width: 100%;
   padding: 0 20px;
@@ -84,7 +85,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     }
 
     &--delimiter {
-      border-top: 0.5px solid $color-gray;
+      border-top: 0.5px solid $color-light-black-10;
       margin: 0 -24px 16px -24px;
     }
 
@@ -94,6 +95,22 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       justify-content: center;
     }
   }
+
+  &__dark {
+    .smartapp-action-modal {
+      &__content {
+        background-color: $color-darkest-gray;
+
+        &--title {
+          color: $color-white;
+        }
+
+        &--delimiter {
+          border-top-color: $color-white-5;
+        }
+      }
+    }
+  }
 }
 
 .action-modal-content {
@@ -122,7 +139,9 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 .smartapp-attached-file {
   display: flex;
   align-items: center;
+  font-family: Open Sans, 'sans-serif';
   margin-bottom: 8px;
+
   &--icon {
     display: flex;
     align-items: flex-start;
@@ -134,6 +153,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     flex-direction: row;
     gap: 12px;
     width: 100%;
+
     &--info {
       &__name {
         font-weight: 700;
@@ -147,7 +167,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: $color-dark-gray;
+        color: $color-light-black-50;
         margin: 0;
       }
     }
@@ -179,6 +199,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   justify-content: center;
   width: 40px;
   height: 40px;
+  font-family: Open Sans, 'sans-serif';
   font-size: 18px;
   color: $color-white;
   background: linear-gradient(135deg, $color-purple 0%, $color-dark-red 100%);
@@ -255,6 +276,15 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     background: $color-red;
     border: 0;
   }
+
+  &__dark--blue,
+  &__dark--red {
+    color: $color-darkest-gray;
+  }
+
+  &__dark--white {
+    background-color: $color-darkest-gray;
+  }
 }
 
 .smartapp-calendar-component {
@@ -266,7 +296,8 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   .react-datepicker {
-    border-color: $color-gray !important;
+    font-family: Open Sans, 'sans-serif';
+    border-color: $color-light-black-10 !important;
     box-shadow: 0 9px 24px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.14) !important;
     padding-bottom: 24px;
 
@@ -283,8 +314,8 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
     // Голова
     &__header {
-      background: $color-light-gray !important;
-      color: $color-dark-gray;
+      background: $color-lightest-gray !important;
+      color: $color-light-black-50;
       padding: 0;
       border-bottom: 0;
     }
@@ -294,7 +325,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-weight: 700;
       font-size: 14px;
       line-height: 19px;
-      color: $color-dark-gray;
+      color: $color-light-black-50;
       padding: 8px 0 !important;
     }
 
@@ -303,7 +334,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-weight: 700;
       font-size: 12px;
       line-height: 16px;
-      color: $color-dark-gray;
+      color: $color-light-black-50;
       margin-top: 16px;
     }
 
@@ -314,7 +345,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-size: 12px;
       line-height: 16px;
       text-transform: uppercase;
-      color: $color-dark-gray !important;
+      color: $color-light-black-50 !important;
       background: $color-white;
     }
 
@@ -325,7 +356,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
     // Дни, которые уже прошли
     &__day--disabled {
-      color: $color-darkest-gray-opacity !important;
+      color: $color-light-gray !important;
     }
 
     // Каждый день
@@ -339,7 +370,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
       &:hover {
         border-radius: 8px;
-        background-color: $color-darker-gray;
+        background-color: $color-light-black-30;
         color: $color-black;
       }
     }
@@ -377,6 +408,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
   // // Сам input для календаря с выбранными датами
   .smartapp-calendar-input {
+    font-family: Open Sans, 'sans-serif';
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;
@@ -384,7 +416,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     align-items: center;
     cursor: pointer;
     padding: 12px 16px;
-    border: 1px solid $color-lightest-gray;
+    border: 1px solid $color-black-5;
     border-radius: 8px;
     box-sizing: border-box;
     width: 100%;
@@ -409,24 +441,24 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     width: 17px;
     height: 17px;
     background-color: $color-white;
-    border: 1.5px solid $border-gray-color;
+    border: 1.5px solid $color-dark-gray;
     border-radius: 50%;
     cursor: pointer;
   }
 
   /* стили при наведении курсора на радио */
   &__custom-check-box:not(:disabled):not(:checked) + .checkmark:hover::before {
-    border-color: $border-dark-gray-color;
+    border-color: $color-darker-gray;
   }
 
   /* стили для активной радиокнопки (при нажатии на неё) */
   &__custom-check-box:not(:disabled):active + .checkmark::before {
-    border-color: $border-gray-color;
+    border-color: $color-dark-gray;
   }
 
   /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
   &__custom-check-box:focus:not(:checked) + .checkmark::before {
-    border-color: $border-gray-color;
+    border-color: $color-dark-gray;
     background-size: 60% 60%;
   }
 
@@ -452,10 +484,11 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
+  font-family: Open Sans, 'sans-serif';
   max-width: 172px;
   padding: 4px 8px 4px 4px;
   border-radius: 20px;
-  background-color: $color-light-gray;
+  background-color: $color-lightest-gray;
 
   &__info {
     display: flex;
@@ -523,7 +556,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     }
 
     &--delimiter {
-      border-top: 0.5px solid $color-gray;
+      border-top: 0.5px solid $color-light-black-10;
       margin: 0 -24px 16px -24px;
     }
 
@@ -563,6 +596,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   display: flex;
   flex-direction: row;
   align-items: center;
+  font-family: Open Sans, 'sans-serif';
   font-size: 14px;
   line-height: 19px;
   color: $color-black;
@@ -615,7 +649,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: $color-dark-gray;
+        color: $color-light-black-50;
       }
     }
   }
@@ -640,7 +674,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: $color-dark-gray;
+      color: $color-light-black-50;
     }
   }
 
@@ -655,6 +689,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         cursor: pointer;
 
         &--name {
+          font-family: Open Sans, 'sans-serif';
           font-weight: 400;
           font-size: 14px;
           line-height: 20px;
@@ -714,6 +749,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   flex-direction: column;
+  font-family: Open Sans, 'sans-serif';
   background-color: $color-white;
 
   &__icon {
@@ -737,13 +773,14 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
-    color: $color-dark-gray;
+    color: $color-light-black-50;
     word-break: break-word;
     text-align: center;
   }
 }
 
 .smartapp-header {
+  font-family: Open Sans, 'sans-serif';
   font-weight: 700;
   display: flex;
   justify-content: space-between;
@@ -801,44 +838,45 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 }
 
 .smartapp-input {
+  font-family: Open Sans, 'sans-serif';
   display: flex;
   flex-direction: column;
   position: relative;
 
   &__title {
-    font-weight: 700;
     font-size: 14px;
+    font-weight: 600;
     line-height: 19px;
-    margin: 0 0 8px 0;
     color: $color-black;
+    margin: 0 0 8px 0;
   }
 
   &__container {
     position: relative;
 
     &--field {
-      padding: 13px 16px;
-      border: 1px solid $color-lightest-gray;
-      border-radius: 8px;
-      font-weight: 400;
-      color: $color-black;
       width: 100%;
       box-sizing: border-box;
+      font-family: inherit;
+      font-weight: 400;
+      color: $color-black;
+      border: 1px solid $color-black-5;
+      border-radius: 8px;
+      padding: 13px 16px;
 
       &__with-clear-button {
         padding-right: 44px;
       }
 
       &::placeholder {
-        font-family: Open Sans, 'sans-serif';
         font-size: inherit;
         font-weight: 400;
         line-height: inherit;
-        color: $color-darker-gray;
+        color: $color-light-black-30;
       }
 
       &:focus-visible {
-        border: 1px solid $color-blue;
+        border: 1px solid $color-blue !important;
         outline: none;
       }
     }
@@ -856,6 +894,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       position: absolute;
       right: 1px;
       top: 15px;
+      color: $color-gray;
 
       &:active {
         transform: scale(0.95);
@@ -875,12 +914,33 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   &__error {
     font-size: 12px;
     line-height: 16px;
-    color: $color-red;
+    color: $color-light-red;
     margin: 8px 0 0 0;
   }
+
+  &__dark {
+    .smartapp-input {
+      &__title {
+        color: $color-white;
+      }
+
+      &__container {
+        &--field {
+          color: $color-white;
+          background: $color-darkest-gray;
+          border-color: $color-black-5;
+
+          &::placeholder {
+            color: $color-white-30;
+          }
+        }
+      }
+    }
+  }
 }
 
 .smartapp-loader-wrapper {
+  font-family: Open Sans, 'sans-serif';
   display: flex;
   align-items: center;
   justify-content: center;
@@ -905,7 +965,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   &__title {
     font-weight: 400;
     text-align: center;
-    color: $color-darker-gray;
+    color: $color-light-black-30;
     word-break: break-word;
     margin: 0;
   }
@@ -915,7 +975,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   position: absolute;
   padding: 16px;
   box-sizing: border-box;
-  box-shadow: 2px 2px 6px $box-shadow-dark-color;
+  box-shadow: 2px 2px 6px $color-black-60;
   max-width: 330px;
   top: 45px;
   background-color: $color-white;
@@ -924,6 +984,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   &__container {
     position: relative;
     display: inline-flex;
+    font-family: Open Sans, 'sans-serif';
     z-index: 1;
     max-width: 330px;
   }
@@ -999,16 +1060,18 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 }
 
 .smartapp-switcher {
+  font-family: Open Sans, 'sans-serif';
+
   &__instance {
     padding: 8px 16px;
-    background: $color-lightest-gray;
+    background: $color-black-5;
     border-radius: 4px;
     border: 0;
     font-weight: 700;
     font-size: 12px;
     line-height: 16px;
     letter-spacing: -0.01em;
-    color: $color-darker-gray-opacity;
+    color: $color-black-20;
     text-decoration: none;
     white-space: nowrap;
     box-sizing: border-box;
@@ -1056,14 +1119,14 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   right: 0;
   bottom: 0;
   border-radius: 69px;
-  background: $border-gray-color;
+  background: $color-dark-gray;
   transition: 0.2s;
   -webkit-transition: 0.2s;
   cursor: pointer;
 
   &__disabled {
     opacity: 0.3;
-    background: $border-gray-color !important;
+    background: $color-dark-gray !important;
     cursor: default;
   }
 
@@ -1083,7 +1146,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &:hover {
-    background: $border-dark-gray-color;
+    background: $color-darker-gray;
   }
 }
 
@@ -1278,7 +1341,7 @@ input:checked + .smartapp-slider:before {
   align-items: center;
   gap: 8px;
   border-radius: 100px;
-  box-shadow: 0 1px 8px 0 $box-shadow-light-color;
+  box-shadow: 0 1px 8px 0 $color-black-5;
   padding: 8px 12px;
   margin: 16px auto 0 auto;
   z-index: 1000;
@@ -1400,6 +1463,18 @@ input:checked + .smartapp-slider:before {
       cursor: pointer;
     }
   }
+
+  &__dark {
+    .smartapp-modal {
+      &__content {
+        background-color: $color-darkest-gray;
+
+        &--title {
+          color: $color-white;
+        }
+      }
+    }
+  }
 }
 
 .modal-content {
@@ -1483,7 +1558,7 @@ input:checked + .smartapp-slider:before {
     justify-content: center;
     width: 20px;
     height: 20px;
-    border: 1.5px solid $border-gray-color;
+    border: 1.5px solid $color-dark-gray;
     border-radius: 50%;
     background-color: $color-white;
     margin: 0;
@@ -1492,7 +1567,7 @@ input:checked + .smartapp-slider:before {
   }
 
   input[type="radio"]:not(:disabled):hover {
-    border-color: $border-dark-gray-color;
+    border-color: $color-darker-gray;
     cursor: pointer;
   }