@sikka/hawa 0.0.88 → 0.0.90

package/package.json

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

package/src/blocks/AuthForms/AppLanding.js

@@ -6,16 +6,20 @@ import { HawaContainer } from "../../layout/HawaContainer";
 export const AppLanding = (props) => {
   return (
     <HawaContainer>
-      <HawaButton
-        fullWidth
-        text={props.texts.signIn}
-        onClick={props.handleSignIn}
-      />
-      <HawaButton
-        fullWidth
-        text={props.texts.signUp}
-        onClick={props.handleSignUp}
-      />
+      {props.handleSignIn && (
+        <HawaButton
+          fullWidth
+          text={props.texts.signIn}
+          onClick={props.handleSignIn}
+        />
+      )}
+      {props.handleSignUp && (
+        <HawaButton
+          fullWidth
+          text={props.texts.signUp}
+          onClick={props.handleSignUp}
+        />
+      )}
       <HawaButton
         fullWidth
         text={props.texts.lang}

package/src/blocks/AuthForms/SignInForm.js

@@ -96,7 +96,12 @@ export const SignInForm = (props) => {
             {props.texts.forgotPasswordText}
           </div>
         )}
-        <HawaButton fullWidth type="submit" text={props.texts.signInText} />{" "}
+        <HawaButton
+          fullWidth
+          isLoading={props.isLoading}
+          type="submit"
+          text={props.texts.signInText}
+        />{" "}
         {!props.withoutSignUp && (
           <div className="dark:text-gray-300 font-semibold p-3 text-center text-sm">
             {props.texts.newUserText}{" "}

package/src/elements/HawaButton.js

@@ -20,6 +20,10 @@ export const HawaButton = ({
     styles =
       "my-1 w-full flex justify-center text-white bg-primary-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
   }
+  if (props.normalWidth) {
+    styles =
+      "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
   if (iconOnly) {
     iconStyle = "flex flex-col justify-center items-center";
   }
@@ -41,7 +45,7 @@ export const HawaButton = ({
       ) : (
         <div className="flex flex-row gap-x-3">
           <div className="border-2 border-gray-400 border-t-white animate-spin  text-white rounded-full h-5 w-5"></div>
-          <div>{loadingText}</div>
+          {/* <div>{loadingText}</div> */}
         </div>
       )}
     </button>

package/src/elements/HawaModal.js

@@ -60,64 +60,12 @@ export const HawaModal = ({
               <span className="sr-only">Close modal</span>
             </button>
           </div>
-          <div className="p-6 space-y-6">
-            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              With less than a month to go before the European Union enacts new
-              consumer privacy laws for its citizens, companies around the world
-              are updating their terms of service agreements to comply.
-            </p>
-            <p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-              The European Union’s General Data Protection Regulation (G.D.P.R.)
-              goes into effect on May 25 and is meant to ensure a common set of
-              data rights in the European Union. It requires organizations to
-              notify users as soon as possible of high-risk data breaches that
-              could personally affect them.
-            </p>
-          </div>
+          <div className="p-6 space-y-6">{props.children}</div>
           <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-            <button
-              data-modal-toggle="defaultModal"
-              type="button"
-              className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-            >
-              I accept
-            </button>
-            <button
-              data-modal-toggle="defaultModal"
-              type="button"
-              className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
-            >
-              Decline
-            </button>
+            {props.actions}
           </div>
         </div>
       </div>
     </div>
   );
 };
-
-export const ModalContent = ({ children, ...props }) => {
-  return <div className="p-6 space-y-6">{children}</div>;
-};
-
-export const ModalFooter = ({ children, ...props }) => {
-  return (
-    <div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
-      {/* <button
-        data-modal-toggle="defaultModal"
-        type="button"
-        className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-      >
-        I accept
-      </button>
-      <button
-        data-modal-toggle="defaultModal"
-        type="button"
-        className="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"
-      >
-        Decline
-      </button> */}
-      {children}
-    </div>
-  );
-};

package/src/styles.css

@@ -1274,9 +1274,6 @@ video {
 .uppercase {
   text-transform: uppercase;
 }
-.leading-relaxed {
-  line-height: 1.625;
-}
 .leading-tight {
   line-height: 1.25;
 }
@@ -1486,9 +1483,6 @@ body {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.focus\:z-10:focus {
-  z-index: 10;
-}
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1580,14 +1574,14 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.dark .dark\:border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
 .dark .dark\:border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
+.dark .dark\:border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
 .dark .dark\:bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));