@caseparts-org/caseblocks 0.0.140 → 0.0.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/atoms/Icon/Icon.d.ts +4 -5
  2. package/dist/main-server.d.ts +1 -0
  3. package/dist/molecules/AddToCart/AddToCart.d.ts +2 -1
  4. package/dist/molecules/AddToCart/AddToCart.js +39 -38
  5. package/dist/molecules/Cart/Cart.stories.js +5 -5
  6. package/dist/molecules/Cart/CartSlideInPanel.js +29 -28
  7. package/package.json +1 -1
package/dist/atoms/Icon/Icon.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  import { HideAtProps } from '../HideAt';
2
- type IconSet = "fa-kit" | "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-brands";
3
- type IconVariant = "fa-sharp" | "fa-duotone" | "fa-sharp-duotone";
4
- type IconColorToken = "inherit" | "default" | "default-inverted" | "secondary" | "warning" | "error-warning" | "success";
5
- interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, HideAtProps {
2
+ export type IconSet = "fa-kit" | "fa-solid" | "fa-regular" | "fa-light" | "fa-thin" | "fa-brands";
3
+ export type IconVariant = "fa-sharp" | "fa-duotone" | "fa-sharp-duotone";
4
+ export type IconColorToken = "inherit" | "default" | "default-inverted" | "secondary" | "warning" | "error-warning" | "success";
5
+ export interface IconProps extends React.HTMLAttributes<HTMLSpanElement>, HideAtProps {
6
6
  iconKey: `${IconSet} ${string}` | `${IconVariant} ${IconSet} ${string}`;
7
7
  size?: "sm" | "md" | "lg";
8
8
  colorToken?: IconColorToken;
9
9
  }
10
10
  export declare function Icon({ iconKey, size, hideAt, className, colorToken, ...otherProps }: IconProps): import("react/jsx-runtime").JSX.Element;
11
- export {};
package/dist/main-server.d.ts CHANGED
@@ -6,6 +6,7 @@ export { Grid, Column } from './atoms/Grid/Grid';
6
6
  export type { GridProps, ColumnProps } from './atoms/Grid/Grid';
7
7
  export { Head } from './atoms/Root/Head';
8
8
  export { Icon } from './atoms/Icon/Icon';
9
+ export type { IconProps, IconColorToken, IconSet, IconVariant } from './atoms/Icon/Icon';
9
10
  export { Root } from './atoms/Root/Root';
10
11
  export { Separator } from './atoms/Separator/Separator';
11
12
  export type { SeparatorProps } from './atoms/Separator/Separator';
package/dist/molecules/AddToCart/AddToCart.d.ts CHANGED
@@ -2,6 +2,7 @@ import { default as React } from 'react';
2
2
  import { ButtonVariant } from '../../atoms/Button/buttonClassName';
3
3
  export interface AddToCartProps {
4
4
  itemKey: number;
5
+ disableButton?: boolean;
5
6
  initialQuantity?: number;
6
7
  min?: number;
7
8
  max?: number;
@@ -16,4 +17,4 @@ export interface AddToCartProps {
16
17
  buttonDoneText?: string;
17
18
  size?: "sm" | "md";
18
19
  }
19
- export declare function AddToCart({ itemKey, initialQuantity, min, max, onQuantityChange, onAdd, autoHideDelayMs, showQuantity, className, addButtonClassName, addButtonVariant, buttonText, buttonDoneText, size }: AddToCartProps): React.ReactElement | null;
20
+ export declare function AddToCart({ itemKey, disableButton, initialQuantity, min, max, onQuantityChange, onAdd, autoHideDelayMs, showQuantity, className, addButtonClassName, addButtonVariant, buttonText, buttonDoneText, size }: AddToCartProps): React.ReactElement | null;
package/dist/molecules/AddToCart/AddToCart.js CHANGED
@@ -1,65 +1,66 @@
1
- import { jsxs as j, jsx as d } from "react/jsx-runtime";
1
+ import { jsxs as v, jsx as d } from "react/jsx-runtime";
2
2
  import r from "react";
3
- import { c as v } from "../../clsx-OuTLNxxd.js";
4
- import { StatefulButton as q } from "../StatefulButton/StatefulButton.js";
5
- import { QuantityInput as w } from "../QuantityInput/QuantityInput.js";
6
- import '../../assets/AddToCart.css';const y = "_container_1xk40_1", z = {
7
- container: y
3
+ import { c as q } from "../../clsx-OuTLNxxd.js";
4
+ import { StatefulButton as w } from "../StatefulButton/StatefulButton.js";
5
+ import { QuantityInput as y } from "../QuantityInput/QuantityInput.js";
6
+ import '../../assets/AddToCart.css';const z = "_container_1xk40_1", B = {
7
+ container: z
8
8
  };
9
- function G({
9
+ function H({
10
10
  itemKey: s,
11
- initialQuantity: i = 1,
11
+ disableButton: i,
12
+ initialQuantity: l = 1,
12
13
  min: o = 1,
13
- max: l,
14
+ max: m,
14
15
  onQuantityChange: c,
15
- onAdd: m,
16
- autoHideDelayMs: f = 3e3,
17
- showQuantity: p = !0,
18
- className: x,
19
- addButtonClassName: T,
20
- addButtonVariant: _,
21
- buttonText: b,
22
- buttonDoneText: k,
16
+ onAdd: f,
17
+ autoHideDelayMs: p = 3e3,
18
+ showQuantity: x = !0,
19
+ className: T,
20
+ addButtonClassName: _,
21
+ addButtonVariant: b,
22
+ buttonText: k,
23
+ buttonDoneText: A,
23
24
  size: a
24
25
  }) {
25
- const [u, A] = r.useState(() => {
26
- const e = Number(i) || 1;
26
+ const [u, N] = r.useState(() => {
27
+ const e = Number(l) || 1;
27
28
  return e < o ? o : e;
28
- }), [N, n] = r.useState(!1), t = r.useRef(null);
29
+ }), [R, n] = r.useState(!1), t = r.useRef(null);
29
30
  r.useEffect(() => () => {
30
31
  t.current && clearTimeout(t.current);
31
32
  }, []);
32
- const R = r.useCallback((e) => {
33
- A(e), c == null || c(e);
34
- }, [c]), S = async () => {
35
- s && (await m(s, u), n(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => n(!1), f));
33
+ const S = r.useCallback((e) => {
34
+ N(e), c == null || c(e);
35
+ }, [c]), j = async () => {
36
+ s && (await f(s, u), n(!0), t.current && clearTimeout(t.current), t.current = setTimeout(() => n(!1), p));
36
37
  };
37
- return /* @__PURE__ */ j("div", { className: v(z.container, x), children: [
38
- p && /* @__PURE__ */ d(
39
- w,
38
+ return /* @__PURE__ */ v("div", { className: q(B.container, T), children: [
39
+ x && /* @__PURE__ */ d(
40
+ y,
40
41
  {
41
42
  quantity: u,
42
- onQuantityChange: R,
43
+ onQuantityChange: S,
43
44
  min: o,
44
- max: l,
45
+ max: m,
45
46
  size: a || "md"
46
47
  }
47
48
  ),
48
49
  /* @__PURE__ */ d(
49
- q,
50
+ w,
50
51
  {
51
52
  size: a || "md",
52
- variant: _ || "cta-primary",
53
- completed: N,
54
- onClick: S,
55
- text: b,
56
- completedText: k,
57
- disabled: !s,
58
- className: T
53
+ variant: b || "cta-primary",
54
+ completed: R,
55
+ onClick: j,
56
+ text: k,
57
+ completedText: A,
58
+ disabled: !s || i,
59
+ className: _
59
60
  }
60
61
  )
61
62
  ] });
62
63
  }
63
64
  export {
64
- G as AddToCart
65
+ H as AddToCart
65
66
  };
package/dist/molecules/Cart/Cart.stories.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as c, Fragment as d, jsx as o } from "react/jsx-runtime";
1
+ import { jsxs as d, Fragment as c, jsx as o } from "react/jsx-runtime";
2
2
  import { useState as s } from "react";
3
3
  import { ShoppingCart as n } from "./Cart.js";
4
4
  import { CartSlideInPanel as m } from "./CartSlideInPanel.js";
@@ -13,7 +13,7 @@ const g = {
13
13
  items: [
14
14
  { id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
15
15
  { id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
16
- { id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
16
+ { id: 3, itemId: 'MG064 36" x 79" 3-Sided Dart-to-Dart Gasket', description: "Custom-Molded Snap-In Magnetic Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
17
17
  { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
18
18
  { id: 5, itemId: "Warmer Wire", description: '228" 7.0 OHMS 115V', price: "$99.99", quantity: 1, imageUrl: a, availability: "", availabilityId: "available" },
19
19
  { id: 6, itemId: "810803", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
@@ -32,7 +32,7 @@ const g = {
32
32
  { id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
33
33
  ]
34
34
  };
35
- function b(i) {
35
+ function I(i) {
36
36
  return `$${i.items.reduce(
37
37
  (t, e) => t + (parseFloat(e.price.replace(/[^0-9.]/g, "")) || 0) * e.quantity,
38
38
  0
@@ -40,7 +40,7 @@ function b(i) {
40
40
  }
41
41
  const r = (i) => {
42
42
  const [l, t] = s(!1);
43
- return /* @__PURE__ */ c(d, { children: [
43
+ return /* @__PURE__ */ d(c, { children: [
44
44
  /* @__PURE__ */ o(
45
45
  n,
46
46
  {
@@ -55,7 +55,7 @@ const r = (i) => {
55
55
  open: l,
56
56
  onClose: () => t(!1),
57
57
  cart: i.cart,
58
- subtotal: b(i.cart),
58
+ subtotal: I(i.cart),
59
59
  itemPriceLabel: "List Price",
60
60
  contactHref: "#",
61
61
  contactLinkBehavior: "new-tab",
package/dist/molecules/Cart/CartSlideInPanel.js CHANGED
@@ -1,17 +1,17 @@
1
- import { jsx as e, jsxs as a } from "react/jsx-runtime";
1
+ import { jsx as e, jsxs as t } from "react/jsx-runtime";
2
2
  import { SlideInPanel as g } from "../../atoms/SlideInPanel/SlideInPanel.js";
3
3
  import { Text as n } from "../../atoms/Text/Text.js";
4
- import { Link as I } from "../../atoms/Link/Link.js";
5
- import { Button as y } from "../../atoms/Button/Button.js";
4
+ import { Link as y } from "../../atoms/Link/Link.js";
5
+ import { Button as I } from "../../atoms/Button/Button.js";
6
6
  import { Pricing as b } from "../Pricing/Pricing.js";
7
7
  import { QuantityInput as N } from "../QuantityInput/QuantityInput.js";
8
8
  import { Availability as z } from "../Availability/Availability.js";
9
- import { Icon as C } from "../../atoms/Icon/Icon.js";
10
- import { s as t } from "../../Cart.module-9txlotpz.js";
11
- function Q({
9
+ import { Icon as k } from "../../atoms/Icon/Icon.js";
10
+ import { s as r } from "../../Cart.module-9txlotpz.js";
11
+ function H({
12
12
  open: s,
13
13
  onClose: o,
14
- cart: r,
14
+ cart: a,
15
15
  subtotal: l,
16
16
  itemPriceLabel: c,
17
17
  contactHref: d,
@@ -21,36 +21,37 @@ function Q({
21
21
  onCheckout: v
22
22
  }) {
23
23
  var m;
24
- return r = r || { items: [] }, /* @__PURE__ */ e(
24
+ return a = a || { items: [] }, /* @__PURE__ */ e(
25
25
  g,
26
26
  {
27
27
  side: "right",
28
28
  open: s,
29
29
  onClose: o,
30
30
  ariaLabel: "Shopping Cart",
31
- children: /* @__PURE__ */ a("div", { id: "cart-panel", className: t.cartContainer, children: [
32
- /* @__PURE__ */ a("div", { className: t.header, children: [
31
+ children: /* @__PURE__ */ t("div", { id: "cart-panel", className: r.cartContainer, children: [
32
+ /* @__PURE__ */ t("div", { className: r.header, children: [
33
33
  /* @__PURE__ */ e(n, { size: "2xl", children: "Cart" }),
34
- /* @__PURE__ */ a(n, { size: "xs", colorToken: "quaternary", children: [
35
- (m = r == null ? void 0 : r.items) == null ? void 0 : m.length,
34
+ /* @__PURE__ */ t(n, { size: "xs", colorToken: "quaternary", children: [
35
+ (m = a == null ? void 0 : a.items) == null ? void 0 : m.length,
36
36
  " items in your cart"
37
37
  ] })
38
38
  ] }),
39
- /* @__PURE__ */ e("div", { className: t.cartItems, children: r.items.length > 0 ? /* @__PURE__ */ e("ul", { children: r.items.map((i) => /* @__PURE__ */ a("li", { className: t.cartItem, children: [
39
+ /* @__PURE__ */ e("div", { className: r.cartItems, children: a.items.length > 0 ? /* @__PURE__ */ e("ul", { children: a.items.map((i) => /* @__PURE__ */ t("li", { className: r.cartItem, children: [
40
40
  /* @__PURE__ */ e("img", { src: i.imageUrl, alt: `${i.itemId} product image` }),
41
- /* @__PURE__ */ a("div", { children: [
42
- /* @__PURE__ */ a("div", { className: t.topRow, children: [
43
- /* @__PURE__ */ a("div", { className: t.itemInfo, children: [
44
- /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: /* @__PURE__ */ e(I, { href: i.itemHref || `/part/${i.itemId}`, children: i.description }) }),
45
- /* @__PURE__ */ a(n, { size: "sm", children: [
46
- "Part # ",
41
+ /* @__PURE__ */ t("div", { children: [
42
+ /* @__PURE__ */ t("div", { className: r.topRow, children: [
43
+ /* @__PURE__ */ t("div", { className: r.itemInfo, children: [
44
+ /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: /* @__PURE__ */ e(y, { href: i.itemHref || `/part/${i.itemId}`, children: i.description }) }),
45
+ /* @__PURE__ */ t(n, { size: "sm", children: [
46
+ /* @__PURE__ */ e(n, { colorToken: "quaternary", size: "xs", children: "Part #" }),
47
+ " ",
47
48
  i.itemId
48
49
  ] })
49
50
  ] }),
50
- /* @__PURE__ */ e("button", { onClick: () => u(i), className: t.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(C, { iconKey: "fa-regular fa-trash", size: "sm" }) })
51
+ /* @__PURE__ */ e("button", { onClick: () => u(i), className: r.removeItem, "aria-label": "Remove item", children: /* @__PURE__ */ e(k, { iconKey: "fa-regular fa-trash", size: "sm" }) })
51
52
  ] }),
52
- /* @__PURE__ */ a("div", { className: t.itemManagement, children: [
53
- /* @__PURE__ */ a("div", { className: t.purchaseInformation, children: [
53
+ /* @__PURE__ */ t("div", { className: r.itemManagement, children: [
54
+ /* @__PURE__ */ t("div", { className: r.purchaseInformation, children: [
54
55
  /* @__PURE__ */ e(
55
56
  z,
56
57
  {
@@ -72,19 +73,19 @@ function Q({
72
73
  )
73
74
  ] })
74
75
  ] })
75
- ] }, i.id)) }) : /* @__PURE__ */ e("div", { className: t.noItems, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
76
- l && /* @__PURE__ */ a("div", { className: t.subtotal, children: [
76
+ ] }, i.id)) }) : /* @__PURE__ */ e("div", { className: r.noItems, children: /* @__PURE__ */ e(n, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
77
+ l && /* @__PURE__ */ t("div", { className: r.subtotal, children: [
77
78
  /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: "Subtotal" }),
78
79
  /* @__PURE__ */ e(n, { size: "md", weight: "semibold", children: l })
79
80
  ] }),
80
81
  /* @__PURE__ */ e(
81
- y,
82
+ I,
82
83
  {
83
- disabled: r.items.length === 0,
84
+ disabled: a.items.length === 0,
84
85
  onClick: v,
85
86
  variant: "cta-primary",
86
87
  size: "md",
87
- className: t.checkoutButton,
88
+ className: r.checkoutButton,
88
89
  children: "Checkout"
89
90
  }
90
91
  )
@@ -93,5 +94,5 @@ function Q({
93
94
  );
94
95
  }
95
96
  export {
96
- Q as CartSlideInPanel
97
+ H as CartSlideInPanel
97
98
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@caseparts-org/caseblocks",
3
3
  "private": false,
4
- "version": "0.0.140",
4
+ "version": "0.0.142",
5
5
  "type": "module",
6
6
  "module": "dist/main.js",
7
7
  "types": "dist/main.d.ts",