@caseparts-org/caseblocks 0.0.11 → 0.0.15

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

@@ -0,0 +1,46 @@
+import { StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Tooltip').TooltipProps>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        position: {
+            control: "select";
+            options: string[];
+        };
+        mouseEnterDelay: {
+            control: "number";
+        };
+        mouseLeaveDelay: {
+            control: "number";
+        };
+        arrow: {
+            control: "boolean";
+        };
+        className: {
+            table: {
+                disable: true;
+            };
+        };
+        tooltipClassName: {
+            table: {
+                disable: true;
+            };
+        };
+        contentClassName: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const OnHover: Story;
+export declare const OnClick: Story;
+export declare const PositionRight: Story;
+export declare const PositionLeft: Story;

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

@@ -0,0 +1,142 @@
+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 s = {
+  title: "Case Parts/Molecules/Tooltip",
+  component: t,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: "select",
+      options: [
+        "top left",
+        "top center",
+        "top right",
+        "right top",
+        "right center",
+        "right bottom",
+        "bottom left",
+        "bottom center",
+        "bottom right",
+        "left top",
+        "left center",
+        "left bottom",
+        "center center"
+      ]
+    },
+    mouseEnterDelay: { control: "number" },
+    mouseLeaveDelay: { control: "number" },
+    arrow: { control: "boolean" },
+    className: { table: { disable: !0 } },
+    tooltipClassName: { table: { disable: !0 } },
+    contentClassName: { table: { disable: !0 } }
+  }
+}, c = {
+  args: {
+    position: "top center",
+    arrow: !0,
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 0
+  },
+  render: (r) => /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        height: "10vh",
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ e(
+        t,
+        {
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Hover me" }) }),
+          on: "hover",
+          ...r,
+          children: "This tooltip appears on hover (top center)."
+        }
+      )
+    }
+  )
+}, a = {
+  render: () => /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        height: "10vh",
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ e(
+        t,
+        {
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Click me" }) }),
+          on: "click",
+          position: "bottom center",
+          children: "This tooltip appears on click (bottom center)."
+        }
+      )
+    }
+  )
+}, h = {
+  render: () => /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        height: "10vh",
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ e(
+        t,
+        {
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
+          on: "hover",
+          position: "right center",
+          children: "Tooltip on the right."
+        }
+      )
+    }
+  )
+}, d = {
+  render: () => /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        height: "10vh",
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ e(
+        t,
+        {
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "tertiary", children: "Hover left" }) }),
+          on: "hover",
+          position: "left center",
+          children: "Tooltip on the left."
+        }
+      )
+    }
+  )
+};
+export {
+  a as OnClick,
+  c as OnHover,
+  d as PositionLeft,
+  h as PositionRight,
+  s as default
+};

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

@@ -1,4 +1,22 @@
 import { AccountProps } from '../../molecules/Account/Account';
 export interface MainNavProps extends React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
+    categories?: MainCategory[];
+    faqRoute: string;
+    customPartsRoute: string;
+    aboutUsRoute: string;
+    accountRoute: string;
+    contactRoute: string;
+    cartItemCount: number;
+    onLoginClick: () => void;
+    onCartClick: () => void;
 }
-export declare function MainNav({ account }: MainNavProps): import("react/jsx-runtime").JSX.Element;
+export interface Category {
+    id: string | number;
+    label: string;
+    route: string;
+}
+export interface MainCategory extends Category {
+    children: Category[];
+    showChevron?: boolean;
+}
+export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cartItemCount, onLoginClick, onCartClick, }: MainNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/MainNav/MainNav.js

@@ -1,103 +1,126 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import { Grid as s, Column as l } from "../../atoms/Grid/Grid.js";
-import { Flex as t } from "../../atoms/Flex/Flex.js";
-import { Text as r } from "../../atoms/Text/Text.js";
-import { Logo as m } from "../../molecules/Logo/Logo.js";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { Text as l } from "../../atoms/Text/Text.js";
 import { Link as a } from "../../atoms/Link/Link.js";
-import { Icon as c } from "../../atoms/Icon/Icon.js";
-import { Separator as h } from "../../atoms/Separator/Separator.js";
-import { SearchBox as d } from "../../molecules/SearchBox/SearchBox.js";
-import { Account as f } from "../../molecules/Account/Account.js";
-import '../../assets/MainNav.css';const u = "_logoAndSearch_u1n4z_1", p = "_searchContainer_u1n4z_4", _ = "_menu_u1n4z_13", I = "_chatIcon_u1n4z_16", g = "_siteLink_u1n4z_22", x = "_accountId_u1n4z_26", z = "_menuIcon_u1n4z_29", N = "_separator_u1n4z_34", n = {
-  logoAndSearch: u,
-  searchContainer: p,
-  menu: _,
-  chatIcon: I,
-  siteLink: g,
-  accountId: x,
-  menuIcon: z,
-  separator: N
+import { Icon as p } from "../../atoms/Icon/Icon.js";
+import { Flex as s } from "../../atoms/Flex/Flex.js";
+import { Grid as v, Column as x } from "../../atoms/Grid/Grid.js";
+import { Logo as L } from "../../molecules/Logo/Logo.js";
+import { SearchBox as u } from "../../molecules/SearchBox/SearchBox.js";
+import { HamburgerMenu as w } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
+import { Cart as C } from "../../molecules/Cart/Cart.js";
+import { Tooltip as k } from "../../molecules/Tooltip/Tooltip.js";
+import { Account as y } from "../../molecules/Account/Account.js";
+import { getHideAtStyles as z } from "../../atoms/HideAt.js";
+import { c as T } from "../../clsx-OuTLNxxd.js";
+import '../../assets/MainNav.css';const j = "_topNav_c5ei0_1", D = "_operations_c5ei0_9", F = "_search_c5ei0_16", I = "_siteLink_c5ei0_19", U = "_accountArea_c5ei0_23", H = "_cart_c5ei0_29", K = "_categories_c5ei0_36", M = "_category_c5ei0_50", Q = "_submenuTooltip_c5ei0_72", S = "_menuList_c5ei0_79", i = {
+  topNav: j,
+  operations: D,
+  search: F,
+  siteLink: I,
+  accountArea: U,
+  cart: H,
+  categories: K,
+  category: M,
+  submenuTooltip: Q,
+  menuList: S
 };
-function j({ account: o }) {
-  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(l, { span: 12, children: /* @__PURE__ */ i(
-    t,
-    {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      alignItems: "center",
-      children: [
-        /* @__PURE__ */ i(
-          t,
-          {
-            flexDirection: ["column", "row", "row"],
-            alignItems: ["flex-start", "center", "center"],
-            className: n.logoAndSearch,
-            children: [
-              /* @__PURE__ */ e(m, {}),
-              /* @__PURE__ */ e("div", { className: n.searchContainer, children: /* @__PURE__ */ e(d, { action: "/search" }) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ i(
-          t,
-          {
-            flexDirection: ["column", "row", "row"],
-            alignItems: "center",
-            className: n.menu,
-            children: [
-              /* @__PURE__ */ i(
-                t,
-                {
-                  flexDirection: "row",
-                  alignItems: "center",
-                  justifyContent: ["space-between", "flex-start", "flex-start"],
-                  children: [
+function ee({
+  account: m,
+  categories: n,
+  faqRoute: c,
+  customPartsRoute: h,
+  aboutUsRoute: _,
+  accountRoute: N,
+  contactRoute: d,
+  cartItemCount: g = 0,
+  onLoginClick: A,
+  onCartClick: b
+  // chat,
+}) {
+  return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ o(x, { span: 12, children: [
+    /* @__PURE__ */ o(
+      s,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        className: i.topNav,
+        children: [
+          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(L, {}) }),
+          /* @__PURE__ */ o(
+            s,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              className: i.operations,
+              children: [
+                /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(u, { action: "/search" }) }),
+                /* @__PURE__ */ e(t, { href: h, hideAt: ["sm", "md"], children: "Custom Parts" }),
+                /* @__PURE__ */ e(t, { href: c, hideAt: ["sm", "md"], children: "FAQ" }),
+                /* @__PURE__ */ e(t, { href: d, hideAt: ["sm", "md"], children: "Contact Us" }),
+                /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
+                  y,
+                  {
+                    account: m,
+                    accountRoute: N,
+                    onLoginClick: A,
+                    className: i.avatar
+                  }
+                ) }),
+                /* @__PURE__ */ e(C, { onClick: b, cartItemCount: g }),
+                /* @__PURE__ */ e(w, { hideAt: ["lg"], children: /* @__PURE__ */ o("ul", { className: i.menuList, children: [
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { href: h, children: "Custom Parts" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { href: c, children: "FAQ" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { href: d, children: "Contact Us" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(t, { href: _, children: "About Us" }) }),
+                  n && n.map((r) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ o(a, { href: r.route, children: [
+                    /* @__PURE__ */ e(l, { size: "sm", weight: "semibold", children: r.label }),
                     /* @__PURE__ */ e(
-                      c,
-                      {
-                        iconKey: "fa-kit fa-chat",
-                        className: n.chatIcon,
-                        title: "Live Chat",
-                        size: "lg"
-                      }
-                    ),
-                    /* @__PURE__ */ e(a, { href: "#", className: n.siteLink, hideAt: ["sm", "md"], children: /* @__PURE__ */ e(r, { size: "md", variant: "display", children: "Live Chat" }) }),
-                    /* @__PURE__ */ i(
-                      t,
+                      p,
                       {
-                        flexDirection: "row",
-                        className: n.siteLinks,
-                        hideAt: ["sm", "md"],
-                        children: [
-                          /* @__PURE__ */ e(a, { href: "#", className: n.siteLink, children: /* @__PURE__ */ e(r, { size: "md", variant: "display", children: "Custom Parts" }) }),
-                          /* @__PURE__ */ e(a, { href: "#", className: n.siteLink, children: /* @__PURE__ */ e(r, { size: "md", variant: "display", children: "FAQ" }) }),
-                          /* @__PURE__ */ e(a, { href: "#", className: n.siteLink, children: /* @__PURE__ */ e(r, { size: "md", variant: "display", children: "About Us" }) })
-                        ]
+                        iconKey: "fa-solid fa-chevron-right",
+                        title: "Navigate",
+                        size: "sm"
                       }
-                    ),
-                    /* @__PURE__ */ e(t, { flexDirection: "row", hideAt: "lg", className: n.menuIcon, children: /* @__PURE__ */ e(c, { iconKey: "fa-kit fa-bars", title: "Menu", size: "lg" }) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ i(t, { flexDirection: "row", alignItems: "center", children: [
-                /* @__PURE__ */ e(f, { account: o, className: n.avatar }),
-                /* @__PURE__ */ e(h, { orientation: "vertical", className: n.separator }),
-                /* @__PURE__ */ e(
-                  c,
-                  {
-                    iconKey: "fa-kit fa-shoppingcart-empty",
-                    title: "Shopping Cart",
-                    size: "lg"
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  ) }) });
+                    )
+                  ] }) }, r.id))
+                ] }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(u, { action: "/search", className: i.search }) }),
+    n && n.length > 0 && /* @__PURE__ */ e("ul", { className: T(i.categories, z(["sm"])), children: n.map((r) => /* @__PURE__ */ e(
+      k,
+      {
+        trigger: /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ o(a, { href: r.route, children: [
+          /* @__PURE__ */ e(l, { size: "sm", weight: "semibold", children: r.label }),
+          r.showChevron && /* @__PURE__ */ e(
+            p,
+            {
+              iconKey: "fa-regular fa-angle-down",
+              title: "Expand",
+              size: "sm"
+            }
+          )
+        ] }) }, r.id),
+        on: "hover",
+        position: "bottom center",
+        children: /* @__PURE__ */ e("ul", { className: i.submenuTooltip, children: r.children.map((f) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(a, { href: f.route, children: /* @__PURE__ */ e(l, { size: "sm", weight: "semibold", children: f.label }) }) })) })
+      }
+    )) })
+  ] }) });
+}
+function t({
+  href: m,
+  children: n,
+  ...c
+}) {
+  return /* @__PURE__ */ e(a, { href: m, className: i.siteLink, ...c, children: /* @__PURE__ */ e(l, { size: "md", variant: "display", children: n }) });
 }
 export {
-  j as MainNav
+  ee as MainNav
 };

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

@@ -9,5 +9,6 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Unauthenticated: Story;
 export declare const Authenticated: Story;
+export declare const WithCartItems: Story;
+export declare const Unauthenticated: Story;

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

@@ -1,24 +1,147 @@
-import { MainNav as t } from "./MainNav.js";
-const e = {
+import { MainNav as e } from "./MainNav.js";
+const o = {
   title: "Case Parts/Organisms/MainNav",
-  component: t,
+  component: e,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: "centered"
+    layout: "fullscreen"
   }
-}, n = {
-  args: {}
-}, s = {
+  // tags: ["autodocs"],
+}, t = [
+  {
+    id: 0,
+    label: "Shop by Brands",
+    route: "#",
+    children: [
+      { id: 20, label: "Anthony", route: "/anthony" },
+      { id: 21, label: "Beverage Air", route: "/beverage" },
+      { id: 22, label: "Continental", route: "/continental" },
+      { id: 23, label: "Delfield", route: "/delfield" }
+    ],
+    showChevron: !0
+  },
+  {
+    id: 1,
+    label: "Gaskets",
+    route: "#",
+    children: []
+  },
+  {
+    id: 2,
+    label: "Hardware",
+    route: "#",
+    children: []
+  },
+  {
+    id: 3,
+    label: "Refrigeration",
+    route: "#",
+    children: []
+  },
+  {
+    id: 4,
+    label: "Controls",
+    route: "#",
+    children: []
+  },
+  {
+    id: 5,
+    label: "Electrical",
+    route: "#",
+    children: []
+  },
+  {
+    id: 6,
+    label: "Heaters / Pans",
+    route: "#",
+    children: []
+  },
+  {
+    id: 7,
+    label: "Shelving",
+    route: "#",
+    children: []
+  },
+  {
+    id: 8,
+    label: "Doors",
+    route: "#",
+    children: []
+  },
+  {
+    id: 9,
+    label: "Walk-In",
+    route: "#",
+    children: []
+  },
+  {
+    id: 10,
+    label: "Accessories",
+    route: "#",
+    children: []
+  }
+], n = {
   args: {
     account: {
       name: "Ringo",
       initials: "RS",
       number: "123456789012"
-    }
+    },
+    cartItemCount: 0,
+    customPartsRoute: "/custom",
+    accountRoute: "/account",
+    faqRoute: "/faq",
+    aboutUsRoute: "/about",
+    contactRoute: "/contact",
+    onLoginClick: () => {
+      alert("Login ");
+    },
+    onCartClick: () => {
+      alert("Cart");
+    },
+    categories: t
+  }
+}, r = {
+  args: {
+    account: {
+      name: "Ringo",
+      initials: "RS",
+      number: "123456789012"
+    },
+    cartItemCount: 10,
+    customPartsRoute: "/custom",
+    accountRoute: "/account",
+    faqRoute: "/faq",
+    aboutUsRoute: "/about",
+    contactRoute: "/contact",
+    onLoginClick: () => {
+      alert("Login ");
+    },
+    onCartClick: () => {
+      alert("Cart");
+    },
+    categories: t
+  }
+}, l = {
+  args: {
+    cartItemCount: 0,
+    customPartsRoute: "/custom",
+    accountRoute: "/account",
+    faqRoute: "/faq",
+    aboutUsRoute: "/about",
+    contactRoute: "/contact",
+    onLoginClick: () => {
+      alert("Login ");
+    },
+    onCartClick: () => {
+      alert("Cart");
+    },
+    categories: t
   }
 };
 export {
-  s as Authenticated,
-  n as Unauthenticated,
-  e as default
+  n as Authenticated,
+  l as Unauthenticated,
+  r as WithCartItems,
+  o as default
 };

package/dist/styles/tokens.css

@@ -161,6 +161,7 @@
   --surface-surface-tertiary-btn: var(--color-brand-primary-primary-black);
   --surface-surface-tertiary-btn-focus: var(--color-brand-primary-white);
   --surface-surface-text-links: var(--color-brand-primary-white);
+  --surface-surface-searchBar: var(--color-neutrals-neutral-1);
   --text-text-caution: var(--color-brand-primary-primary-tangerine);
   --text-text-disabled: var(--color-neutrals-text-disabled);
   --text-text-error-warning: var(--color-alerts-error-warning);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.11",
+  "version": "0.0.15",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -28,7 +28,8 @@
   },
   "peerDependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "reactjs-popup": ">=2.0.0 <3.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",
@@ -54,6 +55,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^15.2.10",
     "prettier": "3.4.2",
+    "reactjs-popup": "^2.0.6",
     "storybook": "^8.4.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",

package/dist/assets/Logo.css

@@ -1 +0,0 @@
-._container_sgvuc_1{gap:var(--spacing-1);flex-shrink:0}._wordmark_sgvuc_6{margin-bottom:var(--spacing-0-25)}._tagline_sgvuc_10{color:var(--color-brand-primary-primary-black)}