@caseparts-org/caseblocks 0.0.182 → 0.0.184
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.
- package/dist/Cart.module-8dqEQPFM.js +25 -0
- package/dist/assets/Cart.css +1 -1
- package/dist/assets/Modal.css +1 -1
- package/dist/molecules/Cart/Cart.d.ts +4 -0
- package/dist/molecules/Cart/Cart.js +1 -1
- package/dist/molecules/Cart/Cart.stories.js +28 -27
- package/dist/molecules/Cart/CartPart.d.ts +6 -1
- package/dist/molecules/Cart/CartPart.js +63 -44
- package/dist/molecules/Cart/CartPart.stories.d.ts +5 -0
- package/dist/molecules/Cart/CartPart.stories.js +11 -4
- package/dist/molecules/Cart/CartSlideInPanel.d.ts +2 -1
- package/dist/molecules/Cart/CartSlideInPanel.js +29 -23
- package/dist/molecules/Modal/Modal.js +54 -46
- package/package.json +1 -1
- package/dist/Cart.module-DzPBP5QJ.js +0 -24
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import './assets/Cart.css';const t = "_cartIconButton_1k7or_2", o = "_count_1k7or_9", e = "_cartContainer_1k7or_24", n = "_headerWrapper_1k7or_35", r = "_header_1k7or_35", _ = "_cartItems_1k7or_53", a = "_cartItem_1k7or_53", c = "_topRow_1k7or_79", s = "_itemInfo_1k7or_85", i = "_editUnit_1k7or_90", m = "_purchaseInformation_1k7or_102", I = "_availabilitySlot_1k7or_108", k = "_priceSlot_1k7or_111", u = "_itemManagement_1k7or_114", l = "_quantitySlot_1k7or_120", p = "_itemImage_1k7or_130", h = "_removeItem_1k7or_133", d = "_noItems_1k7or_143", S = "_subtotal_1k7or_150", y = "_checkoutButton_1k7or_157", b = {
|
|
2
|
+
cartIconButton: t,
|
|
3
|
+
count: o,
|
|
4
|
+
cartContainer: e,
|
|
5
|
+
headerWrapper: n,
|
|
6
|
+
header: r,
|
|
7
|
+
cartItems: _,
|
|
8
|
+
cartItem: a,
|
|
9
|
+
topRow: c,
|
|
10
|
+
itemInfo: s,
|
|
11
|
+
editUnit: i,
|
|
12
|
+
purchaseInformation: m,
|
|
13
|
+
availabilitySlot: I,
|
|
14
|
+
priceSlot: k,
|
|
15
|
+
itemManagement: u,
|
|
16
|
+
quantitySlot: l,
|
|
17
|
+
itemImage: p,
|
|
18
|
+
removeItem: h,
|
|
19
|
+
noItems: d,
|
|
20
|
+
subtotal: S,
|
|
21
|
+
checkoutButton: y
|
|
22
|
+
};
|
|
23
|
+
export {
|
|
24
|
+
b as s
|
|
25
|
+
};
|
package/dist/assets/Cart.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._cartIconButton_1k7or_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_1k7or_9{position:absolute;top:0;left:14px;border-radius:50%;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;background-color:var(--color-brand-primary-primary-tangerine);color:var(--color-neutrals-neutral-1);font-weight:var(--font-weight-semibold)}._cartContainer_1k7or_24{height:100vh;width:100%;min-width:320px;max-width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:var(--spacing-1);padding:var(--spacing-1)}._headerWrapper_1k7or_35{display:flex;flex-direction:row;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._headerWrapper_1k7or_35>button{padding:0;margin:0;background-color:transparent;border:none}._header_1k7or_35{display:flex;flex-direction:column;align-items:flex-start;width:100%}._cartItems_1k7or_53{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_1k7or_53 ul{margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-spacing-1xs)}._cartItem_1k7or_53{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-0-5);align-items:start;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border:1px solid var(--color-neutrals-neutral-2);border-radius:var(--border-radius-md)}._topRow_1k7or_79{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_1k7or_85{display:flex;flex-direction:column;align-items:flex-start}._editUnit_1k7or_90{display:flex;align-items:center;text-align:start;gap:var(--spacing-spacing-3xs);border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;color:var(--text-text-links)}._purchaseInformation_1k7or_102{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:flex-start;width:100%}._availabilitySlot_1k7or_108{min-width:0}._priceSlot_1k7or_111{justify-self:end}._itemManagement_1k7or_114{display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-spacing-3xs)}._quantitySlot_1k7or_120{align-self:flex-end}._cartItem_1k7or_53 p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._itemImage_1k7or_130{object-fit:contain}._removeItem_1k7or_133{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer;width:min-content;height:min-content}._noItems_1k7or_143{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_1k7or_150{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}._checkoutButton_1k7or_157{width:100%}
|
package/dist/assets/Modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._overlay_1n58z_1{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}._container_1n58z_11{background-color:var(--surface-surface-primary);color:var(--text-text-primary);border-radius:var(--border-radius-sm);box-shadow:0 4px 6px #0000001a;width:min(800px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden}@media (max-width:767px){._container_1n58z_11{border-radius:0;width:100%;box-shadow:none;height:100dvh;max-height:100dvh}}._toolbar_1n58z_30{position:sticky;top:0;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--surface-surface-secondary);border-bottom:1px solid var(--border-border-secondary-btn);padding:var(--spacing-spacing-2xs);gap:var(--spacing-spacing-2xs);z-index:1}._toolbarPlain_1n58z_44{background-color:transparent;border-bottom:none}._headerGroup_1n58z_49{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-2xs);flex:1 1 0}._headerLeft_1n58z_57{justify-content:flex-start}._headerRight_1n58z_61{justify-content:flex-end}._closeButton_1n58z_65{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;padding:var(--spacing-spacing-4xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:inherit;padding:0}._content_1n58z_78{overflow:auto;padding:var(--spacing-spacing-default)}@media (max-width:767px){._content_1n58z_78{padding:var(--spacing-spacing-2xs)}}
|
|
@@ -2,7 +2,7 @@ import { jsx as a, jsxs as d } from "react/jsx-runtime";
|
|
|
2
2
|
import l from "react";
|
|
3
3
|
import { Icon as g } from "../../atoms/Icon/Icon.js";
|
|
4
4
|
import { Text as p } from "../../atoms/Text/Text.js";
|
|
5
|
-
import { s as m } from "../../Cart.module-
|
|
5
|
+
import { s as m } from "../../Cart.module-8dqEQPFM.js";
|
|
6
6
|
const S = l.forwardRef(function({
|
|
7
7
|
cart: i,
|
|
8
8
|
open: t = !1,
|
|
@@ -2,49 +2,49 @@ 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";
|
|
5
|
-
const
|
|
5
|
+
const C = {
|
|
6
6
|
title: "Case Parts/Molecules/Cart",
|
|
7
7
|
component: n,
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: "centered"
|
|
10
10
|
},
|
|
11
11
|
tags: ["autodocs"]
|
|
12
|
-
},
|
|
12
|
+
}, i = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", p = {
|
|
13
13
|
items: [
|
|
14
|
-
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl:
|
|
15
|
-
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl:
|
|
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:
|
|
17
|
-
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl:
|
|
18
|
-
{ id: 5, itemId: "Warmer Wire", description: '228" 7.0 OHMS 115V', price: "$99.99", quantity: 1, imageUrl:
|
|
19
|
-
{ id: 6, itemId: "810803", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl:
|
|
20
|
-
{ id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price: "$99.99", quantity: 10, imageUrl:
|
|
21
|
-
{ id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price: "$99.99", quantity: 10, imageUrl:
|
|
22
|
-
{ id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl:
|
|
23
|
-
{ id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl:
|
|
24
|
-
{ id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl:
|
|
25
|
-
{ id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl:
|
|
14
|
+
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
15
|
+
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: i, 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: i, availability: "In Stock", availabilityId: "available" },
|
|
17
|
+
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
18
|
+
{ id: 5, itemId: "Warmer Wire", description: '228" 7.0 OHMS 115V', price: "$99.99", quantity: 1, imageUrl: i, availability: "", availabilityId: "available" },
|
|
19
|
+
{ id: 6, itemId: "810803", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
20
|
+
{ id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price: "$99.99", quantity: 10, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
21
|
+
{ id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price: "$99.99", quantity: 10, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
22
|
+
{ id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
23
|
+
{ id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
24
|
+
{ id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
25
|
+
{ id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" }
|
|
26
26
|
]
|
|
27
27
|
}, y = {
|
|
28
28
|
items: [
|
|
29
|
-
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl:
|
|
30
|
-
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl:
|
|
31
|
-
{ id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl:
|
|
32
|
-
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl:
|
|
29
|
+
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
30
|
+
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" },
|
|
31
|
+
{ id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: i, unit: "Delfield / XYZ123 / ABC987", make: "Delfield", model: "XYZ123", serial: "ABC987", availability: "In Stock", availabilityId: "available" },
|
|
32
|
+
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: i, availability: "In Stock", availabilityId: "available" }
|
|
33
33
|
]
|
|
34
34
|
};
|
|
35
|
-
function I(
|
|
36
|
-
return `$${
|
|
35
|
+
function I(a) {
|
|
36
|
+
return `$${a.items.reduce(
|
|
37
37
|
(t, e) => t + (parseFloat(e.price.replace(/[^0-9.]/g, "")) || 0) * e.quantity,
|
|
38
38
|
0
|
|
39
39
|
).toFixed(2)}`;
|
|
40
40
|
}
|
|
41
|
-
const r = (
|
|
41
|
+
const r = (a) => {
|
|
42
42
|
const [l, t] = s(!1);
|
|
43
43
|
return /* @__PURE__ */ d(c, { children: [
|
|
44
44
|
/* @__PURE__ */ o(
|
|
45
45
|
n,
|
|
46
46
|
{
|
|
47
|
-
...
|
|
47
|
+
...a,
|
|
48
48
|
open: l,
|
|
49
49
|
onCartClick: () => t((e) => !e)
|
|
50
50
|
}
|
|
@@ -54,18 +54,19 @@ const r = (i) => {
|
|
|
54
54
|
{
|
|
55
55
|
open: l,
|
|
56
56
|
onClose: () => t(!1),
|
|
57
|
-
cart:
|
|
58
|
-
subtotal: I(
|
|
57
|
+
cart: a.cart,
|
|
58
|
+
subtotal: I(a.cart),
|
|
59
59
|
itemPriceLabel: "List Price",
|
|
60
60
|
contactHref: "#",
|
|
61
61
|
contactLinkBehavior: "new-tab",
|
|
62
62
|
onItemDelete: () => alert("Delete"),
|
|
63
63
|
onItemQtyChange: () => alert("Qty Change"),
|
|
64
|
+
onUnitEditClick: () => alert("Edit MMS"),
|
|
64
65
|
onCheckout: () => alert("checkout")
|
|
65
66
|
}
|
|
66
67
|
)
|
|
67
68
|
] });
|
|
68
|
-
},
|
|
69
|
+
}, g = {
|
|
69
70
|
args: {
|
|
70
71
|
cart: { items: [] },
|
|
71
72
|
onCartClick: () => {
|
|
@@ -89,8 +90,8 @@ const r = (i) => {
|
|
|
89
90
|
render: r
|
|
90
91
|
};
|
|
91
92
|
export {
|
|
92
|
-
|
|
93
|
+
g as EmptyCart,
|
|
93
94
|
S as LargeCart,
|
|
94
95
|
D as SmallCart,
|
|
95
|
-
|
|
96
|
+
C as default
|
|
96
97
|
};
|
|
@@ -7,6 +7,10 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
|
|
|
7
7
|
titleHref?: string;
|
|
8
8
|
onTitleNavigate?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
9
9
|
partNumber?: string | number;
|
|
10
|
+
unit?: string;
|
|
11
|
+
make?: string;
|
|
12
|
+
model?: string;
|
|
13
|
+
serial?: string;
|
|
10
14
|
custom?: boolean;
|
|
11
15
|
availabilityId?: string;
|
|
12
16
|
availability?: string;
|
|
@@ -17,5 +21,6 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
|
|
|
17
21
|
quantity?: number;
|
|
18
22
|
onQuantityChange?: (_quantity: number) => void;
|
|
19
23
|
onRemove?: () => void;
|
|
24
|
+
onUnitEditClick?: () => void;
|
|
20
25
|
}
|
|
21
|
-
export declare function CartPart({ imageUrl, imageAlt, title, titleHref, onTitleNavigate, partNumber, custom, availabilityId, availability, contactHref, contactLinkBehavior, priceLabel, price, quantity, onQuantityChange, onRemove, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function CartPart({ imageUrl, imageAlt, title, titleHref, onTitleNavigate, partNumber, unit, make, model, serial, custom, availabilityId, availability, contactHref, contactLinkBehavior, priceLabel, price, quantity, onQuantityChange, onRemove, onUnitEditClick, className, ...otherProps }: CartPartProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,64 +1,83 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Link as
|
|
3
|
-
import { Text as
|
|
4
|
-
import { Image as
|
|
5
|
-
import { Availability as
|
|
6
|
-
import { Pricing as
|
|
7
|
-
import { QuantityInput as
|
|
8
|
-
import { Icon as
|
|
9
|
-
import { c as
|
|
10
|
-
import { s as i } from "../../Cart.module-
|
|
11
|
-
function
|
|
12
|
-
imageUrl:
|
|
13
|
-
imageAlt:
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { Link as q } from "../../atoms/Link/Link.js";
|
|
3
|
+
import { Text as l } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { Image as v } from "../../atoms/Image/Image.js";
|
|
5
|
+
import { Availability as A } from "../Availability/Availability.js";
|
|
6
|
+
import { Pricing as B } from "../Pricing/Pricing.js";
|
|
7
|
+
import { QuantityInput as D } from "../QuantityInput/QuantityInput.js";
|
|
8
|
+
import { Icon as y } from "../../atoms/Icon/Icon.js";
|
|
9
|
+
import { c as M } from "../../clsx-OuTLNxxd.js";
|
|
10
|
+
import { s as i } from "../../Cart.module-8dqEQPFM.js";
|
|
11
|
+
function U({
|
|
12
|
+
imageUrl: b,
|
|
13
|
+
imageAlt: g = "Product image",
|
|
14
14
|
title: m,
|
|
15
15
|
titleHref: s,
|
|
16
|
-
onTitleNavigate:
|
|
17
|
-
partNumber:
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
onTitleNavigate: t,
|
|
17
|
+
partNumber: c,
|
|
18
|
+
unit: I,
|
|
19
|
+
make: k,
|
|
20
|
+
model: x,
|
|
21
|
+
serial: z,
|
|
22
|
+
custom: K,
|
|
23
|
+
availabilityId: N,
|
|
20
24
|
availability: o,
|
|
21
|
-
contactHref:
|
|
22
|
-
contactLinkBehavior:
|
|
23
|
-
priceLabel:
|
|
25
|
+
contactHref: P,
|
|
26
|
+
contactLinkBehavior: S = "new-tab",
|
|
27
|
+
priceLabel: w = "List Price",
|
|
24
28
|
price: n,
|
|
25
29
|
quantity: d,
|
|
26
30
|
onQuantityChange: f,
|
|
27
31
|
onRemove: h,
|
|
28
|
-
|
|
29
|
-
|
|
32
|
+
onUnitEditClick: u,
|
|
33
|
+
className: j,
|
|
34
|
+
...C
|
|
30
35
|
}) {
|
|
31
|
-
function
|
|
32
|
-
e.defaultPrevented || e.button === 0 && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || e.currentTarget.target && e.currentTarget.target !== "_self" ||
|
|
36
|
+
function L(e) {
|
|
37
|
+
e.defaultPrevented || e.button === 0 && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || e.currentTarget.target && e.currentTarget.target !== "_self" || t == null || t(e));
|
|
33
38
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
l
|
|
41
|
-
|
|
42
|
-
l
|
|
43
|
-
|
|
39
|
+
const p = I || [k, x, z].filter(Boolean).join(" / ");
|
|
40
|
+
return /* @__PURE__ */ a("li", { className: M(i.cartItem, j), ...C, children: [
|
|
41
|
+
/* @__PURE__ */ r(v, { height: 50, width: 50, src: b || "", alt: g, className: i.itemImage }),
|
|
42
|
+
/* @__PURE__ */ a("div", { children: [
|
|
43
|
+
/* @__PURE__ */ a("div", { className: i.topRow, children: [
|
|
44
|
+
/* @__PURE__ */ a("div", { className: i.itemInfo, children: [
|
|
45
|
+
/* @__PURE__ */ r(l, { size: "sm", weight: "semibold", children: s ? /* @__PURE__ */ r(q, { href: s, onClick: L, children: m }) : m }),
|
|
46
|
+
c != null && /* @__PURE__ */ a(l, { size: "sm", children: [
|
|
47
|
+
/* @__PURE__ */ r(l, { colorToken: "quaternary", size: "xs", children: K ? "Specs " : "Part # " }),
|
|
48
|
+
c
|
|
49
|
+
] }),
|
|
50
|
+
p && u && /* @__PURE__ */ a(
|
|
51
|
+
"button",
|
|
52
|
+
{
|
|
53
|
+
onClick: u,
|
|
54
|
+
className: i.editUnit,
|
|
55
|
+
"aria-label": "Edit make, model, and serial",
|
|
56
|
+
type: "button",
|
|
57
|
+
children: [
|
|
58
|
+
/* @__PURE__ */ r(y, { iconKey: "fa-light fa-file-pen", size: "sm" }),
|
|
59
|
+
p
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
)
|
|
44
63
|
] }),
|
|
45
|
-
h && /* @__PURE__ */ r("button", { onClick: h, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ r(
|
|
64
|
+
h && /* @__PURE__ */ r("button", { onClick: h, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ r(y, { iconKey: "fa-regular fa-trash", size: "sm" }) })
|
|
46
65
|
] }),
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
/* @__PURE__ */
|
|
66
|
+
/* @__PURE__ */ a("div", { className: i.itemManagement, children: [
|
|
67
|
+
/* @__PURE__ */ a("div", { className: i.purchaseInformation, children: [
|
|
49
68
|
/* @__PURE__ */ r("div", { className: i.availabilitySlot, children: o && /* @__PURE__ */ r(
|
|
50
|
-
|
|
69
|
+
A,
|
|
51
70
|
{
|
|
52
|
-
availId:
|
|
71
|
+
availId: N || "",
|
|
53
72
|
availDescription: o,
|
|
54
|
-
contactHref:
|
|
55
|
-
contactLinkBehavior:
|
|
73
|
+
contactHref: P || "",
|
|
74
|
+
contactLinkBehavior: S
|
|
56
75
|
}
|
|
57
76
|
) }),
|
|
58
|
-
/* @__PURE__ */ r("div", { className: i.priceSlot, children: n && /* @__PURE__ */ r(
|
|
77
|
+
/* @__PURE__ */ r("div", { className: i.priceSlot, children: n && /* @__PURE__ */ r(B, { pricingLabel: w, price: n }) })
|
|
59
78
|
] }),
|
|
60
79
|
typeof d == "number" && f && /* @__PURE__ */ r("div", { className: i.quantitySlot, children: /* @__PURE__ */ r(
|
|
61
|
-
|
|
80
|
+
D,
|
|
62
81
|
{
|
|
63
82
|
quantity: d,
|
|
64
83
|
onQuantityChange: f,
|
|
@@ -70,5 +89,5 @@ function F({
|
|
|
70
89
|
] });
|
|
71
90
|
}
|
|
72
91
|
export {
|
|
73
|
-
|
|
92
|
+
U as CartPart
|
|
74
93
|
};
|
|
@@ -13,6 +13,10 @@ declare const meta: {
|
|
|
13
13
|
title: string;
|
|
14
14
|
titleHref: string;
|
|
15
15
|
partNumber: string;
|
|
16
|
+
unit: string;
|
|
17
|
+
make: string;
|
|
18
|
+
model: string;
|
|
19
|
+
serial: string;
|
|
16
20
|
custom: false;
|
|
17
21
|
availabilityId: string;
|
|
18
22
|
availability: string;
|
|
@@ -23,6 +27,7 @@ declare const meta: {
|
|
|
23
27
|
quantity: number;
|
|
24
28
|
onQuantityChange: () => void;
|
|
25
29
|
onRemove: () => void;
|
|
30
|
+
onUnitEditClick: () => void;
|
|
26
31
|
};
|
|
27
32
|
};
|
|
28
33
|
export default meta;
|
|
@@ -13,6 +13,10 @@ const l = {
|
|
|
13
13
|
title: "Kason Door Closer - Flush",
|
|
14
14
|
titleHref: "#",
|
|
15
15
|
partNumber: "1094-01",
|
|
16
|
+
unit: "Beverage Air / SP-48-12-SM / 1-85266899",
|
|
17
|
+
make: "Beverage Air",
|
|
18
|
+
model: "SP-48-12-SM",
|
|
19
|
+
serial: "1-85266899",
|
|
16
20
|
custom: !1,
|
|
17
21
|
availabilityId: "available",
|
|
18
22
|
availability: "In Stock",
|
|
@@ -24,11 +28,14 @@ const l = {
|
|
|
24
28
|
onQuantityChange: () => {
|
|
25
29
|
},
|
|
26
30
|
onRemove: () => {
|
|
31
|
+
},
|
|
32
|
+
onUnitEditClick: () => {
|
|
33
|
+
alert("Edit Unit");
|
|
27
34
|
}
|
|
28
35
|
}
|
|
29
|
-
}, o = {
|
|
30
|
-
render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(i, { ...a }) }) })
|
|
31
36
|
}, n = {
|
|
37
|
+
render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(i, { ...a }) }) })
|
|
38
|
+
}, o = {
|
|
32
39
|
args: {
|
|
33
40
|
title: "Custom-Molded Snap-In Magnetic Gasket",
|
|
34
41
|
partNumber: 'MG064 36" x 79" 3-Sided Dart-to-Dart Gasket',
|
|
@@ -47,8 +54,8 @@ const l = {
|
|
|
47
54
|
render: (a) => /* @__PURE__ */ t("div", { style: { width: 360 }, children: /* @__PURE__ */ t("ul", { style: { margin: 0, padding: 0 }, children: /* @__PURE__ */ t(i, { ...a }) }) })
|
|
48
55
|
};
|
|
49
56
|
export {
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
n as Basic,
|
|
58
|
+
o as CustomSpecs,
|
|
52
59
|
s as WithoutAvailability,
|
|
53
60
|
l as default
|
|
54
61
|
};
|
|
@@ -10,7 +10,8 @@ export interface CartSlideInPanelProps {
|
|
|
10
10
|
contactLinkBehavior?: ContactUsLinkBehavior;
|
|
11
11
|
onItemQtyChange: (_item: CartItem, _newQty: number) => void;
|
|
12
12
|
onItemDelete: (_item: CartItem) => void;
|
|
13
|
+
onUnitEditClick?: (_item: CartItem) => void;
|
|
13
14
|
onItemNavigate?: (_item: CartItem) => void;
|
|
14
15
|
onCheckout: () => void;
|
|
15
16
|
}
|
|
16
|
-
export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onItemNavigate, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onUnitEditClick, onItemNavigate, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,29 +1,30 @@
|
|
|
1
1
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import { SlideInPanel as
|
|
2
|
+
import { SlideInPanel as v } from "../../atoms/SlideInPanel/SlideInPanel.js";
|
|
3
3
|
import { Text as l } from "../../atoms/Text/Text.js";
|
|
4
|
-
import { Button as
|
|
4
|
+
import { Button as k } from "../../atoms/Button/Button.js";
|
|
5
5
|
import { Icon as C } from "../../atoms/Icon/Icon.js";
|
|
6
6
|
import { CartPart as x } from "./CartPart.js";
|
|
7
|
-
import { s as t } from "../../Cart.module-
|
|
8
|
-
function
|
|
9
|
-
open:
|
|
7
|
+
import { s as t } from "../../Cart.module-8dqEQPFM.js";
|
|
8
|
+
function L({
|
|
9
|
+
open: c,
|
|
10
10
|
onClose: s,
|
|
11
11
|
cart: r,
|
|
12
12
|
subtotal: n,
|
|
13
|
-
itemPriceLabel:
|
|
14
|
-
contactHref:
|
|
15
|
-
contactLinkBehavior:
|
|
16
|
-
onItemQtyChange:
|
|
17
|
-
onItemDelete:
|
|
13
|
+
itemPriceLabel: h,
|
|
14
|
+
contactHref: p,
|
|
15
|
+
contactLinkBehavior: u,
|
|
16
|
+
onItemQtyChange: y,
|
|
17
|
+
onItemDelete: b,
|
|
18
|
+
onUnitEditClick: d,
|
|
18
19
|
onItemNavigate: m,
|
|
19
|
-
onCheckout:
|
|
20
|
+
onCheckout: f
|
|
20
21
|
}) {
|
|
21
|
-
var
|
|
22
|
+
var o;
|
|
22
23
|
return r = r || { items: [] }, /* @__PURE__ */ i(
|
|
23
|
-
|
|
24
|
+
v,
|
|
24
25
|
{
|
|
25
26
|
side: "right",
|
|
26
|
-
open:
|
|
27
|
+
open: c,
|
|
27
28
|
onClose: s,
|
|
28
29
|
ariaLabel: "Shopping Cart",
|
|
29
30
|
children: /* @__PURE__ */ a("div", { id: "cart-panel", className: t.cartContainer, children: [
|
|
@@ -31,7 +32,7 @@ function B({
|
|
|
31
32
|
/* @__PURE__ */ a("div", { className: t.header, children: [
|
|
32
33
|
/* @__PURE__ */ i(l, { size: "2xl", children: "Cart" }),
|
|
33
34
|
/* @__PURE__ */ a(l, { size: "xs", colorToken: "quaternary", children: [
|
|
34
|
-
(
|
|
35
|
+
(o = r == null ? void 0 : r.items) == null ? void 0 : o.length,
|
|
35
36
|
" items in your cart"
|
|
36
37
|
] })
|
|
37
38
|
] }),
|
|
@@ -46,16 +47,21 @@ function B({
|
|
|
46
47
|
titleHref: e.itemHref || `/part/${e.itemId}`,
|
|
47
48
|
onTitleNavigate: () => m == null ? void 0 : m(e),
|
|
48
49
|
partNumber: e.itemId,
|
|
50
|
+
unit: e.unit,
|
|
51
|
+
make: e.make,
|
|
52
|
+
model: e.model,
|
|
53
|
+
serial: e.serial,
|
|
49
54
|
custom: !!e.custom,
|
|
50
55
|
availabilityId: e.availabilityId,
|
|
51
56
|
availability: e.availability,
|
|
52
|
-
contactHref:
|
|
53
|
-
contactLinkBehavior:
|
|
57
|
+
contactHref: p,
|
|
58
|
+
contactLinkBehavior: u,
|
|
54
59
|
price: e.price,
|
|
55
|
-
priceLabel:
|
|
60
|
+
priceLabel: h || "List Price",
|
|
56
61
|
quantity: e.quantity,
|
|
57
|
-
onQuantityChange: (
|
|
58
|
-
onRemove: () =>
|
|
62
|
+
onQuantityChange: (g) => y(e, g),
|
|
63
|
+
onRemove: () => b(e),
|
|
64
|
+
onUnitEditClick: d ? () => d(e) : void 0
|
|
59
65
|
},
|
|
60
66
|
e.id
|
|
61
67
|
)) }) : /* @__PURE__ */ i("div", { className: t.noItems, children: /* @__PURE__ */ i(l, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
|
|
@@ -64,10 +70,10 @@ function B({
|
|
|
64
70
|
/* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: n })
|
|
65
71
|
] }),
|
|
66
72
|
/* @__PURE__ */ i(
|
|
67
|
-
|
|
73
|
+
k,
|
|
68
74
|
{
|
|
69
75
|
disabled: r.items.length === 0,
|
|
70
|
-
onClick:
|
|
76
|
+
onClick: f,
|
|
71
77
|
variant: "cta-primary",
|
|
72
78
|
size: "md",
|
|
73
79
|
className: t.checkoutButton,
|
|
@@ -79,5 +85,5 @@ function B({
|
|
|
79
85
|
);
|
|
80
86
|
}
|
|
81
87
|
export {
|
|
82
|
-
|
|
88
|
+
L as CartSlideInPanel
|
|
83
89
|
};
|
|
@@ -1,67 +1,75 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import f from "react";
|
|
3
|
+
import { c as s } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Text as h } from "../../atoms/Text/Text.js";
|
|
5
|
+
import { Icon as p } from "../../atoms/Icon/Icon.js";
|
|
6
|
+
import '../../assets/Modal.css';const z = "_overlay_1n58z_1", g = "_container_1n58z_11", b = "_toolbar_1n58z_30", v = "_toolbarPlain_1n58z_44", y = "_headerGroup_1n58z_49", T = "_headerLeft_1n58z_57", x = "_headerRight_1n58z_61", B = "_closeButton_1n58z_65", M = "_content_1n58z_78", r = {
|
|
7
|
+
overlay: z,
|
|
8
|
+
container: g,
|
|
9
|
+
toolbar: b,
|
|
10
|
+
toolbarPlain: v,
|
|
11
|
+
headerGroup: y,
|
|
12
|
+
headerLeft: T,
|
|
13
|
+
headerRight: x,
|
|
14
|
+
closeButton: B,
|
|
15
|
+
content: M
|
|
16
|
+
}, N = {
|
|
16
17
|
sm: "sm",
|
|
17
18
|
md: "md",
|
|
18
19
|
lg: "lg"
|
|
19
|
-
},
|
|
20
|
+
}, R = {
|
|
20
21
|
sm: "sm",
|
|
21
22
|
md: "md",
|
|
22
23
|
lg: "md"
|
|
23
|
-
},
|
|
24
|
-
isOpen:
|
|
25
|
-
onClose:
|
|
26
|
-
closeOnOverlayClick:
|
|
24
|
+
}, i = ({
|
|
25
|
+
isOpen: t,
|
|
26
|
+
onClose: o,
|
|
27
|
+
closeOnOverlayClick: e = !0,
|
|
27
28
|
className: l,
|
|
28
|
-
children:
|
|
29
|
-
...
|
|
29
|
+
children: c,
|
|
30
|
+
...u
|
|
30
31
|
}) => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
const a = f.useRef(!1);
|
|
33
|
+
if (!t) return null;
|
|
34
|
+
const m = (d) => {
|
|
35
|
+
e && (a.current = d.target === d.currentTarget);
|
|
36
|
+
}, _ = (d) => {
|
|
37
|
+
if (!e) {
|
|
38
|
+
a.current = !1;
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
a.current && d.target === d.currentTarget && o(), a.current = !1;
|
|
34
42
|
};
|
|
35
|
-
return /* @__PURE__ */
|
|
36
|
-
},
|
|
43
|
+
return /* @__PURE__ */ n("div", { className: s(r.overlay), onMouseDown: m, onMouseUp: _, children: /* @__PURE__ */ n("div", { className: s(r.container, l), role: "dialog", "aria-modal": "true", ...u, children: c }) });
|
|
44
|
+
}, C = ({ variant: t = "standard", className: o, children: e, ...l }) => /* @__PURE__ */ n(
|
|
37
45
|
"div",
|
|
38
46
|
{
|
|
39
|
-
className:
|
|
47
|
+
className: s(r.toolbar, t === "plain" && r.toolbarPlain, o),
|
|
40
48
|
...l,
|
|
41
|
-
children:
|
|
49
|
+
children: e
|
|
42
50
|
}
|
|
43
|
-
),
|
|
44
|
-
align:
|
|
45
|
-
size:
|
|
46
|
-
variant:
|
|
51
|
+
), G = ({
|
|
52
|
+
align: t = "left",
|
|
53
|
+
size: o = "md",
|
|
54
|
+
variant: e = "display",
|
|
47
55
|
className: l,
|
|
48
|
-
children:
|
|
49
|
-
...
|
|
56
|
+
children: c,
|
|
57
|
+
...u
|
|
50
58
|
}) => {
|
|
51
|
-
const
|
|
52
|
-
return /* @__PURE__ */
|
|
59
|
+
const a = typeof c == "string";
|
|
60
|
+
return /* @__PURE__ */ n(
|
|
53
61
|
"div",
|
|
54
62
|
{
|
|
55
|
-
className:
|
|
56
|
-
...
|
|
57
|
-
children:
|
|
63
|
+
className: s(r.headerGroup, t === "left" ? r.headerLeft : r.headerRight, l),
|
|
64
|
+
...u,
|
|
65
|
+
children: a ? /* @__PURE__ */ n(h, { as: "div", size: N[o], variant: e, children: c }) : c
|
|
58
66
|
}
|
|
59
67
|
);
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
68
|
+
}, L = ({ size: t = "md", className: o, ...e }) => /* @__PURE__ */ n("button", { type: "button", className: s(r.closeButton, o), "aria-label": "Close", ...e, children: /* @__PURE__ */ n(p, { iconKey: "fa-regular fa-xmark", size: R[t] }) }), P = ({ className: t, children: o, ...e }) => /* @__PURE__ */ n("div", { className: s(r.content, t), ...e, children: o });
|
|
69
|
+
i.Toolbar = C;
|
|
70
|
+
i.Header = G;
|
|
71
|
+
i.CloseButton = L;
|
|
72
|
+
i.Content = P;
|
|
65
73
|
export {
|
|
66
|
-
|
|
74
|
+
i as Modal
|
|
67
75
|
};
|
package/package.json
CHANGED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import './assets/Cart.css';const t = "_cartIconButton_a2slx_2", a = "_count_a2slx_9", o = "_cartContainer_a2slx_24", e = "_headerWrapper_a2slx_35", n = "_header_a2slx_35", _ = "_cartItems_a2slx_53", s = "_cartItem_a2slx_53", c = "_topRow_a2slx_79", r = "_itemInfo_a2slx_85", l = "_purchaseInformation_a2slx_90", m = "_availabilitySlot_a2slx_96", i = "_priceSlot_a2slx_99", I = "_itemManagement_a2slx_102", u = "_quantitySlot_a2slx_108", x = "_itemImage_a2slx_118", p = "_removeItem_a2slx_121", h = "_noItems_a2slx_131", S = "_subtotal_a2slx_138", y = "_checkoutButton_a2slx_145", b = {
|
|
2
|
-
cartIconButton: t,
|
|
3
|
-
count: a,
|
|
4
|
-
cartContainer: o,
|
|
5
|
-
headerWrapper: e,
|
|
6
|
-
header: n,
|
|
7
|
-
cartItems: _,
|
|
8
|
-
cartItem: s,
|
|
9
|
-
topRow: c,
|
|
10
|
-
itemInfo: r,
|
|
11
|
-
purchaseInformation: l,
|
|
12
|
-
availabilitySlot: m,
|
|
13
|
-
priceSlot: i,
|
|
14
|
-
itemManagement: I,
|
|
15
|
-
quantitySlot: u,
|
|
16
|
-
itemImage: x,
|
|
17
|
-
removeItem: p,
|
|
18
|
-
noItems: h,
|
|
19
|
-
subtotal: S,
|
|
20
|
-
checkoutButton: y
|
|
21
|
-
};
|
|
22
|
-
export {
|
|
23
|
-
b as s
|
|
24
|
-
};
|