@caseparts-org/caseblocks 0.0.161 → 0.0.162

package/dist/molecules/Cart/CartPart.d.ts

@@ -1,12 +1,20 @@
 import { default as React } from 'react';
+import { ContactUsLinkBehavior } from '../Availability/Availability';
 export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "title"> {
     imageUrl?: string;
     imageAlt?: string;
     title: React.ReactNode;
     titleHref?: string;
-    subtitle?: React.ReactNode;
-    topAction?: React.ReactNode;
-    purchaseInfo?: React.ReactNode;
-    actions?: React.ReactNode;
+    partNumber?: string | number;
+    custom?: boolean;
+    availabilityId?: string;
+    availability?: string;
+    contactHref?: string;
+    contactLinkBehavior?: ContactUsLinkBehavior;
+    priceLabel?: string;
+    price?: string;
+    quantity?: number;
+    onQuantityChange?: (_quantity: number) => void;
+    onRemove?: () => void;
 }
-export declare function CartPart({ imageUrl, imageAlt, title, titleHref, subtitle, topAction, purchaseInfo, actions, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartPart({ imageUrl, imageAlt, title, titleHref, partNumber, custom, availabilityId, availability, contactHref, contactLinkBehavior, priceLabel, price, quantity, onQuantityChange, onRemove, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Cart/CartPart.js

@@ -1,38 +1,70 @@
-import { jsxs as e, jsx as m } from "react/jsx-runtime";
-import { Link as p } from "../../atoms/Link/Link.js";
-import { Text as o } from "../../atoms/Text/Text.js";
-import { s as i } from "../../Cart.module-B-yc1ax6.js";
-import { Image as g } from "../../atoms/Image/Image.js";
-import { c as N } from "../../clsx-OuTLNxxd.js";
-function z({
-  imageUrl: t,
-  imageAlt: d = "Product image",
-  title: r,
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Link as N } from "../../atoms/Link/Link.js";
+import { Text as m } from "../../atoms/Text/Text.js";
+import { s as r } from "../../Cart.module-B-yc1ax6.js";
+import { Image as z } from "../../atoms/Image/Image.js";
+import { c as P } from "../../clsx-OuTLNxxd.js";
+import { Availability as w } from "../Availability/Availability.js";
+import { Pricing as y } from "../Pricing/Pricing.js";
+import { QuantityInput as k } from "../QuantityInput/QuantityInput.js";
+import { Icon as L } from "../../atoms/Icon/Icon.js";
+function B({
+  imageUrl: f,
+  imageAlt: h = "Product image",
+  title: a,
   titleHref: s,
-  subtitle: a,
-  topAction: l,
-  purchaseInfo: c,
-  actions: n,
-  className: h,
-  ...f
+  partNumber: t,
+  custom: p,
+  availabilityId: u,
+  availability: o,
+  contactHref: I,
+  contactLinkBehavior: g = "new-tab",
+  priceLabel: v = "List Price",
+  price: c,
+  quantity: l,
+  onQuantityChange: n,
+  onRemove: d,
+  className: b,
+  ...x
 }) {
-  return /* @__PURE__ */ e("li", { className: N(i.cartItem, h), ...f, children: [
-    /* @__PURE__ */ m(g, { height: 50, width: 50, src: t || "", alt: d, className: i.itemImage }),
-    /* @__PURE__ */ e("div", { children: [
-      /* @__PURE__ */ e("div", { className: i.topRow, children: [
-        /* @__PURE__ */ e("div", { className: i.itemInfo, children: [
-          /* @__PURE__ */ m(o, { size: "sm", weight: "semibold", children: s ? /* @__PURE__ */ m(p, { href: s, children: r }) : r }),
-          a && /* @__PURE__ */ m(o, { size: "sm", children: a })
+  return /* @__PURE__ */ i("li", { className: P(r.cartItem, b), ...x, children: [
+    /* @__PURE__ */ e(z, { height: 50, width: 50, src: f || "", alt: h, className: r.itemImage }),
+    /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ i("div", { className: r.topRow, children: [
+        /* @__PURE__ */ i("div", { className: r.itemInfo, children: [
+          /* @__PURE__ */ e(m, { size: "sm", weight: "semibold", children: s ? /* @__PURE__ */ e(N, { href: s, children: a }) : a }),
+          t != null && /* @__PURE__ */ i(m, { size: "sm", children: [
+            /* @__PURE__ */ e(m, { colorToken: "quaternary", size: "xs", children: p ? "Specs " : "Part # " }),
+            t
+          ] })
         ] }),
-        l
+        d && /* @__PURE__ */ e("button", { onClick: d, className: r.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ e(L, { iconKey: "fa-regular fa-trash", size: "sm" }) })
       ] }),
-      /* @__PURE__ */ e("div", { className: i.itemManagement, children: [
-        c && /* @__PURE__ */ m("div", { className: i.purchaseInformation, children: c }),
-        n
+      /* @__PURE__ */ i("div", { className: r.itemManagement, children: [
+        /* @__PURE__ */ i("div", { className: r.purchaseInformation, children: [
+          o && /* @__PURE__ */ e(
+            w,
+            {
+              availId: u || "",
+              availDescription: o,
+              contactHref: I || "",
+              contactLinkBehavior: g
+            }
+          ),
+          c && /* @__PURE__ */ e(y, { pricingLabel: v, price: c })
+        ] }),
+        typeof l == "number" && n && /* @__PURE__ */ e(
+          k,
+          {
+            quantity: l,
+            onQuantityChange: n,
+            size: "sm"
+          }
+        )
       ] })
     ] })
   ] });
 }
 export {
-  z as CartPart
+  B as CartPart
 };

package/dist/molecules/Cart/CartPart.stories.d.ts

@@ -12,7 +12,17 @@ declare const meta: {
         imageAlt: string;
         title: string;
         titleHref: string;
-        subtitle: import("react/jsx-runtime").JSX.Element;
+        partNumber: string;
+        custom: false;
+        availabilityId: string;
+        availability: string;
+        contactHref: string;
+        contactLinkBehavior: "new-tab";
+        priceLabel: string;
+        price: string;
+        quantity: number;
+        onQuantityChange: () => void;
+        onRemove: () => void;
     };
 };
 export default meta;

package/dist/molecules/Cart/CartPart.stories.js

@@ -1,14 +1,8 @@
-import { jsxs as e, jsx as t, Fragment as a } from "react/jsx-runtime";
-import { Text as n } from "../../atoms/Text/Text.js";
-import { Icon as s } from "../../atoms/Icon/Icon.js";
-import { Button as l } from "../../atoms/Button/Button.js";
-import { Availability as o } from "../Availability/Availability.js";
-import { Pricing as c } from "../Pricing/Pricing.js";
-import { QuantityInput as d } from "../QuantityInput/QuantityInput.js";
-import { CartPart as r } from "./CartPart.js";
-const v = {
+import { jsx as t } from "react/jsx-runtime";
+import { CartPart as e } from "./CartPart.js";
+const l = {
   title: "Case Parts/Molecules/CartPart",
-  component: r,
+  component: e,
   parameters: {
     layout: "centered"
   },
@@ -18,63 +12,35 @@ const v = {
     imageAlt: "1094-01 product image",
     title: "Kason Door Closer - Flush",
     titleHref: "#",
-    subtitle: /* @__PURE__ */ e(a, { children: [
-      /* @__PURE__ */ t(n, { colorToken: "quaternary", size: "xs", children: "Part # " }),
-      "1094-01"
-    ] })
+    partNumber: "1094-01",
+    custom: !1,
+    availabilityId: "available",
+    availability: "In Stock",
+    contactHref: "#",
+    contactLinkBehavior: "new-tab",
+    priceLabel: "List Price",
+    price: "$99.99",
+    quantity: 1,
+    onQuantityChange: () => {
+    },
+    onRemove: () => {
+    }
   }
-}, I = {
-  args: {
-    purchaseInfo: /* @__PURE__ */ e(a, { children: [
-      /* @__PURE__ */ t(
-        o,
-        {
-          availId: "available",
-          availDescription: "In Stock",
-          contactHref: "#",
-          contactLinkBehavior: "new-tab"
-        }
-      ),
-      /* @__PURE__ */ t(c, { pricingLabel: "List Price", price: "$99.99" })
-    ] }),
-    actions: /* @__PURE__ */ t(
-      d,
-      {
-        quantity: 1,
-        onQuantityChange: () => {
-        },
-        size: "sm"
-      }
-    ),
-    topAction: /* @__PURE__ */ t("button", { type: "button", "aria-label": "Remove item", style: { border: "none", background: "transparent", padding: 0 }, children: /* @__PURE__ */ t(s, { iconKey: "fa-regular fa-trash", size: "sm" }) })
-  },
-  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(r, { ...i }) }) })
-}, k = {
+}, o = {
+  render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(e, { ...a }) }) })
+}, s = {
   args: {
     title: "Custom-Molded Snap-In Magnetic Gasket",
-    subtitle: /* @__PURE__ */ e(a, { children: [
-      /* @__PURE__ */ t(n, { colorToken: "quaternary", size: "xs", children: "Specs " }),
-      'MG064 36\\" x 79\\" 3-Sided Dart-to-Dart Gasket'
-    ] }),
-    purchaseInfo: /* @__PURE__ */ e(a, { children: [
-      /* @__PURE__ */ t(
-        o,
-        {
-          availId: "contact",
-          availDescription: "Contact us for availability",
-          contactHref: "#",
-          contactLinkBehavior: "new-tab"
-        }
-      ),
-      /* @__PURE__ */ t(c, { pricingLabel: "List Price", price: "$129.99" })
-    ] }),
-    actions: /* @__PURE__ */ t(l, { type: "button", variant: "secondary", size: "sm", children: "Remove" }),
-    topAction: null
+    partNumber: 'MG064 36" x 79" 3-Sided Dart-to-Dart Gasket',
+    custom: !0,
+    availabilityId: "contact",
+    availability: "Contact us for availability",
+    price: "$129.99"
   },
-  render: (i) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(r, { ...i }) }) })
+  render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(e, { ...a }) }) })
 };
 export {
-  I as Basic,
-  k as CustomSpecs,
-  v as default
+  o as Basic,
+  s as CustomSpecs,
+  l as default
 };

package/dist/molecules/Cart/CartSlideInPanel.js

@@ -1,91 +1,74 @@
-import { jsx as e, jsxs as a, Fragment as s } from "react/jsx-runtime";
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
 import { SlideInPanel as b } from "../../atoms/SlideInPanel/SlideInPanel.js";
-import { Text as n } from "../../atoms/Text/Text.js";
-import { Button as I } from "../../atoms/Button/Button.js";
-import { Pricing as z } from "../Pricing/Pricing.js";
-import { QuantityInput as k } from "../QuantityInput/QuantityInput.js";
-import { Availability as C } from "../Availability/Availability.js";
-import { Icon as c } from "../../atoms/Icon/Icon.js";
-import { CartPart as N } from "./CartPart.js";
-import { s as r } from "../../Cart.module-B-yc1ax6.js";
-function j({
-  open: d,
-  onClose: l,
+import { Text as l } from "../../atoms/Text/Text.js";
+import { Button as f } from "../../atoms/Button/Button.js";
+import { Icon as v } from "../../atoms/Icon/Icon.js";
+import { CartPart as I } from "./CartPart.js";
+import { s as a } from "../../Cart.module-B-yc1ax6.js";
+function q({
+  open: o,
+  onClose: m,
   cart: t,
-  subtotal: m,
-  itemPriceLabel: h,
-  contactHref: p,
-  contactLinkBehavior: u,
-  onItemQtyChange: f,
-  onItemDelete: g,
+  subtotal: n,
+  itemPriceLabel: d,
+  contactHref: c,
+  contactLinkBehavior: h,
+  onItemQtyChange: p,
+  onItemDelete: u,
   onCheckout: y
 }) {
-  var o;
-  return t = t || { items: [] }, /* @__PURE__ */ e(
+  var s;
+  return t = t || { items: [] }, /* @__PURE__ */ i(
     b,
     {
       side: "right",
-      open: d,
-      onClose: l,
+      open: o,
+      onClose: m,
       ariaLabel: "Shopping Cart",
-      children: /* @__PURE__ */ a("div", { id: "cart-panel", className: r.cartContainer, children: [
-        /* @__PURE__ */ a("div", { className: r.headerWrapper, children: [
-          /* @__PURE__ */ a("div", { className: r.header, children: [
-            /* @__PURE__ */ e(n, { size: "2xl", children: "Cart" }),
-            /* @__PURE__ */ a(n, { size: "xs", colorToken: "quaternary", children: [
-              (o = t == null ? void 0 : t.items) == null ? void 0 : o.length,
+      children: /* @__PURE__ */ r("div", { id: "cart-panel", className: a.cartContainer, children: [
+        /* @__PURE__ */ r("div", { className: a.headerWrapper, children: [
+          /* @__PURE__ */ r("div", { className: a.header, children: [
+            /* @__PURE__ */ i(l, { size: "2xl", children: "Cart" }),
+            /* @__PURE__ */ r(l, { size: "xs", colorToken: "quaternary", children: [
+              (s = t == null ? void 0 : t.items) == null ? void 0 : s.length,
               " items in your cart"
             ] })
           ] }),
-          /* @__PURE__ */ e("button", { onClick: l, children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-xmark", size: "md" }) })
+          /* @__PURE__ */ i("button", { onClick: m, children: /* @__PURE__ */ i(v, { iconKey: "fa-regular fa-xmark", size: "md" }) })
         ] }),
-        /* @__PURE__ */ e("div", { className: r.cartItems, children: t.items.length > 0 ? /* @__PURE__ */ e("ul", { children: t.items.map((i) => /* @__PURE__ */ e(
-          N,
+        /* @__PURE__ */ i("div", { className: a.cartItems, children: t.items.length > 0 ? /* @__PURE__ */ i("ul", { children: t.items.map((e) => /* @__PURE__ */ i(
+          I,
           {
-            imageUrl: i.imageUrl,
-            imageAlt: `${i.itemId} product image`,
-            title: i.description,
-            titleHref: i.itemHref || `/part/${i.itemId}`,
-            subtitle: /* @__PURE__ */ a(s, { children: [
-              /* @__PURE__ */ e(n, { colorToken: "quaternary", size: "xs", children: i.custom ? "Specs " : "Part # " }),
-              i.itemId
-            ] }),
-            topAction: /* @__PURE__ */ e("button", { onClick: () => g(i), className: r.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(c, { iconKey: "fa-regular fa-trash", size: "sm" }) }),
-            purchaseInfo: /* @__PURE__ */ a(s, { children: [
-              /* @__PURE__ */ e(
-                C,
-                {
-                  availId: i.availabilityId || "",
-                  availDescription: i.availability || "",
-                  contactHref: p || "",
-                  contactLinkBehavior: u || "new-tab"
-                }
-              ),
-              /* @__PURE__ */ e(z, { pricingLabel: h || "List Price", price: i.price })
-            ] }),
-            actions: /* @__PURE__ */ e(
-              k,
-              {
-                quantity: i.quantity,
-                onQuantityChange: (v) => f(i, v),
-                size: "sm"
-              }
-            )
+            imageUrl: e.imageUrl,
+            imageAlt: `${e.itemId} product image`,
+            title: e.description,
+            titleHref: e.itemHref || `/part/${e.itemId}`,
+            partNumber: e.itemId,
+            custom: !!e.custom,
+            availabilityId: e.availabilityId,
+            availability: e.availability,
+            contactHref: c,
+            contactLinkBehavior: h,
+            price: e.price,
+            priceLabel: d || "List Price",
+            quantity: e.quantity,
+            onQuantityChange: (g) => p(e, g),
+            onRemove: () => u(e)
           },
-          i.id
-        )) }) : /* @__PURE__ */ e("div", { className: r.noItems, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
-        m && /* @__PURE__ */ a("div", { className: r.subtotal, children: [
-          /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: "Subtotal" }),
-          /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: m })
+          e.id
+        )) }) : /* @__PURE__ */ i("div", { className: a.noItems, children: /* @__PURE__ */ i(l, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
+        n && /* @__PURE__ */ r("div", { className: a.subtotal, children: [
+          /* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: "Subtotal" }),
+          /* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: n })
         ] }),
-        /* @__PURE__ */ e(
-          I,
+        /* @__PURE__ */ i(
+          f,
           {
             disabled: t.items.length === 0,
             onClick: y,
             variant: "cta-primary",
             size: "md",
-            className: r.checkoutButton,
+            className: a.checkoutButton,
             children: "Checkout"
           }
         )
@@ -94,5 +77,5 @@ function j({
   );
 }
 export {
-  j as CartSlideInPanel
+  q as CartSlideInPanel
 };

package/package.json

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