@caseparts-org/caseblocks 0.0.18 → 0.0.19
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/CategoryNav.css +1 -0
- package/dist/assets/MainNav.css +1 -1
- package/dist/molecules/CategoryNav/CategoryNav.d.ts +12 -0
- package/dist/molecules/CategoryNav/CategoryNav.js +51 -0
- package/dist/molecules/CategoryNav/CategoryNav.stories.d.ts +12 -0
- package/dist/molecules/CategoryNav/CategoryNav.stories.js +89 -0
- package/dist/organisms/MainNav/MainNav.js +59 -81
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._categories_1m4w9_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_1m4w9_1{margin-right:70px;flex-wrap:wrap}}._category_1m4w9_16{list-style:none}._category_1m4w9_16 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_1m4w9_16 a{justify-content:space-between;width:100%}}._category_1m4w9_16 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_1m4w9_16 a path{fill:var(--color-brand-primary-primary-teal-blue)}._submenuTooltip_1m4w9_42{list-style:none;padding:0;margin:0;height:min-content}
|
package/dist/assets/MainNav.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._topNav_1uhwf_1{padding:var(--spacing-1) 0;gap:var(--spacing-1-5)}@media (max-width: 1281px){._topNav_1uhwf_1{padding:var(--spacing-1) 0 0 0;gap:var(--spacing-1)}}._operations_1uhwf_9{gap:var(--spacing-1-5);width:100%}@media (max-width: 1281px){._operations_1uhwf_9{gap:var(--spacing-1)}}._search_1uhwf_16{flex:1}._siteLink_1uhwf_19{color:var(--color-brand-primary-primary-black);cursor:default}._accountArea_1uhwf_23{width:145px}@media (max-width: 1281px){._accountArea_1uhwf_23{width:min-content}}._cart_1uhwf_29{border:none;padding:0;margin:0;background-color:transparent}._category_1uhwf_35{list-style:none}._category_1uhwf_35 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_1uhwf_35 a{justify-content:space-between;width:100%}}._category_1uhwf_35 a:hover{color:var(--color-brand-primary-primary-teal-blue);text-decoration:none}._category_1uhwf_35 a path{fill:var(--color-brand-primary-primary-teal-blue)}._menuList_1uhwf_57{list-style:none;padding:0;margin:0;height:min-content;border:1px solid var(--border-border-secondary-btn, #dfdfdf)}._menuList_1uhwf_57>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_1uhwf_57>li:last-of-type{border-bottom:none}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export interface Category {
|
|
2
|
+
id: string | number;
|
|
3
|
+
label: string;
|
|
4
|
+
route: string;
|
|
5
|
+
}
|
|
6
|
+
export interface MainCategory extends Category {
|
|
7
|
+
children: Category[];
|
|
8
|
+
showChevron?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare function CategoryNav({ categories, }: {
|
|
11
|
+
categories?: MainCategory[];
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
import { c } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { Text as n } from "../../atoms/Text/Text.js";
|
|
4
|
+
import { Link as s } from "../../atoms/Link/Link.js";
|
|
5
|
+
import { Icon as m } from "../../atoms/Icon/Icon.js";
|
|
6
|
+
import { Tooltip as h } from "../Tooltip/Tooltip.js";
|
|
7
|
+
import { getHideAtStyles as a } from "../../atoms/HideAt.js";
|
|
8
|
+
import '../../assets/CategoryNav.css';const d = "_categories_1m4w9_1", u = "_category_1m4w9_16", p = "_submenuTooltip_1m4w9_42", o = {
|
|
9
|
+
categories: d,
|
|
10
|
+
category: u,
|
|
11
|
+
submenuTooltip: p
|
|
12
|
+
};
|
|
13
|
+
function z({
|
|
14
|
+
categories: l
|
|
15
|
+
}) {
|
|
16
|
+
return !l || l.length === 0 ? null : /* @__PURE__ */ e("ul", { className: c(o.categories, a(["sm"])), children: l.map(
|
|
17
|
+
(i) => i.children.length > 0 ? /* @__PURE__ */ e(
|
|
18
|
+
h,
|
|
19
|
+
{
|
|
20
|
+
trigger: /* @__PURE__ */ e("li", { className: o.category, children: /* @__PURE__ */ t(s, { href: i.route, children: [
|
|
21
|
+
/* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
|
|
22
|
+
i.showChevron && /* @__PURE__ */ e(
|
|
23
|
+
m,
|
|
24
|
+
{
|
|
25
|
+
iconKey: "fa-regular fa-angle-down",
|
|
26
|
+
title: "Expand",
|
|
27
|
+
size: "sm"
|
|
28
|
+
}
|
|
29
|
+
)
|
|
30
|
+
] }) }),
|
|
31
|
+
on: "hover",
|
|
32
|
+
position: "bottom center",
|
|
33
|
+
children: /* @__PURE__ */ e("ul", { className: o.submenuTooltip, children: i.children.map((r) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(s, { href: r.route, children: /* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: r.label }) }) }, r.id)) })
|
|
34
|
+
},
|
|
35
|
+
i.id
|
|
36
|
+
) : /* @__PURE__ */ e("li", { className: o.category, children: /* @__PURE__ */ t(s, { href: i.route, children: [
|
|
37
|
+
/* @__PURE__ */ e(n, { size: "sm", weight: "semibold", children: i.label }),
|
|
38
|
+
i.showChevron && /* @__PURE__ */ e(
|
|
39
|
+
m,
|
|
40
|
+
{
|
|
41
|
+
iconKey: "fa-regular fa-angle-down",
|
|
42
|
+
title: "Expand",
|
|
43
|
+
size: "sm"
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
] }) }, i.id)
|
|
47
|
+
) });
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
z as CategoryNav
|
|
51
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { CategoryNav } from './CategoryNav';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof CategoryNav;
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<typeof meta>;
|
|
12
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { CategoryNav as e } from "./CategoryNav.js";
|
|
2
|
+
const t = {
|
|
3
|
+
title: "Case Parts/Molecules/CategoryNav",
|
|
4
|
+
component: e,
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: "centered"
|
|
7
|
+
}
|
|
8
|
+
}, l = [
|
|
9
|
+
{
|
|
10
|
+
id: 0,
|
|
11
|
+
label: "Shop by Brands",
|
|
12
|
+
route: "#",
|
|
13
|
+
children: [
|
|
14
|
+
{ id: 20, label: "Anthony", route: "/anthony" },
|
|
15
|
+
{ id: 21, label: "Beverage Air", route: "/beverage" },
|
|
16
|
+
{ id: 22, label: "Continental", route: "/continental" },
|
|
17
|
+
{ id: 23, label: "Delfield", route: "/delfield" }
|
|
18
|
+
],
|
|
19
|
+
showChevron: !0
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
id: 1,
|
|
23
|
+
label: "Gaskets",
|
|
24
|
+
route: "#",
|
|
25
|
+
children: []
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
id: 2,
|
|
29
|
+
label: "Hardware",
|
|
30
|
+
route: "#",
|
|
31
|
+
children: []
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
id: 3,
|
|
35
|
+
label: "Refrigeration",
|
|
36
|
+
route: "#",
|
|
37
|
+
children: []
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
id: 4,
|
|
41
|
+
label: "Controls",
|
|
42
|
+
route: "#",
|
|
43
|
+
children: []
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: 5,
|
|
47
|
+
label: "Electrical",
|
|
48
|
+
route: "#",
|
|
49
|
+
children: []
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
id: 6,
|
|
53
|
+
label: "Heaters / Pans",
|
|
54
|
+
route: "#",
|
|
55
|
+
children: []
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
id: 7,
|
|
59
|
+
label: "Shelving",
|
|
60
|
+
route: "#",
|
|
61
|
+
children: []
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
id: 8,
|
|
65
|
+
label: "Doors",
|
|
66
|
+
route: "#",
|
|
67
|
+
children: []
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
id: 9,
|
|
71
|
+
label: "Walk-In",
|
|
72
|
+
route: "#",
|
|
73
|
+
children: []
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
id: 10,
|
|
77
|
+
label: "Accessories",
|
|
78
|
+
route: "#",
|
|
79
|
+
children: []
|
|
80
|
+
}
|
|
81
|
+
], a = {
|
|
82
|
+
args: {
|
|
83
|
+
categories: l
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
export {
|
|
87
|
+
a as Default,
|
|
88
|
+
t as default
|
|
89
|
+
};
|
|
@@ -1,89 +1,85 @@
|
|
|
1
1
|
import { jsx as e, jsxs as t } from "react/jsx-runtime";
|
|
2
|
-
import { Text as
|
|
3
|
-
import { Link as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import { Flex as
|
|
6
|
-
import { Grid as
|
|
7
|
-
import { Logo as
|
|
8
|
-
import { SearchBox as
|
|
9
|
-
import { HamburgerMenu as
|
|
2
|
+
import { Text as d } from "../../atoms/Text/Text.js";
|
|
3
|
+
import { Link as f } from "../../atoms/Link/Link.js";
|
|
4
|
+
import { Icon as v } from "../../atoms/Icon/Icon.js";
|
|
5
|
+
import { Flex as c } from "../../atoms/Flex/Flex.js";
|
|
6
|
+
import { Grid as w, Column as g } from "../../atoms/Grid/Grid.js";
|
|
7
|
+
import { Logo as x } from "../../molecules/Logo/Logo.js";
|
|
8
|
+
import { SearchBox as m } from "../../molecules/SearchBox/SearchBox.js";
|
|
9
|
+
import { HamburgerMenu as L } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
|
|
10
10
|
import { Cart as C } from "../../molecules/Cart/Cart.js";
|
|
11
|
-
import { Tooltip as k } from "../../molecules/Tooltip/Tooltip.js";
|
|
12
11
|
import { Account as y } from "../../molecules/Account/Account.js";
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
category: K,
|
|
23
|
-
submenuTooltip: M,
|
|
24
|
-
menuList: Q
|
|
12
|
+
import { CategoryNav as k } from "../../molecules/CategoryNav/CategoryNav.js";
|
|
13
|
+
import '../../assets/MainNav.css';const b = "_topNav_1uhwf_1", j = "_operations_1uhwf_9", D = "_search_1uhwf_16", z = "_siteLink_1uhwf_19", F = "_accountArea_1uhwf_23", I = "_category_1uhwf_35", U = "_menuList_1uhwf_57", r = {
|
|
14
|
+
topNav: b,
|
|
15
|
+
operations: j,
|
|
16
|
+
search: D,
|
|
17
|
+
siteLink: z,
|
|
18
|
+
accountArea: F,
|
|
19
|
+
category: I,
|
|
20
|
+
menuList: U
|
|
25
21
|
};
|
|
26
|
-
function
|
|
27
|
-
account:
|
|
22
|
+
function V({
|
|
23
|
+
account: s,
|
|
28
24
|
categories: n,
|
|
29
|
-
faqRoute:
|
|
30
|
-
customPartsRoute:
|
|
31
|
-
aboutUsRoute:
|
|
32
|
-
accountRoute:
|
|
33
|
-
contactRoute:
|
|
34
|
-
cartItemCount:
|
|
35
|
-
onLoginClick:
|
|
36
|
-
onCartClick:
|
|
25
|
+
faqRoute: o,
|
|
26
|
+
customPartsRoute: l,
|
|
27
|
+
aboutUsRoute: u,
|
|
28
|
+
accountRoute: p,
|
|
29
|
+
contactRoute: h,
|
|
30
|
+
cartItemCount: _ = 0,
|
|
31
|
+
onLoginClick: N,
|
|
32
|
+
onCartClick: A
|
|
37
33
|
// chat,
|
|
38
34
|
}) {
|
|
39
|
-
return /* @__PURE__ */ e(
|
|
35
|
+
return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ t(g, { span: 12, children: [
|
|
40
36
|
/* @__PURE__ */ t(
|
|
41
|
-
|
|
37
|
+
c,
|
|
42
38
|
{
|
|
43
39
|
flexDirection: "row",
|
|
44
40
|
alignItems: "center",
|
|
45
41
|
justifyContent: "space-between",
|
|
46
|
-
className:
|
|
42
|
+
className: r.topNav,
|
|
47
43
|
children: [
|
|
48
|
-
/* @__PURE__ */ e("div", { className:
|
|
44
|
+
/* @__PURE__ */ e("div", { className: r.logo, children: /* @__PURE__ */ e(x, {}) }),
|
|
49
45
|
/* @__PURE__ */ t(
|
|
50
|
-
|
|
46
|
+
c,
|
|
51
47
|
{
|
|
52
48
|
flexDirection: "row",
|
|
53
49
|
alignItems: "center",
|
|
54
50
|
justifyContent: "flex-end",
|
|
55
|
-
className:
|
|
51
|
+
className: r.operations,
|
|
56
52
|
children: [
|
|
57
|
-
/* @__PURE__ */ e(
|
|
58
|
-
/* @__PURE__ */ e(
|
|
59
|
-
/* @__PURE__ */ e(
|
|
60
|
-
/* @__PURE__ */ e(
|
|
61
|
-
/* @__PURE__ */ e("div", { className:
|
|
53
|
+
/* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["sm"], className: r.search, children: /* @__PURE__ */ e(m, { action: "/search" }) }),
|
|
54
|
+
/* @__PURE__ */ e(i, { href: l, hideAt: ["sm", "md"], children: "Custom Parts" }),
|
|
55
|
+
/* @__PURE__ */ e(i, { href: o, hideAt: ["sm", "md"], children: "FAQ" }),
|
|
56
|
+
/* @__PURE__ */ e(i, { href: h, hideAt: ["sm", "md"], children: "Contact Us" }),
|
|
57
|
+
/* @__PURE__ */ e("div", { className: r.accountArea, children: /* @__PURE__ */ e(
|
|
62
58
|
y,
|
|
63
59
|
{
|
|
64
|
-
account:
|
|
65
|
-
accountRoute:
|
|
66
|
-
onLoginClick:
|
|
67
|
-
className:
|
|
60
|
+
account: s,
|
|
61
|
+
accountRoute: p,
|
|
62
|
+
onLoginClick: N,
|
|
63
|
+
className: r.avatar
|
|
68
64
|
}
|
|
69
65
|
) }),
|
|
70
|
-
/* @__PURE__ */ e(C, { onClick:
|
|
71
|
-
/* @__PURE__ */ e(
|
|
72
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
73
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
74
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
75
|
-
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
|
|
76
|
-
n && n.map((
|
|
77
|
-
/* @__PURE__ */ e(
|
|
66
|
+
/* @__PURE__ */ e(C, { onClick: A, cartItemCount: _ }),
|
|
67
|
+
/* @__PURE__ */ e(L, { hideAt: ["lg"], children: /* @__PURE__ */ t("ul", { className: r.menuList, children: [
|
|
68
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: l, children: "Custom Parts" }) }),
|
|
69
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: o, children: "FAQ" }) }),
|
|
70
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: h, children: "Contact Us" }) }),
|
|
71
|
+
/* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(i, { href: u, children: "About Us" }) }),
|
|
72
|
+
n && n.map((a) => /* @__PURE__ */ e("li", { className: r.category, children: /* @__PURE__ */ t(f, { href: a.route, children: [
|
|
73
|
+
/* @__PURE__ */ e(d, { size: "sm", weight: "semibold", children: a.label }),
|
|
78
74
|
/* @__PURE__ */ e(
|
|
79
|
-
|
|
75
|
+
v,
|
|
80
76
|
{
|
|
81
77
|
iconKey: "fa-solid fa-chevron-right",
|
|
82
78
|
title: "Navigate",
|
|
83
79
|
size: "sm"
|
|
84
80
|
}
|
|
85
81
|
)
|
|
86
|
-
] }) },
|
|
82
|
+
] }) }, a.id))
|
|
87
83
|
] }) })
|
|
88
84
|
]
|
|
89
85
|
}
|
|
@@ -91,35 +87,17 @@ function R({
|
|
|
91
87
|
]
|
|
92
88
|
}
|
|
93
89
|
),
|
|
94
|
-
/* @__PURE__ */ e(
|
|
95
|
-
|
|
96
|
-
k,
|
|
97
|
-
{
|
|
98
|
-
trigger: /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ t(a, { href: r.route, children: [
|
|
99
|
-
/* @__PURE__ */ e(l, { size: "sm", weight: "semibold", children: r.label }),
|
|
100
|
-
r.showChevron && /* @__PURE__ */ e(
|
|
101
|
-
p,
|
|
102
|
-
{
|
|
103
|
-
iconKey: "fa-regular fa-angle-down",
|
|
104
|
-
title: "Expand",
|
|
105
|
-
size: "sm"
|
|
106
|
-
}
|
|
107
|
-
)
|
|
108
|
-
] }) }, r.id),
|
|
109
|
-
on: "hover",
|
|
110
|
-
position: "bottom center",
|
|
111
|
-
children: /* @__PURE__ */ e("ul", { className: i.submenuTooltip, children: r.children.map((f) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(a, { href: f.route, children: /* @__PURE__ */ e(l, { size: "sm", weight: "semibold", children: f.label }) }) })) })
|
|
112
|
-
}
|
|
113
|
-
)) })
|
|
90
|
+
/* @__PURE__ */ e(c, { flexDirection: "row", hideAt: ["md", "lg"], children: /* @__PURE__ */ e(m, { action: "/search", className: r.search }) }),
|
|
91
|
+
/* @__PURE__ */ e(k, { categories: n })
|
|
114
92
|
] }) });
|
|
115
93
|
}
|
|
116
|
-
function
|
|
117
|
-
href:
|
|
94
|
+
function i({
|
|
95
|
+
href: s,
|
|
118
96
|
children: n,
|
|
119
|
-
...
|
|
97
|
+
...o
|
|
120
98
|
}) {
|
|
121
|
-
return /* @__PURE__ */ e(
|
|
99
|
+
return /* @__PURE__ */ e(f, { href: s, className: r.siteLink, ...o, children: /* @__PURE__ */ e(d, { size: "md", variant: "display", children: n }) });
|
|
122
100
|
}
|
|
123
101
|
export {
|
|
124
|
-
|
|
102
|
+
V as MainNav
|
|
125
103
|
};
|