glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
139 lines (137 loc) • 6.48 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Button = void 0;
require("core-js/modules/es.symbol.description.js");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
require("./button.css");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
// /**
// * Button component
// * @param {*} children content to be displayed inside the button. It can be any valid React elements or components.
// * @param {*} loading A boolean flag to indicate if the button is in a loading state. When loading is true, the button displays a loading spinner or the loadingIcon.
// * @param {*} icon An icon element to be displayed before the button's content.
// * @param {*} disabled A boolean flag to disable the button if set to true.
// * @param {*} variant The variant style of the button
// * @param {*} onClick A function to be called when the button is clicked. It is typically used to handle click events on the button.
// * @param {*} style An object containing custom styles to be applied to the button.
// * @param {*} iconPosition The position of the icon relative to the button's content. It can be set to "start" (before the content) or "end" (after the content).
// * @param {*} color The color of the button.
// * @param {*} loadingIcon An optional custom loading icon to be displayed when loading is true.
// * @param {*} size The size of the button.
// */
/**
* Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:
* - Modal windows
* - Forms
*/
const Button = _ref => {
let {
children,
loading,
icon,
disabled,
variant,
onClick: _onClick,
style,
iconPosition,
color,
loadingIcon,
size,
className,
containerStyle,
buttonContentClass,
id,
name,
title,
type
} = _ref;
const combinedStyle = _objectSpread({
flexDirection: iconPosition === "end" ? "row-reverse" : "",
border: variant === "outlined" ? color === "secondary" ? "1px solid #F2F2F2" : "1px solid #0a5b99" : "none",
backgroundColor: variant === "outlined" || variant === "text" ? "#ffffff" : color === "secondary" ? "#F2F2F2" : "#0a5b99",
color: variant === "outlined" || variant === "text" ? color === "secondary" ? "#7f7f7f" : "#0a5b99" : color === "secondary" ? "#7f7f7f" : "#ffffff",
height: size === "large" ? "48px" : size === "small" ? "24px" : "36px",
fontSize: size === "large" ? "16px" : size === "small" ? "12px" : "14px"
}, style);
const buttonContainerStyle = _objectSpread({}, containerStyle);
return /*#__PURE__*/_react.default.createElement("div", {
className: "buttonParentContainer",
style: buttonContainerStyle
}, /*#__PURE__*/_react.default.createElement("button", {
id: id,
"data-testid": id,
name: name,
disabled: disabled,
onClick: e => _onClick && _onClick(e),
style: combinedStyle,
type: type ? type : "",
className: color === "secondary" ? "buttonSecondary ".concat(className ? className : "") : "buttonPrimary ".concat(className ? className : "")
}, loading ? loadingIcon ? loadingIcon : /*#__PURE__*/_react.default.createElement("div", {
className: "loaderParent"
}, /*#__PURE__*/_react.default.createElement("div", {
className: color === "secondary" ? "secondaryLoader" : "primaryLoader"
})) : /*#__PURE__*/_react.default.createElement("div", {
className: "buttonChildren ".concat(buttonContentClass ? buttonContentClass : ""),
style: {
flexDirection: iconPosition === "end" ? "row-reverse" : ""
}
}, icon && /*#__PURE__*/_react.default.createElement("div", {
className: "buttonIcon"
}, icon), children || title)));
};
exports.Button = Button;
Button.propTypes = {
/**
* If true, the loading indicator is shown.
*/
loading: _propTypes.default.bool,
/**
* Variant of the button
*/
variant: _propTypes.default.oneOf(["outlined", "contained"]),
/**
* Button disabled or not.
*/
disabled: _propTypes.default.bool,
/**
* Icon to be display in button.
*/
icon: _propTypes.default.object,
/**
* Position of Icon.
*/
iconPosition: _propTypes.default.string,
/**
* Optional click handler.
*/
onClick: _propTypes.default.func,
/**
* Color of the Button.
*/
color: _propTypes.default.string,
/**
* Loading Icon of the button.
*/
loadingIcon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
/**
* How large should the button be?
*/
size: _propTypes.default.oneOf(["small", "medium", "large"])
};
Button.defaultProps = {
variant: "contained",
size: "medium",
onClick: undefined,
loading: false,
disabled: false,
icon: null,
iconPosition: null
};