@sikka/hawa 0.0.46 → 0.0.47

package/package.json

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

package/src/elements/HawaDrawerItem.js

@@ -1,13 +1,15 @@
 import React from "react";
 
 const HawaDrawerItem = (props) => {
+  let withIcon =
+    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
+  let withoutIcon =
+    "flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700";
+
   return (
-    <li>
-      <a
-        href="#"
-        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
-      >
-        <svg
+    <li onClick={props.action}>
+      <div className={props.icon ? withIcon : withoutIcon}>
+        {/* <svg
           aria-hidden="true"
           class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
           fill="currentColor"
@@ -16,9 +18,9 @@ const HawaDrawerItem = (props) => {
         >
           <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
           <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
-        </svg>
+        </svg> */}
         <span class="ml-3">{props.text}</span>
-      </a>
+      </div>
     </li>
   );
 };

package/src/layout/HawaLayout.js

@@ -29,18 +29,51 @@ const MenuButton = () => {
     </button>
   );
 };
+
+const ProfileItem = (props) => {
+  return (
+    <li>
+      <a
+        href={props.link}
+        className="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+      >
+        {props.text}
+      </a>
+    </li>
+  );
+};
+const CloseButton = () => {
+  return (
+    <button
+      type="button"
+      data-drawer-dismiss="drawer-navigation"
+      aria-controls="drawer-navigation"
+      className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+    >
+      <svg
+        aria-hidden="true"
+        class="w-5 h-5"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clip-rule="evenodd"
+        ></path>
+      </svg>
+    </button>
+  );
+};
 export const HawaLayout = (props) => {
   return (
-    <div>
+    <div className="font-plex">
       <div>
         <nav class="border-gray-200 rounded dark:bg-gray-900">
           <div class="flex p-3 flex-row-reverse items-center justify-between w-full">
-            <div href={props.logoLink} class="flex items-center">
-              <img
-                src="https://flowbite.com/docs/images/logo.svg"
-                class="h-9"
-                alt="Flowbite Logo"
-              />
+            <div href={props.logoHref} class="flex items-center">
+              <img src={props.logoLink} class="h-9" alt="Flowbite Logo" />
             </div>
             <div className="flex flex-row-reverse">
               <MenuButton />
@@ -86,37 +119,16 @@ export const HawaLayout = (props) => {
         // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 295.5px, 0px);"
       >
         <div class="py-3 px-4 text-sm text-gray-900 dark:text-white">
-          <div>Bonnie Green</div>
-          <div class="font-medium truncate">name@flowbite.com</div>
+          <div>{props.username}</div>
+          <div class="font-medium truncate">{props.userEmail}</div>
         </div>
         <ul
           class="py-1 text-sm text-gray-700 dark:text-gray-200"
           aria-labelledby="avatarButton"
         >
-          <li>
-            <a
-              href="#"
-              class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-            >
-              Dashboard
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-            >
-              Settings
-            </a>
-          </li>
-          <li>
-            <a
-              href="#"
-              class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
-            >
-              Earnings
-            </a>
-          </li>
+          {props.profileItems.map((it) => {
+            return <ProfileItem text={it.text} link={it.slug} />;
+          })}
         </ul>
         <div class="py-1">
           <a
@@ -140,38 +152,29 @@ export const HawaLayout = (props) => {
         >
           {props.appTitle}
         </h5>
-        <button
-          type="button"
-          data-drawer-dismiss="drawer-navigation"
-          aria-controls="drawer-navigation"
-          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-        >
-          <svg
-            aria-hidden="true"
-            class="w-5 h-5"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            ></path>
-          </svg>
-        </button>
+        <CloseButton />
         <div class="py-4 overflow-y-auto">
           <ul class="space-y-2">
             {props.drawerItems.map((item, i) => {
-              return <HawaDrawerItem key={i} text={item.text} />;
+              return (
+                <HawaDrawerItem action={item.action} key={i} text={item.text} />
+              );
             })}
           </ul>
         </div>
       </div>
+      <div className="p-3">{props.children}</div>
     </div>
   );
 };
 
 HawaLayout.propTypes = {
-  logoLink: PropTypes.string
+  logoLink: PropTypes.string,
+  username: PropTypes.string,
+  userEmail: PropTypes.string,
+  drawerItems: PropTypes.objectOf({
+    text: PropTypes.string,
+    slug: PropTypes.string,
+    action: PropTypes.func
+  })
 };

package/src/tailwind.css

@@ -1,3 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss/utilities';
+
+body {
+    font-family: "IBM Plex Sans Arabic";
+}

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.bfb520c7.iframe.bundle.js"></script><script src="main.e8029a3c.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.bff3812a.iframe.bundle.js"></script><script src="main.07f6e990.iframe.bundle.js"></script></body></html>