@sikka/hawa 0.0.210 → 0.0.212

package/package.json

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

package/src/blocks/Pricing/ComparingPlans.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react"
-import { HawaTabs } from "../../elements"
+import { BsExclamationCircleFill } from "react-icons/bs"
+import { HawaTabs, HawaTooltip } from "../../elements"
 
 const CheckMark = () => (
   <svg
@@ -37,7 +38,7 @@ type ComparingPlansTypes = {
   plans: [
     {
       direction: "rtl" | "ltr"
-      features: [{ included: boolean; text: string }]
+      features: [{ included: boolean; text: string; description?: string }]
       price: number
       texts: {
         title: string
@@ -93,8 +94,8 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           }}
         />
       </div>
-      <div className="min-w-max overflow-hidden">
-        <div className="grid grid-cols-4 gap-x-16 border-t border-b border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
+      <div className=" overflow-hidden rounded">
+        <div className="grid grid-cols-4 gap-x-2 border-t border-b border-gray-200 bg-gray-100 p-4 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-800 dark:text-white">
           <div className="flex items-center"></div>
           {props.plans.map((plan: any) => (
             <div>
@@ -125,12 +126,16 @@ export const ComparingPlans: React.FunctionComponent<ComparingPlansTypes> = (
           return plan.features.map((feature) => {
             return (
               <div className="grid grid-cols-4 gap-x-16 border-b border-gray-200 py-5 px-4 text-sm text-gray-700 dark:border-gray-700">
-                <div className="text-gray-500 dark:text-gray-400">
-                  {feature.text} (
-                  <a href="#" className="text-blue-600 hover:underline">
-                    view demo
-                  </a>
-                  )
+                <div className="  flex flex-row items-center gap-2  text-gray-500 dark:text-gray-400">
+                  {feature.text}
+                  {feature.description && (
+                    <HawaTooltip
+                      position="top-right"
+                      content={feature.description}
+                    >
+                      <BsExclamationCircleFill />
+                    </HawaTooltip>
+                  )}
                 </div>
                 <UncheckMark />
                 <CheckMark />

package/src/blocks/Pricing/PricingPlans.tsx

@@ -30,6 +30,7 @@ type PricingPlansTypes = {
       value: string
     }
   ]
+  onPlanClicked?: (e) => void
   onCycleChange?: (e) => void
   onCurrencyChange?: (e) => void
   direction?: "rtl" | "ltr"
@@ -67,6 +68,7 @@ export const PricingPlans: React.FunctionComponent<PricingPlansTypes> = (
         {props.plans.map((plan: any) => {
           return (
             <HawaPricingCard
+              onPlanClicked={() => props.onPlanClicked(plan)}
               {...plan}
               texts={{
                 ...plan.texts,

package/src/elements/HawaPricingCard.tsx

@@ -16,6 +16,7 @@ type PricingCardTypes = {
     cycleText: string
     currencyText: string
   }
+  onPlanClicked?: () => void
   currentPlan?: boolean
   size: "small" | "medium" | "large"
 }
@@ -100,7 +101,12 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = ({
       >
         {props.texts.buttonText}
       </button> */}
-      <HawaButton margins="none" disabled={currentPlan} width="full">
+      <HawaButton
+        onClick={props.onPlanClicked}
+        margins="none"
+        disabled={currentPlan}
+        width="full"
+      >
         {props.texts.buttonText}
       </HawaButton>
     </div>

package/src/elements/HawaTooltip.tsx

@@ -25,7 +25,7 @@ export const HawaTooltip: React.FunctionComponent<THawaToolTip> = ({
   children,
   content,
   size = "normal",
-  position,
+  position = "top-right",
   direction = "ltr",
 }) => {
   const [hovered, setHovered] = useState(false)

package/src/styles.css

@@ -973,10 +973,6 @@ video {
 .min-w-full {
   min-width: 100%;
 }
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
 .min-w-min {
   min-width: -moz-min-content;
   min-width: min-content;
@@ -1145,6 +1141,10 @@ video {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
 }
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;