@caseparts-org/caseblocks 0.0.171 → 0.0.173
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/assets/Account.css +1 -1
- package/dist/assets/HamburgerMenu.css +1 -1
- package/dist/assets/MainNav.css +1 -1
- package/dist/molecules/Account/Account.js +46 -45
- package/dist/molecules/Cart/CartPart.d.ts +2 -1
- package/dist/molecules/Cart/CartPart.js +53 -49
- package/dist/molecules/Cart/CartSlideInPanel.d.ts +2 -1
- package/dist/molecules/Cart/CartSlideInPanel.js +41 -39
- package/dist/molecules/HamburgerMenu/HamburgerMenu.js +36 -37
- package/dist/organisms/MainNav/MainNav.js +110 -87
- package/package.json +1 -1
package/dist/assets/Account.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._loggedIn_1g4to_1{flex-shrink:0;gap:var(--spacing-spacing-2xs);cursor:pointer;transition:all .3s linear;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:var(--spacing-spacing-3xs)}._customer_1g4to_12>a,._customer_1g4to_12>a:hover{text-decoration:none}._loggedIn_1g4to_1:hover{background-color:#f3f3f3;border-radius:var(--border-radius-md)}._placeholder_1g4to_21{width:32px;width:120px}@media (max-width:1280px){._placeholder_1g4to_21{width:32px;height:32px;background-color:#f3f3f3;border-radius:100%}}._mobileAuth_1g4to_32{background-color:transparent;padding:0;margin:0;width:fit-content;border:none}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._hamburgerContainer_x3qn2_1{position:relative}._menuIcon_x3qn2_4 svg{cursor:pointer;outline:none}._panel_x3qn2_9{display:flex;flex-direction:column;gap:var(--spacing-spacing-default);padding:var(--spacing-spacing-2xs)}._panel_x3qn2_9>section{display:flex;flex-direction:column;gap:var(--spacing-spacing-2xs)}._menuHeader_x3qn2_22{display:inline-flex;justify-content:flex-end;padding-right:var(--spacing-spacing-2xs);padding-top:var(--spacing-spacing-2xs);margin-bottom:-1rem}._menuHeader_x3qn2_22>button{background-color:transparent;padding:0;margin:0;border:none;outline:none}
|
package/dist/assets/MainNav.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._main_t25b8_1{box-shadow:#bbb3 0 8px 24px;padding:var(--spacing-0-5) 0;z-index:1;position:relative}._column_t25b8_8{box-sizing:border-box;padding:0 var(--spacing-1)}._topNav_t25b8_13{padding-bottom:var(--spacing-0-5);gap:var(--spacing-1-5)}@media (max-width: 1281px){._topNav_t25b8_13{gap:var(--spacing-1);padding-bottom:0}}._logo_t25b8_21{cursor:pointer}._operations_t25b8_24{gap:var(--spacing-1-5);width:100%}@media (max-width: 1281px){._operations_t25b8_24{gap:var(--spacing-1)}}._search_t25b8_31{flex:1}._siteLink_t25b8_34{color:var(--color-brand-primary-primary-black);cursor:default;border:none;background-color:transparent;padding:0;margin:0;font-family:var(--font-family-display);font-size:var(--font-size-md);cursor:pointer}._siteLink_t25b8_34:hover{text-decoration:underline;color:var(--text-text-links)}@media (max-width:1280px){._siteLink_t25b8_34{font-family:var(--font-family-body);font-size:var(--font-size-sm)}}._accountArea_t25b8_54{width:145px}@media (max-width: 1281px){._accountArea_t25b8_54{width:min-content}}._cart_t25b8_60{border:none;padding:0;margin:0;background-color:transparent}._category_t25b8_66{list-style:none;height:42px;display:flex;flex-direction:row;align-items:center}._category_t25b8_66 a{color:var(--text-text-primary);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_t25b8_66 a{justify-content:space-between;width:100%}}._category_t25b8_66 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_t25b8_66 a path{fill:var(--color-brand-primary-primary-teal-blue)}._menuList_t25b8_91{list-style:none;padding:0;margin:0;height:min-content;display:flex;flex-direction:column;gap:var(--spacing-spacing-3xs)}._menuList_t25b8_91>li{width:100%;padding:var(--spacing-spacing-2xs);border:1px solid var(--border-border-primary, #dfdfdf);box-sizing:border-box;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-4xs);border-radius:var(--border-radius-md);color:var(--text-text-links)}
|
|
@@ -1,116 +1,117 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as t, jsxs as o } from "react/jsx-runtime";
|
|
2
2
|
import { getHideAtStyles as m } from "../../atoms/HideAt.js";
|
|
3
3
|
import { Icon as f } from "../../atoms/Icon/Icon.js";
|
|
4
4
|
import { Text as c } from "../../atoms/Text/Text.js";
|
|
5
5
|
import { Avatar as u } from "../Avatar/Avatar.js";
|
|
6
|
-
import { Flex as
|
|
6
|
+
import { Flex as g } from "../../atoms/Flex/Flex.js";
|
|
7
7
|
import { Button as p } from "../../atoms/Button/Button.js";
|
|
8
8
|
import { Popover as A } from "../../atoms/Popover/Popover.js";
|
|
9
|
-
import { c as
|
|
10
|
-
import '../../assets/Account.css';const x = "
|
|
9
|
+
import { c as a } from "../../clsx-OuTLNxxd.js";
|
|
10
|
+
import '../../assets/Account.css';const x = "_loggedIn_1g4to_1", v = "_customer_1g4to_12", _ = "_placeholder_1g4to_21", I = "_mobileAuth_1g4to_32", n = {
|
|
11
11
|
loggedIn: x,
|
|
12
12
|
customer: v,
|
|
13
|
-
placeholder:
|
|
13
|
+
placeholder: _,
|
|
14
|
+
mobileAuth: I
|
|
14
15
|
};
|
|
15
|
-
function
|
|
16
|
+
function N(i) {
|
|
16
17
|
return i.account !== void 0;
|
|
17
18
|
}
|
|
18
|
-
function
|
|
19
|
-
return i.isAccountLoading ? /* @__PURE__ */
|
|
19
|
+
function S(i) {
|
|
20
|
+
return i.isAccountLoading ? /* @__PURE__ */ t("div", { className: n.placeholder }) : N(i) ? /* @__PURE__ */ t(b, { ...i }) : /* @__PURE__ */ t(k, { ...i });
|
|
20
21
|
}
|
|
21
|
-
function
|
|
22
|
+
function b(i) {
|
|
22
23
|
const {
|
|
23
24
|
account: e,
|
|
24
25
|
className: r,
|
|
25
|
-
hideAt:
|
|
26
|
-
popoverContent:
|
|
26
|
+
hideAt: l,
|
|
27
|
+
popoverContent: d,
|
|
27
28
|
isAccountLoading: h,
|
|
28
|
-
...
|
|
29
|
+
...s
|
|
29
30
|
} = i;
|
|
30
|
-
return
|
|
31
|
+
return d ? /* @__PURE__ */ t(
|
|
31
32
|
A,
|
|
32
33
|
{
|
|
33
34
|
position: "bottom right",
|
|
34
|
-
trigger: /* @__PURE__ */
|
|
35
|
+
trigger: /* @__PURE__ */ o(
|
|
35
36
|
"div",
|
|
36
37
|
{
|
|
37
|
-
className:
|
|
38
|
-
...
|
|
38
|
+
className: a(n.loggedIn, m(l), r),
|
|
39
|
+
...s,
|
|
39
40
|
children: [
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
|
|
41
|
+
/* @__PURE__ */ o(
|
|
42
|
+
g,
|
|
42
43
|
{
|
|
43
44
|
flexDirection: "column",
|
|
44
45
|
alignItems: "flex-end",
|
|
45
46
|
hideAt: ["sm", "md"],
|
|
46
|
-
className:
|
|
47
|
+
className: n.customer,
|
|
47
48
|
children: [
|
|
48
|
-
/* @__PURE__ */
|
|
49
|
+
/* @__PURE__ */ o(c, { size: "xxs", children: [
|
|
49
50
|
"Acct: ",
|
|
50
51
|
e == null ? void 0 : e.number
|
|
51
52
|
] }),
|
|
52
|
-
/* @__PURE__ */
|
|
53
|
+
/* @__PURE__ */ o(c, { size: "sm", variant: "display", colorToken: "links", children: [
|
|
53
54
|
"Hello ",
|
|
54
55
|
e == null ? void 0 : e.name
|
|
55
56
|
] })
|
|
56
57
|
]
|
|
57
58
|
}
|
|
58
59
|
),
|
|
59
|
-
e.avatar ?? (e.initials ? /* @__PURE__ */
|
|
60
|
+
e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
|
|
60
61
|
]
|
|
61
62
|
}
|
|
62
63
|
),
|
|
63
|
-
children:
|
|
64
|
+
children: d
|
|
64
65
|
}
|
|
65
|
-
) : /* @__PURE__ */
|
|
66
|
+
) : /* @__PURE__ */ o(
|
|
66
67
|
"div",
|
|
67
68
|
{
|
|
68
|
-
className:
|
|
69
|
-
...
|
|
69
|
+
className: a(n.loggedIn, m(l), r),
|
|
70
|
+
...s,
|
|
70
71
|
children: [
|
|
71
|
-
/* @__PURE__ */
|
|
72
|
-
|
|
72
|
+
/* @__PURE__ */ o(
|
|
73
|
+
g,
|
|
73
74
|
{
|
|
74
75
|
flexDirection: "column",
|
|
75
76
|
alignItems: "flex-end",
|
|
76
77
|
hideAt: ["sm", "md"],
|
|
77
|
-
className:
|
|
78
|
+
className: n.customer,
|
|
78
79
|
children: [
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
/* @__PURE__ */
|
|
80
|
+
/* @__PURE__ */ t(c, { size: "xxs", children: e == null ? void 0 : e.number }),
|
|
81
|
+
/* @__PURE__ */ o(c, { size: "sm", variant: "display", colorToken: "links", children: [
|
|
81
82
|
"Hello ",
|
|
82
83
|
e == null ? void 0 : e.name
|
|
83
84
|
] })
|
|
84
85
|
]
|
|
85
86
|
}
|
|
86
87
|
),
|
|
87
|
-
e.avatar ?? (e.initials ? /* @__PURE__ */
|
|
88
|
+
e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
|
|
88
89
|
]
|
|
89
90
|
}
|
|
90
91
|
);
|
|
91
92
|
}
|
|
92
|
-
function
|
|
93
|
+
function k(i) {
|
|
93
94
|
const {
|
|
94
95
|
onLoginClick: e,
|
|
95
96
|
className: r,
|
|
96
|
-
hideAt:
|
|
97
|
-
popoverContent:
|
|
97
|
+
hideAt: l,
|
|
98
|
+
popoverContent: d,
|
|
98
99
|
isAccountLoading: h,
|
|
99
|
-
...
|
|
100
|
+
...s
|
|
100
101
|
} = i;
|
|
101
|
-
return /* @__PURE__ */
|
|
102
|
-
|
|
102
|
+
return /* @__PURE__ */ o(
|
|
103
|
+
g,
|
|
103
104
|
{
|
|
104
105
|
flexDirection: "row",
|
|
105
106
|
alignItems: "center",
|
|
106
|
-
...
|
|
107
|
-
className:
|
|
108
|
-
|
|
109
|
-
m(
|
|
107
|
+
...s,
|
|
108
|
+
className: a(
|
|
109
|
+
n.unauthenticated,
|
|
110
|
+
m(l),
|
|
110
111
|
r
|
|
111
112
|
),
|
|
112
113
|
children: [
|
|
113
|
-
/* @__PURE__ */
|
|
114
|
+
/* @__PURE__ */ t(
|
|
114
115
|
p,
|
|
115
116
|
{
|
|
116
117
|
onClick: e,
|
|
@@ -120,11 +121,11 @@ function N(i) {
|
|
|
120
121
|
children: "Sign In / Register"
|
|
121
122
|
}
|
|
122
123
|
),
|
|
123
|
-
/* @__PURE__ */ n(f, { iconKey: "fa-kit fa-user-anon", size: "lg"
|
|
124
|
+
/* @__PURE__ */ t("button", { onClick: e, className: a(n.mobileAuth, m("lg")), children: /* @__PURE__ */ t(f, { iconKey: "fa-kit fa-user-anon", size: "lg" }) })
|
|
124
125
|
]
|
|
125
126
|
}
|
|
126
127
|
);
|
|
127
128
|
}
|
|
128
129
|
export {
|
|
129
|
-
|
|
130
|
+
S as Account
|
|
130
131
|
};
|
|
@@ -5,6 +5,7 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
|
|
|
5
5
|
imageAlt?: string;
|
|
6
6
|
title: React.ReactNode;
|
|
7
7
|
titleHref?: string;
|
|
8
|
+
onTitleNavigate?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
8
9
|
partNumber?: string | number;
|
|
9
10
|
custom?: boolean;
|
|
10
11
|
availabilityId?: string;
|
|
@@ -17,4 +18,4 @@ export interface CartPartProps extends Omit<React.LiHTMLAttributes<HTMLLIElement
|
|
|
17
18
|
onQuantityChange?: (_quantity: number) => void;
|
|
18
19
|
onRemove?: () => void;
|
|
19
20
|
}
|
|
20
|
-
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;
|
|
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;
|
|
@@ -1,63 +1,67 @@
|
|
|
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
|
|
11
|
-
function
|
|
12
|
-
imageUrl:
|
|
1
|
+
import { jsxs as t, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { Link as K } from "../../atoms/Link/Link.js";
|
|
3
|
+
import { Text as c } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { Image as N } from "../../atoms/Image/Image.js";
|
|
5
|
+
import { Availability as w } from "../Availability/Availability.js";
|
|
6
|
+
import { Pricing as S } from "../Pricing/Pricing.js";
|
|
7
|
+
import { QuantityInput as C } from "../QuantityInput/QuantityInput.js";
|
|
8
|
+
import { Icon as L } from "../../atoms/Icon/Icon.js";
|
|
9
|
+
import { c as j } from "../../clsx-OuTLNxxd.js";
|
|
10
|
+
import { s as i } from "../../Cart.module-DzPBP5QJ.js";
|
|
11
|
+
function F({
|
|
12
|
+
imageUrl: u,
|
|
13
13
|
imageAlt: p = "Product image",
|
|
14
14
|
title: m,
|
|
15
15
|
titleHref: s,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
onTitleNavigate: a,
|
|
17
|
+
partNumber: l,
|
|
18
|
+
custom: y,
|
|
19
|
+
availabilityId: I,
|
|
20
|
+
availability: o,
|
|
21
|
+
contactHref: b,
|
|
22
|
+
contactLinkBehavior: g = "new-tab",
|
|
23
|
+
priceLabel: x = "List Price",
|
|
24
|
+
price: n,
|
|
25
|
+
quantity: d,
|
|
26
|
+
onQuantityChange: f,
|
|
27
|
+
onRemove: h,
|
|
28
|
+
className: P,
|
|
29
|
+
...k
|
|
29
30
|
}) {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
31
|
+
function z(e) {
|
|
32
|
+
e.defaultPrevented || e.button === 0 && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey || e.currentTarget.target && e.currentTarget.target !== "_self" || a == null || a(e));
|
|
33
|
+
}
|
|
34
|
+
return /* @__PURE__ */ t("li", { className: j(i.cartItem, P), ...k, children: [
|
|
35
|
+
/* @__PURE__ */ r(N, { height: 50, width: 50, src: u || "", alt: p, className: i.itemImage }),
|
|
36
|
+
/* @__PURE__ */ t("div", { children: [
|
|
37
|
+
/* @__PURE__ */ t("div", { className: i.topRow, children: [
|
|
38
|
+
/* @__PURE__ */ t("div", { className: i.itemInfo, children: [
|
|
39
|
+
/* @__PURE__ */ r(c, { size: "sm", weight: "semibold", children: s ? /* @__PURE__ */ r(K, { href: s, onClick: z, children: m }) : m }),
|
|
40
|
+
l != null && /* @__PURE__ */ t(c, { size: "sm", children: [
|
|
41
|
+
/* @__PURE__ */ r(c, { colorToken: "quaternary", size: "xs", children: y ? "Specs " : "Part # " }),
|
|
42
|
+
l
|
|
39
43
|
] })
|
|
40
44
|
] }),
|
|
41
|
-
|
|
45
|
+
h && /* @__PURE__ */ r("button", { onClick: h, className: i.removeItem, "aria-label": "Remove item", type: "button", children: /* @__PURE__ */ r(L, { iconKey: "fa-regular fa-trash", size: "sm" }) })
|
|
42
46
|
] }),
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
|
|
47
|
+
/* @__PURE__ */ t("div", { className: i.itemManagement, children: [
|
|
48
|
+
/* @__PURE__ */ t("div", { className: i.purchaseInformation, children: [
|
|
49
|
+
/* @__PURE__ */ r("div", { className: i.availabilitySlot, children: o && /* @__PURE__ */ r(
|
|
50
|
+
w,
|
|
47
51
|
{
|
|
48
|
-
availId:
|
|
49
|
-
availDescription:
|
|
50
|
-
contactHref:
|
|
51
|
-
contactLinkBehavior:
|
|
52
|
+
availId: I || "",
|
|
53
|
+
availDescription: o,
|
|
54
|
+
contactHref: b || "",
|
|
55
|
+
contactLinkBehavior: g
|
|
52
56
|
}
|
|
53
57
|
) }),
|
|
54
|
-
/* @__PURE__ */
|
|
58
|
+
/* @__PURE__ */ r("div", { className: i.priceSlot, children: n && /* @__PURE__ */ r(S, { pricingLabel: x, price: n }) })
|
|
55
59
|
] }),
|
|
56
|
-
typeof
|
|
57
|
-
|
|
60
|
+
typeof d == "number" && f && /* @__PURE__ */ r("div", { className: i.quantitySlot, children: /* @__PURE__ */ r(
|
|
61
|
+
C,
|
|
58
62
|
{
|
|
59
|
-
quantity:
|
|
60
|
-
onQuantityChange:
|
|
63
|
+
quantity: d,
|
|
64
|
+
onQuantityChange: f,
|
|
61
65
|
size: "sm"
|
|
62
66
|
}
|
|
63
67
|
) })
|
|
@@ -66,5 +70,5 @@ function B({
|
|
|
66
70
|
] });
|
|
67
71
|
}
|
|
68
72
|
export {
|
|
69
|
-
|
|
73
|
+
F as CartPart
|
|
70
74
|
};
|
|
@@ -10,6 +10,7 @@ export interface CartSlideInPanelProps {
|
|
|
10
10
|
contactLinkBehavior?: ContactUsLinkBehavior;
|
|
11
11
|
onItemQtyChange: (_item: CartItem, _newQty: number) => void;
|
|
12
12
|
onItemDelete: (_item: CartItem) => void;
|
|
13
|
+
onItemNavigate?: (_item: CartItem) => void;
|
|
13
14
|
onCheckout: () => void;
|
|
14
15
|
}
|
|
15
|
-
export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function CartSlideInPanel({ open, onClose, cart, subtotal, itemPriceLabel, contactHref, contactLinkBehavior, onItemQtyChange, onItemDelete, onItemNavigate, onCheckout }: CartSlideInPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,74 +1,76 @@
|
|
|
1
|
-
import { jsx as i, jsxs as
|
|
2
|
-
import { SlideInPanel as
|
|
1
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
2
|
+
import { SlideInPanel as g } from "../../atoms/SlideInPanel/SlideInPanel.js";
|
|
3
3
|
import { Text as l } from "../../atoms/Text/Text.js";
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import { CartPart as
|
|
7
|
-
import { s as
|
|
8
|
-
function
|
|
4
|
+
import { Button as v } from "../../atoms/Button/Button.js";
|
|
5
|
+
import { Icon as C } from "../../atoms/Icon/Icon.js";
|
|
6
|
+
import { CartPart as x } from "./CartPart.js";
|
|
7
|
+
import { s as t } from "../../Cart.module-DzPBP5QJ.js";
|
|
8
|
+
function B({
|
|
9
9
|
open: o,
|
|
10
|
-
onClose:
|
|
11
|
-
cart:
|
|
10
|
+
onClose: s,
|
|
11
|
+
cart: r,
|
|
12
12
|
subtotal: n,
|
|
13
|
-
itemPriceLabel:
|
|
14
|
-
contactHref:
|
|
15
|
-
contactLinkBehavior:
|
|
16
|
-
onItemQtyChange:
|
|
17
|
-
onItemDelete:
|
|
18
|
-
|
|
13
|
+
itemPriceLabel: c,
|
|
14
|
+
contactHref: h,
|
|
15
|
+
contactLinkBehavior: p,
|
|
16
|
+
onItemQtyChange: u,
|
|
17
|
+
onItemDelete: y,
|
|
18
|
+
onItemNavigate: m,
|
|
19
|
+
onCheckout: b
|
|
19
20
|
}) {
|
|
20
|
-
var
|
|
21
|
-
return
|
|
22
|
-
|
|
21
|
+
var d;
|
|
22
|
+
return r = r || { items: [] }, /* @__PURE__ */ i(
|
|
23
|
+
g,
|
|
23
24
|
{
|
|
24
25
|
side: "right",
|
|
25
26
|
open: o,
|
|
26
|
-
onClose:
|
|
27
|
+
onClose: s,
|
|
27
28
|
ariaLabel: "Shopping Cart",
|
|
28
|
-
children: /* @__PURE__ */
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
/* @__PURE__ */
|
|
29
|
+
children: /* @__PURE__ */ a("div", { id: "cart-panel", className: t.cartContainer, children: [
|
|
30
|
+
/* @__PURE__ */ a("div", { className: t.headerWrapper, children: [
|
|
31
|
+
/* @__PURE__ */ a("div", { className: t.header, children: [
|
|
31
32
|
/* @__PURE__ */ i(l, { size: "2xl", children: "Cart" }),
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
(
|
|
33
|
+
/* @__PURE__ */ a(l, { size: "xs", colorToken: "quaternary", children: [
|
|
34
|
+
(d = r == null ? void 0 : r.items) == null ? void 0 : d.length,
|
|
34
35
|
" items in your cart"
|
|
35
36
|
] })
|
|
36
37
|
] }),
|
|
37
|
-
/* @__PURE__ */ i("button", { onClick:
|
|
38
|
+
/* @__PURE__ */ i("button", { onClick: s, children: /* @__PURE__ */ i(C, { iconKey: "fa-regular fa-xmark", size: "md" }) })
|
|
38
39
|
] }),
|
|
39
|
-
/* @__PURE__ */ i("div", { className:
|
|
40
|
-
|
|
40
|
+
/* @__PURE__ */ i("div", { className: t.cartItems, children: r.items.length > 0 ? /* @__PURE__ */ i("ul", { children: r.items.map((e) => /* @__PURE__ */ i(
|
|
41
|
+
x,
|
|
41
42
|
{
|
|
42
43
|
imageUrl: e.imageUrl,
|
|
43
44
|
imageAlt: `${e.itemId} product image`,
|
|
44
45
|
title: e.description,
|
|
45
46
|
titleHref: e.itemHref || `/part/${e.itemId}`,
|
|
47
|
+
onTitleNavigate: () => m == null ? void 0 : m(e),
|
|
46
48
|
partNumber: e.itemId,
|
|
47
49
|
custom: !!e.custom,
|
|
48
50
|
availabilityId: e.availabilityId,
|
|
49
51
|
availability: e.availability,
|
|
50
|
-
contactHref:
|
|
51
|
-
contactLinkBehavior:
|
|
52
|
+
contactHref: h,
|
|
53
|
+
contactLinkBehavior: p,
|
|
52
54
|
price: e.price,
|
|
53
|
-
priceLabel:
|
|
55
|
+
priceLabel: c || "List Price",
|
|
54
56
|
quantity: e.quantity,
|
|
55
|
-
onQuantityChange: (
|
|
56
|
-
onRemove: () =>
|
|
57
|
+
onQuantityChange: (f) => u(e, f),
|
|
58
|
+
onRemove: () => y(e)
|
|
57
59
|
},
|
|
58
60
|
e.id
|
|
59
|
-
)) }) : /* @__PURE__ */ i("div", { className:
|
|
60
|
-
n && /* @__PURE__ */
|
|
61
|
+
)) }) : /* @__PURE__ */ i("div", { className: t.noItems, children: /* @__PURE__ */ i(l, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
|
|
62
|
+
n && /* @__PURE__ */ a("div", { className: t.subtotal, children: [
|
|
61
63
|
/* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: "Subtotal" }),
|
|
62
64
|
/* @__PURE__ */ i(l, { size: "md", weight: "semibold", children: n })
|
|
63
65
|
] }),
|
|
64
66
|
/* @__PURE__ */ i(
|
|
65
|
-
|
|
67
|
+
v,
|
|
66
68
|
{
|
|
67
|
-
disabled:
|
|
68
|
-
onClick:
|
|
69
|
+
disabled: r.items.length === 0,
|
|
70
|
+
onClick: b,
|
|
69
71
|
variant: "cta-primary",
|
|
70
72
|
size: "md",
|
|
71
|
-
className:
|
|
73
|
+
className: t.checkoutButton,
|
|
72
74
|
children: "Checkout"
|
|
73
75
|
}
|
|
74
76
|
)
|
|
@@ -77,5 +79,5 @@ function q({
|
|
|
77
79
|
);
|
|
78
80
|
}
|
|
79
81
|
export {
|
|
80
|
-
|
|
82
|
+
B as CartSlideInPanel
|
|
81
83
|
};
|
|
@@ -1,56 +1,55 @@
|
|
|
1
|
-
import { jsxs as i, jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { getHideAtStyles as
|
|
1
|
+
import { jsxs as i, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useState as u, useRef as d, useEffect as f } from "react";
|
|
3
|
+
import { getHideAtStyles as h } from "../../atoms/HideAt.js";
|
|
4
4
|
import { Flex as p } from "../../atoms/Flex/Flex.js";
|
|
5
|
-
import { Icon as
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
import { Icon as m } from "../../atoms/Icon/Icon.js";
|
|
6
|
+
import { SlideInPanel as g } from "../../atoms/SlideInPanel/SlideInPanel.js";
|
|
7
|
+
import { c as x } from "../../clsx-OuTLNxxd.js";
|
|
8
|
+
import '../../assets/HamburgerMenu.css';const _ = "_hamburgerContainer_x3qn2_1", b = "_menuIcon_x3qn2_4", C = "_panel_x3qn2_9", v = "_menuHeader_x3qn2_22", o = {
|
|
9
|
+
hamburgerContainer: _,
|
|
10
|
+
menuIcon: b,
|
|
11
|
+
panel: C,
|
|
12
|
+
menuHeader: v
|
|
12
13
|
};
|
|
13
|
-
function E({ hideAt:
|
|
14
|
-
const [
|
|
14
|
+
function E({ hideAt: s, children: c }) {
|
|
15
|
+
const [n, r] = u(!1), a = d(null);
|
|
15
16
|
return f(() => {
|
|
16
|
-
if (!
|
|
17
|
-
function
|
|
18
|
-
a.current && !a.current.contains(
|
|
17
|
+
if (!n) return;
|
|
18
|
+
function t(l) {
|
|
19
|
+
a.current && !a.current.contains(l.target) && r(!1);
|
|
19
20
|
}
|
|
20
|
-
return document.addEventListener("mousedown",
|
|
21
|
-
}, [
|
|
21
|
+
return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
|
|
22
|
+
}, [n]), /* @__PURE__ */ i(
|
|
22
23
|
"div",
|
|
23
24
|
{
|
|
24
25
|
ref: a,
|
|
25
|
-
className:
|
|
26
|
+
className: x(o.hamburgerContainer, h(s)),
|
|
26
27
|
children: [
|
|
27
|
-
|
|
28
|
-
"div",
|
|
29
|
-
{
|
|
30
|
-
className: t.overlay,
|
|
31
|
-
onClick: () => o(!1),
|
|
32
|
-
"aria-hidden": "true"
|
|
33
|
-
}
|
|
34
|
-
),
|
|
35
|
-
/* @__PURE__ */ r(
|
|
28
|
+
/* @__PURE__ */ e(
|
|
36
29
|
p,
|
|
37
30
|
{
|
|
38
31
|
flexDirection: "row",
|
|
39
|
-
className:
|
|
40
|
-
onClick: () =>
|
|
41
|
-
"aria-expanded":
|
|
32
|
+
className: o.menuIcon,
|
|
33
|
+
onClick: () => r((t) => !t),
|
|
34
|
+
"aria-expanded": n,
|
|
42
35
|
"aria-controls": "hamburger-menu-content",
|
|
43
36
|
role: "button",
|
|
44
|
-
children: /* @__PURE__ */
|
|
37
|
+
children: /* @__PURE__ */ e(m, { iconKey: "fa-kit fa-bars", title: "Menu", size: "lg" })
|
|
45
38
|
}
|
|
46
39
|
),
|
|
47
|
-
|
|
48
|
-
|
|
40
|
+
/* @__PURE__ */ e(
|
|
41
|
+
g,
|
|
49
42
|
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
side: "right",
|
|
44
|
+
open: n,
|
|
45
|
+
onClose: () => r(!1),
|
|
46
|
+
height: "100%",
|
|
47
|
+
ariaLabel: "main-menu",
|
|
48
|
+
closeOnOverlayClick: !0,
|
|
49
|
+
children: /* @__PURE__ */ i("div", { className: o.panel, children: [
|
|
50
|
+
/* @__PURE__ */ e("div", { className: o.menuHeader, children: /* @__PURE__ */ e("button", { onClick: () => r(!1), children: /* @__PURE__ */ e(m, { iconKey: "fa-light fa-xmark", size: "md" }) }) }),
|
|
51
|
+
c
|
|
52
|
+
] })
|
|
54
53
|
}
|
|
55
54
|
)
|
|
56
55
|
]
|
|
@@ -1,126 +1,149 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { Text as
|
|
4
|
-
import { Link as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import { Flex as
|
|
7
|
-
import { Grid as
|
|
8
|
-
import { Logo as
|
|
9
|
-
import { SearchBox as
|
|
10
|
-
import { HamburgerMenu as
|
|
11
|
-
import { ShoppingCart as
|
|
12
|
-
import { Account as
|
|
13
|
-
import { CategoryNav as
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import '../../assets/MainNav.css';const
|
|
17
|
-
main:
|
|
18
|
-
column:
|
|
19
|
-
topNav:
|
|
20
|
-
logo:
|
|
21
|
-
operations:
|
|
1
|
+
import { jsx as e, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import D from "react";
|
|
3
|
+
import { Text as l } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { Link as h } from "../../atoms/Link/Link.js";
|
|
5
|
+
import { Icon as n } from "../../atoms/Icon/Icon.js";
|
|
6
|
+
import { Flex as s } from "../../atoms/Flex/Flex.js";
|
|
7
|
+
import { Grid as M, Column as S } from "../../atoms/Grid/Grid.js";
|
|
8
|
+
import { Logo as U } from "../../molecules/Logo/Logo.js";
|
|
9
|
+
import { SearchBox as N } from "../../molecules/SearchBox/SearchBox.js";
|
|
10
|
+
import { HamburgerMenu as F } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
|
|
11
|
+
import { ShoppingCart as H } from "../../molecules/Cart/Cart.js";
|
|
12
|
+
import { Account as q } from "../../molecules/Account/Account.js";
|
|
13
|
+
import { CategoryNav as B } from "../../molecules/CategoryNav/CategoryNav.js";
|
|
14
|
+
import { getHideAtStyles as g } from "../../atoms/HideAt.js";
|
|
15
|
+
import { c as m } from "../../clsx-OuTLNxxd.js";
|
|
16
|
+
import '../../assets/MainNav.css';const G = "_main_t25b8_1", P = "_column_t25b8_8", Q = "_topNav_t25b8_13", T = "_logo_t25b8_21", W = "_operations_t25b8_24", E = "_search_t25b8_31", J = "_siteLink_t25b8_34", O = "_accountArea_t25b8_54", R = "_category_t25b8_66", V = "_menuList_t25b8_91", i = {
|
|
17
|
+
main: G,
|
|
18
|
+
column: P,
|
|
19
|
+
topNav: Q,
|
|
20
|
+
logo: T,
|
|
21
|
+
operations: W,
|
|
22
22
|
search: E,
|
|
23
23
|
siteLink: J,
|
|
24
24
|
accountArea: O,
|
|
25
25
|
category: R,
|
|
26
26
|
menuList: V
|
|
27
|
-
},
|
|
28
|
-
account:
|
|
29
|
-
categories:
|
|
30
|
-
homeRoute:
|
|
27
|
+
}, he = D.forwardRef(function({
|
|
28
|
+
account: a,
|
|
29
|
+
categories: o,
|
|
30
|
+
homeRoute: b,
|
|
31
31
|
faqRoute: v,
|
|
32
|
-
customPartsRoute:
|
|
33
|
-
aboutUsRoute:
|
|
34
|
-
contactRoute:
|
|
32
|
+
customPartsRoute: f,
|
|
33
|
+
aboutUsRoute: y,
|
|
34
|
+
contactRoute: u,
|
|
35
35
|
cart: L,
|
|
36
|
-
open:
|
|
36
|
+
open: A,
|
|
37
37
|
// consume external panel control props from CartPropsBase
|
|
38
|
-
className:
|
|
39
|
-
onLoginClick:
|
|
38
|
+
className: x,
|
|
39
|
+
onLoginClick: C,
|
|
40
40
|
onSearch: p,
|
|
41
|
-
onClickModelSerial:
|
|
42
|
-
onCartClick:
|
|
43
|
-
accountPopoverContent:
|
|
44
|
-
isAccountLoading:
|
|
45
|
-
isCategoriesLoading:
|
|
46
|
-
...
|
|
47
|
-
},
|
|
48
|
-
return /* @__PURE__ */ e(
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
|
|
41
|
+
onClickModelSerial: _,
|
|
42
|
+
onCartClick: k,
|
|
43
|
+
accountPopoverContent: w,
|
|
44
|
+
isAccountLoading: z,
|
|
45
|
+
isCategoriesLoading: I,
|
|
46
|
+
...K
|
|
47
|
+
}, j) {
|
|
48
|
+
return /* @__PURE__ */ e(M, { ...K, gridWrapperClassName: m(i.main, x), children: /* @__PURE__ */ r(S, { span: 12, className: i.column, children: [
|
|
49
|
+
/* @__PURE__ */ r(
|
|
50
|
+
s,
|
|
51
51
|
{
|
|
52
52
|
flexDirection: "row",
|
|
53
53
|
alignItems: "center",
|
|
54
54
|
justifyContent: "space-between",
|
|
55
|
-
className:
|
|
55
|
+
className: i.topNav,
|
|
56
56
|
children: [
|
|
57
|
-
/* @__PURE__ */ e("div", { className:
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
|
|
57
|
+
/* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(h, { href: b, children: /* @__PURE__ */ e(U, {}) }) }),
|
|
58
|
+
/* @__PURE__ */ r(
|
|
59
|
+
s,
|
|
60
60
|
{
|
|
61
61
|
flexDirection: "row",
|
|
62
62
|
alignItems: "center",
|
|
63
63
|
justifyContent: "flex-end",
|
|
64
|
-
className:
|
|
64
|
+
className: i.operations,
|
|
65
65
|
children: [
|
|
66
|
-
/* @__PURE__ */ e(
|
|
67
|
-
/* @__PURE__ */ e("button", { onClick:
|
|
68
|
-
/* @__PURE__ */ e(
|
|
69
|
-
/* @__PURE__ */ e(
|
|
70
|
-
/* @__PURE__ */ e("div", { className:
|
|
71
|
-
|
|
66
|
+
/* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(N, { onSearch: p, inputName: "cpc-search" }) }),
|
|
67
|
+
/* @__PURE__ */ e("button", { onClick: _, className: m(i.siteLink, g(["sm", "md"])), children: "Model/Serial" }),
|
|
68
|
+
/* @__PURE__ */ e(t, { href: f, hideAt: ["sm", "md"], children: "Custom Parts" }),
|
|
69
|
+
/* @__PURE__ */ e(t, { href: u, hideAt: ["sm", "md"], children: "Contact Us" }),
|
|
70
|
+
/* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
|
|
71
|
+
q,
|
|
72
72
|
{
|
|
73
|
-
account:
|
|
74
|
-
onLoginClick:
|
|
75
|
-
className:
|
|
76
|
-
popoverContent:
|
|
77
|
-
isAccountLoading:
|
|
73
|
+
account: a,
|
|
74
|
+
onLoginClick: C,
|
|
75
|
+
className: i.avatar,
|
|
76
|
+
popoverContent: w,
|
|
77
|
+
isAccountLoading: z
|
|
78
78
|
}
|
|
79
79
|
) }),
|
|
80
80
|
/* @__PURE__ */ e(
|
|
81
|
-
|
|
81
|
+
H,
|
|
82
82
|
{
|
|
83
|
-
ref:
|
|
83
|
+
ref: j,
|
|
84
84
|
cart: L,
|
|
85
|
-
open:
|
|
86
|
-
onCartClick:
|
|
85
|
+
open: A,
|
|
86
|
+
onCartClick: k
|
|
87
87
|
}
|
|
88
88
|
),
|
|
89
|
-
/* @__PURE__ */
|
|
90
|
-
/* @__PURE__ */
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
size: "sm"
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
89
|
+
/* @__PURE__ */ r(F, { hideAt: ["lg"], children: [
|
|
90
|
+
/* @__PURE__ */ r("section", { children: [
|
|
91
|
+
/* @__PURE__ */ e(l, { size: "md", weight: "semibold", children: "Useful shortcuts" }),
|
|
92
|
+
/* @__PURE__ */ r("ul", { className: i.menuList, children: [
|
|
93
|
+
/* @__PURE__ */ r("li", { className: i.menuItem, children: [
|
|
94
|
+
/* @__PURE__ */ e(n, { iconKey: "fa-regular fa-book", size: "sm" }),
|
|
95
|
+
/* @__PURE__ */ e("button", { onClick: _, className: m(i.siteLink, g(["lg"])), children: "Model/Serial" })
|
|
96
|
+
] }),
|
|
97
|
+
/* @__PURE__ */ r("li", { className: i.menuItem, children: [
|
|
98
|
+
/* @__PURE__ */ e(n, { iconKey: "fa-regular fa-screwdriver-wrench", size: "sm" }),
|
|
99
|
+
/* @__PURE__ */ e(t, { href: f, children: "Custom Parts" })
|
|
100
|
+
] }),
|
|
101
|
+
/* @__PURE__ */ r("li", { className: i.menuItem, children: [
|
|
102
|
+
/* @__PURE__ */ e(n, { iconKey: "fa-regular fa-envelope", size: "sm" }),
|
|
103
|
+
/* @__PURE__ */ e(t, { href: u, children: "Contact Us" })
|
|
104
|
+
] }),
|
|
105
|
+
/* @__PURE__ */ r("li", { className: i.menuItem, children: [
|
|
106
|
+
/* @__PURE__ */ e(n, { iconKey: "fa-solid fa-question", size: "sm" }),
|
|
107
|
+
/* @__PURE__ */ e(t, { href: v, children: "FAQ" })
|
|
108
|
+
] }),
|
|
109
|
+
/* @__PURE__ */ r("li", { className: i.menuItem, children: [
|
|
110
|
+
/* @__PURE__ */ e(n, { iconKey: "fa-regular fa-people-group", size: "sm" }),
|
|
111
|
+
/* @__PURE__ */ e(t, { href: y, children: "About Us" })
|
|
112
|
+
] })
|
|
113
|
+
] })
|
|
114
|
+
] }),
|
|
115
|
+
/* @__PURE__ */ r("section", { children: [
|
|
116
|
+
/* @__PURE__ */ e(l, { size: "md", weight: "semibold", children: "Shop by category" }),
|
|
117
|
+
/* @__PURE__ */ e("ul", { className: i.menuList, children: o && o.map((c) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ r(h, { href: c.route, children: [
|
|
118
|
+
/* @__PURE__ */ e(l, { size: "sm", children: c.label }),
|
|
119
|
+
/* @__PURE__ */ e(
|
|
120
|
+
n,
|
|
121
|
+
{
|
|
122
|
+
iconKey: "fa-solid fa-chevron-right",
|
|
123
|
+
title: "Navigate",
|
|
124
|
+
size: "sm"
|
|
125
|
+
}
|
|
126
|
+
)
|
|
127
|
+
] }) }, c.id)) })
|
|
128
|
+
] })
|
|
129
|
+
] })
|
|
107
130
|
]
|
|
108
131
|
}
|
|
109
132
|
)
|
|
110
133
|
]
|
|
111
134
|
}
|
|
112
135
|
),
|
|
113
|
-
/* @__PURE__ */ e(
|
|
114
|
-
/* @__PURE__ */ e(
|
|
136
|
+
/* @__PURE__ */ e(s, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(N, { onSearch: p, inputName: "cpc-search", className: i.search }) }),
|
|
137
|
+
/* @__PURE__ */ e(B, { categories: o, isCategoriesLoading: I })
|
|
115
138
|
] }) });
|
|
116
139
|
});
|
|
117
|
-
function
|
|
118
|
-
href:
|
|
119
|
-
children:
|
|
120
|
-
...
|
|
140
|
+
function t({
|
|
141
|
+
href: d,
|
|
142
|
+
children: a,
|
|
143
|
+
...o
|
|
121
144
|
}) {
|
|
122
|
-
return /* @__PURE__ */ e(
|
|
145
|
+
return /* @__PURE__ */ e(h, { href: d, className: i.siteLink, ...o, children: a });
|
|
123
146
|
}
|
|
124
147
|
export {
|
|
125
|
-
|
|
148
|
+
he as MainNav
|
|
126
149
|
};
|