@atlaskit/button
Version:
A button triggers an event or action. They let users know what will happen next.
77 lines • 2.55 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/* 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 const iconButtonShapes = ['default', 'circle'];
// Add required default props to variants
const LinkButtonRender = /*#__PURE__*/forwardRef(({
href = 'home',
children,
...rest
}, ref) => /*#__PURE__*/React.createElement(LinkButton, _extends({
ref: ref,
href: href
}, rest), children));
const IconButtonRender = /*#__PURE__*/forwardRef(({
icon = StarStarredIcon,
label = 'Label',
...rest
}, ref) => /*#__PURE__*/React.createElement(IconButton, _extends({
ref: ref,
icon: icon,
label: label
}, rest)));
const LinkIconButtonRender = /*#__PURE__*/forwardRef(({
href = 'home',
icon = StarStarredIcon,
label = 'Label',
...rest
}, ref) => /*#__PURE__*/React.createElement(LinkIconButton, _extends({
ref: ref,
href: href,
icon: icon,
label: label
}, rest)));
const 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 const defaultButtonVariants = variants.filter(({
name
}) => name === 'Button' || name === 'LinkButton');
export const linkButtonVariants = variants.filter(({
name
}) => name === 'LinkButton' || name === 'LinkIconButton');
export const iconButtonVariants = variants.filter(({
name
}) => name === 'IconButton' || name === 'LinkIconButton');
export default variants;