Merge branch 'main' of github.com:deriv-com/ui into aum/FEQ-1654/page…

…layout-improvements-remove-right-content-flex
deriv-com · Feb 2, 2024 · 1cddcb8 · 1cddcb8
2 parents 052882b + ab4c127
commit 1cddcb8
Show file tree

Hide file tree

Showing 21 changed files with 970 additions and 252 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,71 @@
+## [1.1.7](https://github.com/deriv-com/ui/compare/v1.1.6...v1.1.7) (2024-02-02)
+
+
+### ♻️ 	 Chores
+
+* adding storybook to input component ([11b0228](https://github.com/deriv-com/ui/commit/11b0228571db1e1d8f447fd61f0a51e618396f7d))
+
+
+### 🐛 	 Bug Fixes
+
+* added style type back inside of input component ([fd763aa](https://github.com/deriv-com/ui/commit/fd763aa85acf958a9ae76e699d791398eda016bf))
+* stylings for helper message and input variants ([dd8f65e](https://github.com/deriv-com/ui/commit/dd8f65eb1a145a74030db72df10e7a822492786c))
+
+## [1.1.6](https://github.com/deriv-com/ui/compare/v1.1.5...v1.1.6) (2024-02-02)
+
+
+### ♻️ 	 Chores
+
+* made improvements to Tooltip and Text component ([6ecb236](https://github.com/deriv-com/ui/commit/6ecb23648445be2bec1459d7c32361a8d4e39c58))
+
+## [1.1.5](https://github.com/deriv-com/ui/compare/v1.1.4...v1.1.5) (2024-02-01)
+
+
+### ♻️ 	 Chores
+
+* improve storybook for passwordinput ([3a35240](https://github.com/deriv-com/ui/commit/3a35240bdbfee869c16f3196c6d7f00b0d84ba7a))
+
+
+### 🐛 	 Bug Fixes
+
+* change some of the types inside of PasswordInput ([c3726d9](https://github.com/deriv-com/ui/commit/c3726d958956fa31c00c4dd86d4f8198a026b966))
+
+## [1.1.4](https://github.com/deriv-com/ui/compare/v1.1.3...v1.1.4) (2024-02-01)
+
+
+### ♻️ 	 Chores
+
+* added TitleFontSize to Tabs component ([d587cd1](https://github.com/deriv-com/ui/commit/d587cd17d977c0a2ddbdebe8ec8d36692726b488))
+* added TitleFontSize to Tabs component ([27ecfbb](https://github.com/deriv-com/ui/commit/27ecfbb229e35e5f11003b38ae3166dbe72a33cd))
+
+## [1.1.3](https://github.com/deriv-com/ui/compare/v1.1.2...v1.1.3) (2024-02-01)
+
+
+### ♻️ 	 Chores
+
+* added Password Input field ([ae6ef49](https://github.com/deriv-com/ui/commit/ae6ef49eb83b838576a9d44b211080d6c3131afd))
+* added password meter colors, width and colors ([13b9d33](https://github.com/deriv-com/ui/commit/13b9d337e9922acc5ea4ca70a76cdb35be7df5de))
+* added Storybook for password input component ([5025c17](https://github.com/deriv-com/ui/commit/5025c17f6898186c4b1a0bfbac3ef184d82405ba))
+* import PasswordInput inside of main.ts ([af8378b](https://github.com/deriv-com/ui/commit/af8378bb8e49cf98bc07bf5991f020fbf2ab089e))
+* refactor PasswordMeter as a child component ([d6c382d](https://github.com/deriv-com/ui/commit/d6c382d3b85b0bb32bec747a505bdecbcd3a897d))
+
+
+### 🐛 	 Bug Fixes
+
+* added helperMessage based on score ([8f43383](https://github.com/deriv-com/ui/commit/8f433839daa08431e531e9f2a3c45b30a682aa45))
+* added variants according to production ([12458ce](https://github.com/deriv-com/ui/commit/12458ced635b2400640ea2c5f92146cfa7f20ce4))
+* added warning variant inside for helperMessage ([97da93d](https://github.com/deriv-com/ui/commit/97da93d93047c6de1e01ce33fd47474bac1470f2))
+* change css for input ([6fdaad7](https://github.com/deriv-com/ui/commit/6fdaad794b1717b83c8f9fe47f985e17faf60b5e))
+* change types and added stylings to Input and PasswordInput ([35fea18](https://github.com/deriv-com/ui/commit/35fea18ed934157083c5f48dd0c6710b8b423493))
+
+## [1.1.2](https://github.com/deriv-com/ui/compare/v1.1.1...v1.1.2) (2024-02-01)
+
+
+### 🐛 	 Bug Fixes
+
+* exported missing components and hooks ([7471d04](https://github.com/deriv-com/ui/commit/7471d04183804c1d73c19f8184fe9b8349d8414c))
+* exported missing components and hooks ([87c5c85](https://github.com/deriv-com/ui/commit/87c5c85ee7a24d2d1da1062872fe23c1b01445d6))
+
 ## [1.1.1](https://github.com/deriv-com/ui/compare/v1.1.0...v1.1.1) (2024-01-31)
 
 

diff --git a/lib/components/Input/HelperMessage.scss b/lib/components/Input/HelperMessage.scss
@@ -0,0 +1,24 @@
+$inactive_color: #999999;
+$success_color: #4bb4b3;
+$warning_color: #ffad3a;
+$error_field: #ec3f3f;
+
+.deriv-helper-message {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  color: $inactive_color;
+  &--general {
+    color: $inactive_color;
+  }
+  &--success {
+    color: $success_color;
+  }
+  &--warning {
+    color: $warning_color;
+  }
+  &--error {
+    color: $error_field;
+  }
+}
diff --git a/lib/components/Input/HelperMessage.tsx b/lib/components/Input/HelperMessage.tsx
@@ -1,19 +1,20 @@
 import React, { ReactNode } from "react";
 import clsx from "clsx";
 import { InputVariants } from ".";
-import "./Input.scss";
+import "./HelperMessage.scss";
 
 export interface HelperMessageProps {
   error?: boolean;
   message?: ReactNode;
   variant?: InputVariants;
   disabled?: boolean;
 }
-
-const MessageVariant: Record<InputVariants, string> = {
-  general: "deriv-helper-message__general",
-  success: "deriv-helper-message__success",
-  error: "deriv-helper-message__error",
+type TMessageVariant = Exclude<InputVariants, "disabled">;
+const MessageVariant: Record<TMessageVariant, string> = {
+  general: "deriv-helper-message--general",
+  success: "deriv-helper-message--success",
+  warning: "deriv-helper-message--warning",
+  error: "deriv-helper-message--error",
 };
 
 const HelperMessage = ({
@@ -25,7 +26,8 @@ const HelperMessage = ({
   <p
     className={clsx("deriv-helper-message", {
       [MessageVariant["general"]]: disabled,
-      [MessageVariant[error ? "error" : variant]]: !disabled,
+      [MessageVariant[error ? "error" : (variant as TMessageVariant)]]:
+        !disabled,
     })}
   >
     {message}

diff --git a/lib/components/Input/Input.scss b/lib/components/Input/Input.scss
@@ -2,27 +2,44 @@ $disabled_color: #d6d6d6;
 $inactive_color: #999999;
 $active_color: #85acb0;
 $success_color: #4bb4b3;
+$warning_color: #ffad3a;
 $error_field: #ec3f3f;
-$inactive_color: #999999;
 $border: 1px solid;
 
 .deriv-input {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
+  border-radius: 4px;
+  width: 328px;
+  box-sizing: border-box;
+  text-align: left;
+  padding: 10px 16px;
+  border: $border;
+
+  &--general {
+    border-color: $inactive_color;
+    &:focus-within {
+      border-color: $active_color;
+    }
+  }
+  &--error {
+    border-color: $error_field;
+  }
+  &--success {
+    border-color: $success_color;
+  }
+
+  &--active {
+    border-color: $active_color;
+  }
+
+  &--disabled {
+    border-color: $disabled_color;
+  }
 
-  &--field {
+  &__field {
     width: 100%;
-    padding: 10px 16px;
-    outline: none;
-    border-radius: 4px;
-    width: 328px;
-    box-sizing: border-box;
     outline: none;
-    text-align: left;
-    &:disabled {
-      border: $border $disabled_color;
-      color: $inactive_color;
-    }
     &::placeholder {
       visibility: hidden;
     }
@@ -36,27 +53,9 @@ $border: 1px solid;
         height: fit-content;
       }
     }
-    &__general {
-      border: $border $inactive_color;
-      &:focus {
-        border: $border $active_color;
-      }
-    }
-    &__error {
-      border: $border $error_field;
-      &:focus {
-        border: $border $error_field;
-      }
-    }
-    &__success {
-      border: $border $success_color;
-      &:focus {
-        border: $border $success_color;
-      }
-    }
   }
 
-  &--label {
+  &__label {
     display: inline-block;
     position: absolute;
     top: 0;
@@ -68,61 +67,50 @@ $border: 1px solid;
     text-transform: capitalize;
     transition: all 0.15s ease-out;
     padding: 0;
-    &__general {
+    &--general {
       color: $inactive_color;
     }
-    &__error {
+    &--error {
       color: $error_field;
     }
-    &__success {
+    &--success {
       color: $success_color;
     }
+    &--active {
+      color: $active_color;
+    }
+
+    &--disabled {
+      color: $disabled_color;
+    }
   }
 
-  &--helper-message {
+  &__helper-message {
+    top: calc(100% + 2px);
     position: absolute;
     left: 16px;
-    margin-top: 2px;
+    line-height: 1;
   }
 
-  &--right-content {
-    position: absolute;
-    right: 16px;
-    bottom: 25%;
+  &__right-content {
+    margin-left: 16px;
   }
 }
 
-.deriv-input--field__general:disabled + .deriv-input--label,
-.deriv-input--field__error:disabled + .deriv-input--label,
-.deriv-input--field__success:disabled + .deriv-input--label {
-  color: $inactive_color;
-  cursor: not-allowed;
+.deriv-input--general .deriv-input__field:disabled + .deriv-input__label,
+.deriv-input--error .deriv-input__field:disabled + .deriv-input__label,
+.deriv-input--success .deriv-input__field:disabled + .deriv-input__label {
+  color: $disabled_color;
 }
 
-.deriv-input--field:focus + .deriv-input--label {
+.deriv-input--general .deriv-input__field:focus + .deriv-input__label {
   color: $active_color;
 }
 
-.deriv-input--field__error:focus + .deriv-input--label {
+.deriv-input--error .deriv-input__field:focus + .deriv-input__label {
   color: $error_field;
 }
 
-.deriv-input--field__success:focus + .deriv-input--label {
+.deriv-input--success .deriv-input__field:focus + .deriv-input__label {
   color: $success_color;
 }
-
-.deriv-helper-message {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18px;
-  &__general {
-    color: $inactive_color;
-  }
-  &__success {
-    color: $success_color;
-  }
-  &__error {
-    color: $error_field;
-  }
-}