@sikka/hawa 0.0.58 → 0.0.60

package/src/elements/HawaPanelTabs.js

@@ -19,11 +19,11 @@ export const HawaPanelTabs = (props) => {
               <li class="mr-2" role="presentation">
                 <button
                   class="inline-block p-4 rounded-t-lg border-b-2 text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
-                  id="profile-tab"
-                  data-tabs-target="#profile"
+                  id={`${option.value}-tab`}
+                  data-tabs-target={`#${option.value}`}
                   type="button"
                   role="tab"
-                  aria-controls="profile"
+                  aria-controls={option.value}
                   aria-selected="true"
                 >
                   {option.label}
@@ -33,72 +33,20 @@ export const HawaPanelTabs = (props) => {
           })}
         </ul>
       </div>
-      {/* <div id="myTabContent">
-        <div
-          class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-          id="profile"
-          role="tabpanel"
-          aria-labelledby="profile-tab"
-        >
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            This is some placeholder content the{" "}
-            <strong class="font-medium text-gray-800 dark:text-white">
-              Profile tab's associated content
-            </strong>
-            . Clicking another tab will toggle the visibility of this one for
-            the next. The tab JavaScript swaps classes to control the content
-            visibility and styling.
-          </p>
-        </div>
-        <div
-          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-          id="dashboard"
-          role="tabpanel"
-          aria-labelledby="dashboard-tab"
-        >
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            This is some placeholder content the{" "}
-            <strong class="font-medium text-gray-800 dark:text-white">
-              Dashboard tab's associated content
-            </strong>
-            . Clicking another tab will toggle the visibility of this one for
-            the next. The tab JavaScript swaps classes to control the content
-            visibility and styling.
-          </p>
-        </div>
-        <div
-          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-          id="settings"
-          role="tabpanel"
-          aria-labelledby="settings-tab"
-        >
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            This is some placeholder content the{" "}
-            <strong class="font-medium text-gray-800 dark:text-white">
-              Settings tab's associated content
-            </strong>
-            . Clicking another tab will toggle the visibility of this one for
-            the next. The tab JavaScript swaps classes to control the content
-            visibility and styling.
-          </p>
-        </div>
-        <div
-          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
-          id="contacts"
-          role="tabpanel"
-          aria-labelledby="contacts-tab"
-        >
-          <p class="text-sm text-gray-500 dark:text-gray-400">
-            This is some placeholder content the{" "}
-            <strong class="font-medium text-gray-800 dark:text-white">
-              Contacts tab's associated content
-            </strong>
-            . Clicking another tab will toggle the visibility of this one for
-            the next. The tab JavaScript swaps classes to control the content
-            visibility and styling.
-          </p>
-        </div>
-      </div> */}
+      <div id="myTabContent">
+        {props.options.map((option) => {
+          return (
+            <div
+              class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+              id={option.value}
+              role="tabpanel"
+              aria-labelledby={`${option.value}-tab`}
+            >
+              {option.content}
+            </div>
+          );
+        })}
+      </div>
     </div>
     // <Container variant={props.location || "panelTabs"}>
     //   {props.options.map((singleOption, i) => {

package/src/elements/HawaPricingCard.js

@@ -22,52 +22,51 @@ export const HawaPricingCard = (props) => {
   let featuresMapping = isArabic ? props.features_ar : props.features;
   let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
   return (
-    <div>
-      <div class="p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
-        <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
-          {isArabic ? props.title_ar : props.title}
-        </h5>
-        <div class="flex items-baseline text-gray-900 dark:text-white">
-          <span class="text-3xl font-semibold">
-            {" "}
-            {currencyMapping[props.currency?.toLowerCase()]}
-          </span>
-          <span class="text-5xl font-extrabold tracking-tight">
-            {props.price}
-          </span>
-          <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
-            /{" "}
-            {isArabic
-              ? cycleTextsArabic[props.cycleText]
-              : cycleTextsEnglish[props.cycleText]}
-          </span>
-        </div>
-        <ul role="list" class="my-7 space-y-5">
-          {featuresMapping?.map((feature) => {
-            return (
-              <li class="flex space-x-3">
-                <svg
-                  aria-hidden="true"
-                  class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <title>Check icon</title>
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                    clip-rule="evenodd"
-                  ></path>
-                </svg>
-                <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
-                  {feature}
-                </span>
-              </li>
-            );
-          })}
+    <div class="mx-1 p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+      <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
+        {isArabic ? props.title_ar : props.title}
+      </h5>
+      <div class="flex items-baseline text-gray-900 dark:text-white">
+        <span class="font-semibold text-sm">
+          {" "}
+          {currencyMapping[props.currency?.toLowerCase()]}
+        </span>
+        <span class="text-5xl font-extrabold tracking-tight">
+          {props.price}
+        </span>
+        <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+          /{" "}
+          {isArabic
+            ? cycleTextsArabic[props.cycleText]
+            : cycleTextsEnglish[props.cycleText]}
+        </span>
+      </div>
+      <ul role="list" class="my-7 space-y-5">
+        {featuresMapping?.map((feature) => {
+          return (
+            <li class="flex space-x-3">
+              <svg
+                aria-hidden="true"
+                class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <title>Check icon</title>
+                <path
+                  fill-rule="evenodd"
+                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+              <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
+                {feature}
+              </span>
+            </li>
+          );
+        })}
 
-          {/* <li class="flex space-x-3 line-through decoration-gray-500">
+        {/* <li class="flex space-x-3 line-through decoration-gray-500">
             <svg
               aria-hidden="true"
               class="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
@@ -86,14 +85,13 @@ export const HawaPricingCard = (props) => {
               Sketch Files
             </span>
           </li> */}
-        </ul>
-        <button
-          type="button"
-          class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
-        >
-          {props.buttonText}
-        </button>
-      </div>
+      </ul>
+      <button
+        type="button"
+        class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
+      >
+        {props.buttonText}
+      </button>
     </div>
 
     // <Container

package/src/elements/HawaRadio.js

@@ -0,0 +1,32 @@
+import React from "react";
+import "flowbite";
+
+export const HawaRadio = (props) => {
+  return (
+    <div>
+      <ul class="items-center w-full text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
+        {props.options.map((option) => {
+          return (
+            <li class="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
+              <div class="flex items-center pl-3">
+                <input
+                  id="horizontal-list-radio-license"
+                  type="radio"
+                  value=""
+                  name="list-radio"
+                  class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
+                />
+                <label
+                  for="horizontal-list-radio-license"
+                  class="py-3 ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300"
+                >
+                  {option.label}
+                </label>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

package/src/elements/HawaRange.js

@@ -3,23 +3,15 @@ import PropTypes from "prop-types";
 
 export const HawaRange = (props) => {
   return (
-    // <Stack spacing={2} direction="row" alignItems="center" style={props.style}>
-    //   {props.startElement}
-    //   <Slider
-    //     size="small"
-    //     aria-label="Volume"
-    //     value={props.value}
-    //     onChange={props.handleChange}
-    //   />
-    //   {props.endElement}
-    // </Stack>
     <div>
-      <label
-        for="default-range"
-        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        Default range
-      </label>
+      {props.label && (
+        <label
+          for="default-range"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          {props.label}
+        </label>
+      )}
       <div className="flex flex-row justify-center items-center w-fit">
         <div className="mr-2">{props.startElement}</div>{" "}
         <input

package/src/elements/HawaSettingsRow.js

@@ -2,11 +2,11 @@ import React from "react";
 import PropTypes from "prop-types";
 import { HawaTypography } from "./HawaTypography";
 import { HawaTextField } from "./HawaTextField";
-import { HawaPanelTabs } from "./HawaPanelTabs";
 import { HawaSwitch } from "./HawaSwitch";
 import { HawaColorPicker } from "./HawaColorPicker";
 import { HawaRange } from "./HawaRange";
 import { HawaCheckbox } from "./HawaCheckbox";
+import { HawaTabs } from "./HawaTabs";
 
 export const HawaSettingsRow = (props) => {
   return (
@@ -17,9 +17,7 @@ export const HawaSettingsRow = (props) => {
       {props.settingsType === "boolean" && <HawaSwitch {...props} />}
       {props.settingsType === "range" && <HawaRange {...props} />}
       {props.settingsType === "color" && <HawaColorPicker {...props} />}
-      {props.settingsType === "radio" && (
-        <HawaPanelTabs location="inSettings" {...props} />
-      )}
+      {props.settingsType === "radio" && <HawaTabs {...props} />}
     </div>
   );
 };

package/src/elements/HawaTable.js

@@ -52,13 +52,9 @@ export const HawaTable = (props) => {
                       >
                         {props.actions.map((act) => (
                           <HawaButton
-                            style={{ margin: 2 }}
-                            variant="outlined"
-                            size="small"
                             onClick={() => props.handleActionClick(singleRow)}
-                          >
-                            {act}
-                          </HawaButton>
+                            text={act}
+                          />
                         ))}
                       </td>
                     )}

package/src/elements/HawaTabs.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+export const HawaTabs = (props) => {
+  const [selectedOption, setSelectedOption] = useState(props.defaultValue);
+  let activeTabStyle =
+    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active";
+  let inactiveTabStyle =
+    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
+
+  return (
+    <div>
+      <ul className="bg-gray-100 w-fit rounded-lg flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400">
+        {props.options.map((opt) => (
+          <li className="mr-2">
+            <button
+              aria-current="page"
+              onClick={() => {
+                setSelectedOption(opt.value);
+                props.onChangeTab(opt.value);
+              }}
+              className={
+                selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
+              }
+            >
+              {opt.label}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/elements/HawaTooltip.js

@@ -1,54 +1,15 @@
 import React from "react";
 import "flowbite";
+
 export const HawaTooltip = (props) => {
-  const screenSize = {
-    width: 1500,
-    height: 200
-  };
   return (
     <div
       id={props.tooltipID}
       role="tooltip"
       class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
     >
-      Tooltip content
+      {props.content}
       <div class="tooltip-arrow" data-popper-arrow></div>
     </div>
-
-    // <Tooltip
-    //   placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
-    //   enterTouchDelay={100}
-    //   title={
-    //     props.hint ? (
-    //       props.hint
-    //     ) : (
-    //       <div>
-    //         <div
-    //           style={{
-    //             fontSize: 20,
-    //             fontWeight: 800,
-    //             padding: 10,
-    //             paddingBottom: 5,
-    //             textAlign: "center"
-    //           }}
-    //         >
-    //           {props.hintTitle}
-    //         </div>
-    //         <div
-    //           style={{
-    //             fontSize: 13,
-    //             fontWeight: 100,
-    //             padding: 10,
-    //             textAlign: "center"
-    //           }}
-    //         >
-    //           {props.hintContent}
-    //         </div>
-    //       </div>
-    //     )
-    //   }
-    // >
-    //   {props.children}
-    // </Tooltip>
   );
 };

package/src/elements/index.js

@@ -1,5 +1,3 @@
-export * from "./ResponsiveButton";
-export * from "./ActionButton";
 export * from "./HawaSnackbar";
 export * from "./HawaSwitch";
 export * from "./HawaCheckbox";
@@ -25,3 +23,5 @@ export * from "./HawaPhoneInput";
 export * from "./HawaPhoneInput2";
 export * from "./HawaDrawerItem";
 export * from "./HawaTooltip";
+export * from "./HawaTabs";
+export * from "./HawaModal";

package/src/layout/HawaContainer.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const HawaContainer = (props) => {
+  let containerStyle = "";
+  if (props.withDividers) {
+    containerStyle =
+      "w-full max-w-sm flex flex-col divide-y divide-gray-300 bg-blue-300 rounded-xl p-4";
+  } else {
+    containerStyle = "w-full max-w-sm flex flex-col bg-blue-300 rounded-xl p-4";
+  }
+  return <div className={containerStyle}>{props.children}</div>;
+};

package/src/layout/index.js

@@ -1,7 +1,6 @@
 export * from "./Box";
-// export * from "./HawaAppLayout";
 export * from "./HawaDialog";
 export * from "./HawaPageControls";
 export * from "./HawaBottomAppBar";
-export * from "./HawaDrawer";
 export * from "./HawaLayout";
+export * from "./HawaContainer";

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.6b765954.iframe.bundle.js"></script><script src="vendors~main.8be71844.iframe.bundle.js"></script><script src="main.89a5002b.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.6b765954.iframe.bundle.js"></script><script src="vendors~main.7059fde5.iframe.bundle.js"></script><script src="main.dd9f34e9.iframe.bundle.js"></script></body></html>