@sikka/hawa 0.0.144 → 0.0.145

package/lib/layout/HawaAppLayout.d.ts

@@ -5,7 +5,7 @@ type HawaAppLayoutTypes = {
         icon: any;
         slug: string;
         action: () => void;
-    }[];
+    }[][];
     currentPage: string;
     pageTitle?: string;
     logoSymbol?: any;

package/package.json

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

package/src/elements/HawaMenu.tsx

@@ -89,9 +89,12 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
             <div className="truncate font-medium">{headerSubtitle}</div>
           </div>
         )}
-        {menuItems.map((group) => {
+        {menuItems.map((group, o) => {
           return (
-            <ul className="py-1  text-sm text-gray-700 dark:text-gray-200">
+            <ul
+              key={o}
+              className="py-1  text-sm text-gray-700 dark:text-gray-200"
+            >
               {group?.map((item) => {
                 return (
                   <li

package/src/elements/HawaPanelTabs.tsx

@@ -26,9 +26,9 @@ export const HawaPanelTabs: React.FunctionComponent<PanelTabsTypes> = (
           data-tabs-toggle="#myTabContent"
           role="tablist"
         >
-          {props.options.map((option: any) => {
+          {props.options.map((option: any, o) => {
             return (
-              <li className="mr-2" role="presentation">
+              <li key={o} className="mr-2" role="presentation">
                 <button
                   className="inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 hover:text-blue-600 dark:border-blue-500 dark:text-blue-500 dark:hover:text-blue-500"
                   id={`${option.value}-tab`}

package/src/elements/HawaPricingCard.tsx

@@ -95,9 +95,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
         </span>
       </div>
       <ul role="list" className="my-7 space-y-0">
-        {featuresMapping?.map((feature) => {
+        {featuresMapping?.map((feature, o) => {
           return (
-            <li className="flex ">
+            <li key={o} className="flex ">
               <svg
                 aria-hidden="true"
                 className="m-2 h-5 w-5 flex-shrink-0 text-blue-600 dark:text-blue-500"

package/src/elements/HawaRadio.tsx

@@ -28,8 +28,8 @@ export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
           "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
         )}
       >
-        {props.options?.map((opt: any) => (
-          <li className="w-full">
+        {props.options?.map((opt: any, o) => (
+          <li className="w-full" key={o}>
             <button
               aria-current="page"
               onClick={() => {

package/src/elements/HawaTabs.tsx

@@ -21,8 +21,8 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = (props) => {
           selectedOption ? "border-b-2" : "border-b-0"
         )}
       >
-        {props.options?.map((opt: any) => (
-          <li>
+        {props.options?.map((opt: any, o) => (
+          <li key={o}>
             <button
               aria-current="page"
               onClick={() => {

package/src/layout/HawaAppLayout.tsx

@@ -5,7 +5,12 @@ import { HawaMenu } from "../elements"
 import { HiMenu } from "react-icons/hi"
 import useBreakpoint from "../hooks/useBreakpoint"
 type HawaAppLayoutTypes = {
-  drawerItems: { label: string; icon: any; slug: string; action: () => void }[]
+  drawerItems: {
+    label: string
+    icon: any
+    slug: string
+    action: () => void
+  }[][]
   currentPage: string
   pageTitle?: string
   logoSymbol?: any
@@ -51,6 +56,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
     }
   }, [])
 
+  //States of the side menu
+  //larger than 600
+  //as a bar and expands when hover
+  //less than 600
+  //as nothing and expands as button is clicked
   return (
     <>
       {props.topBar && (
@@ -100,12 +110,12 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         onMouseLeave={() => setOpenSideMenu(false)}
         ref={ref}
         className={clsx(
-          "fixed top-0 left-0 z-50 flex h-full flex-col bg-primary-400 transition-all hover:w-40 hover:overflow-auto",
-          size > 600 ? "w-12" : "w-0",
-          openSideMenu ? "w-40" : ""
+          "fixed top-0 left-0 z-50 flex h-full flex-col overflow-x-clip bg-primary-400 transition-all  hover:overflow-auto",
+          size > 600 ? "w-12 hover:w-40" : "w-0",
+          openSideMenu ? "w-40" : "w-0"
         )}
       >
-        <div className="  mb-9 h-12        w-12 p-2">
+        <div className="mb-9 h-12 w-12 p-2">
           <img
             className={clsx(
               "fixed top-2 h-9",
@@ -140,7 +150,13 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         </div>
 
         {props.drawerItems.map((dSection, j) => (
-          <div className="flex flex-col items-stretch justify-center">
+          <div
+            key={j}
+            className={clsx(
+              "flex flex-col items-stretch justify-center"
+              // !openSideMenu ? "invisible" : "visible"
+            )}
+          >
             {dSection.map((dItem, i) => {
               return (
                 <div
@@ -151,6 +167,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
                     props.currentPage === dItem.slug
                       ? "bg-primary-600 text-white hover:bg-primary-600"
                       : ""
+                    // !openSideMenu ? " h-0 w-0" : ""
                   )}
                 >
                   <div className="flex items-center justify-center">

package/src/layout/HawaSiteLayout.tsx

@@ -46,8 +46,8 @@ const ProfileDropdown = (props: any) => {
         className="py-1 text-sm text-gray-700 dark:text-gray-200"
         aria-labelledby="avatarButton"
       >
-        {props.profileItems.map((it: any) => {
-          return <ProfileItem text={it.text} link={it.slug} />
+        {props.profileItems.map((it: any, o) => {
+          return <ProfileItem key={o} text={it.text} link={it.slug} />
         })}
       </ul>
       <div className="py-1">
@@ -85,7 +85,7 @@ const DrawerContent = (props: any) => {
       <div className="overflow-y-auto py-4">
         <ul className="space-y-2">
           {props.drawerItems.map((item: any, i: any) => {
-            return <div>{item.text}</div>
+            return <div key={i}>{item.text}</div>
           })}
         </ul>
       </div>
@@ -236,7 +236,7 @@ export const HawaSiteLayout: React.FunctionComponent<LayoutTypes> = (
         <div className="overflow-y-auto py-4">
           <ul className="space-y-2">
             {props.drawerItems.map((item: any, i: any) => {
-              return <div>{item.text}</div>
+              return <div key={i}>{item.text}</div>
             })}
           </ul>
         </div>

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.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.f25e7d6a.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.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.caad440f.iframe.bundle.js"></script></body></html>