hh-ui-components
Version:
24 lines • 2.5 kB
JavaScript
import { __assign, __rest } from "tslib";
import * as React from "react";
import clsx from "clsx";
var variantStyles = {
primary: "rounded text-body-large 2xl:text-body-large-2xl py-[15px] 2xl:py-[1.042vw] px-[15px] 2xl:px-[1.042vw]",
secondary: "rounded bg-primary border border-warmTone-4 text-graphite hover:bg-warmTone-4 hover:text-graphite py-[16.5px] px-[20px] lg:py-[15px] 2xl:py-[1.042vw] 2xl:px-[1.389vw] 2xl:text-[0.972vw] 2xl:rounded-[0.278vw] lg:text-[14px] text-[14px] leading-[140%] disabled:border-neutral disabled:bg-white disabled:text-neutral ease-linear",
tertiary: "text-graphite text-body-text lg:text-body-text-lg 2xl:text-body-text-2xl border-0 rounded-none relative disabled:bg-transparent disabled:text-neutral disabled:before:bg-neutral disabled:hover:before:scale-100 hover:text-subdued before:bg-graphite before:absolute before:w-full before:h-px before:left-0 before:scale-x-100 before:transition-transform before:duration-300 before:top-[calc(100%+2px)] before:origin-top-left-0-2/4 hover:before:scale-x-0 hover:before:origin-top-left-full-2/4 hover:before:bg-subdued"
};
var sizeStyles = {
"default": "",
small: "",
medium: "",
large: ""
};
export var QuickBuy = function (_a) {
var _b = _a.variants, variants = _b === void 0 ? "primary" : _b, _c = _a.type, type = _c === void 0 ? "button" : _c, _d = _a.color, color = _d === void 0 ? "default" : _d, id = _a.id, _e = _a.ariaLabel, ariaLabel = _e === void 0 ? "button" : _e, _f = _a.size, size = _f === void 0 ? "default" : _f, label = _a.label, _g = _a.className, className = _g === void 0 ? "cursor-pointer outline-none inline-block transition-all duration-300 disabled:cursor-not-allowed" : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, onClick = _a.onClick, props = __rest(_a, ["variants", "type", "color", "id", "ariaLabel", "size", "label", "className", "disabled", "onClick"]);
var buttonClass = disabled
? clsx(variantStyles[variants], sizeStyles[size])
: clsx(variantStyles[variants], sizeStyles[size]);
return (React.createElement("div", { className: "w-full bg-tertiary rounded py-[5px] 2xl:py-[0.361vw] text-center cursor-pointer" },
React.createElement("button", __assign({ type: type, id: id, "aria-label": ariaLabel, className: "".concat(buttonClass, " ").concat(className, " "), disabled: disabled, onClick: onClick }, props),
React.createElement("span", null, label))));
};
//# sourceMappingURL=QuickBuy.js.map