@sikka/hawa 0.0.228 → 0.0.229

package/lib/layout/Box.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const Box: (props: any) => JSX.Element;
+import React from "react";
+export declare const Box: (props: any) => React.JSX.Element;

package/lib/stories/ElementsStories/Buttons.stories.d.ts

@@ -1,23 +1,24 @@
+import * as React from "react";
 import { Meta } from "@storybook/react";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const ButtonVariationsStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     storyName: string;
 };
 export declare const ButtonLoadingStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     storyName: string;
 };
 export declare const ButtonWidthStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     storyName: string;
 };
 export declare const ButtonSizesStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     storyName: string;
 };
 export declare const ButtonIconsStory: {
-    (): JSX.Element;
+    (): React.JSX.Element;
     storyName: string;
 };

package/package.json

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

package/src/blocks/Misc/EmptyState.tsx

@@ -14,7 +14,7 @@ export const EmptyState: React.FunctionComponent<TEmptyState> = ({
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
         <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
-          <FaCheck size={20} />
+          <FaCheck size={20} color="white" />
         </div>
         <div className="m-2 text-xl font-bold">You're all caught up</div>
         <div>If you're lost, please contact us help@sikka.io </div>

package/src/blocks/Misc/NoPermission.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { HawaButton } from "../../elements"
+import { HawaContainer } from "../../layout"
+import {  FaLock } from "react-icons/fa"
+
+type TNoPermission = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+}
+
+export const NoPermission: React.FunctionComponent<TNoPermission> = ({
+  variant = "contained",
+}) => {
+  return (
+    <HawaContainer variant={variant} centered={true}>
+      <div className="flex flex-col items-center justify-center text-center dark:text-white">
+        <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
+          <FaLock size={20} color="white" />
+        </div>
+        <div className="m-2 text-xl font-bold">You don't have permission</div>
+        <div>
+          If you think this is a problem please contact your administrator or
+          our customer support
+        </div>
+      </div>
+      {/* <HawaButton color="primary" width="full">
+        Action
+      </HawaButton> */}
+    </HawaContainer>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -3,3 +3,4 @@ export * from "./EmptyState"
 export * from "./Newsletter"
 export * from "./Testimonial"
 export * from "./LeadGenerator"
+export * from "./NoPermission"

package/src/elements/HawaMenu.tsx

@@ -27,6 +27,7 @@ interface TMenuTypes {
 
 type MenuItems = {
   icon?: JSX.Element
+  disabled?: boolean
   label: string
   action?: (e: any) => void
   isButton?: boolean
@@ -186,12 +187,21 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                 ) : (
                   <li
                     key={indx}
-                    onClick={() => item?.action(actionedItem)}
+                    onClick={() => {
+                      if (item.disabled) {
+                        console.log("button is disabled")
+                      } else {
+                        item?.action(actionedItem)
+                      }
+                    }}
                     className={clsx(
                       item.isButton
                         ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
-                        : " flex cursor-pointer flex-row items-center rounded  hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white",
-                      sizeStyles[size]
+                        : " flex  flex-row items-center rounded  rtl:flex-row-reverse ",
+                      sizeStyles[size],
+                      item.disabled
+                        ? "text-gray-300"
+                        : " cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
                     )}
                   >
                     {item.icon && (

package/src/elements/HawaSnackbar.tsx

@@ -17,6 +17,7 @@ type THawaSnackBar = {
     | "bottom-left"
   actions?: [
     {
+      icon?: any
       label: string
       onClick: any
       variant: "contained" | "outlined"
@@ -85,7 +86,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
           closed ? "opacity-0" : "opacity-100"
         )}
       >
-        <div className="p-3 w-full">
+        <div className="w-full p-3  flex flex-col gap-2">
           <div className="text-sm font-bold">{title}</div>
           <div className="text-sm font-normal">{description}</div>
           {actions && (
@@ -97,6 +98,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
                   onClick={act.onClick()}
                   margins="none"
                 >
+                  {act.icon && act.icon}
                   {act.label}
                 </HawaButton>
               ))}
@@ -105,7 +107,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
         </div>
         <button
           type="button"
-          className="inline-flex h-8 w-8 rounded p-1.5 right-0 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
+          className="right-0 inline-flex h-8 w-8 rounded p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white"
           data-dismiss-target="#toast-default"
           aria-label="Close"
           onClick={() => setClosed(true)}

package/es/stories/ElementsStories/Snackbar.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const Plain: any;
-export declare const Success: any;
-export declare const Warning: any;
-export declare const Info: any;
-export declare const Error: any;
-export declare const WithActions: any;

package/lib/stories/ElementsStories/Snackbar.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-export declare const Plain: any;
-export declare const Success: any;
-export declare const Warning: any;
-export declare const Info: any;
-export declare const Error: any;
-export declare const WithActions: any;