@q2devel/q2-storybook 1.0.7 → 1.0.8
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.
|
@@ -16,4 +16,4 @@ export type NavBarProps = {
|
|
|
16
16
|
itemClassName?: string;
|
|
17
17
|
mobileItemClassName?: string;
|
|
18
18
|
};
|
|
19
|
-
export declare const NavBar: ({ items, logo, rightContent, backgroundColor, textColor, activeColor, mobileMenuBgColor, containerClassName, navClassName, itemClassName, mobileItemClassName }: NavBarProps) => React.JSX.Element;
|
|
19
|
+
export declare const NavBar: ({ items, logo, rightContent, backgroundColor, textColor, activeColor, mobileMenuBgColor, containerClassName, navClassName, itemClassName, mobileItemClassName, }: NavBarProps) => React.JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { useState } from 'react';
|
|
3
2
|
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
|
4
|
-
import React from 'react';
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import buildClassesByJoining from '../../utils/StyleHelper';
|
|
5
5
|
export var NavBar = function (_a) {
|
|
6
6
|
var
|
|
7
7
|
// Structure
|
|
@@ -17,20 +17,20 @@ export var NavBar = function (_a) {
|
|
|
17
17
|
// Styling
|
|
18
18
|
_d = _a.backgroundColor,
|
|
19
19
|
// Styling
|
|
20
|
-
backgroundColor = _d === void 0 ?
|
|
20
|
+
backgroundColor = _d === void 0 ? 'bg-white' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'text-gray-600' : _e, _f = _a.activeColor, activeColor = _f === void 0 ? 'text-indigo-600' : _f, _g = _a.mobileMenuBgColor, mobileMenuBgColor = _g === void 0 ? 'bg-white' : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? '' : _h, _j = _a.navClassName, navClassName = _j === void 0 ? '' : _j, _k = _a.itemClassName, itemClassName = _k === void 0 ? '' : _k, _l = _a.mobileItemClassName, mobileItemClassName = _l === void 0 ? '' : _l;
|
|
21
21
|
var _m = useState(false), mobileMenuOpen = _m[0], setMobileMenuOpen = _m[1];
|
|
22
|
-
return (React.createElement("header", { className:
|
|
23
|
-
React.createElement("nav", { className:
|
|
22
|
+
return (React.createElement("header", { className: buildClassesByJoining(backgroundColor, containerClassName) },
|
|
23
|
+
React.createElement("nav", { className: buildClassesByJoining('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', navClassName) },
|
|
24
24
|
React.createElement("div", { className: "flex h-16 items-center justify-between" },
|
|
25
25
|
React.createElement("div", { className: "flex-shrink-0" }, logo),
|
|
26
26
|
React.createElement("div", { className: "flex md:hidden" },
|
|
27
|
-
React.createElement("button", { type: "button", className:
|
|
27
|
+
React.createElement("button", { type: "button", className: buildClassesByJoining('inline-flex items-center justify-center rounded-md p-2', textColor, "hover:".concat(activeColor, " hover:bg-gray-100")), onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); } },
|
|
28
28
|
React.createElement("span", { className: "sr-only" }, "Open main menu"),
|
|
29
29
|
mobileMenuOpen ? (React.createElement(XMarkIcon, { className: "block h-6 w-6", "aria-hidden": "true" })) : (React.createElement(Bars3Icon, { className: "block h-6 w-6", "aria-hidden": "true" })))),
|
|
30
|
-
React.createElement("div", { className: "hidden md:flex md:flex-1 md:items-center md:justify-center md:space-x-8" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className:
|
|
30
|
+
React.createElement("div", { className: "hidden md:flex md:flex-1 md:items-center md:justify-center md:space-x-8" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('text-sm font-medium', textColor, "hover:".concat(activeColor), itemClassName) }, item.name)); })),
|
|
31
31
|
rightContent && (React.createElement("div", { className: "hidden md:flex md:items-center" }, rightContent)))),
|
|
32
|
-
mobileMenuOpen && (React.createElement("div", { className:
|
|
33
|
-
React.createElement("div", { className: "space-y-1 px-2 pb-3 pt-2" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className:
|
|
32
|
+
mobileMenuOpen && (React.createElement("div", { className: buildClassesByJoining('md:hidden', mobileMenuBgColor) },
|
|
33
|
+
React.createElement("div", { className: "space-y-1 px-2 pb-3 pt-2" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('block rounded-md px-3 py-2 text-base font-medium', textColor, "hover:".concat(activeColor, " hover:bg-gray-100"), mobileItemClassName) }, item.name)); })),
|
|
34
34
|
rightContent && (React.createElement("div", { className: "border-t border-gray-200 pb-3 pt-4" },
|
|
35
35
|
React.createElement("div", { className: "flex items-center px-5" }, rightContent)))))));
|
|
36
36
|
};
|
|
@@ -15,11 +15,11 @@ import { buildClassesByJoining } from '../../utils/StyleHelper';
|
|
|
15
15
|
// Quantity Control Component
|
|
16
16
|
var QuantityControl = function (_a) {
|
|
17
17
|
var quantity = _a.quantity, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement, _b = _a.minQuantity, minQuantity = _b === void 0 ? 0 : _b, _c = _a.maxQuantity, maxQuantity = _c === void 0 ? 99 : _c, _d = _a.controlsClassName, controlsClassName = _d === void 0 ? '' : _d, _e = _a.buttonClassName, buttonClassName = _e === void 0 ? '' : _e, _f = _a.quantityClassName, quantityClassName = _f === void 0 ? '' : _f;
|
|
18
|
-
return (React.createElement("div", { className:
|
|
19
|
-
React.createElement("button", { onClick: onDecrement, disabled: quantity <= minQuantity, className:
|
|
18
|
+
return (React.createElement("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName) },
|
|
19
|
+
React.createElement("button", { onClick: onDecrement, disabled: quantity <= minQuantity, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded-full bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:bg-red-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200', buttonClassName), "aria-label": "Decrease quantity" },
|
|
20
20
|
React.createElement(MinusIcon, { className: "h-4 w-4" })),
|
|
21
|
-
React.createElement("div", { className:
|
|
22
|
-
React.createElement("button", { onClick: onIncrement, disabled: quantity >= maxQuantity, className:
|
|
21
|
+
React.createElement("div", { className: buildClassesByJoining('w-8 h-8 rounded-full bg-white flex items-center justify-center text-sm font-medium shadow-sm transition-all duration-200', quantityClassName) }, quantity),
|
|
22
|
+
React.createElement("button", { onClick: onIncrement, disabled: quantity >= maxQuantity, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded-full bg-green-500 text-white hover:bg-green-600 disabled:opacity-50 disabled:bg-green-300 disabled:cursor-not-allowed shadow-sm transition-all duration-200', buttonClassName), "aria-label": "Increase quantity" },
|
|
23
23
|
React.createElement(PlusIcon, { className: "h-4 w-4" }))));
|
|
24
24
|
};
|
|
25
25
|
export var ProductCard = function (_a) {
|
|
@@ -122,15 +122,15 @@ export var ProductCard = function (_a) {
|
|
|
122
122
|
};
|
|
123
123
|
return (React.createElement("div", { key: product.id, className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', className), onClick: handleCardClick },
|
|
124
124
|
renderHeader && renderHeader(product),
|
|
125
|
-
React.createElement("div", { className:
|
|
125
|
+
React.createElement("div", { className: buildClassesByJoining(imageLayoutClass, 'relative') },
|
|
126
126
|
product.badges && renderBadges && (React.createElement("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1" }, product.badges.map(function (badge, index) { return (React.createElement("span", { key: index, className: buildClassesByJoining("inline-flex items-center px-2 py-1 text-xs font-medium ".concat(badge.color), roundedClass, badgeClassName) }, badge.text)); }))),
|
|
127
127
|
React.createElement("img", { alt: product.imageAlt, src: product.imageSrc, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }),
|
|
128
|
-
(showAddButton || showQuantityControls) && (React.createElement("div", { className:
|
|
128
|
+
(showAddButton || showQuantityControls) && (React.createElement("div", { className: buildClassesByJoining('absolute bottom-2 right-2 z-10'), onClick: function (e) { return e.stopPropagation(); } },
|
|
129
129
|
React.createElement("div", { className: "relative" },
|
|
130
|
-
React.createElement("div", { className:
|
|
130
|
+
React.createElement("div", { className: buildClassesByJoining('transition-all duration-300 ease-in-out transform', showQuantityControls
|
|
131
131
|
? 'scale-0 opacity-0'
|
|
132
|
-
: 'scale-100 opacity-100') }, customAddButton || (React.createElement("button", { onClick: handleAddToCart, className:
|
|
133
|
-
React.createElement("div", { className:
|
|
132
|
+
: 'scale-100 opacity-100') }, customAddButton || (React.createElement("button", { onClick: handleAddToCart, className: buildClassesByJoining('p-2 w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white shadow-md hover:bg-green-600 transition-colors duration-200'), "aria-label": "Add to cart" }, addButtonIcon))),
|
|
133
|
+
React.createElement("div", { className: buildClassesByJoining('absolute top-0 right-0 transition-all duration-300 ease-in-out transform origin-right', !showQuantityControls
|
|
134
134
|
? 'scale-0 opacity-0'
|
|
135
135
|
: 'scale-100 opacity-100') }, customQuantityControl || (React.createElement(QuantityControl, __assign({ quantity: quantity, onIncrement: handleIncrement, onDecrement: handleDecrement, minQuantity: 0, maxQuantity: maxQuantity }, quantityControlProps)))))))),
|
|
136
136
|
React.createElement("div", { className: buildClassesByJoining('mt-4', contentLayoutClass, compactClass, contentClassName) },
|