@sikka/hawa 0.0.141 → 0.0.143

package/package.json

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

package/src/elements/HawaMenu.tsx

@@ -98,7 +98,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded-lg bg-primary-500 py-2 px-4 text-white hover:bg-primary-600 rtl:flex-row-reverse dark:hover:bg-primary-600 dark:hover:text-white"
                         : "mx-1 flex cursor-pointer flex-row items-center rounded-lg py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >

package/src/elements/HawaTextField.tsx

@@ -54,7 +54,13 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
           id="message"
           rows={4}
           className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-          placeholder="Your message..."
+          onChange={props.onChange}
+          type={props.type}
+          aria-label={props.label}
+          placeholder={props.placeholder}
+          defaultValue={props.defaultValue}
+          value={props.value}
+          {...props}
         />
       ) : props.type === "search" ? (
         <div className="relative">

package/src/layout/HawaAppLayout.tsx

@@ -100,13 +100,33 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         onMouseLeave={() => setOpenSideMenu(false)}
         ref={ref}
         className={clsx(
-          "fixed top-0 left-0 z-50 flex h-full flex-col overflow-auto bg-primary-400 transition-all hover:w-40",
+          "fixed top-0 left-0 z-50 flex h-full flex-col bg-primary-400 transition-all hover:w-40 hover:overflow-auto",
           size > 600 ? "w-12" : "w-0",
           openSideMenu ? "w-40" : ""
         )}
       >
-        <div className="flex flex-row items-center justify-center bg-red-300 p-2">
-          {openSideMenu ? (
+        <div className="  mb-9 h-12        w-12 p-2">
+          <img
+            className={clsx(
+              "fixed top-2 h-9",
+              !openSideMenu ? "invisible" : "visible"
+            )}
+            height={10}
+            src={props.logoLink}
+            // src={"https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"}
+          />
+
+          <img
+            className={clsx(
+              // " bg-green-500",
+              "fixed top-2 h-9",
+              openSideMenu ? "invisible" : "visible"
+            )}
+            src={props.logoSymbol}
+            // src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
+          />
+
+          {/* {openSideMenu ? (
             <img
               className={clsx("h-10", !openSideMenu ? "invisible" : "visible")}
               src="https://beta-my.qawaim.app/_next/image?url=%2Fqawaim-logo.svg&w=256&q=75"
@@ -116,7 +136,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
               className={clsx("h-10", openSideMenu ? "invisible" : "visible")}
               src="https://beta-admin.qawaim.app/_next/image?url=%2Fqawaim-symbol.svg&w=128&q=75"
             />
-          )}
+          )} */}
         </div>
 
         {props.drawerItems.map((dSection, j) => (

package/src/styles.css

@@ -556,6 +556,9 @@ video {
 .-left-1 {
   left: -0.25rem;
 }
+.top-2 {
+  top: 0.5rem;
+}
 .top-auto {
   top: auto;
 }
@@ -565,9 +568,6 @@ video {
 .right-2\.5 {
   right: 0.625rem;
 }
-.top-2 {
-  top: 0.5rem;
-}
 .z-10 {
   z-index: 10;
 }
@@ -608,6 +608,10 @@ video {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -670,6 +674,9 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.mb-9 {
+  margin-bottom: 2.25rem;
+}
 .mt-14 {
   margin-top: 3.5rem;
 }
@@ -767,14 +774,14 @@ video {
 .h-0\.5 {
   height: 0.125rem;
 }
-.h-\[1px\] {
-  height: 1px;
+.h-12 {
+  height: 3rem;
 }
 .h-9 {
   height: 2.25rem;
 }
-.h-12 {
-  height: 3rem;
+.h-\[1px\] {
+  height: 1px;
 }
 .h-20 {
   height: 5rem;
@@ -1056,9 +1063,6 @@ video {
 .justify-self-end {
   justify-self: end;
 }
-.overflow-auto {
-  overflow: auto;
-}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1366,6 +1370,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
 .bg-primary-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(6 92 198 / var(--tw-bg-opacity));
@@ -1819,6 +1827,9 @@ body {
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
+.hover\:overflow-auto:hover {
+  overflow: auto;
+}
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));

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.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.f7aca500.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.4a2964ac.iframe.bundle.js"></script><script src="870.32eb3abe.iframe.bundle.js"></script><script src="main.64f67baa.iframe.bundle.js"></script></body></html>