@sikka/hawa 0.0.211 → 0.0.212

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.211",
+  "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/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;