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