@sikka/hawa 0.0.58 → 0.0.59

package/src/elements/HawaButton.js

@@ -1,17 +1,24 @@
 import React from "react";
+import { HawaTooltip } from "./HawaTooltip";
 
 export const HawaButton = (props) => {
+  let iconStyle = "pr-2 flex flex-col justify-center items-center";
   let styles =
-    "text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+    "m-1 px-2.5 py-2.5 text-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300       font-medium rounded-lg        text-sm  text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
   if (props.fullWidth) {
     styles =
-      "mt-2 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+      "my-1 w-full flex justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
+  }
+  if (props.iconOnly) {
+    iconStyle = "flex flex-col justify-center items-center";
   }
   return (
-    <button type="button" className={styles} {...props}>
-      {props.icon ? <div class="mr-2 -ml-1 w-5 h-5">{props.icon}</div> : null}
-
-      {props.children}
+    <button data-tooltip-target={props.tooltip} type="button" className={styles} {...props}>
+      {props.tooltip && (
+        <HawaTooltip tooltipID={props.tooltip} content={props.tooltip} />
+      )}
+      {props.icon ? <div className={iconStyle}>{props.icon}</div> : null}
+      {!props.iconOnly && props.text}
     </button>
   );
 };

package/src/elements/HawaItemCard.js

@@ -2,177 +2,60 @@ import React from "react";
 import PropTypes from "prop-types";
 
 export const HawaItemCard = (props) => {
-  let isArabic = props.lang === "ar";
-  const handleParentClick = (e) => {
-    e.stopPropagation();
-    props.onCardClick();
-  };
   return (
-    <div
-      // href="#"
-      class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 "
-    >
-      <div class="flex justify-end pr-6">
-        <button
-          id="dropdownButton"
-          data-dropdown-toggle="dropdown"
-          class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
-          type="button"
-        >
-          <span class="sr-only">Open dropdown</span>
-          <svg
-            class="w-6 h-6"
-            aria-hidden="true"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
-          </svg>
-        </button>
-        <div
-          id="dropdown"
-          class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
-        >
-          <ul class="py-1" aria-labelledby="dropdownButton">
-            <li>
-              <a
-                href="#"
-                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >
-                Edit
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >
-                Export Data
-              </a>
-            </li>
-            <li>
-              <a
-                href="#"
-                class="block py-2 px-4 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >
-                Delete
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="px-6">
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          Noteworthy technology acquisitions 2021
-        </h5>
-        <p class="font-normal text-gray-700 dark:text-gray-400">
-          Here are the biggest enterprise technology acquisitions of 2021 so
-          far, in reverse chronological order.
-        </p>
-      </div>
-      <div className="p-3 mt-6 rounded-b-lg flex justify-end">
-        <div class="inline-flex rounded-md shadow-sm" role="group">
-          <button
-            type="button"
-            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-l-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
-          >
-            <svg
-              aria-hidden="true"
-              class="mr-0 w-4 h-4 fill-current"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            {/* Profile */}
-          </button>
+    <div class="block pt-6 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md  dark:bg-gray-800 dark:border-gray-700 ">
+      {props.headerActions && (
+        <div class="flex justify-end pr-6">
           <button
+            id="dropdownButton"
+            data-dropdown-toggle="dropdown"
+            class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm"
             type="button"
-            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
           >
+            <span class="sr-only">Open dropdown</span>
             <svg
+              class="w-6 h-6"
               aria-hidden="true"
-              class="mr-0 w-4 h-4 fill-current"
               fill="currentColor"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
             >
-              <path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z"></path>
+              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
             </svg>
-            {/* Settings */}
           </button>
-          <button
-            type="button"
-            class="inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white rounded-r-md border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white"
+          <div
+            id="dropdown"
+            class="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
           >
-            <svg
-              aria-hidden="true"
-              class="mr-0 w-4 h-4 fill-current"
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M2 9.5A3.5 3.5 0 005.5 13H9v2.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 15.586V13h2.5a4.5 4.5 0 10-.616-8.958 4.002 4.002 0 10-7.753 1.977A3.5 3.5 0 002 9.5zm9 3.5H9V8a1 1 0 012 0v5z"
-                clip-rule="evenodd"
-              ></path>
-            </svg>
-            {/* Downloads */}
-          </button>
+            <ul class="py-1" aria-labelledby="dropdownButton">
+              {props.headerActions.map((action) => {
+                return (
+                  <li>
+                    <a
+                      href="#"
+                      class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                    >
+                      {action.label}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
         </div>
+      )}
+      <div class="px-6">
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+          {props.header}{" "}
+        </h5>
+        <p class="font-normal text-gray-700 dark:text-gray-400">
+          {props.content}
+        </p>
+      </div>
+      <div className="p-3 mt-6 rounded-b-lg flex justify-end">
+        {props.actions}
       </div>
     </div>
-
-    // <Container
-    //   onClick={handleParentClick}
-    //   maxWidth="xs"
-    //   variant="card-container"
-    //   dataValue="parent"
-    //   //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
-    //   style={{ direction: isArabic ? "rtl" : "ltr" }}
-    // >
-    //   {props.header && (
-    //     <Container style={{ zIndex: 20 }} variant="card-header">
-    //       {props.headerActions && (
-    //         <div
-    //           style={{
-    //             margin: 0,
-    //             marginRight: -20,
-    //             marginLeft: -20,
-    //             marginBottom: -20,
-    //             // backgroundColor: "red",
-    //             display: "flex",
-    //             paddingTop: 5,
-    //             paddingLeft: 5,
-    //             paddingRight: 5,
-    //             justifyContent: "flex-end"
-    //           }}
-    //         >
-    //           {props.headerActions}
-    //         </div>
-    //       )}
-    //       {props.header}
-    //     </Container>
-    //   )}
-    //   {props.content && (
-    //     <Container style={{ zIndex: 20 }} variant="card-content">
-    //       {props.content}
-    //     </Container>
-    //   )}
-
-    //   {props.actions && (
-    //     <Container style={{ zIndex: 20 }} variant="card-actions">
-    //       {props.actions}
-    //     </Container>
-    //   )}
-    // </Container>
   );
 };
 HawaItemCard.propTypes = {

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/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/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 { HawaRadio } from "./HawaRadio";
 
 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" && <HawaRadio {...props} />}
     </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";

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

@@ -5,3 +5,4 @@ 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.305b437b.iframe.bundle.js"></script><script src="main.e6b8be7f.iframe.bundle.js"></script></body></html>