@caseparts-org/caseblocks 0.0.48 → 0.0.49
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/Cart.css +1 -1
- package/dist/assets/CategoryNav.css +1 -1
- package/dist/assets/MainNav.css +1 -1
- package/dist/assets/Product.css +1 -1
- package/dist/assets/Tooltip.css +1 -1
- package/dist/molecules/Cart/Cart.d.ts +10 -4
- package/dist/molecules/Cart/Cart.js +74 -51
- package/dist/molecules/Cart/Cart.stories.js +36 -36
- package/dist/molecules/CategoryNav/CategoryNav.js +15 -15
- package/dist/molecules/Tooltip/Tooltip.js +1 -1
- package/dist/organisms/MainNav/MainNav.d.ts +5 -2
- package/dist/organisms/MainNav/MainNav.js +73 -67
- package/dist/organisms/MainNav/MainNav.stories.js +28 -28
- package/dist/organisms/Product/Product.js +61 -59
- package/package.json +1 -1
package/dist/assets/Cart.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._cart_1uglw_2{position:relative;border:none;padding:0;margin:0;background-color:transparent}._count_1uglw_9{position:absolute;top:4px;left:17px;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)}._cartTooltip_1uglw_24{padding:var(--spacing-1)}._cartContainer_1uglw_27{height:calc(100vh - 120px);width:375px;box-sizing:border-box;display:grid;grid-template-rows:auto 1fr auto auto;gap:var(--spacing-1)}._cartItems_1uglw_35{height:100%;overflow-y:auto;overflow-x:hidden}._cartItems_1uglw_35 ul{margin:0;padding:0}._cartItems_1uglw_35 li{display:grid;grid-template-columns:auto 1fr;gap:var(--spacing-0-5);align-items:center;box-sizing:border-box;position:relative;list-style:none;margin:0;padding:var(--spacing-0-5);width:100%;border-bottom:1px solid var(--color-neutrals-neutral-2)}._topRow_1uglw_57{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between}._itemInfo_1uglw_63{display:flex;flex-direction:column;align-items:flex-start}._purchaseInformation_1uglw_68{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._itemManagement_1uglw_75{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-spacing-3xs)}._cartItems_1uglw_35 li p{margin:0;padding:0;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}._cartItems_1uglw_35 img{height:40px;width:40px;object-fit:contain}._removeItem_1uglw_93{border:none;background-color:transparent;padding:0;margin:0;cursor:pointer}._noItems_1uglw_101{display:flex;flex-direction:row;align-items:center;justify-content:center;height:100%}._subtotal_1uglw_108{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--spacing-0-5)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._categories_1htyk_1{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:0;margin:0 90px 0 47px}@media (max-width: 1281px){._categories_1htyk_1{display:none}}._category_1htyk_17{list-style:none}._category_1htyk_17 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_1htyk_17 a{justify-content:space-between;width:100%}}._category_1htyk_17 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_1htyk_17 a path{fill:var(--color-brand-primary-primary-teal-blue)}._submenuTooltip_1htyk_43{list-style:none;padding:var(--spacing-spacing-2xs);margin:0;height:min-content;display:flex;flex-direction:column;gap:var(--spacing-spacing-3xs)}
|
package/dist/assets/MainNav.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._main_18fjz_1{box-shadow:#bbb3 0 8px 24px;padding:var(--spacing-0-5) 0;z-index:1;position:relative}._column_18fjz_8{box-sizing:border-box;padding:0 var(--spacing-1)}._topNav_18fjz_13{padding-bottom:var(--spacing-0-5);gap:var(--spacing-1-5)}@media (max-width: 1281px){._topNav_18fjz_13{gap:var(--spacing-1);padding-bottom:0}}._operations_18fjz_21{gap:var(--spacing-1-5);width:100%}@media (max-width: 1281px){._operations_18fjz_21{gap:var(--spacing-1)}}._search_18fjz_28{flex:1}._siteLink_18fjz_31{color:var(--color-brand-primary-primary-black);cursor:default}._accountArea_18fjz_35{width:145px}@media (max-width: 1281px){._accountArea_18fjz_35{width:min-content}}._cart_18fjz_41{border:none;padding:0;margin:0;background-color:transparent}._category_18fjz_47{list-style:none}._category_18fjz_47 a{color:var(--text-text-primary);font-weight:var(--font-weight-semibold);text-decoration:none;display:flex;flex-direction:row;align-items:center}@media (max-width: 1281px){._category_18fjz_47 a{justify-content:space-between;width:100%}}._category_18fjz_47 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_18fjz_47 a path{fill:var(--color-brand-primary-primary-teal-blue)}._menuList_18fjz_69{list-style:none;padding:0;margin:0;height:min-content;border:1px solid var(--border-border-secondary-btn, #dfdfdf)}._menuList_18fjz_69>li{width:100%;padding:var(--spacing-0-5) var(--spacing-1);border-bottom:1px solid var(--border-border-secondary-btn, #dfdfdf);box-sizing:border-box}._menuList_18fjz_69>li:last-of-type{border-bottom:none}
|
package/dist/assets/Product.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._productCard_10edn_1{box-sizing:border-box;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;display:flex;width:232px;height:296px;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._productCard_10edn_1>img{width:116px;height:116px;object-fit:contain;flex-shrink:0;margin:0 auto}._productCard_10edn_1 ._productInformation_10edn_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto}._productCard_10edn_1 ._purchaseInformation_10edn_29{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._productCard_10edn_1 ._addToCart_10edn_37,._productCard_10edn_1 ._addToCartButton_10edn_40{width:100%}._productInformation_10edn_22>a{font-weight:var(--font-weight-semibold)}._partNumber_10edn_48{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._partNumberLabel_10edn_55{color:var(--text-text-quaternary)}._productTile_10edn_59{box-sizing:border-box;width:100%;max-width:1072px;display:flex;flex-direction:row;align-items:flex-start;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);gap:var(--spacing-spacing-1xs)}._productTile_10edn_59>img{width:108px;height:108px;object-fit:contain}._productTile_10edn_59 ._topRow_10edn_80{display:grid;grid-template-columns:1fr auto;width:100%}._productTile_10edn_59 ._topRow_10edn_80 button{background-color:transparent;padding:0;margin:0;outline:none;border:none;height:min-content;width:min-content}._productTile_10edn_59 ._topRow_10edn_80 path{fill:var(--icons-icon-search)}._productTile_10edn_59 ._topRow_10edn_80 svg{padding:0}._productTile_10edn_59 ._productInformation_10edn_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._productTile_10edn_59 ._productData_10edn_111{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--spacing-spacing-2xs)}._productTile_10edn_59 ._purchase_10edn_29{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%}@media (max-width: 480px){._productTile_10edn_59 ._purchase_10edn_29{flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-3xs)}}._productTile_10edn_59 ._purchaseInformation_10edn_29{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}@media (max-width: 480px){._productTile_10edn_59 ._purchaseInformation_10edn_29{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:0px}}._productTile_10edn_59 ._attributeContainer_10edn_148{margin:0;padding:0;padding-top:var(--spacing-spacing-1xs);border-top:1px solid var(--border-border-primary);width:100%;list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:var(--spacing-spacing-lg);row-gap:var(--spacing-spacing-3xs)}@media (max-width: 640px){._productTile_10edn_59 ._attributeContainer_10edn_148{display:none}}._productTile_10edn_59 ._attributeContainer_10edn_148 li{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._productTile_10edn_59 ._addToCart_10edn_37{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-md)}@media (max-width: 480px){._productTile_10edn_59 ._addToCart_10edn_37{gap:var(--spacing-spacing-2xs);width:100%}}._productTile_10edn_59 ._addToCartButton_10edn_40{width:96px;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){._productTile_10edn_59 ._addToCartButton_10edn_40{width:100%}}
|
package/dist/assets/Tooltip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_1bu3d_1{position:relative;display:inline-block}._tooltip_1bu3d_6{position:absolute;z-index:1000;padding:var(--spacing-0-5);background:#fff;border-radius:4px;box-shadow:0 4px 12px #0000002e;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;width:max-content}._open_1bu3d_19{opacity:1;visibility:visible;transform:translateY(0)}._tooltip_1bu3d_6[data-position=top]{bottom:100%;left:50%;transform:translate(-50%,-4px)}._open_1bu3d_19._tooltip_1bu3d_6[data-position=top]{transform:translate(-50%)}._tooltip_1bu3d_6[data-position=bottom]{top:100%;left:50%;transform:translate(-50%,4px)}._open_1bu3d_19._tooltip_1bu3d_6[data-position=bottom]{transform:translate(-50%)}._tooltip_1bu3d_6[data-position=left]{right:100%;top:50%;transform:translate(-4px,-50%)}._open_1bu3d_19._tooltip_1bu3d_6[data-position=left]{transform:translateY(-50%)}._tooltip_1bu3d_6[data-position=right]{left:100%;top:50%;transform:translate(4px,-50%)}._open_1bu3d_19._tooltip_1bu3d_6[data-position=right]{transform:translateY(-50%)}._tooltip_1bu3d_6[data-position=top]{bottom:100%;left:50%;transform:translate(calc(-50% + var(--tooltip-shift-x, 0px)),-4px)}._open_1bu3d_19._tooltip_1bu3d_6[data-position=top]{transform:translate(calc(-50% + var(--tooltip-shift-x, 0px)))}._tooltip_1bu3d_6[data-position=bottom]{top:100%;left:50%;transform:translate(calc(-50% + var(--tooltip-shift-x, 0px)),4px)}._open_1bu3d_19._tooltip_1bu3d_6[data-position=bottom]{transform:translate(calc(-50% + var(--tooltip-shift-x, 0px)))}._tooltip_1bu3d_6[data-position=left]{right:100%;top:50%;transform:translate(-4px,calc(-50% + var(--tooltip-shift-y, 0px)))}._open_1bu3d_19._tooltip_1bu3d_6[data-position=left]{transform:translateY(calc(-50% + var(--tooltip-shift-y, 0px)))}._tooltip_1bu3d_6[data-position=right]{left:100%;top:50%;transform:translate(4px,calc(-50% + var(--tooltip-shift-y, 0px)))}._open_1bu3d_19._tooltip_1bu3d_6[data-position=right]{transform:translateY(calc(-50% + var(--tooltip-shift-y, 0px)))}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { ContactUsLinkBehavior } from '../Availability/Availability';
|
|
2
3
|
export interface CartItem {
|
|
3
4
|
id: string | number;
|
|
4
5
|
itemId: string | undefined;
|
|
6
|
+
itemHref?: string;
|
|
5
7
|
description: string | undefined;
|
|
6
|
-
price:
|
|
8
|
+
price: string;
|
|
7
9
|
quantity: number;
|
|
8
|
-
availability: string;
|
|
9
10
|
imageUrl: string | undefined;
|
|
11
|
+
availability?: string;
|
|
12
|
+
availabilityId?: string;
|
|
10
13
|
}
|
|
11
14
|
export interface ShoppingCart {
|
|
12
15
|
items: CartItem[];
|
|
@@ -16,10 +19,13 @@ export interface CartPropsBase {
|
|
|
16
19
|
onItemDelete: (_item: CartItem) => void;
|
|
17
20
|
onItemEdit: (_item: CartItem) => void;
|
|
18
21
|
onCheckout: () => void;
|
|
19
|
-
subtotal?:
|
|
22
|
+
subtotal?: string;
|
|
23
|
+
itemPriceLabel?: string;
|
|
20
24
|
cart: ShoppingCart;
|
|
25
|
+
contactHref?: string;
|
|
26
|
+
contactLinkBehavior?: ContactUsLinkBehavior;
|
|
21
27
|
}
|
|
22
28
|
interface CartProps extends CartPropsBase, React.HtmlHTMLAttributes<HTMLButtonElement> {
|
|
23
29
|
}
|
|
24
|
-
export declare function ShoppingCart({ cart, onItemQtyChange, onItemDelete,
|
|
30
|
+
export declare function ShoppingCart({ cart, onItemQtyChange, onItemDelete, onCheckout, subtotal, contactHref, contactLinkBehavior, itemPriceLabel, ...otherProps }: CartProps): import("react/jsx-runtime").JSX.Element;
|
|
25
31
|
export {};
|
|
@@ -1,74 +1,97 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { Icon as
|
|
3
|
-
import { Text as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { jsx as t, jsxs as o } from "react/jsx-runtime";
|
|
2
|
+
import { Icon as s } from "../../atoms/Icon/Icon.js";
|
|
3
|
+
import { Text as a } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { Link as _ } from "../../atoms/Link/Link.js";
|
|
5
|
+
import { Button as I } from "../../atoms/Button/Button.js";
|
|
6
|
+
import { Tooltip as f } from "../Tooltip/Tooltip.js";
|
|
7
|
+
import { Pricing as v } from "../Pricing/Pricing.js";
|
|
8
|
+
import { QuantityInput as w } from "../QuantityInput/QuantityInput.js";
|
|
9
|
+
import { Availability as b } from "../Availability/Availability.js";
|
|
10
|
+
import '../../assets/Cart.css';const y = "_cart_1uglw_2", N = "_count_1uglw_9", C = "_cartTooltip_1uglw_24", z = "_cartContainer_1uglw_27", x = "_cartItems_1uglw_35", k = "_topRow_1uglw_57", T = "_itemInfo_1uglw_63", L = "_purchaseInformation_1uglw_68", M = "_itemManagement_1uglw_75", R = "_removeItem_1uglw_93", P = "_noItems_1uglw_101", S = "_subtotal_1uglw_108", i = {
|
|
11
|
+
cart: y,
|
|
12
|
+
count: N,
|
|
13
|
+
cartTooltip: C,
|
|
14
|
+
cartContainer: z,
|
|
15
|
+
cartItems: x,
|
|
16
|
+
topRow: k,
|
|
17
|
+
itemInfo: T,
|
|
18
|
+
purchaseInformation: L,
|
|
19
|
+
itemManagement: M,
|
|
20
|
+
removeItem: R,
|
|
21
|
+
noItems: P,
|
|
22
|
+
subtotal: S
|
|
17
23
|
};
|
|
18
|
-
function
|
|
19
|
-
cart:
|
|
20
|
-
onItemQtyChange:
|
|
21
|
-
onItemDelete:
|
|
22
|
-
onItemEdit: b,
|
|
24
|
+
function U({
|
|
25
|
+
cart: n,
|
|
26
|
+
onItemQtyChange: m,
|
|
27
|
+
onItemDelete: c,
|
|
23
28
|
onCheckout: l,
|
|
24
|
-
subtotal:
|
|
25
|
-
|
|
29
|
+
subtotal: r,
|
|
30
|
+
contactHref: d,
|
|
31
|
+
contactLinkBehavior: h,
|
|
32
|
+
itemPriceLabel: p,
|
|
33
|
+
...u
|
|
26
34
|
}) {
|
|
27
|
-
return
|
|
28
|
-
|
|
35
|
+
return n = n || { items: [] }, console.log(n), /* @__PURE__ */ t(
|
|
36
|
+
f,
|
|
29
37
|
{
|
|
30
|
-
|
|
38
|
+
tooltipClassName: i.cartTooltip,
|
|
39
|
+
trigger: /* @__PURE__ */ o("button", { className: i.cart, tabIndex: 0, ...u, children: [
|
|
31
40
|
/* @__PURE__ */ t(
|
|
32
|
-
|
|
41
|
+
s,
|
|
33
42
|
{
|
|
34
43
|
iconKey: "fa-kit fa-shoppingcart-empty",
|
|
35
44
|
title: "Shopping Cart",
|
|
36
45
|
size: "lg"
|
|
37
46
|
}
|
|
38
47
|
),
|
|
39
|
-
|
|
48
|
+
n.items.length > 0 && /* @__PURE__ */ t("div", { className: i.count, children: /* @__PURE__ */ t(a, { size: "xxs", children: n.items.length }) })
|
|
40
49
|
] }),
|
|
41
50
|
position: "bottom",
|
|
42
51
|
on: "click",
|
|
43
|
-
children: /* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */ t(
|
|
45
|
-
/* @__PURE__ */ t("div", { className:
|
|
46
|
-
(
|
|
47
|
-
/* @__PURE__ */
|
|
48
|
-
|
|
49
|
-
/* @__PURE__ */
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
children: /* @__PURE__ */ o("div", { className: i.cartContainer, children: [
|
|
53
|
+
/* @__PURE__ */ t(a, { size: "2xl", children: "Cart" }),
|
|
54
|
+
/* @__PURE__ */ t("div", { className: i.cartItems, children: n.items.length > 0 ? /* @__PURE__ */ t("ul", { children: n.items.map(
|
|
55
|
+
(e) => /* @__PURE__ */ o("li", { className: i.cartItem, children: [
|
|
56
|
+
/* @__PURE__ */ t("img", { src: e.imageUrl, alt: `${e.itemId} product image` }),
|
|
57
|
+
/* @__PURE__ */ o("div", { children: [
|
|
58
|
+
/* @__PURE__ */ o("div", { className: i.topRow, children: [
|
|
59
|
+
/* @__PURE__ */ o("div", { className: i.itemInfo, children: [
|
|
60
|
+
/* @__PURE__ */ t(a, { size: "sm", weight: "semibold", children: /* @__PURE__ */ t(_, { href: e.itemHref || `/part/${e.itemId}`, children: e.description }) }),
|
|
61
|
+
/* @__PURE__ */ o(a, { size: "sm", children: [
|
|
62
|
+
"Part # ",
|
|
63
|
+
e.itemId
|
|
64
|
+
] })
|
|
65
|
+
] }),
|
|
66
|
+
/* @__PURE__ */ t("button", { onClick: () => c(e), className: i.removeItem, children: /* @__PURE__ */ t(s, { iconKey: "fa-regular fa-trash", size: "sm" }) })
|
|
67
|
+
] }),
|
|
68
|
+
/* @__PURE__ */ o("div", { className: i.itemManagement, children: [
|
|
69
|
+
/* @__PURE__ */ o("div", { className: i.purchaseInformation, children: [
|
|
70
|
+
/* @__PURE__ */ t(
|
|
71
|
+
b,
|
|
72
|
+
{
|
|
73
|
+
availId: e.availabilityId || "",
|
|
74
|
+
availDescription: e.availability || "",
|
|
75
|
+
contactHref: d || "",
|
|
76
|
+
contactLinkBehavior: h || "new-tab"
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
/* @__PURE__ */ t(v, { pricingLabel: p || "List Price", price: e.price })
|
|
80
|
+
] }),
|
|
81
|
+
/* @__PURE__ */ t(w, { quantity: e.quantity, onQuantityChange: (g) => m(e, g), size: "sm" })
|
|
55
82
|
] })
|
|
56
|
-
] }),
|
|
57
|
-
/* @__PURE__ */ s("div", { className: e.itemManagement, children: [
|
|
58
|
-
/* @__PURE__ */ t("button", { onClick: () => r(n), className: e.removeItem, children: /* @__PURE__ */ t(a, { iconKey: "fa-regular fa-trash", size: "sm" }) }),
|
|
59
|
-
/* @__PURE__ */ t(p, { quantity: n.quantity, onQuantityChange: (h) => o(n, h), size: "sm" })
|
|
60
83
|
] })
|
|
61
|
-
] },
|
|
62
|
-
) }) : /* @__PURE__ */ t("div", { className:
|
|
63
|
-
|
|
64
|
-
/* @__PURE__ */ t(
|
|
65
|
-
/* @__PURE__ */ t(
|
|
84
|
+
] }, e.id)
|
|
85
|
+
) }) : /* @__PURE__ */ t("div", { className: i.noItems, children: /* @__PURE__ */ t(a, { as: "p", size: "sm", children: "No items in your cart yet" }) }) }),
|
|
86
|
+
r && /* @__PURE__ */ o("div", { className: i.subtotal, children: [
|
|
87
|
+
/* @__PURE__ */ t(a, { size: "md", weight: "semibold", children: "Subtotal" }),
|
|
88
|
+
/* @__PURE__ */ t(a, { size: "md", weight: "semibold", children: r })
|
|
66
89
|
] }),
|
|
67
|
-
/* @__PURE__ */ t(
|
|
90
|
+
/* @__PURE__ */ t(I, { disabled: n.items.length === 0, onClick: l, variant: "cta-primary", size: "md", children: "Checkout" })
|
|
68
91
|
] })
|
|
69
92
|
}
|
|
70
93
|
);
|
|
71
94
|
}
|
|
72
95
|
export {
|
|
73
|
-
|
|
96
|
+
U as ShoppingCart
|
|
74
97
|
};
|
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { ShoppingCart as
|
|
2
|
-
const
|
|
1
|
+
import { ShoppingCart as i } from "./Cart.js";
|
|
2
|
+
const r = {
|
|
3
3
|
title: "Case Parts/Molecules/Cart",
|
|
4
|
-
component:
|
|
4
|
+
component: i,
|
|
5
5
|
parameters: {
|
|
6
6
|
layout: "centered"
|
|
7
7
|
},
|
|
8
8
|
tags: ["autodocs"]
|
|
9
|
-
},
|
|
9
|
+
}, a = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", t = {
|
|
10
10
|
items: [
|
|
11
|
-
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: 99.99, quantity: 1, imageUrl:
|
|
12
|
-
{ id: 2, itemId: "810810", description: "True Door Gasket", price:
|
|
13
|
-
{ id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price:
|
|
14
|
-
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price:
|
|
15
|
-
{ id: 5, itemId: "Warmer Wire", description: '228" 7.0
|
|
16
|
-
{ id: 6, itemId: "810803", description: "True Door Gasket", price:
|
|
17
|
-
{ id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price:
|
|
18
|
-
{ id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price:
|
|
19
|
-
{ id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price:
|
|
20
|
-
{ id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price:
|
|
21
|
-
{ id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price:
|
|
22
|
-
{ id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price:
|
|
11
|
+
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
12
|
+
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
13
|
+
{ 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" },
|
|
14
|
+
{ 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" },
|
|
15
|
+
{ id: 5, itemId: "Warmer Wire", description: '228" 7.0 OHMS 115V', price: "$99.99", quantity: 1, imageUrl: a, availability: "", availabilityId: "available" },
|
|
16
|
+
{ id: 6, itemId: "810803", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
17
|
+
{ id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price: "$99.99", quantity: 10, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
18
|
+
{ id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price: "$99.99", quantity: 10, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
19
|
+
{ id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
20
|
+
{ id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
21
|
+
{ id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
22
|
+
{ id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" }
|
|
23
23
|
]
|
|
24
|
-
},
|
|
24
|
+
}, e = {
|
|
25
25
|
items: [
|
|
26
|
-
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: 99.99, quantity: 1, imageUrl:
|
|
27
|
-
{ id: 2, itemId: "810810", description: "True Door Gasket", price:
|
|
28
|
-
{ id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price:
|
|
29
|
-
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price:
|
|
26
|
+
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
27
|
+
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: a, availability: "In Stock", availabilityId: "available" },
|
|
28
|
+
{ 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" },
|
|
29
|
+
{ 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" }
|
|
30
30
|
]
|
|
31
|
-
},
|
|
31
|
+
}, o = {
|
|
32
32
|
args: {
|
|
33
33
|
cart: { items: [] },
|
|
34
34
|
onCheckout: () => {
|
|
@@ -38,15 +38,15 @@ const o = {
|
|
|
38
38
|
alert("Delete");
|
|
39
39
|
},
|
|
40
40
|
onItemEdit: () => {
|
|
41
|
-
alert("
|
|
41
|
+
alert("Edit");
|
|
42
42
|
},
|
|
43
43
|
onItemQtyChange: () => {
|
|
44
|
-
alert("
|
|
44
|
+
alert("Qty Change");
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
}, n = {
|
|
48
48
|
args: {
|
|
49
|
-
cart:
|
|
49
|
+
cart: t,
|
|
50
50
|
onCheckout: () => {
|
|
51
51
|
alert("Checkout");
|
|
52
52
|
},
|
|
@@ -54,16 +54,16 @@ const o = {
|
|
|
54
54
|
alert("Delete");
|
|
55
55
|
},
|
|
56
56
|
onItemEdit: () => {
|
|
57
|
-
alert("
|
|
57
|
+
alert("Edit");
|
|
58
58
|
},
|
|
59
59
|
onItemQtyChange: () => {
|
|
60
|
-
alert("
|
|
60
|
+
alert("Qty Change");
|
|
61
61
|
},
|
|
62
|
-
subtotal: 748.98
|
|
62
|
+
subtotal: "$748.98"
|
|
63
63
|
}
|
|
64
|
-
},
|
|
64
|
+
}, d = {
|
|
65
65
|
args: {
|
|
66
|
-
cart:
|
|
66
|
+
cart: e,
|
|
67
67
|
onCheckout: () => {
|
|
68
68
|
alert("Checkout");
|
|
69
69
|
},
|
|
@@ -71,17 +71,17 @@ const o = {
|
|
|
71
71
|
alert("Delete");
|
|
72
72
|
},
|
|
73
73
|
onItemEdit: () => {
|
|
74
|
-
alert("
|
|
74
|
+
alert("Edit");
|
|
75
75
|
},
|
|
76
76
|
onItemQtyChange: () => {
|
|
77
|
-
alert("
|
|
77
|
+
alert("Qty Change");
|
|
78
78
|
},
|
|
79
|
-
subtotal: 748.98
|
|
79
|
+
subtotal: "$748.98"
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
82
|
export {
|
|
83
|
-
|
|
83
|
+
o as EmptyCart,
|
|
84
84
|
n as LargeCart,
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
d as SmallCart,
|
|
86
|
+
r as default
|
|
87
87
|
};
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { c as
|
|
3
|
-
import { Text as
|
|
4
|
-
import { Link as
|
|
1
|
+
import { jsx as e, jsxs as s } from "react/jsx-runtime";
|
|
2
|
+
import { c as h } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { Text as t } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { Link as n } from "../../atoms/Link/Link.js";
|
|
5
5
|
import { Icon as m } from "../../atoms/Icon/Icon.js";
|
|
6
|
-
import { getHideAtStyles as
|
|
7
|
-
import { Tooltip as
|
|
8
|
-
import '../../assets/CategoryNav.css';const
|
|
9
|
-
categories:
|
|
6
|
+
import { getHideAtStyles as a } from "../../atoms/HideAt.js";
|
|
7
|
+
import { Tooltip as c } from "../Tooltip/Tooltip.js";
|
|
8
|
+
import '../../assets/CategoryNav.css';const d = "_categories_1htyk_1", u = "_category_1htyk_17", p = "_submenuTooltip_1htyk_43", l = {
|
|
9
|
+
categories: d,
|
|
10
10
|
category: u,
|
|
11
11
|
submenuTooltip: p
|
|
12
12
|
};
|
|
13
13
|
function z({
|
|
14
14
|
categories: o
|
|
15
15
|
}) {
|
|
16
|
-
return !o || o.length === 0 ? null : /* @__PURE__ */ e("ul", { className:
|
|
16
|
+
return !o || o.length === 0 ? null : /* @__PURE__ */ e("ul", { className: h(l.categories, a(["sm"])), children: o.map(
|
|
17
17
|
(i) => i.children.length > 0 ? /* @__PURE__ */ e(
|
|
18
|
-
|
|
18
|
+
c,
|
|
19
19
|
{
|
|
20
|
-
trigger: /* @__PURE__ */ e("li", { className: l.category, tabIndex: 0, children: /* @__PURE__ */
|
|
21
|
-
/* @__PURE__ */ e(
|
|
20
|
+
trigger: /* @__PURE__ */ e("li", { className: l.category, tabIndex: 0, children: /* @__PURE__ */ s(n, { href: i.route, children: [
|
|
21
|
+
/* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: i.label }),
|
|
22
22
|
i.showChevron && /* @__PURE__ */ e(
|
|
23
23
|
m,
|
|
24
24
|
{
|
|
@@ -29,11 +29,11 @@ function z({
|
|
|
29
29
|
)
|
|
30
30
|
] }) }),
|
|
31
31
|
position: "bottom",
|
|
32
|
-
children: /* @__PURE__ */ e("ul", { className: l.submenuTooltip, children: i.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
32
|
+
children: /* @__PURE__ */ e("ul", { className: l.submenuTooltip, children: i.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(n, { href: r.route, children: /* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
|
|
33
33
|
},
|
|
34
34
|
i.id
|
|
35
|
-
) : /* @__PURE__ */ e("li", { className: l.category, children: /* @__PURE__ */
|
|
36
|
-
/* @__PURE__ */ e(
|
|
35
|
+
) : /* @__PURE__ */ e("li", { className: l.category, children: /* @__PURE__ */ s(n, { href: i.route, children: [
|
|
36
|
+
/* @__PURE__ */ e(t, { size: "sm", weight: "semibold", children: i.label }),
|
|
37
37
|
i.showChevron && /* @__PURE__ */ e(
|
|
38
38
|
m,
|
|
39
39
|
{
|
|
@@ -380,7 +380,7 @@ function J() {
|
|
|
380
380
|
}
|
|
381
381
|
process.env.NODE_ENV === "production" ? (J(), B.exports = ue()) : B.exports = le();
|
|
382
382
|
var H = B.exports;
|
|
383
|
-
const de = "
|
|
383
|
+
const de = "_wrapper_1bu3d_1", fe = "_tooltip_1bu3d_6", ge = "_open_1bu3d_19", U = {
|
|
384
384
|
wrapper: de,
|
|
385
385
|
tooltip: fe,
|
|
386
386
|
open: ge
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CartPropsBase, ShoppingCart } from '../../molecules/Cart/Cart';
|
|
2
2
|
import { AccountProps } from '../../molecules/Account/Account';
|
|
3
|
+
import { ContactUsLinkBehavior } from 'lib/main-client';
|
|
3
4
|
export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDivElement>, Pick<AccountProps, "account"> {
|
|
4
5
|
categories?: MainCategory[];
|
|
5
6
|
faqRoute: string;
|
|
@@ -8,7 +9,9 @@ export interface MainNavProps extends CartPropsBase, React.HTMLAttributes<HTMLDi
|
|
|
8
9
|
accountRoute: string;
|
|
9
10
|
contactRoute: string;
|
|
10
11
|
cart: ShoppingCart;
|
|
11
|
-
cartSubtotal?:
|
|
12
|
+
cartSubtotal?: string;
|
|
13
|
+
cartItemPriceLabel?: string;
|
|
14
|
+
cartContactLinkBehavior?: ContactUsLinkBehavior;
|
|
12
15
|
onLoginClick: () => void;
|
|
13
16
|
onSearch: (_input: string) => void;
|
|
14
17
|
}
|
|
@@ -21,4 +24,4 @@ export interface MainCategory extends Category {
|
|
|
21
24
|
children: Category[];
|
|
22
25
|
showChevron?: boolean;
|
|
23
26
|
}
|
|
24
|
-
export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, cartSubtotal, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, className, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function MainNav({ account, categories, faqRoute, customPartsRoute, aboutUsRoute, accountRoute, contactRoute, cart, cartSubtotal, cartItemPriceLabel, cartContactLinkBehavior, onLoginClick, onSearch, onItemQtyChange, onItemDelete, onItemEdit, onCheckout, className, ...otherProps }: MainNavProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,103 +1,109 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { Text as
|
|
3
|
-
import { Link as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import { Flex as
|
|
6
|
-
import { Grid as
|
|
7
|
-
import { Logo as
|
|
1
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
import { Text as f } from "../../atoms/Text/Text.js";
|
|
3
|
+
import { Link as p } from "../../atoms/Link/Link.js";
|
|
4
|
+
import { Icon as k } from "../../atoms/Icon/Icon.js";
|
|
5
|
+
import { Flex as o } from "../../atoms/Flex/Flex.js";
|
|
6
|
+
import { Grid as w, Column as D } from "../../atoms/Grid/Grid.js";
|
|
7
|
+
import { Logo as F } from "../../molecules/Logo/Logo.js";
|
|
8
8
|
import { SearchBox as d } from "../../molecules/SearchBox/SearchBox.js";
|
|
9
|
-
import { HamburgerMenu as
|
|
10
|
-
import { ShoppingCart as
|
|
11
|
-
import { Account as
|
|
12
|
-
import { CategoryNav as
|
|
9
|
+
import { HamburgerMenu as I } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
|
|
10
|
+
import { ShoppingCart as U } from "../../molecules/Cart/Cart.js";
|
|
11
|
+
import { Account as B } from "../../molecules/Account/Account.js";
|
|
12
|
+
import { CategoryNav as H } from "../../molecules/CategoryNav/CategoryNav.js";
|
|
13
13
|
import { c as M } from "../../clsx-OuTLNxxd.js";
|
|
14
|
-
import '../../assets/MainNav.css';const
|
|
15
|
-
main:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
14
|
+
import '../../assets/MainNav.css';const P = "_main_18fjz_1", Q = "_column_18fjz_8", G = "_topNav_18fjz_13", K = "_operations_18fjz_21", S = "_search_18fjz_28", T = "_siteLink_18fjz_31", W = "_accountArea_18fjz_35", E = "_category_18fjz_47", J = "_menuList_18fjz_69", i = {
|
|
15
|
+
main: P,
|
|
16
|
+
column: Q,
|
|
17
|
+
topNav: G,
|
|
18
|
+
operations: K,
|
|
19
|
+
search: S,
|
|
20
|
+
siteLink: T,
|
|
21
|
+
accountArea: W,
|
|
22
|
+
category: E,
|
|
23
|
+
menuList: J
|
|
23
24
|
};
|
|
24
|
-
function
|
|
25
|
+
function ce({
|
|
25
26
|
account: a,
|
|
26
|
-
categories:
|
|
27
|
-
faqRoute:
|
|
28
|
-
customPartsRoute:
|
|
27
|
+
categories: n,
|
|
28
|
+
faqRoute: c,
|
|
29
|
+
customPartsRoute: l,
|
|
29
30
|
aboutUsRoute: _,
|
|
30
31
|
accountRoute: u,
|
|
31
|
-
contactRoute:
|
|
32
|
-
cart:
|
|
33
|
-
cartSubtotal:
|
|
34
|
-
|
|
32
|
+
contactRoute: s,
|
|
33
|
+
cart: N,
|
|
34
|
+
cartSubtotal: v,
|
|
35
|
+
cartItemPriceLabel: A,
|
|
36
|
+
cartContactLinkBehavior: g,
|
|
37
|
+
onLoginClick: j,
|
|
35
38
|
onSearch: h,
|
|
36
|
-
onItemQtyChange:
|
|
37
|
-
onItemDelete:
|
|
38
|
-
onItemEdit:
|
|
39
|
-
onCheckout:
|
|
40
|
-
className:
|
|
41
|
-
...
|
|
39
|
+
onItemQtyChange: L,
|
|
40
|
+
onItemDelete: x,
|
|
41
|
+
onItemEdit: z,
|
|
42
|
+
onCheckout: C,
|
|
43
|
+
className: y,
|
|
44
|
+
...b
|
|
42
45
|
}) {
|
|
43
|
-
return /* @__PURE__ */ e(
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
|
|
46
|
+
return /* @__PURE__ */ e(w, { ...b, gridWrapperClassName: M(i.main, y), children: /* @__PURE__ */ t(D, { span: 12, className: i.column, children: [
|
|
47
|
+
/* @__PURE__ */ t(
|
|
48
|
+
o,
|
|
46
49
|
{
|
|
47
50
|
flexDirection: "row",
|
|
48
51
|
alignItems: "center",
|
|
49
52
|
justifyContent: "space-between",
|
|
50
53
|
className: i.topNav,
|
|
51
54
|
children: [
|
|
52
|
-
/* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(
|
|
53
|
-
/* @__PURE__ */
|
|
54
|
-
|
|
55
|
+
/* @__PURE__ */ e("div", { className: i.logo, children: /* @__PURE__ */ e(F, {}) }),
|
|
56
|
+
/* @__PURE__ */ t(
|
|
57
|
+
o,
|
|
55
58
|
{
|
|
56
59
|
flexDirection: "row",
|
|
57
60
|
alignItems: "center",
|
|
58
61
|
justifyContent: "flex-end",
|
|
59
62
|
className: i.operations,
|
|
60
63
|
children: [
|
|
61
|
-
/* @__PURE__ */ e(
|
|
62
|
-
/* @__PURE__ */ e(r, { href:
|
|
63
|
-
/* @__PURE__ */ e(r, { href:
|
|
64
|
-
/* @__PURE__ */ e(r, { href:
|
|
64
|
+
/* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["sm"], className: i.search, children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search" }) }),
|
|
65
|
+
/* @__PURE__ */ e(r, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
|
|
66
|
+
/* @__PURE__ */ e(r, { href: c, hideAt: ["sm", "md"], children: "FAQ" }),
|
|
67
|
+
/* @__PURE__ */ e(r, { href: s, hideAt: ["sm", "md"], children: "Contact Us" }),
|
|
65
68
|
/* @__PURE__ */ e("div", { className: i.accountArea, children: /* @__PURE__ */ e(
|
|
66
|
-
|
|
69
|
+
B,
|
|
67
70
|
{
|
|
68
71
|
account: a,
|
|
69
72
|
accountRoute: u,
|
|
70
|
-
onLoginClick:
|
|
73
|
+
onLoginClick: j,
|
|
71
74
|
className: i.avatar
|
|
72
75
|
}
|
|
73
76
|
) }),
|
|
74
77
|
/* @__PURE__ */ e(
|
|
75
|
-
|
|
78
|
+
U,
|
|
76
79
|
{
|
|
77
|
-
cart:
|
|
78
|
-
onItemDelete:
|
|
79
|
-
onItemEdit:
|
|
80
|
-
onItemQtyChange:
|
|
81
|
-
onCheckout:
|
|
82
|
-
subtotal:
|
|
80
|
+
cart: N,
|
|
81
|
+
onItemDelete: x,
|
|
82
|
+
onItemEdit: z,
|
|
83
|
+
onItemQtyChange: L,
|
|
84
|
+
onCheckout: C,
|
|
85
|
+
subtotal: v,
|
|
86
|
+
contactHref: s,
|
|
87
|
+
contactLinkBehavior: g,
|
|
88
|
+
itemPriceLabel: A
|
|
83
89
|
}
|
|
84
90
|
),
|
|
85
|
-
/* @__PURE__ */ e(
|
|
86
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href:
|
|
87
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href:
|
|
88
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href:
|
|
91
|
+
/* @__PURE__ */ e(I, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: i.menuList, children: [
|
|
92
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: l, children: "Custom Parts" }) }),
|
|
93
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: c, children: "FAQ" }) }),
|
|
94
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: s, children: "Contact Us" }) }),
|
|
89
95
|
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(r, { href: _, children: "About Us" }) }),
|
|
90
|
-
|
|
91
|
-
/* @__PURE__ */ e(
|
|
96
|
+
n && n.map((m) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(p, { href: m.route, children: [
|
|
97
|
+
/* @__PURE__ */ e(f, { size: "sm", weight: "semibold", children: m.label }),
|
|
92
98
|
/* @__PURE__ */ e(
|
|
93
|
-
|
|
99
|
+
k,
|
|
94
100
|
{
|
|
95
101
|
iconKey: "fa-solid fa-chevron-right",
|
|
96
102
|
title: "Navigate",
|
|
97
103
|
size: "sm"
|
|
98
104
|
}
|
|
99
105
|
)
|
|
100
|
-
] }) },
|
|
106
|
+
] }) }, m.id))
|
|
101
107
|
] }) })
|
|
102
108
|
]
|
|
103
109
|
}
|
|
@@ -105,17 +111,17 @@ function re({
|
|
|
105
111
|
]
|
|
106
112
|
}
|
|
107
113
|
),
|
|
108
|
-
/* @__PURE__ */ e(
|
|
109
|
-
/* @__PURE__ */ e(
|
|
114
|
+
/* @__PURE__ */ e(o, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(d, { onSearch: h, inputName: "cpc-search", className: i.search }) }),
|
|
115
|
+
/* @__PURE__ */ e(H, { categories: n })
|
|
110
116
|
] }) });
|
|
111
117
|
}
|
|
112
118
|
function r({
|
|
113
119
|
href: a,
|
|
114
|
-
children:
|
|
115
|
-
...
|
|
120
|
+
children: n,
|
|
121
|
+
...c
|
|
116
122
|
}) {
|
|
117
|
-
return /* @__PURE__ */ e(
|
|
123
|
+
return /* @__PURE__ */ e(p, { href: a, className: i.siteLink, ...c, children: /* @__PURE__ */ e(f, { size: "md", variant: "display", children: n }) });
|
|
118
124
|
}
|
|
119
125
|
export {
|
|
120
|
-
|
|
126
|
+
ce as MainNav
|
|
121
127
|
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { MainNav as
|
|
2
|
-
const
|
|
1
|
+
import { MainNav as l } from "./MainNav.js";
|
|
2
|
+
const r = {
|
|
3
3
|
title: "Case Parts/Organisms/MainNav",
|
|
4
|
-
component:
|
|
4
|
+
component: l,
|
|
5
5
|
parameters: {
|
|
6
6
|
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
|
|
7
7
|
layout: "fullscreen"
|
|
8
8
|
}
|
|
9
9
|
// tags: ["autodocs"],
|
|
10
|
-
},
|
|
10
|
+
}, t = [
|
|
11
11
|
{
|
|
12
12
|
id: 0,
|
|
13
13
|
label: "Shop by Brands",
|
|
@@ -82,18 +82,18 @@ const l = {
|
|
|
82
82
|
}
|
|
83
83
|
], e = "https://m.media-amazon.com/images/I/216+JEttsYL._UF1000,1000_QL80_.jpg", i = {
|
|
84
84
|
items: [
|
|
85
|
-
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: 99.99, quantity: 1, imageUrl: e, availability: "In Stock" },
|
|
86
|
-
{ id: 2, itemId: "810810", description: "True Door Gasket", price:
|
|
87
|
-
{ id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price:
|
|
88
|
-
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price:
|
|
89
|
-
{ id: 5, itemId: "Warmer Wire", description: '228" 7.0
|
|
90
|
-
{ id: 6, itemId: "810803", description: "True Door Gasket", price:
|
|
91
|
-
{ id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price:
|
|
92
|
-
{ id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price:
|
|
93
|
-
{ id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price:
|
|
94
|
-
{ id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price:
|
|
95
|
-
{ id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price:
|
|
96
|
-
{ id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price:
|
|
85
|
+
{ id: 1, itemId: "1094-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
86
|
+
{ id: 2, itemId: "810810", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
87
|
+
{ id: 3, itemId: "MG064", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
88
|
+
{ id: 4, itemId: "MG064-B", description: '36" x 79" 3-Sided Dart-to-Dart Gasket', price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
89
|
+
{ id: 5, itemId: "Warmer Wire", description: '228" 7.0 OHMS 115V', price: "$99.99", quantity: 1, imageUrl: e, availability: "", availabilityId: "available" },
|
|
90
|
+
{ id: 6, itemId: "810803", description: "True Door Gasket", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
91
|
+
{ id: 7, itemId: "ABG-12114-PF", description: "Adhesive Sponge Gasket 1/4", price: "$99.99", quantity: 10, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
92
|
+
{ id: 8, itemId: "ABG-12138-PF", description: "Adhesive Sponge Gasket 3/8", price: "$99.99", quantity: 10, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
93
|
+
{ id: 9, itemId: "1094-C1", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
94
|
+
{ id: 10, itemId: "1094-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
95
|
+
{ id: 11, itemId: "1092-01", description: "Kason Door Closer - Flush", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" },
|
|
96
|
+
{ id: 12, itemId: "1092-02", description: "Kason Door Closer - Offset", price: "$99.99", quantity: 1, imageUrl: e, availability: "In Stock", availabilityId: "available" }
|
|
97
97
|
]
|
|
98
98
|
}, n = {
|
|
99
99
|
args: {
|
|
@@ -123,10 +123,10 @@ const l = {
|
|
|
123
123
|
onItemQtyChange: () => {
|
|
124
124
|
alert("Delete");
|
|
125
125
|
},
|
|
126
|
-
onSearch: (
|
|
127
|
-
alert(`Search ${
|
|
126
|
+
onSearch: (a) => {
|
|
127
|
+
alert(`Search ${a}`);
|
|
128
128
|
},
|
|
129
|
-
categories:
|
|
129
|
+
categories: t
|
|
130
130
|
}
|
|
131
131
|
}, c = {
|
|
132
132
|
args: {
|
|
@@ -156,12 +156,12 @@ const l = {
|
|
|
156
156
|
onItemQtyChange: () => {
|
|
157
157
|
alert("Delete");
|
|
158
158
|
},
|
|
159
|
-
onSearch: (
|
|
160
|
-
alert(`Search ${
|
|
159
|
+
onSearch: (a) => {
|
|
160
|
+
alert(`Search ${a}`);
|
|
161
161
|
},
|
|
162
|
-
categories:
|
|
162
|
+
categories: t
|
|
163
163
|
}
|
|
164
|
-
},
|
|
164
|
+
}, d = {
|
|
165
165
|
args: {
|
|
166
166
|
cart: i,
|
|
167
167
|
customPartsRoute: "/custom",
|
|
@@ -184,15 +184,15 @@ const l = {
|
|
|
184
184
|
onItemQtyChange: () => {
|
|
185
185
|
alert("Delete");
|
|
186
186
|
},
|
|
187
|
-
onSearch: (
|
|
188
|
-
alert(`Search ${
|
|
187
|
+
onSearch: (a) => {
|
|
188
|
+
alert(`Search ${a}`);
|
|
189
189
|
},
|
|
190
|
-
categories:
|
|
190
|
+
categories: t
|
|
191
191
|
}
|
|
192
192
|
};
|
|
193
193
|
export {
|
|
194
194
|
n as Authenticated,
|
|
195
|
-
|
|
195
|
+
d as Unauthenticated,
|
|
196
196
|
c as WithCartItems,
|
|
197
|
-
|
|
197
|
+
r as default
|
|
198
198
|
};
|
|
@@ -1,55 +1,57 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Image as
|
|
3
|
-
import { Link as
|
|
4
|
-
import { Text as
|
|
5
|
-
import { Availability as
|
|
1
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { Image as T } from "../../atoms/Image/Image.js";
|
|
3
|
+
import { Link as g } from "../../atoms/Link/Link.js";
|
|
4
|
+
import { Text as o } from "../../atoms/Text/Text.js";
|
|
5
|
+
import { Availability as v } from "../../molecules/Availability/Availability.js";
|
|
6
6
|
import { Pricing as x } from "../../molecules/Pricing/Pricing.js";
|
|
7
7
|
import { AddToCart as I } from "../../molecules/AddToCart/AddToCart.js";
|
|
8
|
-
import { Icon as
|
|
9
|
-
import { c as
|
|
10
|
-
import '../../assets/Product.css';const P = "
|
|
8
|
+
import { Icon as L } from "../../atoms/Icon/Icon.js";
|
|
9
|
+
import { c as w } from "../../clsx-OuTLNxxd.js";
|
|
10
|
+
import '../../assets/Product.css';const P = "_productCard_10edn_1", R = "_productInformation_10edn_22", $ = "_purchaseInformation_10edn_29", A = "_addToCart_10edn_37", D = "_addToCartButton_10edn_40", j = "_partNumber_10edn_48", k = "_partNumberLabel_10edn_55", y = "_productTile_10edn_59", q = "_topRow_10edn_80", E = "_productData_10edn_111", F = "_purchase_10edn_29", G = "_attributeContainer_10edn_148", t = {
|
|
11
11
|
productCard: P,
|
|
12
12
|
productInformation: R,
|
|
13
13
|
purchaseInformation: $,
|
|
14
14
|
addToCart: A,
|
|
15
15
|
addToCartButton: D,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
partNumber: j,
|
|
17
|
+
partNumberLabel: k,
|
|
18
|
+
productTile: y,
|
|
19
|
+
topRow: q,
|
|
20
|
+
productData: E,
|
|
21
|
+
purchase: F,
|
|
22
|
+
attributeContainer: G
|
|
21
23
|
};
|
|
22
|
-
function
|
|
23
|
-
productView:
|
|
24
|
+
function Z({
|
|
25
|
+
productView: z,
|
|
24
26
|
itemKey: s,
|
|
25
|
-
partNumber:
|
|
27
|
+
partNumber: e,
|
|
26
28
|
productDescription: l,
|
|
27
29
|
availDescription: m,
|
|
28
30
|
availId: d,
|
|
29
31
|
contactHref: u,
|
|
30
32
|
contactLinkBehavior: p,
|
|
31
|
-
productHref:
|
|
32
|
-
priceLabel:
|
|
33
|
+
productHref: h,
|
|
34
|
+
priceLabel: _,
|
|
33
35
|
price: n,
|
|
34
|
-
imgSrc:
|
|
35
|
-
attributes:
|
|
36
|
-
className:
|
|
37
|
-
onAddToCart:
|
|
38
|
-
onClose:
|
|
39
|
-
...
|
|
36
|
+
imgSrc: N,
|
|
37
|
+
attributes: c,
|
|
38
|
+
className: b,
|
|
39
|
+
onAddToCart: f,
|
|
40
|
+
onClose: C,
|
|
41
|
+
...B
|
|
40
42
|
}) {
|
|
41
|
-
return
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
"Part #
|
|
47
|
-
|
|
43
|
+
return z === "Card" ? /* @__PURE__ */ a("div", { className: w(t.productCard, b), children: [
|
|
44
|
+
/* @__PURE__ */ r(T, { src: N, alt: `${e} product image` }),
|
|
45
|
+
/* @__PURE__ */ a("div", { className: t.productInformation, children: [
|
|
46
|
+
/* @__PURE__ */ r(g, { href: h, children: l }),
|
|
47
|
+
/* @__PURE__ */ a("div", { className: t.partNumber, children: [
|
|
48
|
+
/* @__PURE__ */ r(o, { size: "sm", className: t.partNumberLabel, children: "Part #" }),
|
|
49
|
+
/* @__PURE__ */ r(o, { size: "sm", weight: "semibold", children: e })
|
|
48
50
|
] })
|
|
49
51
|
] }),
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
d && /* @__PURE__ */
|
|
52
|
-
|
|
52
|
+
/* @__PURE__ */ a("div", { className: t.purchaseInformation, children: [
|
|
53
|
+
d && /* @__PURE__ */ r(
|
|
54
|
+
v,
|
|
53
55
|
{
|
|
54
56
|
availId: d,
|
|
55
57
|
availDescription: m,
|
|
@@ -57,36 +59,36 @@ function X({
|
|
|
57
59
|
contactLinkBehavior: p
|
|
58
60
|
}
|
|
59
61
|
),
|
|
60
|
-
n && /* @__PURE__ */
|
|
62
|
+
n && /* @__PURE__ */ r(x, { pricingLabel: _, price: n })
|
|
61
63
|
] }),
|
|
62
|
-
/* @__PURE__ */
|
|
64
|
+
/* @__PURE__ */ r(
|
|
63
65
|
I,
|
|
64
66
|
{
|
|
65
67
|
itemKey: s,
|
|
66
|
-
onAdd:
|
|
68
|
+
onAdd: f,
|
|
67
69
|
className: t.addToCart,
|
|
68
70
|
addButtonClassName: t.addToCartButton,
|
|
69
71
|
size: "md",
|
|
70
72
|
buttonDoneText: ""
|
|
71
73
|
}
|
|
72
74
|
)
|
|
73
|
-
] }) : /* @__PURE__ */
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
/* @__PURE__ */
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
/* @__PURE__ */
|
|
80
|
-
"Part #
|
|
81
|
-
|
|
75
|
+
] }) : /* @__PURE__ */ a("div", { className: w(t.productTile, b), ...B, children: [
|
|
76
|
+
/* @__PURE__ */ r(T, { src: N, alt: `${e} product image` }),
|
|
77
|
+
/* @__PURE__ */ a("div", { className: t.productData, children: [
|
|
78
|
+
/* @__PURE__ */ a("div", { className: t.topRow, children: [
|
|
79
|
+
/* @__PURE__ */ a("div", { className: t.productInformation, children: [
|
|
80
|
+
/* @__PURE__ */ r(g, { href: h, children: l }),
|
|
81
|
+
/* @__PURE__ */ a("div", { className: t.partNumber, children: [
|
|
82
|
+
/* @__PURE__ */ r(o, { size: "sm", className: t.partNumberLabel, children: "Part #" }),
|
|
83
|
+
/* @__PURE__ */ r(o, { size: "sm", weight: "semibold", children: e })
|
|
82
84
|
] })
|
|
83
85
|
] }),
|
|
84
|
-
|
|
86
|
+
C && /* @__PURE__ */ r("button", { onClick: () => C(s), children: /* @__PURE__ */ r(L, { size: "sm", iconKey: "fa-light fa-xmark" }) })
|
|
85
87
|
] }),
|
|
86
|
-
/* @__PURE__ */
|
|
87
|
-
/* @__PURE__ */
|
|
88
|
-
d && /* @__PURE__ */
|
|
89
|
-
|
|
88
|
+
/* @__PURE__ */ a("div", { className: t.purchase, children: [
|
|
89
|
+
/* @__PURE__ */ a("div", { className: t.purchaseInformation, children: [
|
|
90
|
+
d && /* @__PURE__ */ r(
|
|
91
|
+
v,
|
|
90
92
|
{
|
|
91
93
|
availId: d,
|
|
92
94
|
availDescription: m,
|
|
@@ -94,20 +96,20 @@ function X({
|
|
|
94
96
|
contactLinkBehavior: p
|
|
95
97
|
}
|
|
96
98
|
),
|
|
97
|
-
n && /* @__PURE__ */
|
|
99
|
+
n && /* @__PURE__ */ r(x, { pricingLabel: _, price: n })
|
|
98
100
|
] }),
|
|
99
|
-
/* @__PURE__ */
|
|
101
|
+
/* @__PURE__ */ r(I, { itemKey: s, onAdd: f, className: t.addToCart, addButtonClassName: t.addToCartButton })
|
|
100
102
|
] }),
|
|
101
|
-
|
|
102
|
-
/* @__PURE__ */
|
|
103
|
-
|
|
103
|
+
c && c.length > 0 && /* @__PURE__ */ r("ul", { className: t.attributeContainer, children: c.map((i) => /* @__PURE__ */ a("li", { children: [
|
|
104
|
+
/* @__PURE__ */ a(o, { size: "xs", weight: "light", children: [
|
|
105
|
+
i.label,
|
|
104
106
|
":"
|
|
105
107
|
] }),
|
|
106
|
-
/* @__PURE__ */ o
|
|
107
|
-
] }, `${
|
|
108
|
+
/* @__PURE__ */ r(o, { size: "xs", weight: "semibold", children: i.value })
|
|
109
|
+
] }, `${i.label}.${i.value}`)) })
|
|
108
110
|
] })
|
|
109
111
|
] });
|
|
110
112
|
}
|
|
111
113
|
export {
|
|
112
|
-
|
|
114
|
+
Z as Product
|
|
113
115
|
};
|