@caseparts-org/caseblocks 0.0.176 → 0.0.177

package/dist/molecules/CategoryNav/CategoryNav.d.ts

@@ -7,7 +7,10 @@ export interface CategoryWithChildren extends Category {
     children: Category[];
     showChevron?: boolean;
 }
-export declare function CategoryNav({ categories, isCategoriesLoading, }: {
+interface CategoryNavProps {
     categories?: CategoryWithChildren[];
     isCategoriesLoading?: boolean;
-}): import("react/jsx-runtime").JSX.Element | null;
+    onCategoryClick?: (_category: Category) => void;
+}
+export declare function CategoryNav({ categories, isCategoriesLoading, onCategoryClick, }: CategoryNavProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -1,31 +1,32 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { c } from "../../clsx-OuTLNxxd.js";
-import { Text as t } from "../../atoms/Text/Text.js";
-import { Link as s } from "../../atoms/Link/Link.js";
-import { Icon as m } from "../../atoms/Icon/Icon.js";
-import { getHideAtStyles as d } from "../../atoms/HideAt.js";
-import { Tooltip as h } from "../../atoms/Tooltip/Tooltip.js";
-import '../../assets/CategoryNav.css';const p = "_categories_19tew_1", u = "_placeholder_19tew_17", f = "_category_19tew_25", b = "_submenuTooltip_19tew_51", i = {
-  categories: p,
-  placeholder: u,
-  category: f,
-  submenuTooltip: b
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { c as p } from "../../clsx-OuTLNxxd.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { Link as t } from "../../atoms/Link/Link.js";
+import { Icon as d } from "../../atoms/Icon/Icon.js";
+import { getHideAtStyles as u } from "../../atoms/HideAt.js";
+import { Tooltip as f } from "../../atoms/Tooltip/Tooltip.js";
+import '../../assets/CategoryNav.css';const c = "_categories_19tew_1", a = "_placeholder_19tew_17", b = "_category_19tew_25", _ = "_submenuTooltip_19tew_51", i = {
+  categories: c,
+  placeholder: a,
+  category: b,
+  submenuTooltip: _
 };
-function v({
-  categories: o,
-  isCategoriesLoading: a
+function D({
+  categories: n,
+  isCategoriesLoading: h,
+  onCategoryClick: s
 }) {
-  return a ? /* @__PURE__ */ e("div", { className: i.placeholder }) : !o || o.length === 0 ? null : /* @__PURE__ */ e("ul", { className: c(i.categories, d(["sm"])), children: o.map(
+  return h ? /* @__PURE__ */ e("div", { className: i.placeholder }) : !n || n.length === 0 ? null : /* @__PURE__ */ e("ul", { className: p(i.categories, u(["sm"])), children: n.map(
     (l) => l.children.length > 0 ? /* @__PURE__ */ e(
-      h,
+      f,
       {
         openDelay: 180,
         closeDelay: 0,
         tooltipOffset: 0,
-        trigger: /* @__PURE__ */ e("li", { className: i.category, tabIndex: 0, children: /* @__PURE__ */ n(s, { href: l.route, children: [
-          /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: l.label }),
+        trigger: /* @__PURE__ */ e("li", { className: i.category, tabIndex: 0, children: /* @__PURE__ */ o(t, { href: l.route, onClick: () => s == null ? void 0 : s(l), children: [
+          /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: l.label }),
           l.showChevron && /* @__PURE__ */ e(
-            m,
+            d,
             {
               iconKey: "fa-regular fa-angle-down",
               title: "Expand",
@@ -34,13 +35,13 @@ function v({
           )
         ] }) }),
         position: "bottom center",
-        children: /* @__PURE__ */ e("ul", { className: i.submenuTooltip, children: l.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: r.route, children: /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
+        children: /* @__PURE__ */ e("ul", { className: i.submenuTooltip, children: l.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { href: r.route, onClick: () => s == null ? void 0 : s(r), children: /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
       },
       l.id
-    ) : /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ n(s, { href: l.route, children: [
-      /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: l.label }),
+    ) : /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ o(t, { href: l.route, onClick: () => s == null ? void 0 : s(l), children: [
+      /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: l.label }),
       l.showChevron && /* @__PURE__ */ e(
-        m,
+        d,
         {
           iconKey: "fa-regular fa-angle-down",
           title: "Expand",
@@ -51,5 +52,5 @@ function v({
   ) });
 }
 export {
-  v as CategoryNav
+  D as CategoryNav
 };

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

@@ -12,6 +12,7 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     cart: ShoppingCart;
     onLoginClick: () => void;
     onSearch: (_input: string) => void;
+    onCategoryClick?: (_category: CategoryWithChildren | CategoryWithChildren["children"][number]) => void;
     onClickModelSerial: () => void;
     /** Content shown in the account popover when authenticated */
     accountPopoverContent?: React.ReactNode;

package/dist/organisms/MainNav/MainNav.js

@@ -1,123 +1,124 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import D from "react";
+import S from "react";
 import { Text as l } from "../../atoms/Text/Text.js";
-import { Link as h } from "../../atoms/Link/Link.js";
-import { Icon as n } from "../../atoms/Icon/Icon.js";
-import { Flex as s } from "../../atoms/Flex/Flex.js";
-import { Grid as M, Column as S } from "../../atoms/Grid/Grid.js";
-import { Logo as U } from "../../molecules/Logo/Logo.js";
-import { SearchBox as N } from "../../molecules/SearchBox/SearchBox.js";
-import { HamburgerMenu as F } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
-import { ShoppingCart as H } from "../../molecules/Cart/Cart.js";
-import { Account as q } from "../../molecules/Account/Account.js";
-import { CategoryNav as B } from "../../molecules/CategoryNav/CategoryNav.js";
+import { Link as d } from "../../atoms/Link/Link.js";
+import { Icon as s } from "../../atoms/Icon/Icon.js";
+import { Flex as a } from "../../atoms/Flex/Flex.js";
+import { Grid as U, Column as C } from "../../atoms/Grid/Grid.js";
+import { Logo as F } from "../../molecules/Logo/Logo.js";
+import { SearchBox as b } from "../../molecules/SearchBox/SearchBox.js";
+import { HamburgerMenu as H } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { ShoppingCart as q } from "../../molecules/Cart/Cart.js";
+import { Account as B } from "../../molecules/Account/Account.js";
+import { CategoryNav as G } from "../../molecules/CategoryNav/CategoryNav.js";
 import { getHideAtStyles as g } from "../../atoms/HideAt.js";
-import { c as m } from "../../clsx-OuTLNxxd.js";
-import '../../assets/MainNav.css';const G = "_main_t25b8_1", P = "_column_t25b8_8", Q = "_topNav_t25b8_13", T = "_logo_t25b8_21", W = "_operations_t25b8_24", E = "_search_t25b8_31", J = "_siteLink_t25b8_34", O = "_accountArea_t25b8_54", R = "_category_t25b8_66", V = "_menuList_t25b8_91", i = {
-  main: G,
-  column: P,
-  topNav: Q,
-  logo: T,
-  operations: W,
-  search: E,
-  siteLink: J,
-  accountArea: O,
-  category: R,
-  menuList: V
-}, he = D.forwardRef(function({
-  account: a,
-  categories: o,
-  homeRoute: b,
-  faqRoute: v,
-  customPartsRoute: f,
-  aboutUsRoute: y,
-  contactRoute: u,
-  cart: L,
-  open: A,
+import { c as h } from "../../clsx-OuTLNxxd.js";
+import '../../assets/MainNav.css';const P = "_main_t25b8_1", Q = "_column_t25b8_8", T = "_topNav_t25b8_13", W = "_logo_t25b8_21", E = "_operations_t25b8_24", J = "_search_t25b8_31", O = "_siteLink_t25b8_34", R = "_accountArea_t25b8_54", V = "_category_t25b8_66", X = "_menuList_t25b8_91", i = {
+  main: P,
+  column: Q,
+  topNav: T,
+  logo: W,
+  operations: E,
+  search: J,
+  siteLink: O,
+  accountArea: R,
+  category: V,
+  menuList: X
+}, de = S.forwardRef(function({
+  account: m,
+  categories: t,
+  homeRoute: v,
+  faqRoute: L,
+  customPartsRoute: u,
+  aboutUsRoute: A,
+  contactRoute: p,
+  cart: x,
+  open: w,
   // consume external panel control props from CartPropsBase
-  className: x,
-  onLoginClick: C,
-  onSearch: p,
-  onClickModelSerial: _,
-  onCartClick: k,
-  accountPopoverContent: w,
-  isAccountLoading: z,
-  isCategoriesLoading: I,
-  ...K
-}, j) {
-  return /* @__PURE__ */ e(M, { ...K, gridWrapperClassName: m(i.main, x), children: /* @__PURE__ */ r(S, { span: 12, className: i.column, children: [
+  className: y,
+  onLoginClick: z,
+  onSearch: _,
+  onCategoryClick: o,
+  onClickModelSerial: N,
+  onCartClick: I,
+  accountPopoverContent: k,
+  isAccountLoading: K,
+  isCategoriesLoading: j,
+  ...D
+}, M) {
+  return /* @__PURE__ */ e(U, { ...D, gridWrapperClassName: h(i.main, y), children: /* @__PURE__ */ r(C, { span: 12, className: i.column, children: [
     /* @__PURE__ */ r(
-      s,
+      a,
       {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
         className: i.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(h, { href: b, children: /* @__PURE__ */ e(U, {}) }) }),
+          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(d, { href: v, children: /* @__PURE__ */ e(F, {}) }) }),
           /* @__PURE__ */ r(
-            s,
+            a,
             {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "flex-end",
               className: i.operations,
               children: [
-                /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(N, { onSearch: p, inputName: "cpc-search" }) }),
-                /* @__PURE__ */ e("button", { onClick: _, className: m(i.siteLink, g(["sm", "md"])), children: "Model/Serial" }),
-                /* @__PURE__ */ e(t, { href: f, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(t, { href: u, hideAt: ["sm", "md"], children: "Contact Us" }),
+                /* @__PURE__ */ e(a, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(b, { onSearch: _, inputName: "cpc-search" }) }),
+                /* @__PURE__ */ e("button", { onClick: N, className: h(i.siteLink, g(["sm", "md"])), children: "Model/Serial" }),
+                /* @__PURE__ */ e(n, { href: u, hideAt: ["sm", "md"], children: "Custom Parts" }),
+                /* @__PURE__ */ e(n, { href: p, hideAt: ["sm", "md"], children: "Contact Us" }),
                 /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
-                  q,
+                  B,
                   {
-                    account: a,
-                    onLoginClick: C,
+                    account: m,
+                    onLoginClick: z,
                     className: i.avatar,
-                    popoverContent: w,
-                    isAccountLoading: z
+                    popoverContent: k,
+                    isAccountLoading: K
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  H,
+                  q,
                   {
-                    ref: j,
-                    cart: L,
-                    open: A,
-                    onCartClick: k
+                    ref: M,
+                    cart: x,
+                    open: w,
+                    onCartClick: I
                   }
                 ),
-                /* @__PURE__ */ r(F, { hideAt: ["lg"], children: [
+                /* @__PURE__ */ r(H, { hideAt: ["lg"], children: [
                   /* @__PURE__ */ r("section", { children: [
                     /* @__PURE__ */ e(l, { size: "md", weight: "semibold", children: "Useful shortcuts" }),
                     /* @__PURE__ */ r("ul", { className: i.menuList, children: [
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-book", size: "sm" }),
-                        /* @__PURE__ */ e("button", { onClick: _, className: m(i.siteLink, g(["lg"])), children: "Model/Serial" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-book", size: "sm" }),
+                        /* @__PURE__ */ e("button", { onClick: N, className: h(i.siteLink, g(["lg"])), children: "Model/Serial" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-screwdriver-wrench", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: f, children: "Custom Parts" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-screwdriver-wrench", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: u, children: "Custom Parts" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-envelope", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: u, children: "Contact Us" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-envelope", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: p, children: "Contact Us" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-solid fa-question", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: v, children: "FAQ" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-solid fa-question", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: L, children: "FAQ" })
                       ] }),
                       /* @__PURE__ */ r("li", { className: i.menuItem, children: [
-                        /* @__PURE__ */ e(n, { iconKey: "fa-regular fa-people-group", size: "sm" }),
-                        /* @__PURE__ */ e(t, { href: y, children: "About Us" })
+                        /* @__PURE__ */ e(s, { iconKey: "fa-regular fa-people-group", size: "sm" }),
+                        /* @__PURE__ */ e(n, { href: A, children: "About Us" })
                       ] })
                     ] })
                   ] }),
                   /* @__PURE__ */ r("section", { children: [
                     /* @__PURE__ */ e(l, { size: "md", weight: "semibold", children: "Shop by category" }),
-                    /* @__PURE__ */ e("ul", { className: i.menuList, children: o && o.map((c) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ r(h, { href: c.route, children: [
+                    /* @__PURE__ */ e("ul", { className: i.menuList, children: t && t.map((c) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ r(d, { href: c.route, onClick: () => o == null ? void 0 : o(c), children: [
                       /* @__PURE__ */ e(l, { size: "sm", children: c.label }),
                       /* @__PURE__ */ e(
-                        n,
+                        s,
                         {
                           iconKey: "fa-solid fa-chevron-right",
                           title: "Navigate",
@@ -133,17 +134,24 @@ import '../../assets/MainNav.css';const G = "_main_t25b8_1", P = "_column_t25b8_
         ]
       }
     ),
-    /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(N, { onSearch: p, inputName: "cpc-search", className: i.search }) }),
-    /* @__PURE__ */ e(B, { categories: o, isCategoriesLoading: I })
+    /* @__PURE__ */ e(a, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(b, { onSearch: _, inputName: "cpc-search", className: i.search }) }),
+    /* @__PURE__ */ e(
+      G,
+      {
+        categories: t,
+        isCategoriesLoading: j,
+        onCategoryClick: o
+      }
+    )
   ] }) });
 });
-function t({
-  href: d,
-  children: a,
-  ...o
+function n({
+  href: f,
+  children: m,
+  ...t
 }) {
-  return /* @__PURE__ */ e(h, { href: d, className: i.siteLink, ...o, children: a });
+  return /* @__PURE__ */ e(d, { href: f, className: i.siteLink, ...t, children: m });
 }
 export {
-  he as MainNav
+  de as MainNav
 };

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

@@ -1,11 +1,11 @@
 import { jsxs as b, Fragment as g, jsx as t } from "react/jsx-runtime";
-import { useState as h } from "react";
+import { useState as y } from "react";
 import { MainNav as m } from "./MainNav.js";
 import { Text as s } from "../../atoms/Text/Text.js";
 import { Link as u } from "../../atoms/Link/Link.js";
-import { Button as p } from "../../atoms/Button/Button.js";
-import { CartSlideInPanel as v } from "../../molecules/Cart/CartSlideInPanel.js";
-const U = {
+import { Button as h } from "../../atoms/Button/Button.js";
+import { CartSlideInPanel as p } from "../../molecules/Cart/CartSlideInPanel.js";
+const q = {
   title: "Case Parts/Organisms/MainNav",
   component: m,
   parameters: {
@@ -122,7 +122,7 @@ const U = {
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
 };
-function y(e) {
+function v(e) {
   return `$${e.items.reduce(
     (i, o) => i + (parseFloat(o.price.replace(/[^0-9.]/g, "")) || 0) * o.quantity,
     0
@@ -133,9 +133,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
   /* @__PURE__ */ t(s, { size: "xs", children: "Signed in as Ringo" }),
   /* @__PURE__ */ t(u, { href: "/account", "data-popover-close": "true", children: "View Account" }),
   /* @__PURE__ */ t(u, { href: "/orders", "data-popover-close": "true", children: "Order History" }),
-  /* @__PURE__ */ t(p, { size: "sm", variant: "secondary", "data-popover-close": "true", onClick: () => alert("Sign out"), children: "Sign Out" })
+  /* @__PURE__ */ t(h, { size: "sm", variant: "secondary", "data-popover-close": "true", onClick: () => alert("Sign out"), children: "Sign Out" })
 ] }), n = (e) => {
-  const [c, i] = h(!1);
+  const [c, i] = y(!1);
   return /* @__PURE__ */ b(g, { children: [
     /* @__PURE__ */ t(
       m,
@@ -146,12 +146,12 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
       }
     ),
     /* @__PURE__ */ t(
-      v,
+      p,
       {
         open: c,
         onClose: () => i(!1),
         cart: e.cart,
-        subtotal: y(e.cart),
+        subtotal: v(e.cart),
         itemPriceLabel: "List Price",
         contactHref: e.contactRoute,
         contactLinkBehavior: "new-tab",
@@ -161,7 +161,7 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
       }
     )
   ] });
-}, $ = {
+}, U = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
     cart: r,
@@ -179,6 +179,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     // placeholder required by component
@@ -204,6 +207,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     categories: l,
@@ -227,6 +233,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     categories: l
@@ -250,6 +259,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
     onSearch: (e) => {
       alert(`Search ${e}`);
     },
+    onCategoryClick: (e) => {
+      alert(`Category ${e.label}`);
+    },
     onCartClick: () => {
     },
     categories: l,
@@ -260,9 +272,9 @@ const d = /* @__PURE__ */ b("div", { style: { display: "flex", flexDirection: "c
   render: n
 };
 export {
-  $ as Authenticated,
+  U as Authenticated,
   M as Loading,
   L as Unauthenticated,
   D as WithCartItems,
-  U as default
+  q as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.176",
+  "version": "0.0.177",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",