@sikka/hawa 0.0.208 → 0.0.209

package/package.json

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

package/src/blocks/Pricing/PricingPlans.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import { HawaPricingCard, HawaTabs } from "../../elements"
 // TODO: make lang into direction rtl | ltr
-// TODO: shape the type of plans
+
 type PricingPlansTypes = {
   plans: [
     {
@@ -18,41 +18,48 @@ type PricingPlansTypes = {
       size: "small" | "medium" | "large"
     }
   ]
-  lang: any
+  currencies: [
+    {
+      label: string
+      value: string
+    }
+  ]
+  billingCycles: [
+    {
+      label: string
+      value: string
+    }
+  ]
+  onCycleChange?: (e) => void
+  onCurrencyChange?: (e) => void
+  direction?: "rtl" | "ltr"
 }
 export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
   props
 ) => {
   const [currentCurrency, setCurrentCurrency] = useState("SAR")
   const [currentCycle, setCurrentCycle] = useState("month")
-  let cycleOptions = [
-    { label: `Monthly`, value: `month` },
-    // { label: `3 Months`, value: `3-months` },
-    // { label: `6 Months`, value: `6-months` },
-    { label: `Annually`, value: `annually` },
-  ]
-  let currencyOptions = [
-    { label: `USD`, value: `usd` },
-    { label: `SAR`, value: `sar` },
-  ]
-  let activeTabStyle =
-    "inline-block py-3 px-4 text-white bg-blue-600 rounded active"
-  let inactiveTabStyle =
-    "inline-block py-3 px-4 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
+
   return (
     <div>
       <div className="mb-2 flex w-full justify-between">
         <HawaTabs
           pill
           defaultValue={currentCycle}
-          options={cycleOptions}
-          onChangeTab={(e: any) => setCurrentCycle(e.label)}
+          options={props.billingCycles}
+          onChangeTab={(e: any) => {
+            setCurrentCycle(e.label)
+            props.onCycleChange(e)
+          }}
         />
         <HawaTabs
           pill
           defaultValue={currentCurrency}
-          options={currencyOptions}
-          onChangeTab={(e: any) => setCurrentCurrency(e.label)}
+          options={props.currencies}
+          onChangeTab={(e: any) => {
+            setCurrentCurrency(e.label)
+            props.onCurrencyChange(e)
+          }}
         />
       </div>
 
@@ -60,15 +67,12 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
         {props.plans.map((plan: any) => {
           return (
             <HawaPricingCard
-              // size="large"
-              // features={plan.features}
-              // lang={props.lang}
               {...plan}
-              // texts={{
-              //   buttonText: "Upgrade",
-              //   currencyText: currentCurrency,
-              //   cycleText: currentCycle,
-              // }}
+              texts={{
+                ...plan.texts,
+                currencyText: currentCurrency,
+                cycleText: currentCycle,
+              }}
             />
           )
         })}

package/src/elements/HawaPricingCard.tsx

@@ -1,7 +1,9 @@
 import clsx from "clsx"
 import React from "react"
+import { HawaButton } from "./HawaButton"
 
-// TODO: if feature.included is false, show gray and x
+// TODO: if feature.excluded is false, show gray and x
+// TODO: add badge to feature if soon
 
 type PricingCardTypes = {
   direction?: "rtl" | "ltr"
@@ -14,45 +16,22 @@ type PricingCardTypes = {
     cycleText: string
     currencyText: string
   }
+  currentPlan?: boolean
   size: "small" | "medium" | "large"
 }
-type CycleTextTypes = {
-  monthly: string
-  "3-months": string
-  "6-months": string
-  annually: string
-}
-type CurrencyTextTypes = {
-  usd: string
-  sar: string
-}
+
 export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
   size = "medium",
   direction = "ltr",
+  currentPlan = true,
   ...props
 }) => {
   let isArabic = direction === "rtl"
-  let cycleTextsArabic: CycleTextTypes = {
-    monthly: "شهرياً",
-    "3-months": "كل 3 أشهر",
-    "6-months": "كل 6 أشهر",
-    annually: "سنوياً",
-  }
-  let cycleTextsEnglish: CycleTextTypes = {
-    monthly: "Monthly",
-    "3-months": "3 Months",
-    "6-months": "6 Months",
-    annually: "Annually",
-  }
-  let currencyMapping: CurrencyTextTypes = {
-    usd: isArabic ? "دولار" : "$",
-    sar: isArabic ? "ريال" : "SAR",
-  }
   let cardSizes = {
     small:
       "mx-1 w-full  max-w-sm rounded border shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     medium:
-      "mx-1 w-full rounded min-w-fit border bg-white  dark:border-gray-700 dark:bg-gray-800 sm:p-8",
+      "mx-1 w-full rounded min-w-fit border  dark:border-gray-700 dark:bg-gray-800 sm:p-8",
     large:
       "mx-1 w-full max-w-lg rounded border  p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
   }
@@ -60,8 +39,11 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
     <div
       dir={isArabic ? "rtl" : "ltr"}
       className={clsx(
+        currentPlan
+          ? "border-buttonPrimary-500 bg-layoutPrimary-500 p-0"
+          : "bg-white",
         cardSizes[size],
-        "flex flex-col gap-4 border-2 bg-white p-4"
+        "flex flex-col gap-4 rounded border-2  p-4"
       )}
     >
       <h5 className="text-md 0 font-bold text-gray-500 dark:text-gray-400">
@@ -76,9 +58,9 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
             {props.texts.currencyText}
           </span>
         </>
-        {/* <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+        <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
           / {props.texts.cycleText}
-        </span> */}
+        </span>
       </div>
       <h5 className="text-md  font-normal text-gray-500 dark:text-gray-400">
         {props.texts.subtitle}
@@ -111,12 +93,16 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
           })}
         </ul>
       )}
-      <button
+      {/* <button
+        disabled={currentPlan}
         type="button"
         className="inline-flex w-full justify-center rounded bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
       >
         {props.texts.buttonText}
-      </button>
+      </button> */}
+      <HawaButton disabled={currentPlan} width="full">
+        {props.texts.buttonText}
+      </HawaButton>
     </div>
   )
 }

package/src/elements/HawaTabs.tsx

@@ -16,22 +16,23 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   direction = "ltr",
   width = "normal",
   marginBetween = 0,
-  pill = true,
+  pill = false,
   ...props
 }) => {
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
 
   let activeTabStyle = {
     vertical: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
-    horizontal:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-500 rounded rounded-br-none rounded-bl-none active",
+    horizontal: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
   }
+  // rounded rounded-br-none rounded-bl-none
   let inactiveTabStyle = {
     vertical:
-      "inline-block py-2 px-4 rounded-none rounded-br-none rounded-tl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+      "inline-block py-2 px-4 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white",
     horizontal:
-      "bg-gray-100 inline-block py-2 px-4 rounded rounded-br-none rounded-bl-none hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white",
+      "bg-gray-100 inline-block py-2 px-4  hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white",
   }
+  // rounded rounded-br-none rounded-bl-none
   let widthStyles = {
     full: "w-full min-w-full",
     normal: "w-fit",
@@ -54,7 +55,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     vertical:
       "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-buttonPrimary-500  text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit  flex-wrap border-b-buttonPrimary-500 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -62,7 +63,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       className={clsx(
         containerStyle[orientation],
         props.options[selectedOption] ? "border-b-2" : "border-b-0"
-        // "bg-red-400"
       )}
     >
       <ul
@@ -78,14 +78,19 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
           tabsStyle[orientation],
           "border-buttonPrimary-500",
 
-          orientation === "vertical"
+          // orientation === "vertical"
+          //   ? direction === "rtl"
+          //     ? "rounded-none rounded-r border-l-2"
+          //     : "rounded-none rounded-l border-r-2"
+          //   : "border-b-2",
+          widthStyles[width],
+          pill
+            ? "gap-0.5 rounded border-none bg-gray-100 p-0.5"
+            : orientation === "vertical"
             ? direction === "rtl"
               ? "rounded-none rounded-r border-l-2"
               : "rounded-none rounded-l border-r-2"
-            : "border-b-2",
-          widthStyles[width],
-          // "bg-red-400",
-          pill ? "overflow-clip rounded border-none" : ""
+            : "border-b-2"
         )}
       >
         {props.options?.map((opt: any, o) => (
@@ -105,7 +110,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
                     ]
                   : inactiveTabStyle[orientation],
                 "w-full  transition-all",
-                pill ? "rounded" : ""
+                pill
+                  ? "rounded"
+                  : orientation === "vertical"
+                  ? "rounded rounded-tl-none rounded-bl-none"
+                  : "rounded rounded-br-none rounded-bl-none"
                 // direction === "rtl" ? "bg-yellow-400" : "bg-yellow-400"
               )}
             >

package/src/styles.css

@@ -1539,6 +1539,9 @@ video {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }