@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
39 lines (38 loc) • 2.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2022-2023 Wonderflow Design Team
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import clsx from 'clsx';
import { Children, cloneElement, forwardRef, isValidElement, useCallback, } from 'react';
import { Spinner, Symbol, } from '../..';
import * as styles from './button.module.css';
export const Button = forwardRef(({ kind = 'primary', dimension = 'regular', className, children, fullWidth, icon, disabled, iconPosition = 'left', iconColor, type = 'button', pressed, onClick, busy, as: Wrapper = 'button', ...otherProps }, forwardedRef) => {
const handleClick = useCallback(() => (event) => {
if (!disabled && onClick)
onClick(event);
if (disabled)
event.preventDefault();
}, [disabled, onClick]);
const iconSize = {
big: 18,
regular: 16,
small: 12,
};
return (_jsxs(Wrapper, { ref: forwardedRef, type: Wrapper === 'button' ? type : undefined, className: clsx(styles.Button, className), "data-testid": "Button", "data-button-icon-position": iconPosition, "data-button-dimension": dimension, "data-button-kind": kind, "data-button-fullwidth": fullWidth, "aria-disabled": disabled, "aria-busy": busy, "aria-pressed": pressed, "aria-live": busy ? 'polite' : undefined, onClick: handleClick(), ...otherProps, children: [icon && (_jsx(Symbol, { source: icon, fill: iconColor, weight: "solid", dimension: iconSize[dimension] })), (children && busy) ? _jsx("span", { children: children }) : children, busy && (_jsx("span", { className: styles.SpinnerIndicator, children: _jsx(Spinner, { dimension: dimension }) }))] }));
});
export const ButtonsGroup = ({ children, className, kind, dimension = 'regular', }) => (_jsx("div", { className: clsx(styles.ButtonsGroup, className), children: Children.map(children, child => isValidElement(child) && cloneElement(child, {
kind,
dimension,
})) }));