@guardian/threads/dist/components/Button/Button.js

import { __assign, __rest } from "tslib";
import React, { Fragment, } from 'react';
import { Link } from 'react-router-dom';
import { MdArrowDropDown } from 'react-icons/md';
import { SyncSpinner } from '../SyncSpinner/SyncSpinner';
import styles from './Button.module.css';
// Single point of contact for various types of button
export var Button = function (_a) {
    var id = _a.id, to = _a.to, children = _a.children, size = _a.size, href = _a.href, className = _a.className, active = _a.active, isDropdown = _a.isDropdown, icon = _a.icon, title = _a.title, appearance = _a.appearance, showSpinner = _a.showSpinner, otherProps = __rest(_a, ["id", "to", "children", "size", "href", "className", "active", "isDropdown", "icon", "title", "appearance", "showSpinner"]);
    var renderInner = function () {
        var buttonContentClasses = [styles.innerContent];
        if (showSpinner) {
            // Rather than not render the inner content
            // We hide it and place the spinner on top so the size doesn't change
            buttonContentClasses.push(styles.hideContent);
        }
        return (React.createElement(Fragment, null,
            showSpinner && (React.createElement("div", { className: styles.centerSpinner },
                React.createElement(SyncSpinner, null))),
            React.createElement("span", { className: buttonContentClasses.join(' ') },
                icon && React.createElement("div", { className: styles.buttonIconLeft }, icon),
                React.createElement("div", { className: styles.children }, children),
                isDropdown && (React.createElement("div", { className: styles.buttonIconRight },
                    React.createElement(MdArrowDropDown, { className: styles.dropdown }))))));
    };
    var usedTitle = title
        ? title
        : isDropdown && !children
            ? 'Options'
            : undefined;
    var style = appearance ? appearance : 'default';
    if (to) {
        // Use react-router-dom Link type
        return (React.createElement(Link, __assign({ id: id, to: to, className: [styles[style], className].join(' '), "data-contains-text": !!children, "data-active": active, "data-size": size, title: usedTitle }, otherProps), renderInner()));
    }
    else if (href) {
        // Use HTML Anchor
        return (React.createElement("a", __assign({ id: id, href: href, className: [styles[style], className].join(' '), "data-contains-text": !!children, "data-active": active, "data-size": size, title: usedTitle }, otherProps), renderInner()));
    }
    else {
        // Default to button
        return (React.createElement("button", __assign({ id: id, className: [styles[style], className].join(' '), "data-contains-text": !!children, "data-active": active, "data-size": size, title: usedTitle, type: "button" }, otherProps), renderInner()));
    }
};
Button.defaultProps = {
    size: 'medium',
    appearance: 'default',
};
//# sourceMappingURL=Button.js.map