@sikka/hawa 0.0.227 → 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.227",
+  "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/src/elements/InvoiceAccordion.tsx

@@ -73,7 +73,10 @@ export const InvoiceAccordion: React.FunctionComponent<
             <HiChevronRight fontSize={30} />
           </div>
         )}
-        <div className="flex w-full flex-col gap-0 ">
+        <div
+          className="flex w-full cursor-pointer flex-col gap-0"
+          onClick={() => setExpanded(!expanded)}
+        >
           <div className="flex flex-row items-center gap-2">
             <span className="bg-white-200">{props.invoiceTitle}</span>
             {props.status && <HawaChip size="small" label={props.status} />}

package/src/elements/UserFeedback.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+
+type ComponentTypes = {
+  title?: string
+  question: string
+  options?: []
+  texts?: {
+    least: string
+    most: string
+  }
+  onOptionClicked?: (option) => void
+}
+export const UserFeedback: React.FunctionComponent<ComponentTypes> = ({
+  ...props
+}) => {
+  return (
+    <div className="relative flex w-full max-w-sm flex-col gap-2 rounded bg-white p-4 shadow-md">
+      <div className="absolute left-2 top-2 p-1.5 text-sm">{props.title}</div>
+      <button
+        type="button"
+        className="absolute right-2 top-2 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)}
+      >
+        <svg
+          aria-hidden="true"
+          className="h-5 w-5"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="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"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </button>
+      <div className="mt-8">{props.question}</div>
+      <div className="flex w-full flex-row gap-1 rounded">
+        {props.options.map((op) => (
+          <span
+            onClick={() => props.onOptionClicked(op)}
+            className="w-full cursor-pointer rounded border bg-white p-4 text-center transition-all hover:bg-gray-100"
+          >
+            {op}
+          </span>
+        ))}
+      </div>
+      {props.texts && (
+        <div className=" flex flex-row justify-between text-xs">
+          <span>{props.texts.least}</span>
+          <span>{props.texts.most}</span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -30,6 +30,7 @@ export * from "./SubsectionList"
 export * from "./UsageCard"
 export * from "./InvoiceAccordion"
 export * from "./HawaDatepicker"
+export * from "./UserFeedback"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -795,6 +795,9 @@ video {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mt-8 {
+  margin-top: 2rem;
+}
 .block {
   display: block;
 }

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;