@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
60 lines (59 loc) • 2.27 kB
JavaScript
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { forwardRef } from "react";
import { ChevronRightIcon } from "../../Icon/index.js";
import { ButtonBase, ButtonLinkBase } from "./ButtonComponent.js";
import { isLinkProps } from "./type.js";
const getComputedClassName = ({ className, variant, size, destructive, primary, text, isIconOnly, fullWidth, selected })=>classnames(className, "cobalt-button", {
"cobalt-button--primary": primary,
"cobalt-button--destructive": destructive,
"cobalt-button--text": text,
"cobalt-button--icon-only": isIconOnly,
"cobalt-button--small": "small" === size,
"cobalt-button--large": "large" === size,
"cobalt-button--warning": "warning" === variant,
"cobalt-button--secondary": "secondary" === variant,
"cobalt-button--tertiary": "tertiary" === variant,
"cobalt-button--business": "business" === variant,
"cobalt-button--success": "success" === variant,
"cobalt-button--neutral": "neutral" === variant,
"cobalt-button--selected": selected,
"c-w-full": fullWidth
});
const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
const { children, className, variant, size, destructive, primary, text, icon, fullWidth, selected, ...restProps } = props;
const computedClassName = getComputedClassName({
className,
variant,
size,
destructive,
primary,
text,
fullWidth,
selected,
isIconOnly: !!icon && !children
});
const content = /*#__PURE__*/ jsxs(Fragment, {
children: [
icon,
children,
text && children ? /*#__PURE__*/ jsx(ChevronRightIcon, {}) : null
]
});
if (isLinkProps(restProps)) return /*#__PURE__*/ jsx(ButtonLinkBase, {
...restProps,
className: computedClassName,
ref: ref,
children: content
});
return /*#__PURE__*/ jsx(ButtonBase, {
...restProps,
className: computedClassName,
ref: ref,
children: content
});
});
Button.displayName = "Button";
const Buttons_Button = Button;
export default Buttons_Button;
//# sourceMappingURL=index.js.map