@sikka/hawa 0.0.168 → 0.0.169

package/package.json

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

package/src/blocks/Misc/Newsletter.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { HawaButton, HawaTextField } from "../../elements"
+import { HawaContainer } from "../../layout"
+import { FaCheck } from "react-icons/fa"
+type TNewsletter = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+  texts: {
+    wantToStayUpdated: string
+    subscribeToNewsletter: string
+  }
+}
+
+// TODO: make it a form and handle email submission
+
+export const Newsletter: React.FunctionComponent<TNewsletter> = ({
+  variant = "contained",
+  texts,
+}) => {
+  return (
+    <HawaContainer variant={variant} centered={true}>
+      <div className="p-4 pt-0">
+        <h1 className="font-bold">{texts.wantToStayUpdated}</h1>
+        <span>{texts.subscribeToNewsletter}</span>
+      </div>
+      <div className="flex flex-row gap-2">
+        <HawaTextField
+          width="full"
+          type="email"
+          placeholder={"example@sikka.io"}
+          margin="none"
+        />
+        <HawaButton size="full" margins="none">
+          Submit
+        </HawaButton>
+      </div>
+    </HawaContainer>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -1,2 +1,3 @@
 export * from "./NotFound"
 export * from "./EmptyState"
+export * from "./Newsletter"

package/src/elements/DragDropImages.tsx

@@ -11,7 +11,6 @@ const thumbsContainer = {
 }
 type DragDropImagesTypes = {
   label?: string
-  texts: any
   files: [File]
   setFiles: any
   setDeletedFiles: any
@@ -20,6 +19,12 @@ type DragDropImagesTypes = {
   onAcceptedFiles: any
   showPreview: any
   onDeleteFile: any
+  texts: {
+    clickHereToUpload: string
+    maxFileSize: string
+    tooManyFiles: string
+    fileTooLarge: string
+  }
   onClearFiles: any
   maxSize: number
   errorMessages: string
@@ -171,10 +176,10 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
           className="mb-2 flex flex-col justify-center rounded-xl border border-dashed border-black"
         >
           <input {...getInputProps()} />
+          <div className="p-1 text-center">{texts.clickHereToUpload}</div>
           <div className="p-1 text-center">
-            Click here or drop files here to upload
+            {texts.maxFileSize} {max}
           </div>
-          <div className="p-1 text-center">Max file size is {max}</div>
           <div className="flex justify-center ">
             {acceptedFiles.length > 0 && (
               <HawaButton

package/src/elements/HawaAlert.tsx

@@ -2,15 +2,8 @@ import React from "react"
 import clsx from "clsx"
 import { HawaButton } from "./HawaButton"
 
-let severities = {
-  info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
-  warning:
-    "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
-  error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
-  success: "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800",
-}
 type AlertTypes = {
-  severity: keyof typeof severities
+  severity: "info" | "warning" | "error" | "success"
   title?: any
   variant?:
     | "normal"
@@ -20,6 +13,7 @@ type AlertTypes = {
     | "right-accent"
     | "bottom-accent"
   text: any
+  direction?: "rtl" | "ltr"
   hideIcon?: any
   actions?: [
     {
@@ -31,6 +25,7 @@ type AlertTypes = {
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
   variant = "normal",
+  direction = "ltr",
   ...props
 }) => {
   let styleVariant = {
@@ -83,10 +78,10 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = ({
     <div
       className={clsx(
         "mb-4 flex flex-col rounded-lg p-4 text-sm",
-        // severities[props.severity],
         styleVariant[variant][props.severity]
       )}
       role="alert"
+      dir={direction}
     >
       <span className="font-medium">{props.title}</span>
       <span>{" " + props.text}</span>

package/src/elements/HawaButton.tsx

@@ -9,7 +9,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   buttonID?: any
   color?: "default" | "primary" | "secondary"
   width?: "full" | "normal" | "half"
-  size?: "xs" | "small" | "medium" | "large" | "noPadding"
+  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full"
   margins?: "none" | "1" | "2" | "3" | "4"
   tooltip?: string
   tooltipSize?: "normal" | "small" | "large"
@@ -17,7 +17,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isLoading?: boolean
 }
 
-const baseStyles = "cursor-pointer font-medium rounded-lg transition-all"
+const baseStyles = "cursor-pointer font-medium rounded-lg  transition-all"
 
 const sizeStyles = {
   xs: "px-1 py-1",
@@ -25,6 +25,7 @@ const sizeStyles = {
   medium: "text-sm leading-4 px-3 py-2",
   large: "text-sm px-4 py-2",
   noPadding: "p-0",
+  full: "h-full max-h-full p-2",
 }
 
 const widthStyles = {
@@ -34,7 +35,7 @@ const widthStyles = {
   half: "w-1/2",
 }
 const variantStyles = {
-  contained: "border border-transparent",
+  contained: "border-transparent",
   outlined: "bg-transparent border",
 }
 
@@ -79,17 +80,13 @@ export function HawaButton({
 }: ButtonProps) {
   return (
     <div
-      className={clsx(
-        "relative",
-        margins !== "none" ? `my-${margins}` : "my-0"
-      )}
+      className={clsx("relative", margins !== "none" ? `my-${margins}` : "m-0")}
     >
       <button
         id={buttonID}
         className={
           disabled
             ? clsx(
-                // "brightne",
                 className,
                 baseStyles,
                 variantStyles[variant],
@@ -111,14 +108,7 @@ export function HawaButton({
         type={props.type}
         {...props}
       >
-        {!isLoading ? (
-          children
-        ) : (
-          // <div className="flex flex-row gap-x-3">
-          //   <div className="h-5 w-5 animate-spin rounded-full  border-2 border-gray-400 border-t-white text-white"></div>
-          // </div>
-          <HawaSpinner />
-        )}
+        {!isLoading ? children : <HawaSpinner />}
       </button>
       {tooltip && (
         <HawaTooltip

package/src/elements/HawaCardInput.tsx

@@ -84,6 +84,7 @@ export const HawaCardInput = ({
   }
 
   // TODO: We can improve the regex check with a better approach like in the card component.
+
   const onCardNumberChange = (event) => {
     let { value, name } = event.target
     let cardNumber = value

package/src/elements/HawaTable.tsx

@@ -12,10 +12,12 @@ type TableTypes = {
   handleActionClick?: any
   end?: any
   size?: "normal" | "small"
+  customColor?: string
 }
 
 export const HawaTable: React.FunctionComponent<TableTypes> = ({
   size = "normal",
+  customColor = "white",
   ...props
 }) => {
   let isArabic = props.lang === "ar"
@@ -27,7 +29,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   return (
     <div className="relative overflow-x-visible rounded-xl">
       <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-        <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <thead className="bg-layoutPrimary-default text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
           <tr>
             {props.columns.map((col: any, i: any) => (
               <th key={i} scope="col" className={clsx(sizeStyles[size])}>
@@ -46,7 +48,10 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
             props.rows.map((singleRow: any, j: any) => (
               <tr
                 key={j}
-                className="border-b bg-white dark:border-gray-700 dark:bg-gray-800"
+                className={clsx(
+                  "border-b dark:border-gray-700 dark:bg-gray-800",
+                  "bg-" + customColor
+                )}
               >
                 {singleRow.map((r: any, i: any) => {
                   if (i === 0) {

package/src/styles.css

@@ -692,10 +692,6 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -720,6 +716,10 @@ video {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
 }
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -901,6 +901,9 @@ video {
 .h-96 {
   height: 24rem;
 }
+.max-h-full {
+  max-height: 100%;
+}
 .max-h-56 {
   max-height: 14rem;
 }
@@ -1218,12 +1221,12 @@ video {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded-full {
-  border-radius: 9999px;
-}
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -1386,14 +1389,14 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
 .border-blue-600 {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
 .border-buttonPrimary-default {
   border-color: var(--button-primary);
 }