@wix/design-system/dist/esm/SidebarBackButton/SidebarBackButton.js

@wix/design-system

import React from 'react';
import PropTypes from 'prop-types';
import { ChevronLeft } from '@wix/wix-ui-icons-common';
import Text from '../Text';
import { st, classes } from './SidebarBackButton.st.css.js';
import { SidebarContext } from '../Sidebar/SidebarAPI';
import { sidebarSkins } from '../Sidebar/constants';
import { withFocusable } from '../common/Focusable';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
/**  button with an animated back arrow */
class SidebarBackButton extends React.PureComponent {
    render() {
        const { children, animateArrow, onClick, dataHook, className, focusableOnFocus, focusableOnBlur, } = this.props;
        return (React.createElement(WixDesignSystemContext.Consumer, null, () => (React.createElement(SidebarContext.Consumer, null, context => {
            const skin = (context && context.getSkin()) || sidebarSkins.dark;
            return (React.createElement("button", { className: st(classes.root, {
                    skin,
                }, className), "data-hook": dataHook, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: "button", tabIndex: "0" },
                React.createElement(ChevronLeft, { className: st(classes.arrow, { animated: animateArrow }) }),
                React.createElement(Text, { weight: "normal", size: "small", secondary: skin === sidebarSkins.light, light: skin === sidebarSkins.dark }, children)));
        }))));
    }
}
SidebarBackButton.displayName = 'SidebarBackButton';
SidebarBackButton.propTypes = {
    /** Applied as data-hook HTML attribute that can be used to create driver in testing */
    dataHook: PropTypes.string,
    /** Specifies a CSS class name to be appended to the component’s root element.
     * @internal
     */
    className: PropTypes.string,
    /** click event handler  */
    onClick: PropTypes.func,
    /** Text for the button */
    children: PropTypes.string,
    /** Whether or not to constantly animate the arrow */
    animateArrow: PropTypes.bool,
};
export default withFocusable(SidebarBackButton);
//# sourceMappingURL=SidebarBackButton.js.map