@caseparts-org/caseblocks 0.0.109 → 0.0.110

package/dist/molecules/Account/Account.d.ts

@@ -10,7 +10,8 @@ export interface AccountProps extends React.HTMLAttributes<HTMLDivElement>, Hide
         /** The account user's initials. */
         initials: string;
     };
-    accountRoute: string;
     onLoginClick: () => void;
+    /** Optional content to show when clicking the authenticated container */
+    popoverContent?: React.ReactNode;
 }
 export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Account/Account.js

@@ -1,86 +1,120 @@
-import { jsx as i, jsxs as n } from "react/jsx-runtime";
-import { getHideAtStyles as a } from "../../atoms/HideAt.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { getHideAtStyles as c } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
-import { Text as l } from "../../atoms/Text/Text.js";
+import { Text as m } from "../../atoms/Text/Text.js";
 import { Avatar as h } from "../Avatar/Avatar.js";
-import { Flex as d } from "../../atoms/Flex/Flex.js";
-import { Button as A } from "../../atoms/Button/Button.js";
-import { c as u } from "../../clsx-OuTLNxxd.js";
-import { Link as x } from "../../atoms/Link/Link.js";
-import '../../assets/Account.css';const p = "_loggedIn_1aoh3_1", I = "_customer_1aoh3_12", s = {
-  loggedIn: p,
-  customer: I
+import { Flex as a } from "../../atoms/Flex/Flex.js";
+import { Button as u } from "../../atoms/Button/Button.js";
+import { Popover as p } from "../../atoms/Popover/Popover.js";
+import { c as d } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Account.css';const x = "_loggedIn_1aoh3_1", A = "_customer_1aoh3_12", o = {
+  loggedIn: x,
+  customer: A
 };
-function _(e) {
-  return e.account !== void 0;
+function I(i) {
+  return i.account !== void 0;
 }
-function P(e) {
-  return _(e) ? /* @__PURE__ */ i(k, { ...e }) : /* @__PURE__ */ i(v, { ...e });
+function P(i) {
+  return I(i) ? /* @__PURE__ */ t(v, { ...i }) : /* @__PURE__ */ t(k, { ...i });
 }
-function k(e) {
+function v(i) {
   const {
-    account: t,
-    accountRoute: o,
-    onLoginClick: m,
+    account: e,
     className: r,
-    hideAt: c,
+    hideAt: s,
+    popoverContent: l,
     ...g
-  } = e;
-  return /* @__PURE__ */ n(
+  } = i;
+  return l ? /* @__PURE__ */ t(
+    p,
+    {
+      position: "bottom right",
+      trigger: /* @__PURE__ */ n(
+        "div",
+        {
+          className: d(o.loggedIn, c(s), r),
+          ...g,
+          children: [
+            /* @__PURE__ */ n(
+              a,
+              {
+                flexDirection: "column",
+                alignItems: "flex-end",
+                hideAt: ["sm", "md"],
+                className: o.customer,
+                children: [
+                  /* @__PURE__ */ n(m, { size: "xxs", children: [
+                    "Acct: ",
+                    e == null ? void 0 : e.number
+                  ] }),
+                  /* @__PURE__ */ n(m, { size: "sm", variant: "display", colorToken: "links", children: [
+                    "Hello ",
+                    e == null ? void 0 : e.name
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ t(h, { initials: e.initials })
+          ]
+        }
+      ),
+      children: l
+    }
+  ) : /* @__PURE__ */ n(
     "div",
     {
-      className: u(s.loggedIn, a(c), r),
+      className: d(o.loggedIn, c(s), r),
       ...g,
       children: [
         /* @__PURE__ */ n(
-          d,
+          a,
           {
             flexDirection: "column",
             alignItems: "flex-end",
             hideAt: ["sm", "md"],
-            className: s.customer,
+            className: o.customer,
             children: [
-              /* @__PURE__ */ n(l, { size: "xxs", children: [
+              /* @__PURE__ */ n(m, { size: "xxs", children: [
                 "Acct: ",
-                t == null ? void 0 : t.number
+                e == null ? void 0 : e.number
               ] }),
-              /* @__PURE__ */ i(x, { href: o, children: /* @__PURE__ */ n(l, { size: "sm", variant: "display", children: [
+              /* @__PURE__ */ n(m, { size: "sm", variant: "display", colorToken: "links", children: [
                 "Hello ",
-                t == null ? void 0 : t.name
-              ] }) })
+                e == null ? void 0 : e.name
+              ] })
             ]
           }
         ),
-        /* @__PURE__ */ i(h, { initials: t.initials, accountRoute: o })
+        /* @__PURE__ */ t(h, { initials: e.initials })
       ]
     }
   );
 }
-function v(e) {
-  const { accountRoute: t, onLoginClick: o, className: m, hideAt: r, ...c } = e;
+function k(i) {
+  const { onLoginClick: e, className: r, hideAt: s, ...l } = i;
   return /* @__PURE__ */ n(
-    d,
+    a,
     {
       flexDirection: "row",
       alignItems: "center",
-      ...c,
-      className: u(
-        s.unauthenticated,
-        a(r),
-        m
+      ...l,
+      className: d(
+        o.unauthenticated,
+        c(s),
+        r
       ),
       children: [
-        /* @__PURE__ */ i(
-          A,
+        /* @__PURE__ */ t(
+          u,
           {
-            onClick: o,
+            onClick: e,
             size: "sm",
             variant: "primary",
             hideAt: ["sm", "md"],
             children: "Sign In / Register"
           }
         ),
-        /* @__PURE__ */ i(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+        /* @__PURE__ */ t(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
       ]
     }
   );

package/dist/molecules/Account/Account.stories.js

@@ -1,5 +1,5 @@
 import { Account as t } from "./Account.js";
-const c = {
+const o = {
   title: "Case Parts/Molecules/Account",
   component: t,
   parameters: {
@@ -8,9 +8,8 @@ const c = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, n = {
+}, e = {
   args: {
-    accountRoute: "/account",
     onLoginClick: () => {
     }
   }
@@ -21,13 +20,12 @@ const c = {
       initials: "RS",
       number: "123456789012"
     },
-    accountRoute: "/account",
     onLoginClick: () => {
     }
   }
 };
 export {
   a as Authenticated,
-  n as Unauthenticated,
-  c as default
+  e as Unauthenticated,
+  o as default
 };

package/dist/molecules/Avatar/Avatar.d.ts

@@ -2,6 +2,5 @@ import { HideAtProps } from '../../atoms/HideAt';
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, HideAtProps {
     /** The user's initials (2 characters) */
     initials: string;
-    accountRoute: string;
 }
 export declare function Avatar(props: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Avatar/Avatar.js

@@ -1,32 +1,31 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Flex as m } from "../../atoms/Flex/Flex.js";
-import { Link as c } from "../../atoms/Link/Link.js";
-import { getHideAtStyles as l } from "../../atoms/HideAt.js";
-import { c as f } from "../../clsx-OuTLNxxd.js";
-import { t as r } from "../../Text.module-Dzhzk2fH.js";
-import '../../assets/Avatar.css';const p = "_avatar_nvnsd_1", x = {
-  avatar: p
+import { jsx as o } from "react/jsx-runtime";
+import { Flex as n } from "../../atoms/Flex/Flex.js";
+import { getHideAtStyles as m } from "../../atoms/HideAt.js";
+import { c } from "../../clsx-OuTLNxxd.js";
+import { t } from "../../Text.module-Dzhzk2fH.js";
+import '../../assets/Avatar.css';const l = "_avatar_nvnsd_1", f = {
+  avatar: l
 };
-function A(e) {
-  const { accountRoute: a, initials: s, className: o, hideAt: i, ...n } = e;
-  return /* @__PURE__ */ t(c, { href: a, children: /* @__PURE__ */ t(
-    m,
+function u(r) {
+  const { initials: e, className: a, hideAt: s, ...i } = r;
+  return /* @__PURE__ */ o(
+    n,
     {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      className: f(
-        x.avatar,
-        r["text-display"],
-        r["text-md"],
-        l(i),
-        o
+      className: c(
+        f.avatar,
+        t["text-display"],
+        t["text-md"],
+        m(s),
+        a
       ),
-      ...n,
-      children: s.substring(0, 2)
+      ...i,
+      children: e.substring(0, 2)
     }
-  ) });
+  );
 }
 export {
-  A as Avatar
+  u as Avatar
 };

package/dist/molecules/Avatar/Avatar.stories.js

@@ -10,8 +10,7 @@ const e = {
   tags: ["autodocs"]
 }, o = {
   args: {
-    initials: "RS",
-    accountRoute: "/account"
+    initials: "RS"
   }
 };
 export {

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

@@ -8,12 +8,13 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
     faqRoute: string;
     customPartsRoute: string;
     aboutUsRoute: string;
-    accountRoute: string;
     contactRoute: string;
     cart: ShoppingCart;
     onLoginClick: () => void;
     onSearch: (_input: string) => void;
     onClickModelSerial: () => void;
+    /** Content shown in the account popover when authenticated */
+    accountPopoverContent?: React.ReactNode;
 }
 export type MainNavHandle = ShoppingCartHandle;
 export declare const MainNav: React.ForwardRefExoticComponent<MainNavProps & React.RefAttributes<ShoppingCartHandle>>;

package/dist/organisms/MainNav/MainNav.js

@@ -31,19 +31,19 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
   faqRoute: v,
   customPartsRoute: d,
   aboutUsRoute: A,
-  accountRoute: L,
   contactRoute: h,
-  cart: x,
-  open: C,
+  cart: L,
+  open: x,
   // consume external panel control props from CartPropsBase
-  className: k,
-  onLoginClick: y,
+  className: C,
+  onLoginClick: k,
   onSearch: p,
   onClickModelSerial: f,
-  onCartClick: b,
+  onCartClick: y,
+  accountPopoverContent: b,
   ...w
 }, j) {
-  return /* @__PURE__ */ e(z, { ...w, gridWrapperClassName: s(r.main, k), children: /* @__PURE__ */ o(I, { span: 12, className: r.column, children: [
+  return /* @__PURE__ */ e(z, { ...w, gridWrapperClassName: s(r.main, C), children: /* @__PURE__ */ o(I, { span: 12, className: r.column, children: [
     /* @__PURE__ */ o(
       t,
       {
@@ -69,18 +69,18 @@ import '../../assets/MainNav.css';const G = "_main_19pdr_1", K = "_column_19pdr_
                   H,
                   {
                     account: c,
-                    accountRoute: L,
-                    onLoginClick: y,
-                    className: r.avatar
+                    onLoginClick: k,
+                    className: r.avatar,
+                    popoverContent: b
                   }
                 ) }),
                 /* @__PURE__ */ e(
                   F,
                   {
                     ref: j,
-                    cart: x,
-                    open: C,
-                    onCartClick: b
+                    cart: L,
+                    open: x,
+                    onCartClick: y
                   }
                 ),
                 /* @__PURE__ */ e(U, { hideAt: ["lg"], children: /* @__PURE__ */ o("ul", { className: r.menuList, children: [

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

@@ -1,16 +1,19 @@
-import { jsxs as u, Fragment as s, jsx as c } from "react/jsx-runtime";
-import { useState as b } from "react";
-import { MainNav as d } from "./MainNav.js";
-import { CartSlideInPanel as m } from "../../molecules/Cart/CartSlideInPanel.js";
-const I = {
+import { jsxs as u, Fragment as h, jsx as i } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { MainNav as b } from "./MainNav.js";
+import { Text as d } from "../../atoms/Text/Text.js";
+import { Link as s } from "../../atoms/Link/Link.js";
+import { Button as v } from "../../atoms/Button/Button.js";
+import { CartSlideInPanel as g } from "../../molecules/Cart/CartSlideInPanel.js";
+const U = {
   title: "Case Parts/Organisms/MainNav",
-  component: d,
+  component: b,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: "fullscreen"
   }
   // tags: ["autodocs"],
-}, o = [
+}, r = [
   {
     id: 0,
     label: "Shop by Brands",
@@ -103,7 +106,7 @@ const I = {
     route: "#",
     children: []
   }
-], a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", r = {
+], a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", n = {
   items: [
     { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
     { id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
@@ -119,30 +122,36 @@ const I = {
     { id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
   ]
 };
-function v(e) {
+function y(e) {
   return `$${e.items.reduce(
-    (t, i) => t + (parseFloat(i.price.replace(/[^0-9.]/g, "")) || 0) * i.quantity,
+    (t, l) => t + (parseFloat(l.price.replace(/[^0-9.]/g, "")) || 0) * l.quantity,
     0
   ).toFixed(2)}`;
 }
-const n = (e) => {
-  const [l, t] = b(!1);
-  return /* @__PURE__ */ u(s, { children: [
-    /* @__PURE__ */ c(
-      d,
+const m = /* @__PURE__ */ u("div", { style: { display: "flex", flexDirection: "column", gap: 8, minWidth: 220 }, children: [
+  /* @__PURE__ */ i(d, { size: "sm", weight: "semibold", children: "Account" }),
+  /* @__PURE__ */ i(d, { size: "xs", children: "Signed in as Ringo" }),
+  /* @__PURE__ */ i(s, { href: "/account", children: "View Account" }),
+  /* @__PURE__ */ i(s, { href: "/orders", children: "Order History" }),
+  /* @__PURE__ */ i(v, { size: "sm", variant: "secondary", onClick: () => alert("Sign out"), children: "Sign Out" })
+] }), c = (e) => {
+  const [o, t] = p(!1);
+  return /* @__PURE__ */ u(h, { children: [
+    /* @__PURE__ */ i(
+      b,
       {
         ...e,
-        open: l,
-        onCartClick: () => t((i) => !i)
+        open: o,
+        onCartClick: () => t((l) => !l)
       }
     ),
-    /* @__PURE__ */ c(
-      m,
+    /* @__PURE__ */ i(
+      g,
       {
-        open: l,
+        open: o,
         onClose: () => t(!1),
         cart: e.cart,
-        subtotal: v(e.cart),
+        subtotal: y(e.cart),
         itemPriceLabel: "List Price",
         contactHref: e.contactRoute,
         contactLinkBehavior: "new-tab",
@@ -152,13 +161,12 @@ const n = (e) => {
       }
     )
   ] });
-}, S = {
+}, D = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
-    cart: r,
+    cart: n,
     homeRoute: "/",
     customPartsRoute: "/custom",
-    accountRoute: "/account",
     onClickModelSerial: () => {
       alert("Model/Serial");
     },
@@ -174,16 +182,16 @@ const n = (e) => {
     onCartClick: () => {
     },
     // placeholder required by component
-    categories: o
+    categories: r,
+    accountPopoverContent: m
   },
-  render: n
-}, C = {
+  render: c
+}, $ = {
   args: {
     account: { name: "Ringo", initials: "RS", number: "123456789012" },
-    cart: r,
+    cart: n,
     homeRoute: "/",
     customPartsRoute: "/custom",
-    accountRoute: "/account",
     onClickModelSerial: () => {
       alert("Model/Serial");
     },
@@ -198,15 +206,15 @@ const n = (e) => {
     },
     onCartClick: () => {
     },
-    categories: o
+    categories: r,
+    accountPopoverContent: m
   },
-  render: n
-}, k = {
+  render: c
+}, L = {
   args: {
-    cart: r,
+    cart: n,
     homeRoute: "/",
     customPartsRoute: "/custom",
-    accountRoute: "/account",
     onClickModelSerial: () => {
       alert("Model/Serial");
     },
@@ -221,13 +229,13 @@ const n = (e) => {
     },
     onCartClick: () => {
     },
-    categories: o
+    categories: r
   },
-  render: n
+  render: c
 };
 export {
-  S as Authenticated,
-  k as Unauthenticated,
-  C as WithCartItems,
-  I as default
+  D as Authenticated,
+  L as Unauthenticated,
+  $ as WithCartItems,
+  U as default
 };

package/package.json

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