hh-ui-components
Version:
35 lines • 3.86 kB
JavaScript
import { __assign, __rest } from "tslib";
import * as React from "react";
import classNames from "classnames";
var variantStyles = {
primary: "rounded bg-graphite border-graphite text-white hover:bg-subdued hover:border-subdued py-[16.5px] px-20 md:py-[2.148vw] lg:py-[15px] 2xl:py-[1.042vw] 2xl:px-[1.389vw] text-body-small md:text-body-small-md lg:text-body-large 2xl:text-body-small-2xl 2xl:rounded-[0.278vw] disabled:border-neutral disabled:bg-neutral ease-linear",
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 !p-0",
small2: "rounded bg-graphite text-white text-body-small cursor-pointer md:text-body-small-md lg:text-body-large 2xl:text-body-large-2xl hover:bg-subdued py-[5px] md:py-[0.651vw] lg:py-[5px] 2xl:py-[0.347vw] px-20 md:px-20-md lg:px-20 2xl:px-20-2xl 2xl:rounded-[0.278vw] transition-all duration-300 ease-linear ",
hoverUnderline: "text-graphite text-body-text lg:text-body-text-lg cursor-pointer 2xl:text-body-text-2xl border-0 rounded-none relative disabled:bg-transparent disabled:text-neutral disabled:after:bg-neutral hover:text-subdued before:bg-graphite before:absolute before:w-full before:h-px before:left-0 before:scale-x-0 before:transition-transform before:duration-300 before:top-[calc(100%+2px)] before:origin-top-left-full-2/4 hover:before:scale-x-100 hover:before:origin-top-left-0-2/4 hover:before:bg-subdued"
};
var sizeStyles = {
"default": "",
small: "py-[5px] md:py-[0.651vw] lg:py-[5px] 2xl:py-[0.347vw]",
medium: "",
large: ""
};
var widthStyles = {
"default": "w-fit",
full: "w-full",
fit: "w-fit"
};
var colorStyles = {
"default": "",
black: "",
white: "!text-white before:bg-white hover:text-white hover:before:bg-white"
};
export var Button = 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, _g = _a.width, width = _g === void 0 ? "default" : _g, label = _a.label, _h = _a.className, className = _h === void 0 ? "cursor-pointer outline-none inline-block transition-all duration-300 disabled:cursor-not-allowed" : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, onClick = _a.onClick, props = __rest(_a, ["variants", "type", "color", "id", "ariaLabel", "size", "width", "label", "className", "disabled", "onClick"]);
var buttonClass = disabled
? classNames(variantStyles[variants], sizeStyles[size], widthStyles[width], colorStyles[color])
: classNames(variantStyles[variants], sizeStyles[size], widthStyles[width], colorStyles[color]);
return (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=Button.js.map