@expressms/smartapp-ui 1.1.3 → 1.1.5

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

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_690_22198)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 8.67417L13.9774 4.6967C14.3435 4.33058 14.9371 4.33058 15.3032 4.6967C15.6693 5.06282 15.6693 5.65641 15.3032 6.02252L11.3257 10L15.3032 13.9775C15.6693 14.3436 15.6693 14.9372 15.3032 15.3033C14.9371 15.6694 14.3435 15.6694 13.9774 15.3033L9.99991 11.3258L6.02244 15.3033C5.65632 15.6694 5.06273 15.6694 4.69661 15.3033C4.33049 14.9372 4.33049 14.3436 4.69661 13.9775L8.67409 10L4.69661 6.02252C4.33049 5.65641 4.33049 5.06282 4.69661 4.6967C5.06273 4.33058 5.65632 4.33058 6.02244 4.6967L9.99991 8.67417Z" fill="#4799E3"/>
+</g>
+<defs>
+<clipPath id="clip0_690_22198">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -9,8 +9,10 @@ export declare const DEFAULT_WHITE_LOADER_BACKGROUND_COLOR = "#FFFFFF";
 export declare const DEFAULT_GRAY_LOADER_BACKGROUND_COLOR = "#E0E4EC66";
 export declare const DEFAULT_TEXT_BUTTON_COLOR = "#111111";
 export declare const DEFAULT_BACKGROUND_BUTTON_COLOR = "#FFFFFF";
+export declare const DEFAULT_POPUP_BACKGROUND_COLOR = "rgba(37, 77, 145, 0.2)";
 export declare const INPUT_TYPE_PASSWORD = "password";
 export declare const INPUT_TYPE_TEXT = "text";
+export declare const ENTER_KEY = "Enter";
 export declare enum FONT_SIZE {
     small = "14px",
     default = "16px",

package/build/main/constants/constants.js

@@ -9,8 +9,10 @@ export var DEFAULT_WHITE_LOADER_BACKGROUND_COLOR = '#FFFFFF';
 export var DEFAULT_GRAY_LOADER_BACKGROUND_COLOR = '#E0E4EC66';
 export var DEFAULT_TEXT_BUTTON_COLOR = '#111111';
 export var DEFAULT_BACKGROUND_BUTTON_COLOR = '#FFFFFF';
+export var DEFAULT_POPUP_BACKGROUND_COLOR = 'rgba(37, 77, 145, 0.2)';
 export var INPUT_TYPE_PASSWORD = 'password';
 export var INPUT_TYPE_TEXT = 'text';
+export var ENTER_KEY = 'Enter';
 export var FONT_SIZE;
 (function (FONT_SIZE) {
     FONT_SIZE["small"] = "14px";

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

@@ -2,3 +2,5 @@ export declare const getColor: (color: string | undefined, defaultColor: string)
 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, platform: string) => string;

package/build/main/helpers/index.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { PLATFORM } from '../constants';
 export var getColor = function (color, defaultColor) {
     return (color && CSS.supports('color', color)) ? color : defaultColor;
@@ -5,3 +6,5 @@ export var getColor = function (color, defaultColor) {
 export var isWebPlatform = function (platform) { return platform === PLATFORM.web; };
 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, platform) { return classNames(className, "".concat(className).concat(delimiter).concat(platform)); };

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

@@ -28,38 +28,59 @@ $box-shadow-color: rgba(0, 0, 0, 0.25);
 $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
 .smartapp-action-modal {
-  padding: 0 20px;
   width: 100%;
+  padding: 0 20px;
+
+  &__ios,
+  &__android {
+    padding: 0;
+  }
 
   &__content {
+    box-sizing: border-box;
     position: relative;
     display: flex;
     flex-direction: column;
+    width: 100%;
     background-color: $color-white;
+    border-radius: 4px;
     padding: 24px;
-    border: 1px solid $border-color;
-    border-radius: 3px;
-    width: 100%;
-    box-sizing: border-box;
 
-    &__cancel-cross {
-      cursor: pointer;
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
+
+    &--cancel-cross {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      top: 8px;
+      right: 8px;
+      cursor: pointer;
     }
 
     &--title {
-      color: $color-black;
-      font-weight: 800;
-      font-size: 18px;
-      line-height: 20px;
-      margin-bottom: 16px;
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 22px;
       text-align: center;
+      color: $color-black;
+      margin: 8px 0 24px 0;
+
+      &__ios,
+      &__android {
+        margin-top: 0;
+      }
     }
 
     &--input {
-      margin-bottom: 16px;
+      margin-bottom: 24px;
+    }
+
+    &--delimiter {
+      border-top: 0.5px solid $color-gray;
+      margin: 0 -24px 16px -24px;
     }
 
     &--buttons {
@@ -70,13 +91,27 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 }
 
-.popup-content {
+.action-modal-content {
   width: 100%;
   height: 100%;
-  background: $popup-background;
+  background: var(--action-modal-background, $popup-background);
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+}
+
+.action-modal-ios-content,
+.action-modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.action-modal-ios-overlay,
+.action-modal-android-overlay {
+  background: var(--action-modal-background, $popup-background);
+  cursor: pointer;
 }
 
 .smartapp-attached-file {
@@ -158,16 +193,25 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
 .smartapp-button {
   width: 100%;
+
   &__standard {
     cursor: pointer;
     padding: 12px 32px;
     border-radius: 8px;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__low {
     cursor: pointer;
     padding: 5px 32px;
     border-radius: 3px;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__disabled {
@@ -175,32 +219,35 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &__color--blue {
-    font-weight: 600;
+    font-family: Open Sans, 'sans-serif';
     font-size: 14px;
-    line-height: normal;
-    background: $color-blue;
-    color: $color-white;
+    font-weight: 600;
+    line-height: 19px;
     text-align: center;
+    color: $color-white;
+    background: $color-blue;
     border: 0;
   }
 
   &__color--white {
-    font-weight: 600;
+    font-family: Open Sans, 'sans-serif';
     font-size: 14px;
-    line-height: normal;
-    background: $color-white;
-    color: $color-blue;
+    font-weight: 600;
+    line-height: 19px;
     text-align: center;
+    color: $color-blue;
+    background: $color-white;
     border: 1px solid $color-blue;
   }
 
   &__color--red {
-    font-weight: 600;
+    font-family: Open Sans, 'sans-serif';
     font-size: 14px;
-    line-height: normal;
-    background: $color-red;
-    color: $color-white;
+    font-weight: 600;
+    line-height: 19px;
     text-align: center;
+    color: $color-white;
+    background: $color-red;
     border: 0;
   }
 }
@@ -428,48 +475,79 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   width: 100%;
   padding: 0 20px;
 
+  &__ios,
+  &__android {
+    padding: 0;
+  }
+
   &__content {
-    background-color: $color-white;
-    padding: 24px;
-    border: 1px solid $border-color;
-    border-radius: 3px;
     box-sizing: border-box;
     width: 100%;
+    background-color: $color-white;
+    border-radius: 4px;
+    padding: 32px 24px 24px 24px;
+
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
 
     &--title {
-      color: $color-black;
-      margin: 0 0 24px 0;
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
       font-weight: 700;
-      font-size: 20px;
-      line-height: 20px;
+      line-height: 22px;
       text-align: center;
+      color: $color-black;
+      margin: 0 0 24px 0;
     }
 
     &--text {
-      color: $color-black;
-      font-weight: 400;
+      font-family: Open Sans, 'sans-serif';
       font-size: 14px;
+      font-weight: 400;
       line-height: 16px;
-      margin-bottom: 16px;
       text-align: center;
+      color: $color-black;
+      margin: 0 0 24px 0;
+    }
+
+    &--delimiter {
+      border-top: 0.5px solid $color-gray;
+      margin: 0 -24px 16px -24px;
     }
 
     &--buttons {
       display: flex;
       flex-direction: row;
       justify-content: center;
-      gap: 16px;
+      gap: 8px;
     }
   }
 }
 
-.popup-content {
+.confirmation-modal-content {
   width: 100%;
   height: 100%;
-  background: $popup-background;
+  background: var(--confirmation-modal-background, $popup-background);
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+}
+
+.confirmation-modal-ios-content,
+.confirmation-modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.confirmation-modal-ios-overlay,
+.confirmation-modal-android-overlay {
+  background: var(--confirmation-modal-background, $popup-background);
+  cursor: pointer;
 }
 
 .smartapp-custom-select {
@@ -730,20 +808,23 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     position: relative;
 
     &--field {
-      padding: 12px 16px;
+      padding: 13px 16px;
       border: 1px solid $color-lightest-gray;
       border-radius: 8px;
       font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
       color: $color-black;
       width: 100%;
       box-sizing: border-box;
 
+      &__with-clear-button {
+        padding-right: 44px;
+      }
+
       &::placeholder {
+        font-family: Open Sans, 'sans-serif';
+        font-size: inherit;
         font-weight: 400;
-        font-size: 14px;
-        line-height: 20px;
+        line-height: inherit;
         color: $color-darker-gray;
       }
 
@@ -771,6 +852,15 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         transform: scale(0.95);
       }
     }
+
+    &--clear-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 16px;
+      margin: auto 0;
+      cursor: pointer;
+    }
   }
 
   &__error {
@@ -1242,3 +1332,72 @@ input:checked + .smartapp-slider:before {
     transform: rotate(360deg);
   }
 }
+
+.smartapp-modal {
+  width: 100%;
+  padding: 0 20px;
+  cursor: default;
+
+  &__ios,
+  &__android {
+    padding: 0;
+  }
+
+  &__content {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    background-color: $color-white;
+    border-radius: 4px;
+    padding: 24px;
+
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
+
+    &--title {
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
+      font-weight: 700;
+      line-height: normal;
+      text-align: center;
+      color: $color-black;
+      margin: 0;
+    }
+
+    &--close-icon {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      cursor: pointer;
+    }
+  }
+}
+
+.modal-content {
+  width: 100%;
+  height: 100%;
+  background: var(--modal-background, $popup-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.modal-ios-content,
+.modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.modal-ios-overlay,
+.modal-android-overlay {
+  background: var(--modal-background, $popup-background);
+  cursor: pointer;
+}