@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
93 lines • 3.52 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["href", "children"],
_excluded2 = ["icon", "label"],
_excluded3 = ["href", "icon", "label"];
/* eslint-disable @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-20398 */
import React, { forwardRef } from 'react';
import StarStarredIcon from '@atlaskit/icon/core/star-starred';
import Button from '../new-button/variants/default/button';
import LinkButton from '../new-button/variants/default/link';
import IconButton from '../new-button/variants/icon/button';
import LinkIconButton from '../new-button/variants/icon/link';
import { buttonAppearances, iconButtonAppearances, linkButtonAppearances } from './appearances';
import { buttonSpacing, iconButtonSpacing } from './spacing';
export var iconButtonShapes = ['default', 'circle'];
// Add required default props to variants
var LinkButtonRender = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref$href = _ref.href,
href = _ref$href === void 0 ? 'home' : _ref$href,
children = _ref.children,
rest = _objectWithoutProperties(_ref, _excluded);
return /*#__PURE__*/React.createElement(LinkButton, _extends({
ref: ref,
href: href
}, rest), children);
});
var IconButtonRender = /*#__PURE__*/forwardRef(function (_ref2, ref) {
var _ref2$icon = _ref2.icon,
icon = _ref2$icon === void 0 ? StarStarredIcon : _ref2$icon,
_ref2$label = _ref2.label,
label = _ref2$label === void 0 ? 'Label' : _ref2$label,
rest = _objectWithoutProperties(_ref2, _excluded2);
return /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
icon: icon,
label: label
}, rest));
});
var LinkIconButtonRender = /*#__PURE__*/forwardRef(function (_ref3, ref) {
var _ref3$href = _ref3.href,
href = _ref3$href === void 0 ? 'home' : _ref3$href,
_ref3$icon = _ref3.icon,
icon = _ref3$icon === void 0 ? StarStarredIcon : _ref3$icon,
_ref3$label = _ref3.label,
label = _ref3$label === void 0 ? 'Label' : _ref3$label,
rest = _objectWithoutProperties(_ref3, _excluded3);
return /*#__PURE__*/React.createElement(LinkIconButton, _extends({
ref: ref,
href: href,
icon: icon,
label: label
}, rest));
});
var variants = [{
name: 'Button',
Component: Button,
elementType: HTMLButtonElement,
appearances: buttonAppearances,
spacing: buttonSpacing
}, {
name: 'LinkButton',
Component: LinkButtonRender,
elementType: HTMLAnchorElement,
appearances: linkButtonAppearances,
spacing: buttonSpacing
}, {
name: 'IconButton',
Component: IconButtonRender,
elementType: HTMLButtonElement,
appearances: iconButtonAppearances,
spacing: iconButtonSpacing,
shape: iconButtonShapes
}, {
name: 'LinkIconButton',
Component: LinkIconButtonRender,
elementType: HTMLAnchorElement,
appearances: iconButtonAppearances,
spacing: iconButtonSpacing,
shape: iconButtonShapes
}];
export var defaultButtonVariants = variants.filter(function (_ref4) {
var name = _ref4.name;
return name === 'Button' || name === 'LinkButton';
});
export var linkButtonVariants = variants.filter(function (_ref5) {
var name = _ref5.name;
return name === 'LinkButton' || name === 'LinkIconButton';
});
export var iconButtonVariants = variants.filter(function (_ref6) {
var name = _ref6.name;
return name === 'IconButton' || name === 'LinkIconButton';
});
export default variants;