@caseparts-org/caseblocks 0.0.17 → 0.0.19

package/dist/assets/CategoryNav.css

@@ -0,0 +1 @@
+._categories_1m4w9_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;margin:0 90px 0 47px}@media (max-width: 1281px){._categories_1m4w9_1{margin-right:70px;flex-wrap:wrap}}._category_1m4w9_16{list-style:none}._category_1m4w9_16 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_1m4w9_16 a{justify-content:space-between;width:100%}}._category_1m4w9_16 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_1m4w9_16 a path{fill:var(--color-brand-primary-primary-teal-blue)}._submenuTooltip_1m4w9_42{list-style:none;padding:0;margin:0;height:min-content}

package/dist/assets/MainNav.css

@@ -1 +1 @@
-._topNav_c5ei0_1{padding:var(--spacing-1) 0;gap:var(--spacing-1-5)}@media (max-width: 1281px){._topNav_c5ei0_1{padding:var(--spacing-1) 0 0 0;gap:var(--spacing-1)}}._operations_c5ei0_9{gap:var(--spacing-1-5);width:100%}@media (max-width: 1281px){._operations_c5ei0_9{gap:var(--spacing-1)}}._search_c5ei0_16{flex:1}._siteLink_c5ei0_19{color:var(--color-brand-primary-primary-black);cursor:default}._accountArea_c5ei0_23{width:145px}@media (max-width: 1281px){._accountArea_c5ei0_23{width:min-content}}._cart_c5ei0_29{border:none;padding:0;margin:0;background-color:transparent}._categories_c5ei0_36{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;margin:0 90px 0 47px}@media (max-width: 1281px){._categories_c5ei0_36{margin-right:70px;flex-wrap:wrap}}._category_c5ei0_50{list-style:none}._category_c5ei0_50 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_c5ei0_50 a{justify-content:space-between;width:100%}}._category_c5ei0_50 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_c5ei0_50 a path{fill:var(--color-brand-primary-primary-teal-blue)}._submenuTooltip_c5ei0_72{list-style:none;padding:0;margin:0;height:min-content}._menuList_c5ei0_79{list-style:none;padding:0;margin:0;height:min-content;border:1px solid var(--border-border-secondary-btn, #dfdfdf)}._menuList_c5ei0_79>li{width:100%;padding:var(--spacing-0-5) var(--spacing-1);border-bottom:1px solid var(--border-border-secondary-btn, #dfdfdf);box-sizing:border-box}._menuList_c5ei0_79>li:last-of-type{border-bottom:none}
+._topNav_1uhwf_1{padding:var(--spacing-1) 0;gap:var(--spacing-1-5)}@media (max-width: 1281px){._topNav_1uhwf_1{padding:var(--spacing-1) 0 0 0;gap:var(--spacing-1)}}._operations_1uhwf_9{gap:var(--spacing-1-5);width:100%}@media (max-width: 1281px){._operations_1uhwf_9{gap:var(--spacing-1)}}._search_1uhwf_16{flex:1}._siteLink_1uhwf_19{color:var(--color-brand-primary-primary-black);cursor:default}._accountArea_1uhwf_23{width:145px}@media (max-width: 1281px){._accountArea_1uhwf_23{width:min-content}}._cart_1uhwf_29{border:none;padding:0;margin:0;background-color:transparent}._category_1uhwf_35{list-style:none}._category_1uhwf_35 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_1uhwf_35 a{justify-content:space-between;width:100%}}._category_1uhwf_35 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_1uhwf_35 a path{fill:var(--color-brand-primary-primary-teal-blue)}._menuList_1uhwf_57{list-style:none;padding:0;margin:0;height:min-content;border:1px solid var(--border-border-secondary-btn, #dfdfdf)}._menuList_1uhwf_57>li{width:100%;padding:var(--spacing-0-5) var(--spacing-1);border-bottom:1px solid var(--border-border-secondary-btn, #dfdfdf);box-sizing:border-box}._menuList_1uhwf_57>li:last-of-type{border-bottom:none}

package/dist/atoms/Button/Button.stories.js

@@ -1,15 +1,15 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { Button as r } from "./Button.js";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { Button as e } from "./Button.js";
 const n = {
   title: "Case Parts/Atoms/Button",
-  component: r,
+  component: e,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "centered"
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, l = {
+}, p = {
   args: {
     children: "Text",
     size: "md",
@@ -21,17 +21,26 @@ const n = {
   "tertiary",
   "cta-primary",
   "destructive"
-], p = {
-  render: () => /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: a.map((e) => /* @__PURE__ */ t(r, { variant: e, size: "md", children: e.charAt(0).toUpperCase() + e.slice(1) }, e)) })
+], l = {
+  render: () => /* @__PURE__ */ r("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: a.map((t) => /* @__PURE__ */ r(e, { variant: t, size: "md", children: t.charAt(0).toUpperCase() + t.slice(1) }, t)) })
 }, o = ["xxs", "xs", "sm", "md", "lg", "xl"], m = {
-  render: () => /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: o.map((e) => /* @__PURE__ */ s(r, { size: e, variant: "primary", children: [
-    e.charAt(0).toUpperCase() + e.slice(1).toUpperCase(),
-    " Btn"
-  ] }, e)) })
+  render: () => /* @__PURE__ */ r("div", { children: o.map((t) => /* @__PURE__ */ s(
+    e,
+    {
+      size: t,
+      variant: "primary",
+      style: { display: "block", marginBottom: "10px" },
+      children: [
+        t.charAt(0).toUpperCase() + t.slice(1).toUpperCase(),
+        " Btn"
+      ]
+    },
+    t
+  )) })
 };
 export {
-  l as AllProps,
+  p as AllProps,
   m as Sizes,
-  p as Variants,
+  l as Variants,
   n as default
 };

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

@@ -0,0 +1,12 @@
+export interface Category {
+    id: string | number;
+    label: string;
+    route: string;
+}
+export interface MainCategory extends Category {
+    children: Category[];
+    showChevron?: boolean;
+}
+export declare function CategoryNav({ categories, }: {
+    categories?: MainCategory[];
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/molecules/CategoryNav/CategoryNav.js

@@ -0,0 +1,51 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { Text as n } from "../../atoms/Text/Text.js";
+import { Link as s } from "../../atoms/Link/Link.js";
+import { Icon as m } from "../../atoms/Icon/Icon.js";
+import { Tooltip as h } from "../Tooltip/Tooltip.js";
+import { getHideAtStyles as a } from "../../atoms/HideAt.js";
+import '../../assets/CategoryNav.css';const d = "_categories_1m4w9_1", u = "_category_1m4w9_16", p = "_submenuTooltip_1m4w9_42", o = {
+  categories: d,
+  category: u,
+  submenuTooltip: p
+};
+function z({
+  categories: l
+}) {
+  return !l || l.length === 0 ? null : /* @__PURE__ */ e("ul", { className: c(o.categories, a(["sm"])), children: l.map(
+    (i) => i.children.length > 0 ? /* @__PURE__ */ e(
+      h,
+      {
+        trigger: /* @__PURE__ */ e("li", { className: o.category, children: /* @__PURE__ */ t(s, { href: i.route, children: [
+          /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
+          i.showChevron && /* @__PURE__ */ e(
+            m,
+            {
+              iconKey: "fa-regular fa-angle-down",
+              title: "Expand",
+              size: "sm"
+            }
+          )
+        ] }) }),
+        on: "hover",
+        position: "bottom center",
+        children: /* @__PURE__ */ e("ul", { className: o.submenuTooltip, children: i.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: r.route, children: /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
+      },
+      i.id
+    ) : /* @__PURE__ */ e("li", { className: o.category, children: /* @__PURE__ */ t(s, { href: i.route, children: [
+      /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
+      i.showChevron && /* @__PURE__ */ e(
+        m,
+        {
+          iconKey: "fa-regular fa-angle-down",
+          title: "Expand",
+          size: "sm"
+        }
+      )
+    ] }) }, i.id)
+  ) });
+}
+export {
+  z as CategoryNav
+};

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

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+import { CategoryNav } from './CategoryNav';
+declare const meta: {
+    title: string;
+    component: typeof CategoryNav;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/molecules/CategoryNav/CategoryNav.stories.js

@@ -0,0 +1,89 @@
+import { CategoryNav as e } from "./CategoryNav.js";
+const t = {
+  title: "Case Parts/Molecules/CategoryNav",
+  component: e,
+  parameters: {
+    layout: "centered"
+  }
+}, l = [
+  {
+    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: []
+  }
+], a = {
+  args: {
+    categories: l
+  }
+};
+export {
+  a as Default,
+  t as default
+};

package/dist/organisms/MainNav/MainNav.js

@@ -1,89 +1,85 @@
 import { jsx as e, jsxs as t } 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 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 { Text as d } from "../../atoms/Text/Text.js";
+import { Link as f } from "../../atoms/Link/Link.js";
+import { Icon as v } from "../../atoms/Icon/Icon.js";
+import { Flex as c } from "../../atoms/Flex/Flex.js";
+import { Grid as w, Column as g } from "../../atoms/Grid/Grid.js";
+import { Logo as x } from "../../molecules/Logo/Logo.js";
+import { SearchBox as m } from "../../molecules/SearchBox/SearchBox.js";
+import { HamburgerMenu as L } 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 = "_categories_c5ei0_36", K = "_category_c5ei0_50", M = "_submenuTooltip_c5ei0_72", Q = "_menuList_c5ei0_79", i = {
-  topNav: j,
-  operations: D,
-  search: F,
-  siteLink: I,
-  accountArea: U,
-  categories: H,
-  category: K,
-  submenuTooltip: M,
-  menuList: Q
+import { CategoryNav as k } from "../../molecules/CategoryNav/CategoryNav.js";
+import '../../assets/MainNav.css';const b = "_topNav_1uhwf_1", j = "_operations_1uhwf_9", D = "_search_1uhwf_16", z = "_siteLink_1uhwf_19", F = "_accountArea_1uhwf_23", I = "_category_1uhwf_35", U = "_menuList_1uhwf_57", r = {
+  topNav: b,
+  operations: j,
+  search: D,
+  siteLink: z,
+  accountArea: F,
+  category: I,
+  menuList: U
 };
-function R({
-  account: m,
+function V({
+  account: s,
   categories: n,
-  faqRoute: c,
-  customPartsRoute: h,
-  aboutUsRoute: _,
-  accountRoute: N,
-  contactRoute: d,
-  cartItemCount: g = 0,
-  onLoginClick: A,
-  onCartClick: b
+  faqRoute: o,
+  customPartsRoute: l,
+  aboutUsRoute: u,
+  accountRoute: p,
+  contactRoute: h,
+  cartItemCount: _ = 0,
+  onLoginClick: N,
+  onCartClick: A
   // chat,
 }) {
-  return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ t(x, { span: 12, children: [
+  return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ t(g, { span: 12, children: [
     /* @__PURE__ */ t(
-      s,
+      c,
       {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        className: i.topNav,
+        className: r.topNav,
         children: [
-          /* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(L, {}) }),
+          /* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(x, {}) }),
           /* @__PURE__ */ t(
-            s,
+            c,
             {
               flexDirection: "row",
               alignItems: "center",
               justifyContent: "flex-end",
-              className: i.operations,
+              className: r.operations,
               children: [
-                /* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(u, { action: "/search" }) }),
-                /* @__PURE__ */ e(o, { href: h, hideAt: ["sm", "md"], children: "Custom Parts" }),
-                /* @__PURE__ */ e(o, { href: c, hideAt: ["sm", "md"], children: "FAQ" }),
-                /* @__PURE__ */ e(o, { href: d, hideAt: ["sm", "md"], children: "Contact Us" }),
-                /* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
+                /* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["sm"], className: r.search, children: /* @__PURE__ */ e(m, { action: "/search" }) }),
+                /* @__PURE__ */ e(i, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
+                /* @__PURE__ */ e(i, { href: o, hideAt: ["sm", "md"], children: "FAQ" }),
+                /* @__PURE__ */ e(i, { href: h, hideAt: ["sm", "md"], children: "Contact Us" }),
+                /* @__PURE__ */ e("div", { className: r.accountArea, children: /* @__PURE__ */ e(
                   y,
                   {
-                    account: m,
-                    accountRoute: N,
-                    onLoginClick: A,
-                    className: i.avatar
+                    account: s,
+                    accountRoute: p,
+                    onLoginClick: N,
+                    className: r.avatar
                   }
                 ) }),
-                /* @__PURE__ */ e(C, { onClick: b, cartItemCount: g }),
-                /* @__PURE__ */ e(w, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: i.menuList, children: [
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(o, { href: h, children: "Custom Parts" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(o, { href: c, children: "FAQ" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(o, { href: d, children: "Contact Us" }) }),
-                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(o, { href: _, children: "About Us" }) }),
-                  n && n.map((r) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(a, { href: r.route, children: [
-                    /* @__PURE__ */ e(l, { size: "sm", weight: "semibold", children: r.label }),
+                /* @__PURE__ */ e(C, { onClick: A, cartItemCount: _ }),
+                /* @__PURE__ */ e(L, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: r.menuList, children: [
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: l, children: "Custom Parts" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: o, children: "FAQ" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: h, children: "Contact Us" }) }),
+                  /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: u, children: "About Us" }) }),
+                  n && n.map((a) => /* @__PURE__ */ e("li", { className: r.category, children: /* @__PURE__ */ t(f, { href: a.route, children: [
+                    /* @__PURE__ */ e(d, { size: "sm", weight: "semibold", children: a.label }),
                     /* @__PURE__ */ e(
-                      p,
+                      v,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",
                         size: "sm"
                       }
                     )
-                  ] }) }, r.id))
+                  ] }) }, a.id))
                 ] }) })
               ]
             }
@@ -91,35 +87,17 @@ function R({
         ]
       }
     ),
-    /* @__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__ */ t(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 }) }) })) })
-      }
-    )) })
+    /* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(m, { action: "/search", className: r.search }) }),
+    /* @__PURE__ */ e(k, { categories: n })
   ] }) });
 }
-function o({
-  href: m,
+function i({
+  href: s,
   children: n,
-  ...c
+  ...o
 }) {
-  return /* @__PURE__ */ e(a, { href: m, className: i.siteLink, ...c, children: /* @__PURE__ */ e(l, { size: "md", variant: "display", children: n }) });
+  return /* @__PURE__ */ e(f, { href: s, className: r.siteLink, ...o, children: /* @__PURE__ */ e(d, { size: "md", variant: "display", children: n }) });
 }
 export {
-  R as MainNav
+  V as MainNav
 };

package/package.json

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