@agilant/toga-blox 1.0.36 → 1.0.37
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/components/Badge/Badge.stories.js +8 -8
- package/dist/components/Badge/Badge.test.js +8 -8
- package/dist/components/BaseButton/BaseButton.stories.js +5 -5
- package/dist/components/Card/templates/CounterContentCardTemplate.js +1 -1
- package/dist/components/Card/templates/HorizontalCardTemplate.js +2 -2
- package/dist/components/Dropdown/Dropdown.js +1 -1
- package/dist/components/InputAndCheck/InputAndCheck.js +1 -1
- package/dist/components/Nav/Nav.js +5 -2
- package/dist/components/Toaster/Toaster.js +1 -1
- package/dist/utils/generateAccordionItem.js +1 -2
- package/dist/utils/getFontAwesomeIcon.d.ts +1 -1
- package/dist/utils/getFontAwesomeIcon.js +1 -1
- package/package.json +1 -1
|
@@ -156,8 +156,8 @@ BadgeWithLeftIcon.args = {
|
|
|
156
156
|
badgeContainerClasses: "px-3 py-1",
|
|
157
157
|
hasMobileStyle: true,
|
|
158
158
|
mobileIconLabel: "Complete",
|
|
159
|
-
mobileIcon: getFontAwesomeIcon("check"),
|
|
160
|
-
icon: getFontAwesomeIcon("check"),
|
|
159
|
+
mobileIcon: getFontAwesomeIcon("check", "regular"),
|
|
160
|
+
icon: getFontAwesomeIcon("check", "regular"),
|
|
161
161
|
hasLeftIcon: true,
|
|
162
162
|
iconSize: "text-sm",
|
|
163
163
|
text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Complete", tag: "span", size: "text-sm" })),
|
|
@@ -176,8 +176,8 @@ BadgeWithRightIcon.args = {
|
|
|
176
176
|
badgeContainerClasses: "px-3 py-1",
|
|
177
177
|
hasMobileStyle: true,
|
|
178
178
|
mobileIconLabel: "Incomplete",
|
|
179
|
-
mobileIcon: getFontAwesomeIcon("xmark"),
|
|
180
|
-
icon: getFontAwesomeIcon("xmark"),
|
|
179
|
+
mobileIcon: getFontAwesomeIcon("xmark", "regular"),
|
|
180
|
+
icon: getFontAwesomeIcon("xmark", "regular"),
|
|
181
181
|
hasRightIcon: true,
|
|
182
182
|
iconSize: "text-sm",
|
|
183
183
|
text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Incomplete", tag: "span", size: "text-sm" })),
|
|
@@ -222,8 +222,8 @@ SupplyBadge.args = {
|
|
|
222
222
|
backgroundColor: "bg-gray-300",
|
|
223
223
|
borderRadius: "rounded-full",
|
|
224
224
|
badgeContainerClasses: "px-3 py-1",
|
|
225
|
-
mobileIcon: getFontAwesomeIcon("calculator"),
|
|
226
|
-
icon: getFontAwesomeIcon("calculator"),
|
|
225
|
+
mobileIcon: getFontAwesomeIcon("calculator", "regular"),
|
|
226
|
+
icon: getFontAwesomeIcon("calculator", "regular"),
|
|
227
227
|
hasLeftIcon: true,
|
|
228
228
|
text: (_jsx(Text, { color: "text-black", fontFamily: "font-serif", text: "Closed", tag: "span", size: "text-sm" })),
|
|
229
229
|
};
|
|
@@ -239,8 +239,8 @@ StylesBadgeWithClick.args = {
|
|
|
239
239
|
backgroundColor: "bg-gray-300",
|
|
240
240
|
borderRadius: "rounded-full",
|
|
241
241
|
badgeContainerClasses: "px-3 py-1",
|
|
242
|
-
mobileIcon: getFontAwesomeIcon("calculator"),
|
|
243
|
-
icon: getFontAwesomeIcon("calculator"),
|
|
242
|
+
mobileIcon: getFontAwesomeIcon("calculator", "regular"),
|
|
243
|
+
icon: getFontAwesomeIcon("calculator", "regular"),
|
|
244
244
|
hasLeftIcon: true,
|
|
245
245
|
styles: { background: "#F8F8F9", padding: "1.5rem" },
|
|
246
246
|
onClick: () => alert("Clicked!"),
|
|
@@ -6,7 +6,7 @@ import Text from "../Text/Text";
|
|
|
6
6
|
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
7
7
|
describe("<Badge />", () => {
|
|
8
8
|
beforeEach(() => {
|
|
9
|
-
render(_jsx(Badge, { type: "span", borderColor: "border-red-500", hoverColor: "hover:bg-none", testId: "priority-badge", mobileIcon: getFontAwesomeIcon("exclamationCircle"), mobileIconLabel: "Priority", text: _jsx(Text, { size: "text-md", color: "text-black", text: "Priority", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
|
|
9
|
+
render(_jsx(Badge, { type: "span", borderColor: "border-red-500", hoverColor: "hover:bg-none", testId: "priority-badge", mobileIcon: getFontAwesomeIcon("exclamationCircle", "regular"), mobileIconLabel: "Priority", text: _jsx(Text, { size: "text-md", color: "text-black", text: "Priority", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
|
|
10
10
|
});
|
|
11
11
|
test("renders badge", () => {
|
|
12
12
|
const badge = screen.getByTestId("badge-test-id");
|
|
@@ -22,7 +22,7 @@ describe("<Badge />", () => {
|
|
|
22
22
|
});
|
|
23
23
|
describe("<Badge /> with icon", () => {
|
|
24
24
|
beforeEach(() => {
|
|
25
|
-
render(_jsx(Badge, { type: "span", borderColor: "border-green-500", hoverColor: "hover:bg-none", testId: "icon-badge", cursorPointer: false, icon: getFontAwesomeIcon("xmark"), mobileIcon: getFontAwesomeIcon("xmark"), mobileIconLabel: "Complete", hasLeftIcon: true, text: _jsx(Text, { size: "text-md", color: "text-black", text: "Complete", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
|
|
25
|
+
render(_jsx(Badge, { type: "span", borderColor: "border-green-500", hoverColor: "hover:bg-none", testId: "icon-badge", cursorPointer: false, icon: getFontAwesomeIcon("xmark", "regular"), mobileIcon: getFontAwesomeIcon("xmark", "regular"), mobileIconLabel: "Complete", hasLeftIcon: true, text: _jsx(Text, { size: "text-md", color: "text-black", text: "Complete", fontFamily: "font-serif", tag: "h2", additionalClasses: "font-bold" }) }));
|
|
26
26
|
});
|
|
27
27
|
test("renders badge with icon", () => {
|
|
28
28
|
const badge = screen.getByTestId("badge-test-id");
|
|
@@ -38,7 +38,7 @@ describe("<Badge /> with icon", () => {
|
|
|
38
38
|
});
|
|
39
39
|
describe("<Badge /> with Image", () => {
|
|
40
40
|
beforeEach(() => {
|
|
41
|
-
render(_jsx(Badge, { type: "href", href: "#", borderColor: "border-none", hoverColor: "hover:bg-blue-500", cursorPointer: false, icon: getFontAwesomeIcon("check"), mobileIcon: getFontAwesomeIcon("check"), mobileIconLabel: "Complete", text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }), image: _jsx("img", { src: "../../../assets/contact-image.png", alt: "test alt text", className: "flex justify-center w-12 h-12 max-md:hidden" }) }));
|
|
41
|
+
render(_jsx(Badge, { type: "href", href: "#", borderColor: "border-none", hoverColor: "hover:bg-blue-500", cursorPointer: false, icon: getFontAwesomeIcon("check", "regular"), mobileIcon: getFontAwesomeIcon("check", "regular"), mobileIconLabel: "Complete", text: _jsxs(_Fragment, { children: [_jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "Contact Us", tag: "h2", additionalClasses: "pl-2 pb-0 font-bold" }), _jsx(Text, { size: "text-md", color: "text-black", fontFamily: "font-serif", text: "1-800-800-8000", tag: "p", additionalClasses: "pl-2 pt-0" })] }), image: _jsx("img", { src: "../../../assets/contact-image.png", alt: "test alt text", className: "flex justify-center w-12 h-12 max-md:hidden" }) }));
|
|
42
42
|
});
|
|
43
43
|
test("has correct text", () => {
|
|
44
44
|
expect(screen.getByTestId("badge-test-id")).toHaveTextContent("Contact Us");
|
|
@@ -55,7 +55,7 @@ describe("<Badge /> with Image", () => {
|
|
|
55
55
|
});
|
|
56
56
|
describe("<Badge /> Tests for icons and images", () => {
|
|
57
57
|
test("renders with left icon only", () => {
|
|
58
|
-
render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark"), hasLeftIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
|
|
58
|
+
render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark", "regular"), hasLeftIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
|
|
59
59
|
const badge = screen.getByTestId("badge-test-id");
|
|
60
60
|
expect(badge).toBeInTheDocument();
|
|
61
61
|
const icon = badge.querySelector('svg[data-icon="xmark"]');
|
|
@@ -71,7 +71,7 @@ describe("<Badge /> Tests for icons and images", () => {
|
|
|
71
71
|
});
|
|
72
72
|
describe("<Badge /> tests for right badges", () => {
|
|
73
73
|
test("renders with left icon only", () => {
|
|
74
|
-
render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark"), hasRightIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
|
|
74
|
+
render(_jsx(Badge, { icon: getFontAwesomeIcon("xmark", "regular"), hasRightIcon: true, text: _jsx(Text, { text: "With Icon" }), type: "to" }));
|
|
75
75
|
const badge = screen.getByTestId("badge-test-id");
|
|
76
76
|
expect(badge).toBeInTheDocument();
|
|
77
77
|
const icon = badge.querySelector('svg[data-icon="xmark"]');
|
|
@@ -80,7 +80,7 @@ describe("<Badge /> tests for right badges", () => {
|
|
|
80
80
|
});
|
|
81
81
|
describe("<Badge /> - Mobile Icon Tests", () => {
|
|
82
82
|
test("renders mobile icon when hasMobileStyle is true", () => {
|
|
83
|
-
render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Label", text: "Mobile Icon Badge", type: "span" }));
|
|
83
|
+
render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check", "regular"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Label", text: "Mobile Icon Badge", type: "span" }));
|
|
84
84
|
const badge = screen.getByTestId("badge-test-id");
|
|
85
85
|
expect(badge).toBeInTheDocument();
|
|
86
86
|
const mobileIcon = screen.getByLabelText("Mobile Icon Label");
|
|
@@ -88,14 +88,14 @@ describe("<Badge /> - Mobile Icon Tests", () => {
|
|
|
88
88
|
expect(mobileIcon).toHaveClass("hidden max-md:flex max-md:p-0 mr-2");
|
|
89
89
|
});
|
|
90
90
|
test("does not render mobile icon when hasMobileStyle is false", () => {
|
|
91
|
-
render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: false, mobileIconLabel: "Mobile Icon Label", text: "No Mobile Style", type: "to" }));
|
|
91
|
+
render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check", "regular"), hasMobileStyle: false, mobileIconLabel: "Mobile Icon Label", text: "No Mobile Style", type: "to" }));
|
|
92
92
|
const badge = screen.getByTestId("badge-test-id");
|
|
93
93
|
expect(badge).toBeInTheDocument();
|
|
94
94
|
const mobileIcon = screen.queryByLabelText("Mobile Icon Label");
|
|
95
95
|
expect(mobileIcon).not.toBeInTheDocument();
|
|
96
96
|
});
|
|
97
97
|
test("mobile icon has correct aria attributes", () => {
|
|
98
|
-
render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Accessibility Label", text: "Accessible Mobile Icon Badge", type: "to" }));
|
|
98
|
+
render(_jsx(Badge, { mobileIcon: getFontAwesomeIcon("check", "regular"), hasMobileStyle: true, mobileIconLabel: "Mobile Icon Accessibility Label", text: "Accessible Mobile Icon Badge", type: "to" }));
|
|
99
99
|
const mobileIcon = screen.getByLabelText("Mobile Icon Accessibility Label");
|
|
100
100
|
expect(mobileIcon).toBeInTheDocument();
|
|
101
101
|
expect(mobileIcon).toHaveAttribute("aria-hidden", "false");
|
|
@@ -138,7 +138,7 @@ export const WithIcon = Template.bind({});
|
|
|
138
138
|
WithIcon.args = {
|
|
139
139
|
...Default.args,
|
|
140
140
|
text: (_jsx(Text, { size: "", color: "", text: "Button with icon", fontFamily: "", additionalClasses: "pl-2" })),
|
|
141
|
-
icon: getFontAwesomeIcon("coffee"),
|
|
141
|
+
icon: getFontAwesomeIcon("coffee", "regular"),
|
|
142
142
|
shape: "rounded-none",
|
|
143
143
|
hoverUnderline: false,
|
|
144
144
|
onClick: () => alert("Button clicked!"),
|
|
@@ -150,7 +150,7 @@ IconOnly.args = {
|
|
|
150
150
|
shape: "rounded",
|
|
151
151
|
hoverBackground: "hover:bg-gray-100",
|
|
152
152
|
hoverUnderline: false,
|
|
153
|
-
icon: getFontAwesomeIcon("trash"),
|
|
153
|
+
icon: getFontAwesomeIcon("trash", "regular"),
|
|
154
154
|
additionalClasses: "flex justify-center items-center px-4 py-3 bg-gray-50",
|
|
155
155
|
onClick: () => alert("Icon button clicked!"),
|
|
156
156
|
};
|
|
@@ -163,7 +163,7 @@ ClearCartButton.args = {
|
|
|
163
163
|
hoverFontColor: "hover:text-black",
|
|
164
164
|
hoverBorderColor: "hover:border-red-700",
|
|
165
165
|
hoverUnderline: false,
|
|
166
|
-
icon: getFontAwesomeIcon("trash"),
|
|
166
|
+
icon: getFontAwesomeIcon("trash", "regular"),
|
|
167
167
|
iconClasses: "order-first",
|
|
168
168
|
additionalClasses: "px-5 py-6 bg-gray-50 border-red-500 gap-2",
|
|
169
169
|
onClick: () => alert("Cart Cleared!"),
|
|
@@ -177,7 +177,7 @@ RightIconButton.args = {
|
|
|
177
177
|
hoverFontColor: "hover:text-white",
|
|
178
178
|
hoverBorderColor: "hover:border-blue-700",
|
|
179
179
|
hoverUnderline: false,
|
|
180
|
-
icon: getFontAwesomeIcon("arrowRight"),
|
|
180
|
+
icon: getFontAwesomeIcon("arrowRight", "regular"),
|
|
181
181
|
additionalClasses: "px-6 py-3 flex-row-reverse",
|
|
182
182
|
iconClasses: "ml-2 text-white",
|
|
183
183
|
onClick: () => alert("Next clicked!"),
|
|
@@ -196,5 +196,5 @@ ConfirmRequestButton.args = {
|
|
|
196
196
|
export const FourButtonsRow = Template.bind({});
|
|
197
197
|
FourButtonsRow.args = {};
|
|
198
198
|
FourButtonsRow.decorators = [
|
|
199
|
-
(Story) => (_jsxs("div", { className: "flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200", children: [_jsx(BaseButton, { text: "All", backgroundColor: "bg-teal-600", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverUnderline: false, additionalClasses: "py-2 px-4 text-white", onClick: () => alert("All clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("boxes", "
|
|
199
|
+
(Story) => (_jsxs("div", { className: "flex divide-x divide-gray-200 rounded-md overflow-hidden border border-gray-200", children: [_jsx(BaseButton, { text: "All", backgroundColor: "bg-teal-600", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverUnderline: false, additionalClasses: "py-2 px-4 text-white", onClick: () => alert("All clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("boxes", "regular"), "Bundles"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Bundles clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("clipboard", "regular"), "Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Categories clicked!") }), _jsx(BaseButton, { text: _jsxs(_Fragment, { children: [getFontAwesomeIcon("plus", "regular"), "Custom Categories"] }), backgroundColor: "bg-white", fontFamily: "font-sans", borderColor: "border-gray-200", shape: "rounded-none", hoverBackground: "hover:bg-teal-600", hoverFontColor: "hover:text-white", hoverBorderColor: "hover:border-none", hoverUnderline: false, additionalClasses: "py-2 px-4", onClick: () => alert("Custom Categories clicked!") })] })),
|
|
200
200
|
];
|
|
@@ -41,6 +41,6 @@ const CounterContentCardTemplate = ({ data }) => {
|
|
|
41
41
|
setInCart(false);
|
|
42
42
|
setCount(0);
|
|
43
43
|
};
|
|
44
|
-
return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[300px] h-auto sm:h-[350px] border border-[#DFE4EA] bg-white rounded-lg relative p-4 sm:p-4 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-3 left-3", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: "flex justify-center items-center mt-4 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[100px] sm:w-[120px] h-[100px] sm:h-[120px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-4", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-md", text: truncateDescription(data.title, 52), color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left font-bold` }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "text-left mt-1" }), _jsx(Text, { tag: "p", size: "text-xs sm:text-sm", text: truncateDescription(data.description, 52), color: "text-gray-700", fontFamily: "font-sans", additionalClasses: "text-left mt-2" })] }), _jsxs("div", { className: "flex justify-between items-center w-full mt-4 sm:mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx("div", { className: "flex items-center gap-2 min-w-[120px] sm:min-w-[150px] justify-end", children: inCart ? (_jsxs(_Fragment, { children: [_jsx(BaseButton, { additionalClasses: "w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600", icon: getFontAwesomeIcon("trash"), onClick: handleDeleteClick }), _jsx(CounterButton, { count: count, onIncrementClick: handleIncrementClick, onDecrementClick: handleDecrementClick, onInputChange: handleInputChange, containerClassName: "flex items-center border border-gray-300 rounded-md overflow-hidden", inputClassName: "w-8 h-8 text-center text-xs sm:text-sm border-none outline-none bg-white", buttonClassName: "w-8 h-8 flex items-center justify-center text-gray-600", iconClasses: "fill-current text-gray-600" })] })) : (_jsx(BaseButton, { text: "Add to Cart", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] hover:bg-teal-800", onClick: handleAddToCartClick })) })] })] }));
|
|
44
|
+
return (_jsxs("div", { className: "flex flex-col items-start w-full sm:w-[300px] h-auto sm:h-[350px] border border-[#DFE4EA] bg-white rounded-lg relative p-4 sm:p-4 hover:border-teal-600 hover:shadow-inner", children: [_jsx("div", { className: "absolute top-3 left-3", children: _jsx(Badge, { text: _jsx(Text, { color: "", fontFamily: "font-serif", tag: "p", text: data.badgeText, size: "text-xs sm:text-sm" }), type: "span", hoverColor: "", backgroundColor: "bg-green-100", badgeContainerClasses: "text-green-800" }) }), _jsx("div", { className: "flex justify-center items-center mt-4 w-full", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText, additionalClasses: "w-[100px] sm:w-[120px] h-[100px] sm:h-[120px] object-contain" }) }), _jsxs("div", { className: "flex flex-col items-start w-full mt-4", children: [_jsx(Text, { tag: data.titleProps.tag, size: "text-md", text: truncateDescription(data.title, 52), color: data.titleProps.fontColor, fontFamily: data.titleProps.fontFamily, additionalClasses: `${data.titleProps.additionalClasses} text-left font-bold` }), _jsx(Text, { tag: "span", size: "text-xs sm:text-sm", text: data.identifier, color: "text-gray-500", fontFamily: "font-sans", additionalClasses: "text-left mt-1" }), _jsx(Text, { tag: "p", size: "text-xs sm:text-sm", text: truncateDescription(data.description, 52), color: "text-gray-700", fontFamily: "font-sans", additionalClasses: "text-left mt-2" })] }), _jsxs("div", { className: "flex justify-between items-center w-full mt-4 sm:mt-auto", children: [_jsx(Text, { tag: data.priceProps.tag, size: "text-sm sm:text-md", text: data.price, color: data.priceProps.fontColor, fontFamily: data.priceProps.fontFamily, additionalClasses: data.priceProps.additionalClasses }), _jsx("div", { className: "flex items-center gap-2 min-w-[120px] sm:min-w-[150px] justify-end", children: inCart ? (_jsxs(_Fragment, { children: [_jsx(BaseButton, { additionalClasses: "w-6 sm:w-8 h-6 sm:h-8 flex items-center justify-center text-red-600", icon: getFontAwesomeIcon("trash", "solid"), onClick: handleDeleteClick }), _jsx(CounterButton, { count: count, onIncrementClick: handleIncrementClick, onDecrementClick: handleDecrementClick, onInputChange: handleInputChange, containerClassName: "flex items-center border border-gray-300 rounded-md overflow-hidden", inputClassName: "w-8 h-8 text-center text-xs sm:text-sm border-none outline-none bg-white", buttonClassName: "w-8 h-8 flex items-center justify-center text-gray-600", iconClasses: "fill-current text-gray-600" })] })) : (_jsx(BaseButton, { text: "Add to Cart", backgroundColor: "bg-teal-600", shape: "rounded-md", borderColor: "border-none", additionalClasses: "w-[100px] sm:w-[120px] h-[32px] sm:h-[40px] hover:bg-teal-800", onClick: handleAddToCartClick })) })] })] }));
|
|
45
45
|
};
|
|
46
46
|
export default CounterContentCardTemplate;
|
|
@@ -5,8 +5,8 @@ import Image from "../../Image/Image";
|
|
|
5
5
|
import { getFontAwesomeIcon } from "../../../utils/getFontAwesomeIcon";
|
|
6
6
|
const HorizontalCardTemplate = ({ data }) => {
|
|
7
7
|
return (_jsxs(_Fragment, { children: [_jsx("a", { href: "#", className: `flex justify-center w-72 max-sm:w-full`, "data-testid": "card", children: _jsx(Image, { background: false, src: data.imageUrl, alt: data.altText }) }), _jsxs("div", { className: "flex flex-col justify-between w-3/4 h-full p-3 max-sm:w-full", children: [_jsx("div", { className: "flex h-full mb-12 max-sm:mb-2", children: _jsx("a", { href: data.link, children: _jsx(Text, { tag: data.titleProps.tag, size: data.titleProps.size, text: data.title, color: "black", fontFamily: "", additionalClasses: data.titleProps.additionalClasses }) }) }), _jsxs("div", { className: `flex justify-between mb-12 max-sm:flex-col max-sm:items-end max-sm:mb-2`, children: [_jsx("div", { className: "flex items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: _jsx(Text, { tag: data.identifierProps.tag, size: data.identifierProps.size, text: data.identifier, color: "", fontFamily: "", additionalClasses: data.identifierProps.additionalClasses }) }), _jsxs("div", { className: "flex items-center justify-center px-2 max-sm:mb-1", children: [_jsx("div", { className: "pr-2 text-xs", children: data.inStock === true
|
|
8
|
-
? getFontAwesomeIcon(data.inStockProps.inStockIcon)
|
|
9
|
-
: getFontAwesomeIcon(data.inStockProps.outOfStockIcon) }), _jsx(Text, { tag: data.inStockProps.tag, size: data.inStockProps.size, text: data.inStock === true
|
|
8
|
+
? getFontAwesomeIcon(data.inStockProps.inStockIcon, "regular")
|
|
9
|
+
: getFontAwesomeIcon(data.inStockProps.outOfStockIcon, "regular") }), _jsx(Text, { tag: data.inStockProps.tag, size: data.inStockProps.size, text: data.inStock === true
|
|
10
10
|
? "In Stock"
|
|
11
11
|
: "Out of Stock", color: "black", fontFamily: "", additionalClasses: data.inStockProps.additionalClasses })] }), _jsxs("div", { className: "flex px-2 items-center space-x-1 rtl:space-x-reverse max-sm:mb-1", children: [_jsx("svg", { className: "w-4 h-4 text-yellow-300", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 22 20", children: _jsx("path", { d: "M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z" }) }), _jsx(Text, { tag: data.ratingProps.tag, size: data.ratingProps.size, text: data.rating, color: "", fontFamily: "", additionalClasses: data.ratingProps.additionalClasses })] })] }), _jsxs("div", { className: "flex items-end flex-col w-full max-sm:flex-row max-sm:justify-between", children: [_jsx("div", { className: "px-2", children: _jsx(Text, { tag: data.priceProps.tag, size: data.priceProps.size, text: data.price, color: "black", fontFamily: "", additionalClasses: data.priceProps.additionalClasses }) }), _jsx(BaseButton, { text: data.buttonProps.text, backgroundColor: data.buttonProps.color, shape: data.buttonProps.shape, borderColor: data.buttonProps.borderColor, hoverBackground: data.buttonProps.hoverBackground, additionalClasses: "w-24" })] })] })] }));
|
|
12
12
|
};
|
|
@@ -9,7 +9,7 @@ const Dropdown = ({ options, selectedOption, onOptionSelect, optionClasses = "fl
|
|
|
9
9
|
}, selectedOptionBgColor = "bg-gray-50", optionHoverBgColor = "hover:bg-gray-50", }) => {
|
|
10
10
|
const [showMenu, setShowMenu] = useState(false);
|
|
11
11
|
const toggleMenu = () => setShowMenu(!showMenu);
|
|
12
|
-
return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 border-2 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, children: _jsx("span", { children: getFontAwesomeIcon(icon.name
|
|
12
|
+
return (_jsxs("div", { className: `flex items-center justify-between relative min-w-32 border-2 ${dropdownClasses}`, children: [_jsxs("div", { onClick: toggleMenu, className: `flex cursor-pointer items-center group h-full `, children: [_jsx("div", { className: `font-bold ${optionClasses}`, children: selectedOption }), _jsx("div", { className: `transform transition-transform duration-200 mx-1 px-1 rounded-full relative ${icon.iconClasses} ${showMenu ? "rotate-180" : "rotate-0"}`, children: _jsx("span", { children: getFontAwesomeIcon(icon.name) }) })] }), showMenu && (_jsx(AnimatePresence, { children: showMenu && (_jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, className: `absolute top-0 z-10 right-0 left-0 ${menuClasses}`, children: _jsx("ul", { children: options.map((action) => (_jsxs("li", { className: `text-left px-4 py-2 cursor-pointer border-b ${action === selectedOption
|
|
13
13
|
? `{${selectedOptionBgColor} font-semibold}`
|
|
14
14
|
: `${optionHoverBgColor} text-black`}`, onClick: () => {
|
|
15
15
|
onOptionSelect(action);
|
|
@@ -69,6 +69,6 @@ function InputAndCheck({ closeOutSearch, setResetSearch, setEditingHeader, colum
|
|
|
69
69
|
handleSubmit();
|
|
70
70
|
}
|
|
71
71
|
};
|
|
72
|
-
return (_jsxs("div", { ref: containerRef, className: "relative", "data-testid": "icon-search-regular", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon
|
|
72
|
+
return (_jsxs("div", { ref: containerRef, className: "relative", "data-testid": "icon-search-regular", children: [_jsxs("div", { className: "flex flex-col border rounded-md shadow-md", children: [_jsx("div", { className: "flex", children: _jsx(TableHeaderInput, { hasAutoFocus: true, value: localSearchText, onKeyDown: handleKeyDown, required: false, id: "", name: "", type: "text", onChange: handleInputChange, additionalClasses: additionalInputClasses, placeholder: "Search", hasIcons: true, firstIcon: localSearchText === "" ? (_jsx("span", { className: initialIconClasses, children: getFontAwesomeIcon(initialIcon.icon) })) : undefined, iconPosition: "both", secondIcon: localSearchText !== "" && (_jsx("div", { className: secondIconClasses, onClick: handleClearSearch, children: getFontAwesomeIcon(cancelIcon.icon) })) }) }), localSearchText && (_jsx("div", { className: "bg-white flex flex-start px-2", children: _jsx(Badge, { text: localSearchText, type: "span", cursorPointer: true, onClick: handleClearSearch, hasRightIcon: true, backgroundColor: badgeColor, badgeContainerClasses: iconBadgeContainerClasses, icon: getFontAwesomeIcon(badgeIcon.icon) }) }))] }), localSearchText && (_jsx("div", { onClick: handleSubmit, className: searchIconClasses, children: getFontAwesomeIcon(searchIcon.icon) }))] }));
|
|
73
73
|
}
|
|
74
74
|
export default InputAndCheck;
|
|
@@ -3,7 +3,6 @@ import { useState } from "react";
|
|
|
3
3
|
import data from "./DUMMYNAVDATA.json";
|
|
4
4
|
import Image from "../Image/Image";
|
|
5
5
|
import { Accordion } from "../../utils/generateAccordionItem";
|
|
6
|
-
import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
|
|
7
6
|
const DUMMYNAVDATA = data.DUMMYNAVDATA;
|
|
8
7
|
const Nav = ({ navData = DUMMYNAVDATA, navBackgroundColor = "bg-white", parentBackground = "bg-white", parentBorderColor = "border-gray-200", parentShape = "rounded-md", parentTextColor = "text-gray-800", parentTextSize = "text-base", parentHoverBackground = "hover:bg-gray-200", parentHoverFontColor = "hover:text-black", parentHoverUnderline = "hover:underline", parentHoverBorderColor = "hover:border-gray-400", submenuBackgroundColor = "bg-white", submenuTextColor = "text-gray-800", submenuTextSize = "text-sm", includeSubmenuImages = false, submenuHoverBackground = "hover:bg-gray-200", submenuHoverTextColor = "hover:text-black", submenuHoverBorderStyle = "hover:border-gray-400", submenuHoverBorderColor = "hover:border-gray-400", mobileBreakpoint = "max-xl", accordionParentStyle = "border-b border-black p-2 w-full", accordionExpandedStyle = "w-full py-3", }) => {
|
|
9
8
|
const [navExpanded, setNavExpanded] = useState(navData.reduce((acc, _, index) => ({
|
|
@@ -26,6 +25,10 @@ const Nav = ({ navData = DUMMYNAVDATA, navBackgroundColor = "bg-white", parentBa
|
|
|
26
25
|
toggleNav(index);
|
|
27
26
|
}
|
|
28
27
|
};
|
|
29
|
-
return (_jsxs("nav", { className: `flex justify-around ${navBackgroundColor}`, "data-testid": "nav", children: [_jsx("ul", { className: `flex w-full items-center ${mobileBreakpoint}:hidden`, "aria-label": "Main Menu", "data-testid": "main-menu", children: navData.map((item, index) => (_jsx("div", { className: `flex w-full justify-center`, children: item.to === "" ? (_jsxs("li", { className: `flex w-auto cursor-pointer relative`, role: "button", onClick: () => handleParentClick(index), "aria-expanded": navExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: [_jsx("div", { className: `flex w-full items-center border-2 h-10 ${parentHoverBackground} ${parentHoverBorderColor} ${parentShape} ${parentBackground}`, "data-testid": `parent-button-${item.title}`, children:
|
|
28
|
+
return (_jsxs("nav", { className: `flex justify-around ${navBackgroundColor}`, "data-testid": "nav", children: [_jsx("ul", { className: `flex w-full items-center ${mobileBreakpoint}:hidden`, "aria-label": "Main Menu", "data-testid": "main-menu", children: navData.map((item, index) => (_jsx("div", { className: `flex w-full justify-center`, children: item.to === "" ? (_jsxs("li", { className: `flex w-auto cursor-pointer relative`, role: "button", onClick: () => handleParentClick(index), "aria-expanded": navExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: [_jsx("div", { className: `flex w-full items-center border-2 h-10 ${parentHoverBackground} ${parentHoverBorderColor} ${parentShape} ${parentBackground}`, "data-testid": `parent-button-${item.title}`, children: _jsx("div", { className: `flex w-full p-4 justify-between items-center ${parentTextSize} ${parentTextColor} ${parentHoverFontColor} ${parentHoverUnderline}`, children: _jsx("div", { className: "px-2", children: item.title }) }) }), _jsx("div", { className: `absolute min-w-navDropDown top-16 overflow-x-scroll transition-[max-height] duration-500 ease-in-out ${submenuBackgroundColor} ${navExpanded[index]
|
|
29
|
+
? "max-h-60"
|
|
30
|
+
: "max-h-0"}`, "aria-hidden": !navExpanded[index], tabIndex: -1, children: _jsx("ul", { className: "w-full", children: item.links.map((link) => (_jsx("li", { className: `flex py-2 border-4 border-transparent w-auto align-center ${submenuBackgroundColor} ${submenuHoverBackground} ${submenuHoverBorderStyle} ${submenuHoverBorderColor} ${submenuTextSize} ${submenuTextColor}`, children: _jsxs("a", { href: link.link, className: "flex hover:underline w-full justify-start items-center pl-1", "data-testid": link.menuItem, tabIndex: navExpanded[index]
|
|
31
|
+
? 0
|
|
32
|
+
: -1, children: [includeSubmenuImages && (_jsx(Image, { src: link.src, alt: link.alt, background: false, additionalClasses: "w-12 h-12 mr-2", "data-testid": `submenu-image-${link.menuItem}` })), link.menuItem] }) }, link.menuItem))) }) })] })) : (_jsx("li", { className: "w-auto", onKeyDown: (event) => handleKeyDown(event, index), "data-testid": "parent-menu-item", children: _jsx("a", { href: item.to, className: `flex flex-col p-4 w-full border-2 relative items-center h-10 justify-center ${parentHoverBackground} ${parentHoverFontColor} ${parentHoverUnderline} ${parentBackground} ${parentBorderColor} ${parentShape} ${parentTextSize} ${parentTextColor}`, tabIndex: 0, "data-testid": `parent-link-${item.title}`, children: _jsx("div", { className: "px-2", children: item.title }) }) })) }, item.title))) }), _jsx("div", { className: `hidden w-full items-center ${mobileBreakpoint}:flex`, "data-testid": "accordion-nav", children: _jsx(Accordion, { navData: navData, accordionParentStyle: accordionParentStyle, accordionExpandedStyle: accordionExpandedStyle }) })] }));
|
|
30
33
|
};
|
|
31
34
|
export default Nav;
|
|
@@ -14,7 +14,7 @@ const Toaster = ({ message, additionalClasses, clearMessage, hasClearButton, clo
|
|
|
14
14
|
const shadowClasses = `shadow-lg shadow-boxShadow`;
|
|
15
15
|
const closeButtonClasses = `cursor-pointer text-xs ${closeIconColor}`;
|
|
16
16
|
return (_jsx("div", { "data-testid": "toaster-test-id", role: "alert", "aria-live": "polite", className: `${shadowClasses} ${containerClasses} ${additionalClasses}`, children: message.map((msg, index) => (_jsxs("div", { className: "flex items-center p-2", children: [_jsx("div", { className: `w-6 flex-none mr-2 ${iconColor} `, children: index === 0 && maybeIcon
|
|
17
|
-
? getFontAwesomeIcon(maybeIcon.icon
|
|
17
|
+
? getFontAwesomeIcon(maybeIcon.icon)
|
|
18
18
|
: null }), _jsx("div", { className: "flex-grow", children: _jsx("p", { className: index === 0 && "font-semibold", children: msg }) }), _jsx("div", { className: "w-6 flex justify-end", children: index === 0 && hasClearButton && (_jsx("div", { "data-testid": "clear-button", className: closeButtonClasses, onClick: handleClearMessage, children: getFontAwesomeIcon("x", "solid") })) })] }, index))) }));
|
|
19
19
|
};
|
|
20
20
|
export default Toaster;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment, useState } from "react";
|
|
3
|
-
import { getFontAwesomeIcon } from "./getFontAwesomeIcon";
|
|
4
3
|
export const Accordion = ({ navData, accordionParentStyle, accordionExpandedStyle, }) => {
|
|
5
4
|
// setting state to be an object, with each key being the index of the accordion item ->
|
|
6
5
|
// allows for multiple accordions to be open at once
|
|
@@ -18,5 +17,5 @@ export const Accordion = ({ navData, accordionParentStyle, accordionExpandedStyl
|
|
|
18
17
|
toggleAccordion(index);
|
|
19
18
|
}
|
|
20
19
|
};
|
|
21
|
-
return (_jsx(_Fragment, { children: navData.map((item, index) => (_jsxs(Fragment, { children: [_jsx("div", { className: `cursor-pointer ${accordionParentStyle}`, role: "button", onClick: () => toggleAccordion(index), "aria-expanded": accordionExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), children: _jsxs("div", { className: "px-6 text-left items-center h-10 select-none flex justify-between flex-row", children: [_jsx("div", { className: "flex w-3/4", children: item.title }), _jsx("div", { className: "flex w-1/2 justify-end"
|
|
20
|
+
return (_jsx(_Fragment, { children: navData.map((item, index) => (_jsxs(Fragment, { children: [_jsx("div", { className: `cursor-pointer ${accordionParentStyle}`, role: "button", onClick: () => toggleAccordion(index), "aria-expanded": accordionExpanded[index], tabIndex: 0, onKeyDown: (event) => handleKeyDown(event, index), children: _jsxs("div", { className: "px-6 text-left items-center h-10 select-none flex justify-between flex-row", children: [_jsx("div", { className: "flex w-3/4", children: item.title }), _jsx("div", { className: "flex w-1/2 justify-end" })] }) }), _jsx("div", { className: `px-6 w-full overflow-hidden transition-[max-height] duration-500 ease-in-out ${accordionExpanded[index] ? "max-h-96" : "max-h-0"}`, "aria-hidden": !accordionExpanded[index], tabIndex: accordionExpanded[index] ? 0 : -1, children: _jsx("ul", { className: `${accordionExpandedStyle}`, children: item.links.map((link) => (_jsx("li", { className: "py-1", children: _jsx("a", { href: link.link, className: "hover:underline", "data-testid": link.menuItem, children: link.menuItem }) }, link.menuItem))) }) })] }, item.title))) }));
|
|
22
21
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare const getFontAwesomeIcon: (iconName: string, iconStyle
|
|
2
|
+
export declare const getFontAwesomeIcon: (iconName: string, iconStyle?: "solid" | "regular" | "light" | undefined) => React.ReactElement | null;
|
|
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
3
3
|
import * as SolidIcons from "@fortawesome/pro-solid-svg-icons";
|
|
4
4
|
import * as RegularIcons from "@fortawesome/pro-regular-svg-icons";
|
|
5
5
|
import * as LightIcons from "@fortawesome/pro-light-svg-icons";
|
|
6
|
-
export const getFontAwesomeIcon = (iconName, iconStyle) => {
|
|
6
|
+
export const getFontAwesomeIcon = (iconName, iconStyle = "solid") => {
|
|
7
7
|
try {
|
|
8
8
|
const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`;
|
|
9
9
|
let icon;
|