@caseparts-org/caseblocks 0.0.50 → 0.0.52

package/dist/molecules/Tooltip/Tooltip.stories.d.ts

@@ -5,20 +5,62 @@ declare const meta: {
     component: import('react').FC<import('./Tooltip').TooltipProps>;
     parameters: {
         layout: string;
+        controls: {
+            sort: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
+    args: {
+        on: "hover";
+        position: "top center";
+        mouseEnterDelay: number;
+        mouseLeaveDelay: number;
+        arrow: true;
+    };
     argTypes: {
+        on: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
         position: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        mouseEnterDelay: {
+            control: "number";
+            description: string;
         };
-        delay: {
+        mouseLeaveDelay: {
             control: "number";
+            description: string;
+        };
+        arrow: {
+            control: "boolean";
+            description: string;
         };
-        allowEnter: {
+        open: {
             control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        closeOnDocumentClick: {
+            control: "boolean";
+            description: string;
+        };
+        closeOnEscape: {
+            control: "boolean";
+            description: string;
         };
-        wrapperClassName: {
+        contentClassName: {
             table: {
                 disable: true;
             };
@@ -28,6 +70,15 @@ declare const meta: {
                 disable: true;
             };
         };
+        trigger: {
+            table: {
+                disable: true;
+            };
+            description: string;
+        };
+        children: {
+            description: string;
+        };
     };
 };
 export default meta;

package/dist/molecules/Tooltip/Tooltip.stories.js

@@ -1,14 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Tooltip as e } from "./Tooltip.js";
-import { Button as i } from "../../atoms/Button/Button.js";
-const s = {
+import { jsx as e } from "react/jsx-runtime";
+import { Tooltip as t } from "./Tooltip.js";
+import { Button as o } from "../../atoms/Button/Button.js";
+const l = {
   title: "Case Parts/Molecules/Tooltip",
-  component: e,
+  component: t,
   parameters: {
-    layout: "centered"
+    layout: "centered",
+    controls: { sort: "requiredFirst" },
+    docs: {
+      description: {
+        component: "Wrapper around reactjs-popup providing consistent styling. Use `interactive` for focusable content. `on` can be a string or an array of trigger events."
+      }
+    }
   },
   tags: ["autodocs"],
+  args: {
+    on: "hover",
+    position: "top center",
+    mouseEnterDelay: 100,
+    mouseLeaveDelay: 80,
+    arrow: !0
+  },
   argTypes: {
+    on: {
+      control: "select",
+      options: ["hover", "click", "focus", "right-click"],
+      description: "Event(s) that trigger the tooltip. Accepts a single string or an array."
+    },
     position: {
       control: "select",
       options: [
@@ -25,20 +43,51 @@ const s = {
         "left center",
         "left bottom",
         "center center"
-      ]
+      ],
+      description: "Popup position passed to reactjs-popup."
+    },
+    mouseEnterDelay: {
+      control: "number",
+      description: "Delay (ms) before opening on hover."
+    },
+    mouseLeaveDelay: {
+      control: "number",
+      description: "Delay (ms) before closing after mouse leaves."
+    },
+    arrow: {
+      control: "boolean",
+      description: "Show popup arrow."
+    },
+    open: {
+      control: "boolean",
+      description: "Controlled open state (overrides triggers). Leave undefined for uncontrolled.",
+      table: { category: "Advanced" }
     },
-    delay: { control: "number" },
-    allowEnter: { control: "boolean" },
-    wrapperClassName: { table: { disable: !0 } },
-    tooltipClassName: { table: { disable: !0 } }
+    closeOnDocumentClick: {
+      control: "boolean",
+      description: "Close when clicking outside (uncontrolled modes)."
+    },
+    closeOnEscape: {
+      control: "boolean",
+      description: "Close on Escape key."
+    },
+    contentClassName: { table: { disable: !0 } },
+    tooltipClassName: { table: { disable: !0 } },
+    trigger: {
+      table: { disable: !0 },
+      description: "React element that triggers the tooltip."
+    },
+    children: {
+      description: "Tooltip content."
+    }
   }
 }, c = {
   args: {
-    position: "top",
-    delay: 0,
-    allowEnter: !0
+    position: "top center",
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 0
   },
-  render: (o) => /* @__PURE__ */ t(
+  render: (r) => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -49,11 +98,11 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          ...o,
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "primary", children: "Hover me" }) }),
+          ...r,
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Hover me" }) }),
           on: "hover",
           children: "This tooltip appears on hover (top center)."
         }
@@ -61,7 +110,7 @@ const s = {
     }
   )
 }, a = {
-  render: () => /* @__PURE__ */ t(
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -72,19 +121,19 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "secondary", children: "Click me" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Click me" }) }),
           on: "click",
-          position: "bottom",
+          position: "bottom center",
           children: "This tooltip appears on click (bottom center)."
         }
       )
     }
   )
-}, h = {
-  render: () => /* @__PURE__ */ t(
+}, p = {
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -95,19 +144,19 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
           on: "hover",
-          position: "right",
+          position: "right center",
           children: "Tooltip on the right."
         }
       )
     }
   )
 }, d = {
-  render: () => /* @__PURE__ */ t(
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -118,19 +167,19 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "tertiary", children: "Hover left" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "tertiary", children: "Hover left" }) }),
           on: "hover",
-          position: "left",
+          position: "left center",
           children: "Tooltip on the left."
         }
       )
     }
   )
-}, p = {
-  render: () => /* @__PURE__ */ t(
+}, h = {
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -142,12 +191,12 @@ const s = {
         position: "absolute",
         right: "300px"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
           on: "hover",
-          position: "right",
+          position: "right center",
           children: "Tooltip on the right."
         }
       )
@@ -155,10 +204,10 @@ const s = {
   )
 };
 export {
-  p as AbsolutelyPositioned,
+  h as AbsolutelyPositioned,
   a as OnClick,
   c as OnHover,
   d as PositionLeft,
-  h as PositionRight,
-  s as default
+  p as PositionRight,
+  l as default
 };

package/dist/organisms/MainNav/MainNav.d.ts

@@ -4,6 +4,7 @@ import { ContactUsLinkBehavior } from 'lib/main-client';
 export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
     categories?: MainCategory[];
     faqRoute: string;
+    byModelSerialRoute: string;
     customPartsRoute: string;
     aboutUsRoute: string;
     accountRoute: string;
@@ -24,4 +25,4 @@ export interface MainCategory extends Category {
     children: Category[];
     showChevron?: boolean;
 }
-export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, cartSubtotal, cartItemPriceLabel, cartContactLinkBehavior, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, className, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function MainNav({ account, categories, byModelSerialRoute, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, cartSubtotal, cartItemPriceLabel, cartContactLinkBehavior, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, className, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/MainNav/MainNav.js

@@ -1,109 +1,111 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { Text as f } from "../../atoms/Text/Text.js";
 import { Link as p } from "../../atoms/Link/Link.js";
-import { Icon as k } from "../../atoms/Icon/Icon.js";
-import { Flex as o } from "../../atoms/Flex/Flex.js";
-import { Grid as w, Column as D } from "../../atoms/Grid/Grid.js";
-import { Logo as F } from "../../molecules/Logo/Logo.js";
+import { Icon as w } from "../../atoms/Icon/Icon.js";
+import { Flex as a } from "../../atoms/Flex/Flex.js";
+import { Grid as D, Column as I } from "../../atoms/Grid/Grid.js";
+import { Logo as M } from "../../molecules/Logo/Logo.js";
 import { SearchBox as d } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as I } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { ShoppingCart as U } from "../../molecules/Cart/Cart.js";
-import { Account as B } from "../../molecules/Account/Account.js";
+import { HamburgerMenu as U } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as B } from "../../molecules/Cart/Cart.js";
+import { Account as F } from "../../molecules/Account/Account.js";
 import { CategoryNav as H } from "../../molecules/CategoryNav/CategoryNav.js";
-import { c as M } from "../../clsx-OuTLNxxd.js";
-import '../../assets/MainNav.css';const P = "_main_18fjz_1", Q = "_column_18fjz_8", G = "_topNav_18fjz_13", K = "_operations_18fjz_21", S = "_search_18fjz_28", T = "_siteLink_18fjz_31", W = "_accountArea_18fjz_35", E = "_category_18fjz_47", J = "_menuList_18fjz_69", i = {
-  main: P,
-  column: Q,
-  topNav: G,
-  operations: K,
-  search: S,
-  siteLink: T,
-  accountArea: W,
+import { c as P } from "../../clsx-OuTLNxxd.js";
+import '../../assets/MainNav.css';const S = "_main_18fjz_1", G = "_column_18fjz_8", K = "_topNav_18fjz_13", Q = "_operations_18fjz_21", T = "_search_18fjz_28", W = "_siteLink_18fjz_31", q = "_accountArea_18fjz_35", E = "_category_18fjz_47", J = "_menuList_18fjz_69", i = {
+  main: S,
+  column: G,
+  topNav: K,
+  operations: Q,
+  search: T,
+  siteLink: W,
+  accountArea: q,
   category: E,
   menuList: J
 };
-function ce({
-  account: a,
+function ae({
+  account: o,
   categories: n,
-  faqRoute: c,
-  customPartsRoute: l,
-  aboutUsRoute: _,
-  accountRoute: u,
+  byModelSerialRoute: c,
+  faqRoute: _,
+  customPartsRoute: m,
+  aboutUsRoute: u,
+  accountRoute: N,
   contactRoute: s,
-  cart: N,
-  cartSubtotal: v,
-  cartItemPriceLabel: A,
-  cartContactLinkBehavior: g,
-  onLoginClick: j,
+  cart: v,
+  cartSubtotal: g,
+  cartItemPriceLabel: j,
+  cartContactLinkBehavior: A,
+  onLoginClick: L,
   onSearch: h,
-  onItemQtyChange: L,
-  onItemDelete: x,
-  onItemEdit: z,
-  onCheckout: C,
+  onItemQtyChange: x,
+  onItemDelete: z,
+  onItemEdit: C,
+  onCheckout: k,
   className: y,
   ...b
 }) {
-  return /* @__PURE__ */ e(w, { ...b, gridWrapperClassName: M(i.main, y), children: /* @__PURE__ */ t(D, { span: 12, className: i.column, children: [
+  return /* @__PURE__ */ e(D, { ...b, gridWrapperClassName: P(i.main, y), children: /* @__PURE__ */ t(I, { span: 12, className: i.column, children: [
     /* @__PURE__ */ t(
-      o,
+      a,
       {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
         className: i.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(F, {}) }),
+          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(M, {}) }),
           /* @__PURE__ */ t(
-            o,
+            a,
             {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "flex-end",
               className: i.operations,
               children: [
-                /* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search" }) }),
-                /* @__PURE__ */ e(r, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(r, { href: c, hideAt: ["sm", "md"], children: "FAQ" }),
+                /* @__PURE__ */ e(a, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search" }) }),
+                /* @__PURE__ */ e(r, { href: c, hideAt: ["sm", "md"], children: "Model/Serial" }),
+                /* @__PURE__ */ e(r, { href: m, hideAt: ["sm", "md"], children: "Custom Parts" }),
                 /* @__PURE__ */ e(r, { href: s, hideAt: ["sm", "md"], children: "Contact Us" }),
                 /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
-                  B,
+                  F,
                   {
-                    account: a,
-                    accountRoute: u,
-                    onLoginClick: j,
+                    account: o,
+                    accountRoute: N,
+                    onLoginClick: L,
                     className: i.avatar
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  U,
+                  B,
                   {
-                    cart: N,
-                    onItemDelete: x,
-                    onItemEdit: z,
-                    onItemQtyChange: L,
-                    onCheckout: C,
-                    subtotal: v,
+                    cart: v,
+                    onItemDelete: z,
+                    onItemEdit: C,
+                    onItemQtyChange: x,
+                    onCheckout: k,
+                    subtotal: g,
                     contactHref: s,
-                    contactLinkBehavior: g,
-                    itemPriceLabel: A
+                    contactLinkBehavior: A,
+                    itemPriceLabel: j
                   }
                 ),
-                /* @__PURE__ */ e(I, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: i.menuList, children: [
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: l, children: "Custom Parts" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: c, children: "FAQ" }) }),
+                /* @__PURE__ */ e(U, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: i.menuList, children: [
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: c, children: "Make/Serial" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: m, children: "Custom Parts" }) }),
                   /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: s, children: "Contact Us" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: _, children: "About Us" }) }),
-                  n && n.map((m) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(p, { href: m.route, children: [
-                    /* @__PURE__ */ e(f, { size: "sm", weight: "semibold", children: m.label }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: _, children: "FAQ" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: u, children: "About Us" }) }),
+                  n && n.map((l) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(p, { href: l.route, children: [
+                    /* @__PURE__ */ e(f, { size: "sm", weight: "semibold", children: l.label }),
                     /* @__PURE__ */ e(
-                      k,
+                      w,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",
                         size: "sm"
                       }
                     )
-                  ] }) }, m.id))
+                  ] }) }, l.id))
                 ] }) })
               ]
             }
@@ -111,17 +113,17 @@ function ce({
         ]
       }
     ),
-    /* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search", className: i.search }) }),
+    /* @__PURE__ */ e(a, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search", className: i.search }) }),
     /* @__PURE__ */ e(H, { categories: n })
   ] }) });
 }
 function r({
-  href: a,
+  href: o,
   children: n,
   ...c
 }) {
-  return /* @__PURE__ */ e(p, { href: a, className: i.siteLink, ...c, children: /* @__PURE__ */ e(f, { size: "md", variant: "display", children: n }) });
+  return /* @__PURE__ */ e(p, { href: o, className: i.siteLink, ...c, children: /* @__PURE__ */ e(f, { size: "md", variant: "display", children: n }) });
 }
 export {
-  ce as MainNav
+  ae as MainNav
 };

package/dist/organisms/MainNav/MainNav.stories.js

@@ -105,6 +105,7 @@ const r = {
     cart: i,
     customPartsRoute: "/custom",
     accountRoute: "/account",
+    byModelSerialRoute: "/model",
     faqRoute: "/faq",
     aboutUsRoute: "/about",
     contactRoute: "/contact",
@@ -138,6 +139,7 @@ const r = {
     cart: i,
     customPartsRoute: "/custom",
     accountRoute: "/account",
+    byModelSerialRoute: "/model",
     faqRoute: "/faq",
     aboutUsRoute: "/about",
     contactRoute: "/contact",
@@ -166,6 +168,7 @@ const r = {
     cart: i,
     customPartsRoute: "/custom",
     accountRoute: "/account",
+    byModelSerialRoute: "/model",
     faqRoute: "/faq",
     aboutUsRoute: "/about",
     contactRoute: "/contact",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -35,7 +35,8 @@
     "@fontsource-variable/roboto-condensed": "^5.1.1",
     "@fontsource/roboto": "^5.1.0",
     "clsx": "^2.1.1",
-    "csstype": "^3.1.3"
+    "csstype": "^3.1.3",
+    "reactjs-popup": "^2.0.6"
   },
   "peerDependencies": {
     "react": ">=18.3.1 <20.0.0",