@sikka/hawa 0.0.76 → 0.0.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -9,7 +9,7 @@
     "start": "start-storybook -p 6006 -s public",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook",
-    "generate-css": "postcss src/tailwind.css -o src/styles.css",
+    "generate-css": "postcss src/tailwind.css -o src/styles.css && mkdir -p dist && cp src/styles.css dist/",
     "deploy-storybook": "storybook-to-ghpages",
     "build-lib": "rollup -c",
     "build:styles": " node tools/build-styles"

package/src/elements/HawaButton.js

@@ -1,24 +1,62 @@
-import React from "react";
+import React, { useState } from "react";
 import { HawaTooltip } from "./HawaTooltip";
+import PropTypes from "prop-types";
 
-export const HawaButton = (props) => {
+export const HawaButton = ({
+  tooltip,
+  icon,
+  iconOnly,
+  text,
+  isLoading = false,
+  loadingText,
+  onClick,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(isLoading);
   let iconStyle = "pr-2 flex flex-col justify-center items-center";
-  let styles =
-    "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";
+  let styles = `${
+    isLoading ? "cursor-not-allowed" : "cursor-pointer"
+  } 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 =
       "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) {
+  if (iconOnly) {
     iconStyle = "flex flex-col justify-center items-center";
   }
   return (
-    <button data-tooltip-target={props.tooltip} type="button" className={styles} {...props}>
-      {props.tooltip && (
-        <HawaTooltip tooltipID={props.tooltip} content={props.tooltip} />
+    <button
+      data-tooltip-target={tooltip}
+      type="button"
+      className={styles}
+      onClick={() => console.log("clicking")}
+      disabled={isLoading}
+      {...props}
+    >
+      {!isLoading ? (
+        <>
+          {tooltip ? (
+            <HawaTooltip tooltipID={tooltip} content={tooltip} />
+          ) : null}
+          {icon ? <div className={iconStyle}>{icon}</div> : null}
+          {!iconOnly && text}
+        </>
+      ) : (
+        <div className="flex flex-row gap-x-3">
+          <div className="border-2 border-gray-400 border-t-white animate-spin  text-white rounded-full h-5 w-5"></div>
+          <div>{loadingText}</div>
+        </div>
       )}
-      {props.icon ? <div className={iconStyle}>{props.icon}</div> : null}
-      {!props.iconOnly && props.text}
     </button>
   );
 };
+
+HawaButton.PropTypes = {
+  tooltip: PropTypes.string,
+  icon: PropTypes.element,
+  iconOnly: PropTypes.bool,
+  text: PropTypes.string,
+  isLoading: PropTypes.bool,
+  loadingText: PropTypes.string,
+  onClick : PropTypes.func
+};

package/src/elements/HawaItemCard.js

@@ -1,16 +1,43 @@
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";
+import { useState } from "react";
+
+export const HawaItemCard = ({
+  actions,
+  content,
+  headerActions,
+  header,
+  ...props
+}) => {
+  const [openActionHeader, setOpenActionHeader] = useState(false);
+
+  function handleOpenActionHeader() {
+    setOpenActionHeader(!openActionHeader);
+  }
+
+  useEffect(() => {
+    window.onclick = () => {
+      console.log("clicking, state = ", openActionHeader);
+      if (openActionHeader) {
+        setOpenActionHeader(false);
+      }
+    };
+    return () => (window.onClick = null);
+  }, [openActionHeader]);
 
-export const HawaItemCard = (props) => {
   return (
-    <div className="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 className="flex justify-end pr-6">
+    <div
+      className="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 className="relative flex justify-end pr-6">
           <button
             id="dropdownButton"
             data-dropdown-toggle="dropdown"
             className="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"
+            onClick={handleOpenActionHeader}
           >
             <span className="sr-only">Open dropdown</span>
             <svg
@@ -25,17 +52,19 @@ export const HawaItemCard = (props) => {
           </button>
           <div
             id="dropdown"
-            className="hidden z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+            className={`absolute ${
+              openActionHeader ? "block" : "hidden"
+            } right-0 top-7 z-10 w-44 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700`}
           >
             <ul className="py-1" aria-labelledby="dropdownButton">
-              {props.headerActions.map((action) => {
+              {headerActions.map(({ label, action }) => {
                 return (
-                  <li>
+                  <li onClick={action}>
                     <a
                       href="#"
                       className="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}
+                      {label}
                     </a>
                   </li>
                 );
@@ -46,19 +75,24 @@ export const HawaItemCard = (props) => {
       )}
       <div className="px-6">
         <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-          {props.header}{" "}
+          {header}{" "}
         </h5>
         <p className="font-normal text-gray-700 dark:text-gray-400">
-          {props.content}
+          {content}
         </p>
       </div>
-      <div className="p-3 mt-6 rounded-b-lg flex justify-end">
-        {props.actions}
-      </div>
+      <div className="p-3 mt-6 rounded-b-lg flex justify-end">{actions}</div>
     </div>
   );
 };
 HawaItemCard.propTypes = {
   lang: PropTypes.string,
+  actions: PropTypes.element,
+  content: PropTypes.element,
+  headerActions: PropTypes.arrayOf({
+    label: PropTypes.string,
+    action: PropTypes.func
+  }),
+  header: PropTypes.element,
   onCardClick: PropTypes.func
 };

package/src/styles.css

@@ -575,12 +575,15 @@ video {
 .left-0 {
   left: 0px;
 }
-.top-0 {
-  top: 0px;
-}
 .right-0 {
   right: 0px;
 }
+.top-7 {
+  top: 1.75rem;
+}
+.top-0 {
+  top: 0px;
+}
 .bottom-4 {
   bottom: 1rem;
 }
@@ -820,6 +823,25 @@ video {
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@-webkit-keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  -webkit-animation: spin 1s linear infinite;
+          animation: spin 1s linear infinite;
+}
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -864,6 +886,10 @@ video {
 .justify-between {
   justify-content: space-between;
 }
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
 .gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
@@ -936,12 +962,12 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded {
-  border-radius: 0.25rem;
-}
 .rounded-full {
   border-radius: 9999px;
 }
+.rounded {
+  border-radius: 0.25rem;
+}
 .rounded-t-xl {
   border-top-left-radius: 0.75rem;
   border-top-right-radius: 0.75rem;
@@ -973,6 +999,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-2 {
+  border-width: 2px;
+}
 .border-b-0 {
   border-bottom-width: 0px;
 }
@@ -1002,6 +1031,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1010,6 +1043,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
+.border-t-white {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));