@sikka/hawa 0.0.90 → 0.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.90",
+  "version": "0.0.91",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/AuthForms/SignInForm.js

@@ -3,7 +3,8 @@ import {
   HawaTextField,
   HawaLogoButton,
   HawaAlert,
-  HawaButton
+  HawaButton,
+  HawaPhoneInput
 } from "../../elements";
 import { Controller, useForm } from "react-hook-form";
 import PropTypes from "prop-types";
@@ -51,7 +52,7 @@ export const SignInForm = (props) => {
               }
             }}
           />
-        ) : (
+        ) : props.signInType === "username" ? (
           <Controller
             control={control}
             name="username"
@@ -70,6 +71,13 @@ export const SignInForm = (props) => {
               required: props.texts.usernameRequired
             }}
           />
+        ) : (
+          <Controller
+            control={control}
+            name="phone"
+            render={({ field }) => <HawaPhoneInput label="Phone number" />}
+            rules={{ required: props.texts.passwordRequiredText }}
+          />
         )}
         <Controller
           control={control}

package/src/elements/HawaPhoneInput.js

@@ -19,7 +19,7 @@ const Option = ({
   </div>
 );
 
-export const HawaPhoneInput = ({ preferredCountry }) => {
+export const HawaPhoneInput = ({ preferredCountry, label }) => {
   const [code, setCode] = useState(preferredCountry ?? "");
   const [selectedCountry, setSelectedCountry] = useState("+966");
   const [tel, setTel] = useState("");
@@ -43,65 +43,71 @@ export const HawaPhoneInput = ({ preferredCountry }) => {
 
   return (
     <div
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "100%"
-      }}
+      // style={{
+      //   justifyContent: "center",
+      //   alignItems: "center",
+      //   height: "100%"
+      // }}
+      className="flex flex-col mb-3"
     >
-      <Select
-        styles={{
-          input: (base) => ({
-            ...base,
-            fontSize: "0.875rem",
-            "input:focus": {
-              boxShadow: "none"
-            },
-            lineHeight: "1.25rem",
-            padding: "0.37rem"
-          }),
-          singleValue: (base) => ({
-            ...base,
-            fontSize: "0.875rem",
-            textAlign: "right"
-          }),
-          control: (base) => ({
-            ...base,
-            width: 64,
-            borderRadius: "0.5rem",
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0
-          }),
-          menu: (base) => ({
-            ...base,
-            width: 190,
-            borderRadius: "0.5rem"
-          })
-        }}
-        components={{
-          Option,
-          DropdownIndicator: () => null,
-          IndicatorSeparator: () => null
-        }}
-        options={Countries}
-        isCreatable={false}
-        isMulti={false}
-        isSearchable={true}
-        isClearable={false}
-        placeholder="+966"
-        defaultValue={Countries[0]}
-        onInputChange={() => console.log("changed to")}
-        onChange={(newValue, action) => {
-          console.log("test n", newValue);
-          setSelectedCountry(newValue);
-        }}
-      />
-      <input
-        type="number"
-        className="bg-gray-50 appearance-none border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-l-0"
-      />
+      {label && (
+        <label className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">
+          {label}
+        </label>
+      )}
+      <div className="flex flex-row">
+        <Select
+          styles={{
+            input: (base) => ({
+              ...base,
+              fontSize: "0.875rem",
+              "input:focus": {
+                boxShadow: "none"
+              },
+              lineHeight: "1.25rem",
+              padding: "0.37rem"
+            }),
+            singleValue: (base) => ({
+              ...base,
+              fontSize: "0.875rem",
+              textAlign: "right"
+            }),
+            control: (base) => ({
+              ...base,
+              width: 64,
+              borderRadius: "0.5rem",
+              borderTopRightRadius: 0,
+              borderBottomRightRadius: 0
+            }),
+            menu: (base) => ({
+              ...base,
+              width: 190,
+              borderRadius: "0.5rem"
+            })
+          }}
+          components={{
+            Option,
+            DropdownIndicator: () => null,
+            IndicatorSeparator: () => null
+          }}
+          options={Countries}
+          isCreatable={false}
+          isMulti={false}
+          isSearchable={true}
+          isClearable={false}
+          placeholder="+966"
+          defaultValue={Countries[0]}
+          onInputChange={() => console.log("changed to")}
+          onChange={(newValue, action) => {
+            console.log("test n", newValue);
+            setSelectedCountry(newValue);
+          }}
+        />
+        <input
+          type="number"
+          className="bg-gray-50 appearance-none border rounded-l-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-l-0"
+        />
+      </div>
     </div>
   );
 };

package/src/styles.css

@@ -685,15 +685,15 @@ video {
 .-mb-px {
   margin-bottom: -1px;
 }
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
 .mt-5 {
   margin-top: 1.25rem;
 }

package/tailwind.config.js

@@ -7,6 +7,24 @@ module.exports = {
       plex: ["IBM Plex Sans Arabic"]
     },
     extend: {
+      transitionProperty: {
+        height: "height"
+      },
+      keyframes: {
+        collapse: {
+          "0%,100%": { transform: "scaleY(0)" },
+          "10%": { transform: "scaleY(0)" },
+          "20%": { transform: "scaleY(0)" },
+          "30%": { transform: "scaleY(0)" },
+          "40%": { transform: "scaleY(0)" },
+          "50%": { transform: "scaleY(0)" },
+          "60%": { transform: "scaleY(0)" },
+          // "100%": { transform: "scaleY(1)" },
+        }
+      },
+      animation: {
+        collapsing: "collapse"
+      },
       colors: {
         primary: {
           200: "#C4DEFD",