@expressms/smartapp-ui 1.0.3 → 1.0.5

package/build/main/assets/icons/icon-eye-off.svg

@@ -0,0 +1 @@
+<svg width="17px" height="16px" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0769 9.99994C13.2003 10.0018 13.3093 9.95873 13.404 9.87068C13.4986 9.77881 13.5448 9.67641 13.5429 9.56348C13.5407 9.45055 13.4945 9.35198 13.404 9.26776L3.58059 0.132068C3.48597 0.0440228 3.37491 0 3.24738 0C3.11986 0 3.0129 0.0440228 2.92652 0.132068C2.83602 0.20863 2.79077 0.307203 2.79077 0.427787C2.79077 0.548371 2.83602 0.648858 2.92652 0.729248L12.7561 9.87068C12.8466 9.9549 12.9535 9.99797 13.0769 9.99994ZM13.2559 8.33754C13.8688 7.96239 14.3933 7.56714 14.8293 7.1518C15.2654 6.73645 15.5996 6.34694 15.832 5.98328C16.0645 5.61961 16.1807 5.33059 16.1807 5.11622C16.1807 4.93247 16.0932 4.69035 15.9184 4.38984C15.7436 4.08934 15.4916 3.763 15.1625 3.41081C14.8334 3.05863 14.4334 2.7074 13.9624 2.35714C13.4914 2.00687 12.9597 1.68818 12.3673 1.40107C11.775 1.11397 11.1271 0.882371 10.4236 0.706279C9.72019 0.530188 8.97357 0.442142 8.18375 0.442142C7.67366 0.442142 7.18722 0.479466 6.72444 0.554113C6.26165 0.628761 5.81429 0.733076 5.38236 0.867058L6.24005 1.65947C6.54858 1.57525 6.86327 1.51017 7.18413 1.46424C7.505 1.4183 7.8382 1.39533 8.18375 1.39533C8.80902 1.39533 9.4127 1.46998 9.99478 1.61927C10.5769 1.76857 11.1209 1.96667 11.6269 2.21358C12.1328 2.46049 12.5925 2.7275 13.006 3.01461C13.4194 3.30171 13.7742 3.5869 14.0704 3.87018C14.3665 4.15346 14.5938 4.40515 14.7522 4.62527C14.9106 4.84538 14.9898 5.00903 14.9898 5.11622C14.9898 5.26169 14.888 5.47223 14.6843 5.74785C14.4807 6.02347 14.1886 6.32493 13.8081 6.65223C13.4276 6.97953 12.9782 7.29439 12.4599 7.59681L13.2559 8.33754ZM8.18375 9.79604C8.72264 9.79604 9.2389 9.75488 9.73253 9.67258C10.2262 9.59028 10.7013 9.47639 11.1579 9.33093L10.294 8.53852C9.96496 8.63039 9.62455 8.70312 9.27284 8.75671C8.92112 8.81031 8.55809 8.8371 8.18375 8.8371C7.55025 8.8371 6.94349 8.76437 6.36346 8.6189C5.78344 8.47344 5.23941 8.28203 4.73138 8.04469C4.22334 7.80735 3.76364 7.54704 3.35228 7.26377C2.94092 6.98049 2.58611 6.69913 2.28788 6.41968C1.98964 6.14023 1.76133 5.8847 1.60295 5.65311C1.44458 5.42151 1.36539 5.24254 1.36539 5.11622C1.36539 4.99372 1.4744 4.79179 1.69243 4.51043C1.91045 4.22906 2.22 3.91707 2.62108 3.57446C3.02216 3.23185 3.50037 2.90359 4.05571 2.58969L3.24738 1.83747C2.60154 2.21263 2.05134 2.61266 1.59678 3.03758C1.14223 3.46249 0.792568 3.86061 0.547806 4.23193C0.303045 4.60326 0.180664 4.89802 0.180664 5.11622C0.180664 5.29997 0.269107 5.54209 0.445994 5.8426C0.62288 6.1431 0.877926 6.46944 1.21113 6.82162C1.54434 7.17381 1.94747 7.52408 2.42054 7.87243C2.89361 8.22079 3.42735 8.54043 4.02177 8.83136C4.6162 9.1223 5.26204 9.35581 5.9593 9.5319C6.65656 9.70799 7.39804 9.79604 8.18375 9.79604ZM11.1332 6.23019C11.2155 6.06175 11.2793 5.88375 11.3245 5.69617C11.3698 5.5086 11.3924 5.31528 11.3924 5.11622C11.3924 4.56115 11.2484 4.05871 10.9605 3.60892C10.6725 3.15912 10.2858 2.80215 9.80041 2.53801C9.315 2.27387 8.77611 2.14181 8.18375 2.14181C7.96573 2.14181 7.75696 2.16095 7.55745 2.19923C7.35794 2.23751 7.16562 2.29302 6.98051 2.36575L11.1332 6.23019ZM8.18375 8.09637C8.42645 8.09637 8.65887 8.07149 8.88101 8.02173C9.10315 7.97196 9.31706 7.90114 9.52274 7.80927L5.27746 3.8587C5.17462 4.04627 5.09749 4.24533 5.04607 4.45588C4.99465 4.66642 4.96894 4.88653 4.96894 5.11622C4.96894 5.65598 5.11292 6.15171 5.40087 6.60342C5.68883 7.05514 6.07551 7.41689 6.56092 7.68868C7.04633 7.96048 7.58727 8.09637 8.18375 8.09637Z" fill="currentColor"/></svg>

package/build/main/assets/icons/icon-eye.svg

@@ -0,0 +1 @@
+<svg width="17px" height="16px" viewBox="0 0 17 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.18375 9.92432C8.97357 9.92432 9.72019 9.83697 10.4236 9.66227C11.1271 9.48758 11.775 9.25591 12.3673 8.96729C12.9597 8.67866 13.4914 8.36155 13.9624 8.01595C14.4334 7.67036 14.8334 7.32286 15.1625 6.97347C15.4916 6.62408 15.7436 6.30032 15.9184 6.0022C16.0932 5.70407 16.1807 5.46387 16.1807 5.28158C16.1807 5.09928 16.0932 4.85908 15.9184 4.56095C15.7436 4.26283 15.4906 3.93907 15.1595 3.58968C14.8283 3.24029 14.4283 2.89185 13.9593 2.54435C13.4903 2.19686 12.9587 1.8807 12.3642 1.59587C11.7698 1.31104 11.1219 1.08127 10.4205 0.906576C9.71916 0.731879 8.97357 0.644531 8.18375 0.644531C7.39804 0.644531 6.65759 0.731879 5.96238 0.906576C5.26718 1.08127 4.62237 1.31104 4.02795 1.59587C3.43352 1.8807 2.89978 2.19686 2.42671 2.54435C1.95364 2.89185 1.54948 3.24029 1.21422 3.58968C0.878954 3.93907 0.62288 4.26283 0.445994 4.56095C0.269107 4.85908 0.180664 5.09928 0.180664 5.28158C0.180664 5.46387 0.269107 5.70407 0.445994 6.0022C0.62288 6.30032 0.877926 6.62408 1.21113 6.97347C1.54434 7.32286 1.94747 7.67036 2.42054 8.01595C2.89361 8.36155 3.42735 8.67866 4.02177 8.96729C4.6162 9.25591 5.26204 9.48758 5.9593 9.66227C6.65656 9.83697 7.39804 9.92432 8.18375 9.92432ZM8.18375 8.97298C7.55025 8.97298 6.94349 8.90082 6.36346 8.75651C5.78344 8.6122 5.23941 8.42231 4.73138 8.18685C4.22334 7.95139 3.76364 7.69314 3.35228 7.41211C2.94092 7.13108 2.58611 6.85194 2.28788 6.57471C1.98964 6.29747 1.76133 6.04397 1.60295 5.81421C1.44458 5.58445 1.36539 5.4069 1.36539 5.28158C1.36539 5.17524 1.44458 5.01289 1.60295 4.79451C1.76133 4.57614 1.98964 4.32644 2.28788 4.04541C2.58611 3.76438 2.94092 3.48145 3.35228 3.19661C3.76364 2.91178 4.22334 2.64689 4.73138 2.40194C5.23941 2.15698 5.78344 1.96045 6.36346 1.81234C6.94349 1.66423 7.55025 1.59017 8.18375 1.59017C8.80902 1.59017 9.41167 1.66423 9.99169 1.81234C10.5717 1.96045 11.1147 2.15698 11.6207 2.40194C12.1267 2.64689 12.5864 2.91178 12.9998 3.19661C13.4132 3.48145 13.768 3.76438 14.0642 4.04541C14.3604 4.32644 14.5887 4.57614 14.7491 4.79451C14.9095 5.01289 14.9898 5.17524 14.9898 5.28158C14.9898 5.4069 14.9095 5.58445 14.7491 5.81421C14.5887 6.04397 14.3604 6.29747 14.0642 6.57471C13.768 6.85194 13.4132 7.13108 12.9998 7.41211C12.5864 7.69314 12.1267 7.95139 11.6207 8.18685C11.1147 8.42231 10.5717 8.6122 9.99169 8.75651C9.41167 8.90082 8.80902 8.97298 8.18375 8.97298ZM8.18375 8.23812C8.62802 8.23812 9.04453 8.16026 9.43327 8.00456C9.82201 7.84885 10.1634 7.63523 10.4576 7.36369C10.7517 7.09215 10.981 6.77789 11.1456 6.4209C11.3101 6.06391 11.3924 5.68414 11.3924 5.28158C11.3924 4.7309 11.2484 4.23245 10.9605 3.78621C10.6725 3.33998 10.2858 2.98584 9.80041 2.7238C9.315 2.46175 8.77611 2.33073 8.18375 2.33073C7.58727 2.33073 7.0453 2.46175 6.55783 2.7238C6.07037 2.98584 5.68266 3.33998 5.3947 3.78621C5.10675 4.23245 4.96483 4.7309 4.96894 5.28158C4.97305 5.81706 5.11806 6.30887 5.40396 6.757C5.68986 7.20513 6.07551 7.56402 6.56092 7.83366C7.04633 8.1033 7.58727 8.23812 8.18375 8.23812ZM8.18375 6.2443C7.88757 6.2443 7.63664 6.15031 7.43095 5.96232C7.22527 5.77433 7.12243 5.54742 7.12243 5.28158C7.12243 5.01573 7.22527 4.78787 7.43095 4.59798C7.63664 4.40809 7.88757 4.31315 8.18375 4.31315C8.4717 4.31315 8.71955 4.40809 8.92729 4.59798C9.13503 4.78787 9.2389 5.01573 9.2389 5.28158C9.2389 5.54742 9.13503 5.77433 8.92729 5.96232C8.71955 6.15031 8.4717 6.2443 8.18375 6.2443Z" fill="currentColor"/></svg>

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

@@ -3,6 +3,8 @@ export declare const DEFAULT_BLUE_ICON_COLOR = "#4799E3";
 export declare const DEFAULT_RED_ICON_COLOR = "#EB5545";
 export declare const DEFAULT_GRAY_ICON_COLOR = "#1111114D";
 export declare const DEFAULT_BLACK_ICON_COLOR = "#111111";
+export declare const INPUT_TYPE_PASSWORD = "password";
+export declare const INPUT_TYPE_TEXT = "text";
 export declare enum PLATFORM {
     web = "web",
     ios = "ios",

package/build/main/constants/constants.js

@@ -3,6 +3,8 @@ export var DEFAULT_BLUE_ICON_COLOR = '#4799E3';
 export var DEFAULT_RED_ICON_COLOR = '#EB5545';
 export var DEFAULT_GRAY_ICON_COLOR = '#1111114D';
 export var DEFAULT_BLACK_ICON_COLOR = '#111111';
+export var INPUT_TYPE_PASSWORD = 'password';
+export var INPUT_TYPE_TEXT = 'text';
 export var PLATFORM;
 (function (PLATFORM) {
     PLATFORM["web"] = "web";

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

@@ -5,7 +5,7 @@ $color-black: rgba(17, 17, 17, 1);
 $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: #CCC;
+$color-darkest-gray-opacity: #ccc;
 $color-gray: rgba(17, 17, 17, 0.1);
 $color-light-gray: rgba(239, 242, 244, 1);
 $color-lighter-gray: rgba(224, 228, 236, 1);
@@ -14,7 +14,7 @@ $color-lightest-gray: rgba(0, 0, 0, 0.05);
 $color-white: rgba(255, 255, 255, 1);
 $color-red: rgba(235, 85, 69, 1);
 $color-blue: rgba(71, 153, 227, 1);
-$color-light-blue: #CDF4FF;
+$color-light-blue: #cdf4ff;
 $color-lighter-blue: rgba(71, 153, 227, 0.2);
 
 $border-color: rgba(85, 85, 85, 0.2);
@@ -664,6 +664,7 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
 .smartapp-input {
   display: flex;
   flex-direction: column;
+  position: relative;
 
   &__title {
     font-weight: 700;
@@ -673,21 +674,57 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
     color: $color-black;
   }
 
-  &__field {
-    padding: 12px 16px;
-    border: 1px solid $color-lightest-gray;
-    border-radius: 8px;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
-    color: $color-black;
+  &__container {
+    position: relative;
 
-    &::placeholder {
+    &--field {
+      padding: 12px 16px;
+      border: 1px solid $color-lightest-gray;
+      border-radius: 8px;
       font-weight: 400;
       font-size: 14px;
-      line-height: 20px;
-      color: $color-darker-gray;
+      line-height: 19px;
+      color: $color-black;
+      width: 100%;
+      box-sizing: border-box;
+
+      &::placeholder {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        color: $color-darker-gray;
+      }
+
+      &:focus-visible {
+        border: 1px solid $color-blue;
+        outline: none;
+      }
     }
+    &--eye-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0 16px;
+      background: none;
+      border: none;
+      transition: transform var(--timing-default) linear;
+      cursor: pointer;
+      position: absolute;
+      right: 1px;
+      top: 15px;
+
+      &:active {
+        transform: scale(0.95);
+      }
+    }
+  }
+
+  &__error {
+    font-size: 12px;
+    line-height: 16px;
+    color: $color-red;
+    margin: 8px 0 0 0;
   }
 }
 
@@ -905,7 +942,7 @@ input:checked + .smartapp-slider:before {
 
 .smartapp-stories-content {
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     width: 100%;
     height: 100%;
@@ -927,7 +964,8 @@ input:checked + .smartapp-slider:before {
     width: 400px;
   }
 
-  &__ios, &__android {
+  &__ios,
+  &__android {
     width: 100%;
   }
 
@@ -980,7 +1018,8 @@ input:checked + .smartapp-slider:before {
         right: 24px;
       }
 
-      &__ios, &__android {
+      &__ios,
+      &__android {
         left: 16px;
         right: 16px;
       }
@@ -1021,4 +1060,4 @@ input:checked + .smartapp-slider:before {
     padding-left: 24px !important;
     padding-right: 24px !important;
   }
-}
+}