@sikka/hawa 0.0.112 → 0.0.113

package/lib/stories/ElementsStories/Snackbar.stories.d.ts

@@ -6,3 +6,4 @@ export declare const Success: any;
 export declare const Warning: any;
 export declare const Info: any;
 export declare const Error: any;
+export declare const WithActions: any;

package/package.json

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

package/src/blocks/Account/UserSettingsForm.tsx

@@ -13,7 +13,6 @@ export const UserSettingsForm: React.FunctionComponent<
 > = (props) => {
   return (
     <HawaContainer>
-      {" "}
       {props.children}
       <HawaButton
         color="primary"

package/src/elements/HawaAlert.tsx

@@ -1,5 +1,6 @@
 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",
@@ -13,6 +14,13 @@ type AlertTypes = {
   title?: any
   text: any
   hideIcon?: any
+  actions?: [
+    {
+      label: string
+      onClick: any
+      variant: "contained" | "outlined"
+    }
+  ]
 }
 export const HawaAlert: React.FunctionComponent<AlertTypes> = (props) => {
   return (
@@ -25,6 +33,19 @@ export const HawaAlert: React.FunctionComponent<AlertTypes> = (props) => {
     >
       <span className="font-medium">{props.title}</span>
       <span>{" " + props.text}</span>
+      {props.actions && (
+        <div className="mt-2 flex flex-row gap-2">
+          {props.actions.map((act) => (
+            <HawaButton
+              variant={act.variant}
+              onClick={act.onClick()}
+              margins="none"
+            >
+              {act.label}
+            </HawaButton>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

package/src/elements/HawaButton.tsx

@@ -6,7 +6,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "default" | "primary" | "secondary"
   width?: "full" | "normal" | "half"
   size?: "small" | "medium" | "large" | "noPadding"
-  tooltip?: string,
+  margins?: "none" | "1" | "2" | "3" | "4"
+  tooltip?: string
   isLoading?: boolean
 }
 
@@ -59,6 +60,7 @@ export function HawaButton({
   width = "normal",
   disabled = false,
   isLoading = false,
+  margins = "2",
   tooltip,
   children,
   ...props
@@ -66,7 +68,12 @@ export function HawaButton({
   const [isHovered, setIsHovered] = React.useState(false)
 
   return (
-    <div className="relative my-2">
+    <div
+      className={clsx(
+        "relative",
+        margins !== "none" ? `my-${margins}` : "my-0"
+      )}
+    >
       <button
         onMouseEnter={() => {
           setIsHovered(true)

package/src/elements/HawaRadio.tsx

@@ -2,7 +2,12 @@ import clsx from "clsx"
 import React, { useState } from "react"
 
 type RadioTypes = {
-  options?: any
+  options?: [
+    {
+      value: any
+      label: any
+    }
+  ]
   onChangeTab?: any
   defaultValue?: any
 }
@@ -17,7 +22,7 @@ export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
     <div>
       <ul
         className={clsx(
-          props.options.length > 2
+          props.options?.length > 2
             ? "flex-wrap xs:max-w-full xs:flex-nowrap"
             : "",
           "flex max-w-fit flex-row whitespace-nowrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400"

package/src/elements/HawaSnackbar.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import React, { FC } from "react"
+import { HawaButton } from "./HawaButton"
 
 type THawaSnackBar = {
   severity: "info" | "warning" | "error" | "success" | "none"
@@ -12,6 +13,13 @@ type THawaSnackBar = {
     | "bottom-right"
     | "bottom-center"
     | "bottom-left"
+  actions?: [
+    {
+      label: string
+      onClick: any
+      variant: "contained" | "outlined"
+    }
+  ]
 }
 
 export const HawaSnackbar: FC<THawaSnackBar> = ({
@@ -19,6 +27,7 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
   description,
   severity = "info",
   position = "bottom-left",
+  actions,
 }) => {
   let defaultStyle =
     "fixed flex flex-row items-top p-1 w-full max-w-xs rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
@@ -44,8 +53,21 @@ export const HawaSnackbar: FC<THawaSnackBar> = ({
       className={clsx(defaultStyle, severities[severity], positions[position])}
     >
       <div className="p-3">
-        <div className="ml-3 text-sm font-bold">{title}</div>
-        <div className="ml-3 text-sm font-normal">{description}</div>
+        <div className="text-sm font-bold">{title}</div>
+        <div className="text-sm font-normal">{description}</div>
+        {actions && (
+          <div className="mt-2 flex flex-row gap-2">
+            {actions.map((act) => (
+              <HawaButton
+                variant={act.variant}
+                onClick={act.onClick()}
+                margins="none"
+              >
+                {act.label}
+              </HawaButton>
+            ))}
+          </div>
+        )}
       </div>
       <button
         type="button"

package/src/elements/HawaTextField.tsx

@@ -56,7 +56,7 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
       ) : (
         <input
           {...props}
-          className="mb-0 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"
+          className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 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"
         />
       )}
 

package/src/layout/HawaContainer.tsx

@@ -13,12 +13,11 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
   centered = false,
   ...props
 }) => {
-  let defaultStyle =
-    "flex w-full max-w-sm flex-col rounded-xl p-4 dark:bg-gray-600"
+  let defaultStyle = "flex w-full flex-col rounded-xl p-4 dark:bg-gray-600"
   let maxWidthStyles: any = {
     full: "md:max-w-xl",
     small: "md:max-w-sm w-1/3 min-w-min",
-    normal: "md:max-w-md",
+    normal: "max-w-sm md:max-w-md",
   }
   let variantStyles = {
     contained: "bg-primary-300",

package/src/styles.css

@@ -587,14 +587,18 @@ video {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
 }
-.my-2 {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -603,10 +607,6 @@ video {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
 }
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
 .ml-auto {
   margin-left: auto;
 }
@@ -619,6 +619,9 @@ video {
 .mb-4 {
   margin-bottom: 1rem;
 }
+.mt-2 {
+  margin-top: 0.5rem;
+}
 .mb-0 {
   margin-bottom: 0px;
 }
@@ -652,9 +655,6 @@ video {
 .ml-2 {
   margin-left: 0.5rem;
 }
-.mt-2 {
-  margin-top: 0.5rem;
-}
 .mb-5 {
   margin-bottom: 1.25rem;
 }