Merge branch 'main' of github.com:deriv-com/ui into shayan/webrel-214…

…9/implement-vertical-tab

CHANGELOG.md

@@ -1,3 +1,38 @@
+## [1.3.3](https://github.com/deriv-com/ui/compare/v1.3.2...v1.3.3) (2024-02-09)
+
+
+### 🐛 	 Bug Fixes
+
+* updated z index for password input component ([969e3e5](https://github.com/deriv-com/ui/commit/969e3e5982b56f9267b00560572364552620cf88))
+
+## [1.3.2](https://github.com/deriv-com/ui/compare/v1.3.1...v1.3.2) (2024-02-09)
+
+
+### ♻️ 	 Chores
+
+* Exported Divider component ([7f6cca0](https://github.com/deriv-com/ui/commit/7f6cca054711055fc06310871e68f00ebeef7781))
+
+
+### 🐛 	 Bug Fixes
+
+* improve checkbox component ([c193b31](https://github.com/deriv-com/ui/commit/c193b313274e6885b7cb723f2013f11a7c99ef4a))
+* Improve the usability for Checkbox component ([4730346](https://github.com/deriv-com/ui/commit/4730346fab67e323d4e273122ddea9161ff3dda2))
+* update storybook based on changes made ([768dfa2](https://github.com/deriv-com/ui/commit/768dfa2c66ea1a0b6799f3e87ce5458b77b4c7d9))
+
+## [1.3.1](https://github.com/deriv-com/ui/compare/v1.3.0...v1.3.1) (2024-02-07)
+
+
+### ♻️ 	 Chores
+
+* udpated storybook ([4bc1ffe](https://github.com/deriv-com/ui/commit/4bc1ffe7f95677484dd8571978f8f770c8e5bd99))
+
+
+### 🐛 	 Bug Fixes
+
+* added fixed height to helper message placeholder ([8d47f5f](https://github.com/deriv-com/ui/commit/8d47f5f6992ba323c8c67259f2ea62a8c79cddc0))
+* added isFullWidth prop inside of input component ([80c06d5](https://github.com/deriv-com/ui/commit/80c06d504e4292ecd467ec678570e5d9f1fffdc6))
+* remove text transform ([b9cea1d](https://github.com/deriv-com/ui/commit/b9cea1d772730de02303e69acbd0d46755cb6c8e))
+
 # [1.3.0](https://github.com/deriv-com/ui/compare/v1.2.1...v1.3.0) (2024-02-06)
 
 

lib/components/Checkbox/Checkbox.scss

@@ -7,18 +7,17 @@ $error_color: #ec3f3f;
 .deriv-checkbox__wrapper {
   display: inline-flex;
   position: relative;
-  width: fit-content;
   align-items: center;
-  justify-content: center;
   gap: 8px;
+  width: 100%;
 }
 
 .deriv-checkbox {
   width: 16px;
   height: 16px;
   border-radius: $border_radius;
   transition: background-color 0.3s ease-in-out;
-  cursor: pointer;
+  box-sizing: border-box;
 
   &--unchecked {
     background: transparent;
@@ -36,7 +35,6 @@ $error_color: #ec3f3f;
 
   &--disabled {
     opacity: 0.5;
-    cursor: not-allowed;
   }
 
   &__label {
@@ -46,12 +44,20 @@ $error_color: #ec3f3f;
     line-height: 20px;
     font-weight: 400;
 
-    &--disabled {
-      cursor: text;
-    }
-
     &--error {
       color: $error_color;
     }
   }
 }
+
+.deriv-checkbox:not(:disabled),
+.deriv-checkbox:not(:disabled) + .deriv-checkbox__wrapper,
+.deriv-checkbox:not(:disabled) ~ .deriv-checkbox__label {
+  cursor: pointer;
+}
+
+.deriv-checkbox:disabled,
+.deriv-checkbox:disabled + .deriv-checkbox__wrapper,
+.deriv-checkbox--disabled ~ .deriv-checkbox__label {
+  cursor: not-allowed;
+}

lib/components/Checkbox/index.tsx

@@ -2,7 +2,8 @@ import { ComponentProps, ReactNode, Ref, forwardRef } from "react";
 import clsx from "clsx";
 import "./Checkbox.scss";
 
-interface CheckboxProps extends Omit<ComponentProps<"input">, "placeholder"> {
+interface CheckboxProps
+  extends Omit<ComponentProps<"input">, "placeholder" | "defaultChecked"> {
   error?: boolean;
   label?: ReactNode;
   labelClassName?: string;
@@ -38,6 +39,8 @@ export const Checkbox = forwardRef(
             className
           )}
           type="checkbox"
+          checked={!disabled && checked}
+          disabled={disabled}
           ref={ref}
           {...rest}
         />

lib/components/Input/HelperMessage.scss

@@ -5,11 +5,10 @@ $error_field: #ec3f3f;
 
 .deriv-helper-message {
   font-size: 12px;
+  line-height: 1;
   font-style: normal;
   font-weight: 400;
-  line-height: 18px;
   color: $inactive_color;
-  width: calc(100% - 16px);
   &--general {
     color: $inactive_color;
   }

lib/components/Input/Input.scss

@@ -9,17 +9,21 @@ $border: 1px solid;
 .deriv-input__container {
   display: inline-block;
   position: relative;
-  width: min-content;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
+  width: 328px;
+
+  &--full {
+    width: 100%;
+  }
 }
 
 .deriv-input {
   display: inline-flex;
   position: relative;
   border-radius: 4px;
-  width: 328px;
+  width: 100%;
   text-align: left;
   padding: 10px 16px;
   border: $border;
@@ -74,7 +78,6 @@ $border: 1px solid;
     display: flex;
     align-items: center;
     pointer-events: none;
-    text-transform: capitalize;
     transition: all 0.15s ease-out;
     font-size: 14px;
     &--general {
@@ -119,8 +122,7 @@ $border: 1px solid;
 }
 
 .deriv-input__helper-message {
-  font-size: 12px;
-  line-height: 1;
-  margin: 2px 0 0 16px;
-  min-width: 100%;
+  padding: 2px 0 0 16px;
+  height: 20px;
+  width: 100%;
 }

lib/components/Input/index.tsx

@@ -18,6 +18,7 @@ interface InputProps extends Omit<ComponentProps<"input">, "placeholder"> {
   message?: ReactNode;
   wrapperClassName?: string;
   hideMessage?: boolean;
+  isFullWidth?: boolean;
 }
 
 const InputVariant: Record<InputVariants, string> = {
@@ -44,6 +45,7 @@ export const Input = forwardRef(
       error,
       hideMessage,
       id,
+      isFullWidth = false,
       label,
       leftPlaceholder,
       message,
@@ -55,7 +57,15 @@ export const Input = forwardRef(
     ref: Ref<HTMLInputElement>
   ) => {
     return (
-      <div className={clsx("deriv-input__container", wrapperClassName)}>
+      <div
+        className={clsx(
+          "deriv-input__container",
+          {
+            "deriv-input__container--full": isFullWidth,
+          },
+          wrapperClassName
+        )}
+      >
         <div
           className={clsx(
             "deriv-input",
@@ -93,18 +103,16 @@ export const Input = forwardRef(
             <div className="deriv-input__right-content">{rightPlaceholder}</div>
           )}
         </div>
-        {!hideMessage && (
-          <div className="deriv-input__helper-message">
-            {message && (
-              <HelperMessage
-                message={message}
-                variant={variant}
-                error={error}
-                disabled={disabled}
-              />
-            )}
-          </div>
-        )}
+        <div className="deriv-input__helper-message">
+          {!hideMessage && message && (
+            <HelperMessage
+              message={message}
+              variant={variant}
+              error={error}
+              disabled={disabled}
+            />
+          )}
+        </div>
       </div>
     );
   }

lib/components/PasswordInput/PasswordInput.scss

@@ -3,13 +3,20 @@ $SUCCESS: #4bb4b3;
 $ERROR: #ec3f3f;
 
 .deriv-password {
-  width: min-content;
   position: relative;
   display: inline-block;
 
+  &__wrapper {
+    z-index: 2;
+  }
+
+  &--full {
+    width: 100%;
+  }
+
   &__meter {
     position: absolute;
-    z-index: -1;
+    z-index: 1;
     border-radius: 0px 0px 4px 4px;
     width: 100%;
     height: 4px;

lib/components/PasswordInput/index.tsx

@@ -20,6 +20,7 @@ import {
 import { EyeIcon, EyeIconSlash } from "./PasswordIcon";
 import { PasswordMeter } from "./PasswordMeter";
 import "./PasswordInput.scss";
+import clsx from "clsx";
 
 export const validatePassword = (password: string) => {
   const score = calculateScore(password);
@@ -55,11 +56,11 @@ const PasswordVariant: Record<TScore, InputProps["variant"]> = {
 };
 
 export const PasswordInput = ({
-  value,
+  hidePasswordMeter,
+  hint,
   onBlur,
   onChange,
-  hint,
-  hidePasswordMeter,
+  value,
   ...rest
 }: PasswordInputProps) => {
   const [isTouched, setIsTouched] = useState(false);
@@ -91,8 +92,13 @@ export const PasswordInput = ({
   );
 
   return (
-    <div className="deriv-password">
+    <div
+      className={clsx("deriv-password", {
+        "deriv-password--full": rest.isFullWidth,
+      })}
+    >
       <Input
+        wrapperClassName="deriv-password__wrapper"
         value={value}
         type={showPassword ? "text" : "password"}
         message={isTouched ? errorMessage : "" || hint}

lib/main.ts

@@ -1,15 +1,16 @@
 export { Button } from "./components/Button";
+export { Checkbox } from "./components/Checkbox";
+export { Divider } from "./components/Divider";
 export { Dropdown } from "./components/Dropdown";
+export { InlineMessage } from "./components/InlineMessage";
 export { Input } from "./components/Input";
 export { Loader } from "./components/Loader";
 export { PageLayout } from "./components/PageLayout";
+export { PasswordInput } from "./components/PasswordInput";
 export { Tab, Tabs } from "./components/Tabs";
 export { Text } from "./components/Text";
 export { ToggleSwitch } from "./components/ToggleSwitch";
 export { Tooltip } from "./components/Tooltip";
 export { useDevice } from "./hooks/useDevice";
 export { useOnClickOutside } from "./hooks/useOnClickOutside";
-export { PasswordInput } from "./components/PasswordInput";
-export { InlineMessage } from "./components/InlineMessage";
-export { Checkbox } from "./components/Checkbox";
-export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";
+export { VerticalTab, VerticalTabItems } from "./components/VerticalTab";

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deriv-com/ui",
   "private": false,
-  "version": "1.3.0",
+  "version": "1.3.3",
   "type": "module",
   "main": "dist/main.js",
   "files": [

src/stories/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { Checkbox } from "../../lib/main";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const meta = {
   title: "Components/Checkbox",
@@ -66,7 +66,11 @@ export const Default: Story = {
     label: "Get updates about Deriv products, services and events.",
   },
   render: (args) => {
-    const [checked, setChecked] = useState(false);
+    const [checked, setChecked] = useState(args.checked);
+
+    useEffect(() => {
+      setChecked(args.checked);
+    }, [args.checked]);
 
     return (
       <Checkbox

src/stories/Input.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   parameters: { layout: "centered" },
   tags: ["autodocs"],
   args: {
+    isFullWidth: false,
     label: "Enter Password",
     value: "",
     variant: "general",

src/stories/PasswordInput.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
   parameters: { layout: "centered" },
   tags: ["autodocs"],
   args: {
+    isFullWidth: false,
     hideMessage: false,
     label: "Enter Password",
     value: "",
@@ -103,7 +104,7 @@ export const HidePasswordMeter: Story = {
     hint: "This is a hint message",
   },
   render: (args) => {
-    const [value, setValue] = useState("");
+    const [value, setValue] = useState(args.value);
 
     return (
       <PasswordInput