@sikka/hawa 0.0.108 → 0.0.110

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

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const BreadCrumb: any;
+export declare const BreadCrumWithSeparator: any;
+export declare const BreadcrumbIconSeparator: any;

package/package.json

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

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -26,7 +26,7 @@ export const CodeConfirmation: React.FunctionComponent<
   } = methods
 
   return (
-    <HawaContainer maxWidth="small">
+    <HawaContainer>
       {" "}
       {props.showError && (
         <HawaAlert

package/src/blocks/AuthForms/NewPasswordForm.tsx

@@ -41,7 +41,7 @@ export const NewPasswordForm: React.FunctionComponent<NewPasswordTypes> = (
   }
 
   return (
-    <HawaContainer maxWidth="small">
+    <HawaContainer>
       {" "}
       {matchError && (
         <HawaAlert text={props.texts.passwordMatchError} severity="error" />

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -27,8 +27,7 @@ export const ResetPasswordForm: React.FunctionComponent<ResetPasswordType> = (
     control,
   } = methods
   return (
-    <HawaContainer maxWidth="small">
-      {" "}
+    <HawaContainer>
       {!props.sent ? (
         <form onSubmit={handleSubmit(props.handleResetPassword)}>
           <Controller

package/src/blocks/AuthForms/SignInForm.tsx

@@ -57,7 +57,7 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <HawaContainer maxWidth="small">
+    <HawaContainer>
       <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
         {props.showError && (
           <HawaAlert

package/src/blocks/AuthForms/SignInPhone.tsx

@@ -27,7 +27,7 @@ export const SignInPhone: React.FunctionComponent<SignInPhoneTypes> = (
     console.log("submitting ", userPhone)
   }
   return (
-    <HawaContainer maxWidth="small">
+    <HawaContainer>
       <form
         onSubmit={handleSubmit(() => console.log("testing submit"))}
         // onSubmit={(e) => {

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -68,7 +68,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer maxWidth="small">
+    <HawaContainer>
       <div>
         {props.showError && (
           <HawaAlert

package/src/blocks/Payment/CheckoutForm.tsx

@@ -60,7 +60,7 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
     },
   }
   return (
-    <HawaContainer maxWidth="full">
+    <HawaContainer>
       <div>
         <div className="mb-2 text-center text-xl font-semibold">
           {props.texts.orderDetails}

package/src/blocks/Referral/ReferralAccount.tsx

@@ -13,7 +13,7 @@ export const ReferralAccount: React.FunctionComponent<ReferralAccount> = ({
   referralCode,
 }) => {
   return (
-    <HawaContainer maxWidth="normal">
+    <HawaContainer>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Code</div>
         <div className="flex flex-row items-center justify-between rounded-lg bg-white">

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -26,7 +26,7 @@ export const ReferralSettlement: React.FunctionComponent<
     control,
   } = methods
   return (
-    <HawaContainer maxWidth="normal">
+    <HawaContainer>
       <div>
         <FormProvider {...methods}>
           <HawaTextField label={"IBAN"} />

package/src/blocks/Referral/ReferralStats.tsx

@@ -15,7 +15,7 @@ export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
   withdrawError,
 }) => {
   return (
-    <HawaContainer maxWidth="normal">
+    <HawaContainer>
       <div className="mb-1">Stats</div>
       <div className="justi flex flex-row gap-1">
         <NumberCard title="Clicks" number={22} />

package/src/elements/Breadcrumb.tsx

@@ -0,0 +1,40 @@
+import React, { FC, ReactNode } from "react"
+import { IconType } from "react-icons"
+
+type TBreadcrumItem = {
+  label: string
+  href: string
+}
+
+type TBreadcrumb = {
+  breadcrumbLink: TBreadcrumItem[]
+  separator?: string | ReactNode
+}
+
+const Breadcrumb: FC<TBreadcrumb> = ({
+  breadcrumbLink,
+  separator = "/",
+  ...props
+}) => {
+  return (
+    <div className="flex flex-row items-center">
+      {breadcrumbLink.map((singleBreadcrumbLink, index) => (
+        <div className="flex flex-row items-center justify-center mx-1">
+          <a
+            href={singleBreadcrumbLink.href}
+            className="mx-1 hover:underline hover:decoration-2"
+          >
+            {singleBreadcrumbLink.label}
+          </a>
+          {index != breadcrumbLink.length - 1
+            ? typeof separator == "string"
+              ? separator
+              : <div>{separator}</div>
+            : null}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Breadcrumb

package/src/elements/HawaPricingCard.tsx

@@ -148,7 +148,6 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
     </div>
 
     // <Container
-    //   maxWidth="xs"
     //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
     //   style={{ direction: isArabic ? "rtl" : "ltr" }}
     // >
@@ -157,7 +156,6 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
     //         label={props.discount}
     //         variant="standard"
     //         style={{
-    //           maxWidth: "fit-content",
     //           position: "absolute",
     //           bottom: 10,
     //           ...chipSpacing

package/src/elements/index.ts

@@ -23,6 +23,7 @@ export * from "./HawaMenu"
 export * from "./HawaDrawer"
 export * from "./HawaCopyrights"
 export * from "./HawaTimeline"
+export * from "./Breadcrumb"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/styles.css

@@ -583,6 +583,10 @@ video {
 .m-1 {
   margin: 0.25rem;
 }
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -591,10 +595,6 @@ video {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
 .my-7 {
   margin-top: 1.75rem;
   margin-bottom: 1.75rem;
@@ -1755,6 +1755,9 @@ body {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.hover\:decoration-2:hover {
+  text-decoration-thickness: 2px;
+}
 .hover\:shadow-lg:hover {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);