@sikka/hawa 0.0.79 → 0.0.81

package/package.json

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

package/src/blocks/AuthForms/SignUpForm.js

@@ -3,7 +3,8 @@ import {
   HawaTextField,
   HawaLogoButton,
   HawaAlert,
-  HawaButton
+  HawaButton,
+  HawaCheckbox
 } from "../../elements";
 import PropTypes from "prop-types";
 import { Controller, FormProvider, useForm } from "react-hook-form";
@@ -19,84 +20,124 @@ export const SignUpForm = (props) => {
 
   return (
     <HawaContainer withDividers>
-      {props.showError && (
-        <HawaAlert
-          title={props.errorTitle}
-          text={props.errorText}
-          severity="error"
-        />
-      )}
-      <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(props.handleSignUp)}>
-          <Controller
-            control={control}
-            name="fullName"
-            render={({ field }) => (
-              <HawaTextField
-                fullWidth
-                type="text"
-                value={field.value ?? ""}
-                label={props.texts.fullNameLabel}
-                placeholder={props.texts.fullNamePlaceholder}
-                helperText={errors.fullName?.message}
-                {...field}
-              />
-            )}
-            rules={{
-              required: props.texts.fullNameRequiredText
-            }}
+      <div>
+        {props.showError && (
+          <HawaAlert
+            title={props.errorTitle}
+            text={props.errorText}
+            severity="error"
           />
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <HawaTextField
-                fullWidth
-                type="text"
-                value={field.value ?? ""}
-                label={props.texts.emailLabel}
-                helperText={errors.email?.message}
-                placeholder={props.texts.emailPlaceholder}
-                {...field}
+        )}
+        <FormProvider {...methods}>
+          <form onSubmit={handleSubmit(props.handleSignUp)}>
+            <Controller
+              control={control}
+              name="fullName"
+              render={({ field }) => (
+                <HawaTextField
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts.fullNameLabel}
+                  placeholder={props.texts.fullNamePlaceholder}
+                  helperText={errors.fullName?.message}
+                  {...field}
+                />
+              )}
+              rules={{
+                required: props.texts.fullNameRequiredText
+              }}
+            />
+            <Controller
+              control={control}
+              name="email"
+              render={({ field }) => (
+                <HawaTextField
+                  fullWidth
+                  type="text"
+                  value={field.value ?? ""}
+                  label={props.texts.emailLabel}
+                  helperText={errors.email?.message}
+                  placeholder={props.texts.emailPlaceholder}
+                  {...field}
+                />
+              )}
+              rules={{
+                required: props.texts.emailRequiredText,
+                pattern: {
+                  value:
+                    /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+                  message: props.texts.emailInvalidText
+                }
+              }}
+            />
+            <Controller
+              control={control}
+              name="password"
+              render={({ field }) => (
+                <HawaTextField
+                  fullWidth
+                  type="password"
+                  defaultValue={field.value ?? ""}
+                  value={field.value ?? ""}
+                  label={props.texts.passwordLabel}
+                  placeholder={props.texts.passwordPlaceholder}
+                  helperText={errors.password?.message}
+                  {...field}
+                />
+              )}
+              rules={{ required: props.texts.passwordRequiredText }}
+            />
+            {props.showRefCode && (
+              <Controller
+                control={control}
+                name="password"
+                render={({ field }) => (
+                  <HawaTextField
+                    fullWidth
+                    type="text"
+                    defaultValue={field.value ?? ""}
+                    value={field.value ?? ""}
+                    label={"Ref Code"}
+                    placeholder={props.texts.passwordPlaceholder}
+                    helperText={errors.password?.message}
+                    {...field}
+                  />
+                )}
+                rules={{ required: props.texts.passwordRequiredText }}
               />
             )}
-            rules={{
-              required: props.texts.emailRequiredText,
-              pattern: {
-                value:
-                  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                message: props.texts.emailInvalidText
-              }
-            }}
-          />
-          <Controller
-            control={control}
-            name="password"
-            render={({ field }) => (
-              <HawaTextField
-                fullWidth
-                type="password"
-                defaultValue={field.value ?? ""}
-                value={field.value ?? ""}
-                label={props.texts.passwordLabel}
-                placeholder={props.texts.passwordPlaceholder}
-                helperText={errors.password?.message}
-                {...field}
-              />
+            {props.showTermsOption && (
+              <div className="py-2">
+                <HawaCheckbox
+                  label={
+                    <span>
+                      I accept the{" "}
+                      <a className="cursor-pointer text-blue-800">
+                        terms and conditions
+                      </a>
+                    </span>
+                  }
+                />
+              </div>
             )}
-            rules={{ required: props.texts.passwordRequiredText }}
-          />
-          <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
-        </form>
-      </FormProvider>
-      <div className="font-semibold p-3 text-center text-sm">
-        {props.texts.existingUserText}{" "}
-        <span
-          onClick={props.handleRouteToSignIn}
-          className="text-blue-600 cursor-pointer"
-        >
-          {props.texts.signInText}
-        </span>
+            {props.showNewletterOption && (
+              <div className="py-2">
+                <HawaCheckbox label="Subscribe to newsletter?" />
+              </div>
+            )}
+            <HawaButton fullWidth type="submit" text={props.texts.signUpText} />{" "}
+          </form>
+        </FormProvider>
+        <div className="font-semibold p-3 text-center text-sm">
+          {props.texts.existingUserText}{" "}
+          <span
+            onClick={props.handleRouteToSignIn}
+            className="text-blue-600 cursor-pointer"
+          >
+            {props.texts.signInText}
+          </span>
+        </div>
       </div>
       {props.viaGithub || props.viaGoogle || props.viaTwitter ? (
         <div style={{ display: "flex", flexDirection: "column" }}>

package/src/elements/HawaCheckbox.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export const HawaCheckbox = (props) => {
   return (
-    <div className="flex items-center h-full p-2">
+    <div className="flex items-center h-full">
       <input
         type="checkbox"
         value=""

package/src/elements/HawaRange.js

@@ -6,7 +6,7 @@ export const HawaRange = (props) => {
     <div>
       {props.label && (
         <label
-        htmlFor="default-range"
+          htmlFor="default-range"
           className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
         >
           {props.label}
@@ -17,7 +17,8 @@ export const HawaRange = (props) => {
         <input
           id="default-range"
           type="range"
-          value="50"
+          value={props.value}
+          onChange={props.handleChange}
           className="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
         />
         <div className="ml-2">{props.endElement}</div>{" "}

package/src/elements/HawaTabs.js

@@ -11,7 +11,7 @@ export const HawaTabs = (props) => {
     <div>
       <ul className="bg-gray-100 w-fit rounded-lg flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400">
         {props.options.map((opt) => (
-          <li className="mr-2">
+          <li >
             <button
               aria-current="page"
               onClick={() => {

package/src/elements/HawaTooltip.js

@@ -2,13 +2,18 @@ import React from "react";
 
 export const HawaTooltip = (props) => {
   return (
-    <div
-      id={props.tooltipID}
-      role="tooltip"
-      className="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
-    >
-      {props.content}
-      <div className="tooltip-arrow" data-popper-arrow></div>
+    <div>
+      <div
+        id={props.tooltipID}
+        role="tooltip"
+        // className="inline-block absolute py-2 px-3"
+        className="inline-block opacity-0 absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 tooltip dark:bg-gray-700"
+      >
+        {props.content}
+        <div className="tooltip-arrow" data-popper-arrow></div>
+      </div>
+
+      <div onMouseEnter={() => console.log("hovering")}>{props.children}</div>
     </div>
   );
 };

package/src/styles.css

@@ -557,9 +557,6 @@ video {
   white-space: nowrap;
   border-width: 0;
 }
-.invisible {
-  visibility: hidden;
-}
 .collapse {
   visibility: collapse;
 }