@sikka/hawa 0.0.172 → 0.0.174

package/lib/layout/HawaSiteLayout.d.ts

@@ -1,9 +1,23 @@
 import React from "react";
-type LayoutTypes = {
-    logoLink: string;
-    username: string;
-    userEmail: string;
-    drawerItems: any;
+type HawaSiteLayoutTypes = {
+    navItems: {
+        label: string;
+        icon: any;
+        slug: string;
+        action: () => void;
+        subItems?: any;
+    }[];
+    direction?: "rtl" | "ltr";
+    currentPage: string;
+    pageTitle?: string;
+    logoSymbol?: any;
+    logoLink?: string;
+    logoText?: any;
+    children?: any;
+    stickyNav?: boolean;
+    topBar?: boolean;
+    navigationSize?: "sm" | "md" | "lg";
+    floating?: boolean;
 };
-export declare const HawaSiteLayout: React.FunctionComponent<LayoutTypes>;
+export declare const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes>;
 export {};

package/package.json

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

package/src/blocks/AuthForms/SignInForm.tsx

@@ -47,6 +47,7 @@ type SignInFormTypes = {
   handleGithubSignIn?: () => void
   handleTwitterSignIn?: () => void
 }
+// TODO: add direction to flip block
 
 export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   const {

package/src/blocks/Misc/Testimonial.tsx

@@ -11,7 +11,7 @@ export const Testimonial: React.FunctionComponent<TEmptyState> = ({
 }) => {
   return (
     <div
-      className="rounded flex flex-col gap-2 border-2 border-gray-200 bg-white p-4"
+      className="flex flex-col gap-2 rounded border-2 border-gray-200 bg-white p-4"
       // style={{ width: "249.708px", marginRight: "24px" }}
     >
       <svg width="48" height="48" viewBox="0 0 48 48" fill="none">

package/src/elements/DraggableCard.tsx

@@ -7,7 +7,7 @@ export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
   props
 ) => {
   return (
-    <div className="bg-layoutPrimary-default flex flex-row rounded p-4">
+    <div className="bg-layoutPrimary-500 flex flex-row rounded p-4">
       <button
         className="inline-flex items-center rounded bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         type="button"

package/src/elements/HawaButton.tsx

@@ -31,7 +31,7 @@ const sizeStyles = {
 const widthStyles = {
   full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
   normal:
-    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-dark dark:hover:brightness-90 dark:focus:ring-primary-800",
+    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-darker dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
   half: "w-1/2",
 }
 const variantStyles = {
@@ -42,9 +42,9 @@ const variantStyles = {
 const colorStyles = {
   contained: {
     default:
-      "text-neutral-900 hover:bg-buttonPrimary-darker bg-buttonPrimary-default text-white",
+      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-darker bg-buttonPrimary-500 text-white",
     primary:
-      "text-white bg-buttonPrimary-default hover:bg-buttonPrimary-darker transition-all",
+      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-darker transition-all",
     secondary:
       "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-darker",
   },

package/src/elements/HawaChip.tsx

@@ -3,7 +3,7 @@ import React from "react"
 
 type TChipTypes = {
   label: string
-  size: "small" | "normal" | "large"
+  size?: "small" | "normal" | "large"
   icon?: JSX.Element
 }
 export const HawaChip: React.FunctionComponent<TChipTypes> = ({

package/src/elements/HawaLogoButton.tsx

@@ -146,17 +146,18 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
     default:
       break
   }
+
   return (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="transition-all my-2 flex h-11 w-full flex-row justify-center rounded bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
+      className="my-2 flex h-11 w-full flex-row justify-center rounded bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}
       </div>
       <div style={{ width: 10 }} />
-      <div className="flex h-full flex-col items-start justify-center">
+      <div className="flex h-full flex-col items-start justify-center dark:text-black">
         {props.buttonText}
       </div>
     </button>

package/src/elements/HawaMenu.tsx

@@ -106,7 +106,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-default py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
                         : "mx-1 flex cursor-pointer flex-row items-center rounded py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >

package/src/elements/HawaPricingCard.tsx

@@ -1,5 +1,11 @@
 import React from "react"
 
+// TODO: make the texts in one object property
+// TODO: give it a background color (white)
+// TODO: remove title_ar
+// TODO: spicifiy features object
+// TODO: remove features_ar
+
 type PricingCardTypes = {
   lang: "ar" | "en"
   features: [any]
@@ -95,7 +101,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
         </span>
       </div>
       <ul role="list" className="my-7 space-y-0">
-        {featuresMapping?.map((feature, o) => {
+        {props.features?.map((feature, o) => {
           return (
             <li key={o} className="flex ">
               <svg

package/src/elements/HawaRadio.tsx

@@ -14,7 +14,7 @@ type RadioTypes = {
 export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-default rounded active"
+    "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-500 rounded active"
   let inactiveTabStyle =
     "inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 

package/src/elements/HawaStats.tsx

@@ -15,7 +15,7 @@ export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
     "flex flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
-    contained: "bg-layoutPrimary-default w-fit",
+    contained: "bg-layoutPrimary-500 w-fit",
     outlined: "ring-2 w-fit",
   }
   return (

package/src/elements/HawaTable.tsx

@@ -31,7 +31,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   return (
     <div className="relative overflow-x-clip rounded">
       <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-        <thead className="bg-layoutPrimary-default text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <thead className="bg-layoutPrimary-500 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
           <tr>
             {props.columns.map((col: any, i: any) => (
               <th key={i} scope="col" className={clsx(sizeStyles[size])}>

package/src/elements/HawaTabs.tsx

@@ -18,9 +18,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   // const [selectedOption, setSelectedOption] = useState(props.defaultValue - 1)
   let activeTabStyle = {
     vertical:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
     horizontal:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded rounded-br-none rounded-bl-none active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-500 rounded rounded-br-none rounded-bl-none active",
   }
   let inactiveTabStyle = {
     vertical:
@@ -33,11 +33,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",
-      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
     horizontal: {
       container: "",
-      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
   }
   let containerStyle = {
@@ -46,9 +46,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -61,7 +61,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       <ul
         className={clsx(
           tabsStyle[orientation],
-          "border-buttonPrimary-default",
+          "border-buttonPrimary-500",
           orientation === "vertical"
             ? direction === "rtl"
               ? "rounded-none rounded-r-lg border-l-2"

package/src/elements/HawaTimeline.tsx

@@ -17,12 +17,12 @@ export const HawaTimeline: React.FunctionComponent<THawaTimeline> = ({
   }
   let lineStyles = {
     vertical: {
-      default: "w-1 h-32 rounded bg-buttonPrimary-default ml-6 my-2",
-      selected: "w-1  h-32 rounded bg-buttonPrimary-default ml-6 my-2",
+      default: "w-1 h-32 rounded bg-buttonPrimary-500 ml-6 my-2",
+      selected: "w-1  h-32 rounded bg-buttonPrimary-500 ml-6 my-2",
     },
     horizontal: {
-      default: "h-0.5 w-full rounded bg-buttonPrimary-default",
-      selected: "h-0.5 w-full rounded bg-buttonPrimary-default",
+      default: "h-0.5 w-full rounded bg-buttonPrimary-500",
+      selected: "h-0.5 w-full rounded bg-buttonPrimary-500",
     },
   }
   return (
@@ -71,8 +71,10 @@ const TimelineStep = (props) => (
   >
     <div
       className={clsx(
-        "m-2 mr-4 flex h-10 w-10 items-center justify-center rounded ring-2 ring-primary-200 ring-offset-2",
-        props.current ? "bg-buttonPrimary-default text-white" : "bg-primary-200"
+        "ring-buttonPrimary-200 m-2 mr-4 flex h-10 w-10 items-center justify-center rounded ring-2 ring-offset-2",
+        props.current
+          ? "bg-buttonPrimary-500 text-white"
+          : "bg-buttonPrimary-200"
       )}
     >
       {props.stepNumber}

package/src/elements/SubsectionList.tsx

@@ -0,0 +1,78 @@
+import clsx from "clsx"
+import React, { useState } from "react"
+import { HawaChip } from "./HawaChip"
+
+type SubsectionListTypes = {
+  align?: any
+  subsections: [
+    {
+      title: string
+      sections: [
+        {
+          label: string
+          action: () => void
+          icon?: any
+          value?: any
+        }
+      ]
+    }
+  ]
+}
+export const SubsectionList: React.FunctionComponent<SubsectionListTypes> = ({
+  subsections,
+}) => {
+  const [selectedSection, setSelectedSection] = useState(null)
+  return (
+    <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
+      {subsections.map((ss) => (
+        <div className="my-0">
+          {ss.title && <div className="my-4 font-bold">{ss.title}</div>}
+          {ss.sections.map((s) => (
+            <SubsectionItem
+              onItemClick={() => setSelectedSection(s.value)}
+              selected={selectedSection}
+              value={s.value}
+              icon={s.icon}
+              title={s.label}
+              chip="Upgrade"
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+type TSubsectionItem = {
+  chip?: string
+  title: string
+  value: string
+  icon?: any
+  selected?: any
+  onItemClick?: () => void
+}
+const SubsectionItem: React.FunctionComponent<TSubsectionItem> = ({
+  title,
+  value,
+  icon,
+  chip,
+  selected,
+  onItemClick,
+}) => {
+  return (
+    <div
+      onClick={onItemClick}
+      className={clsx(
+        "flex w-full cursor-pointer flex-row items-center justify-between gap-2 rounded p-2  transition-all ",
+        selected === value
+          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+          : "hover:bg-layoutPrimary-300"
+      )}
+    >
+      <div className="flex w-full flex-row items-center justify-start  gap-2">
+        {icon} <span>{title}</span>
+      </div>
+      {chip && <HawaChip label="Upgrade" size="normal" />}{" "}
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -26,6 +26,7 @@ export * from "./HawaStats"
 export * from "./HawaSpinner"
 export * from "./HawaRadio"
 export * from "./HawaDrawer"
+export * from "./SubsectionList"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/layout/HawaAppLayout.tsx

@@ -71,12 +71,12 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   //less than 600
   //as nothing and expands as button is clicked
   let ltrDrawerStyle = [
-    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
   let rtlDrawerStyle = [
-    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
@@ -100,7 +100,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 z-30 flex h-14 flex-row items-center justify-between bg-layoutPrimary-default",
+            "fixed top-0 z-30 flex h-14 flex-row items-center justify-between bg-layoutPrimary-500",
             // size > 600 ? "w-[calc(100%-3rem)] translate-x-[3rem]" : "w-full",
             "w-full",
             "p-2",
@@ -178,7 +178,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
         >
           <div
             className={clsx(
-              "fixed z-50 mb-2 flex h-12 items-center justify-center bg-layoutPrimary-default p-2 transition-all",
+              "fixed z-50 mb-2 flex h-12 items-center justify-center bg-layoutPrimary-500 p-2 transition-all",
               openSideMenu ? "w-40" : "w-14"
             )}
           >
@@ -228,7 +228,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                         }}
                         className={clsx(
                           props.currentPage === dItem.slug
-                            ? "bg-buttonPrimary-default text-white"
+                            ? "bg-buttonPrimary-500 text-white"
                             : "hover:bg-buttonPrimary-lighter",
                           "m-2 flex cursor-pointer flex-row items-center overflow-x-clip rounded p-2  pl-3 transition-all ",
                           direction === "rtl" ? "flex-row-reverse pr-3" : ""
@@ -263,7 +263,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   )
                 })}
                 {j !== props.drawerItems.length - 1 && (
-                  <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-default text-center "></div>
+                  <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center "></div>
                 )}{" "}
               </div>
             ))}

package/src/layout/HawaContainer.tsx

@@ -20,7 +20,7 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
     normal: "max-w-sm md:max-w-md",
   }
   let variantStyles = {
-    contained: "bg-layoutPrimary-default dark:bg-layoutPrimary-dark",
+    contained: "bg-layoutPrimary-500 dark:bg-layoutPrimary-dark",
     outlined: "bg-transparent border-2 border-black w-fit",
     neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white",
   }