@sikka/hawa 0.0.219 → 0.0.221

package/lib/layout/Footer.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+type FooterTypes = {
+    logoText?: string;
+    logoURL?: string;
+    socialLinks?: {
+        twitter?: string;
+        instagram?: string;
+        tiktok?: string;
+        snapchat?: string;
+    };
+    footerLinks?: {
+        title: string;
+        pages: {
+            label: string;
+            link: string;
+        }[];
+    }[];
+};
+export declare const Footer: React.FunctionComponent<FooterTypes>;
+export {};

package/lib/layout/index.d.ts

@@ -5,3 +5,4 @@ export * from "./HawaAppLayout";
 export * from "./HawaContainer";
 export * from "./SimpleGrid";
 export * from "./AppSidebar";
+export * from "./Footer";

package/package.json

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

package/src/blocks/Misc/LeadGenerator.tsx

@@ -0,0 +1,46 @@
+import React from "react"
+import { HawaButton, HawaTextField } from "../../elements"
+import { HawaContainer } from "../../layout"
+
+type TLeadGenerator = {
+  variant?: "outlined" | "contained" | "neobrutalism"
+  texts: {
+    title: string
+    subtitle: string
+    submit: string
+  }
+  handleNewsletterSub: (e: string) => void
+}
+
+export const LeadGenerator: React.FunctionComponent<TLeadGenerator> = ({
+  variant = "contained",
+  texts,
+  handleNewsletterSub,
+}) => {
+  return (
+    <HawaContainer variant={variant}>
+      <div className="p-0 mb-4 pt-0">
+        <h1 className="font-bold">{texts?.title}</h1>
+        <span>{texts?.subtitle}</span>
+      </div>
+      <form
+        className="flex flex-row gap-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          handleNewsletterSub(e.target[0].value)
+        }}
+      >
+        <HawaTextField
+          width="full"
+          type="email"
+          name="email"
+          placeholder={"example@sikka.io"}
+          margin="none"
+        />
+        <HawaButton size="full" margins="none">
+          {texts?.submit ?? "Submit"}
+        </HawaButton>
+      </form>
+    </HawaContainer>
+  )
+}

package/src/blocks/Misc/index.ts

@@ -2,4 +2,4 @@ export * from "./NotFound"
 export * from "./EmptyState"
 export * from "./Newsletter"
 export * from "./Testimonial"
-
+export * from "./LeadGenerator"

package/src/elements/HawaButton.tsx

@@ -50,7 +50,8 @@ export const HawaButton: React.FunctionComponent<ButtonProps> = ({
   badge,
   ...props
 }) => {
-  const baseStyles = "cursor-pointer font-medium rounded h-full  transition-all"
+  const baseStyles =
+    "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium rounded transition-all"
 
   const sizeStyles = {
     xs: "px-1 py-1",

package/src/elements/HawaCheckbox.tsx

@@ -7,16 +7,17 @@ type TCheckBoxTypes = {
   helperText?: any
   id: string
   onChange?: (e) => void
+  val?: boolean
 }
 
 export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
   props
 ) => {
-  const [val, setVal] = useState(false)
+  const [isChecked, setVal] = useState(props.val)
 
   useEffect(() => {
-    props.onChange(val)
-  }, [val])
+    props.onChange(isChecked)
+  }, [isChecked])
   return (
     <div
       className={clsx(
@@ -27,7 +28,7 @@ export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
     >
       <input
         type="checkbox"
-        checked={val}
+        checked={isChecked}
         onChange={(e) => setVal(e.target.checked)}
         id={props.id}
         aria-label={props.label}
@@ -36,7 +37,7 @@ export const HawaCheckbox: React.FunctionComponent<TCheckBoxTypes> = (
       {(props.label || props.helperText) && (
         <div
           className=" flex cursor-pointer flex-col py-2"
-          onClick={(e) => setVal(!val)}
+          onClick={(e) => setVal(!isChecked)}
         >
           {props.label && (
             <label className="mx-2 text-sm font-medium text-gray-900 dark:text-gray-300">

package/src/elements/HawaSelect.tsx

@@ -23,7 +23,7 @@ const Control: React.FunctionComponent<ControlTypes> = ({
 }) => {
   let sizeStyles = {
     small: "h-7 text-xs",
-    normal: "h-[2.33rem]  text-sm",
+    normal: "h-[2.36rem]  text-sm",
     large: "",
   }
   return (

package/src/elements/HawaTextField.tsx

@@ -35,13 +35,12 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
     large: "mb-5",
   }
   let widthStyles = {
-
     small: "w-full max-w-2xs",
     normal: "w-1/2",
     full: "w-full",
   }
 
-  let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
+  let defaultStyle = "flex max-h-fit flex-col justify-center"
   let defaultInputStyle =
     "block w-full rounded border border-gray-300 bg-white p-2 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"
   let previewInputStyle =

package/src/layout/Footer.tsx

@@ -0,0 +1,74 @@
+import { useState } from "@storybook/addons"
+import { FC, ReactNode } from "react"
+import clsx from "clsx"
+import { BsInstagram, BsTwitter } from "react-icons/bs"
+import { FaSnapchat, FaSnapchatGhost, FaTiktok } from "react-icons/fa"
+
+type FooterTypes = {
+  logoText?: string
+  logoURL?: string
+  socialLinks?: {
+    twitter?: string
+    instagram?: string
+    tiktok?: string
+    snapchat?: string
+  }
+  footerLinks?: {
+    title: string
+    pages: {
+      label: string
+      link: string
+    }[]
+  }[]
+}
+
+export const Footer: React.FunctionComponent<FooterTypes> = ({ ...props }) => {
+  return (
+    <div className="sticky  left-0 bottom-0 flex w-full flex-row gap-8  bg-blue-200 p-4">
+      {props.logoText && (
+        <div>
+          <div className="text-2xl font-bold">{props.logoText}</div>
+        </div>
+      )}
+      {props.footerLinks?.map((pagesSection) => (
+        <div className="flex w-32 flex-col gap-2">
+          <div className="text-lg font-bold">{pagesSection.title}</div>
+          <div className="flex flex-col gap-1">
+            {pagesSection.pages.map((singlePage) => (
+              <a
+                className="transition-all hover:font-bold"
+                href={singlePage.link}
+              >
+                {singlePage.label}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+      {props.socialLinks && (
+        <div className="flex flex-row gap-2">
+          {props.socialLinks.twitter && (
+            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+              <BsTwitter />
+            </div>
+          )}
+          {props.socialLinks.instagram && (
+            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+              <BsInstagram />
+            </div>
+          )}
+          {props.socialLinks.tiktok && (
+            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+              <FaTiktok />
+            </div>
+          )}
+          {props.socialLinks.snapchat && (
+            <div className="flex h-6 w-6 items-center justify-center rounded bg-white">
+              <FaSnapchatGhost />
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/layout/index.ts

@@ -5,3 +5,4 @@ export * from "./HawaAppLayout"
 export * from "./HawaContainer"
 export * from "./SimpleGrid"
 export * from "./AppSidebar"
+export * from "./Footer"

package/src/styles.css

@@ -813,6 +813,9 @@ video {
 .h-11 {
   height: 2.75rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-14 {
   height: 3.5rem;
 }
@@ -861,8 +864,8 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
-.h-\[2\.33rem\] {
-  height: 2.33rem;
+.h-\[2\.36rem\] {
+  height: 2.36rem;
 }
 .h-\[calc\(100\%-3\.5rem\)\] {
   height: calc(100% - 3.5rem);
@@ -929,6 +932,9 @@ video {
 .w-3 {
   width: 0.75rem;
 }
+.w-32 {
+  width: 8rem;
+}
 .w-4 {
   width: 1rem;
 }
@@ -1140,6 +1146,9 @@ video {
 .gap-4 {
   gap: 1rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .gap-9 {
   gap: 2.25rem;
 }
@@ -1424,6 +1433,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
 .bg-blue-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(239 246 255 / var(--tw-bg-opacity));
@@ -1470,6 +1483,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
+.bg-green-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1515,6 +1532,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(254 249 195 / var(--tw-bg-opacity));
 }
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+}
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -2082,6 +2103,10 @@ body {
   background-color: var(--layout-primary-700);
 }
 
+.hover\:font-bold:hover {
+  font-weight: 700;
+}
+
 .hover\:text-blue-600:hover {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));