@xo-union/tk-component-header-nav/lib/components/HeaderNav/AccountCTAs/index.js

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from "react";
import PropTypes from "prop-types";
import { Button } from "@xo-union/tk-component-buttons";
import BlankButton from "@xo-union/component-blank-button";
import cx from "classnames";
import { Skeleton, Bone } from "@xo-union/tk-ui-skeleton";
import { useHeaderNavContext } from "../Context.js";
const LoadingPlaceholder = props => {
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement(Skeleton, _extends({
    "aria-live": "polite"
  }, props), /*#__PURE__*/React.createElement(Bone, {
    className: classes['bone-button']
  }));
};
export const SignUpButton = _ref => {
  let {
    className,
    hideLoadingInMobile,
    ...rest
  } = _ref;
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement("div", {
    className: classes['header-cta-container']
  }, /*#__PURE__*/React.createElement(LoadingPlaceholder, {
    className: hideLoadingInMobile && classes['hide-loading-in-mobile']
  }), /*#__PURE__*/React.createElement(Button, _extends({
    color: "primary",
    size: "md",
    "data-trackable": "",
    type: "button"
  }, rest, {
    className: cx(classes['header-cta'], 'sign-up-cta' in classes && classes['sign-up-cta'], className)
  }), "Sign up"));
};
process.env.NODE_ENV !== "production" ? SignUpButton.propTypes = {
  className: PropTypes.string,
  isLoading: PropTypes.bool,
  hideLoadingInMobile: PropTypes.bool
} : void 0;
export const LogInButton = _ref2 => {
  let {
    className,
    hideLoadingInMobile,
    hideLoadingInMediaSmLow,
    ...rest
  } = _ref2;
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement("div", {
    className: classes['header-cta-container']
  }, /*#__PURE__*/React.createElement(LoadingPlaceholder, {
    className: cx(hideLoadingInMobile && classes['hide-loading-in-mobile'], hideLoadingInMediaSmLow && classes['hide-loading-in-media-sm-low'])
  }), /*#__PURE__*/React.createElement(Button, _extends({
    color: "primary-alternative",
    size: "md",
    "data-trackable": "",
    type: "button"
  }, rest, {
    className: cx(classes['log-in-cta'], className)
  }), "Log in"));
};
process.env.NODE_ENV !== "production" ? LogInButton.propTypes = {
  className: PropTypes.string,
  isLoading: PropTypes.bool,
  onClick: PropTypes.func,
  hideLoadingInMobile: PropTypes.bool,
  hideLoadingInMediaSmLow: PropTypes.bool
} : void 0;
export const LogOutButton = _ref3 => {
  let {
    className,
    ...props
  } = _ref3;
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement("div", {
    className: classes['header-cta-container']
  }, /*#__PURE__*/React.createElement(BlankButton, _extends({
    className: cx(classes['log-out-cta'], className),
    "data-trackable": "",
    type: "button"
  }, props), "Log out"));
};
process.env.NODE_ENV !== "production" ? LogOutButton.propTypes = {
  className: PropTypes.string,
  isLoading: PropTypes.bool
} : void 0;
export const AccountCTAsContainer = _ref4 => {
  let {
    children
  } = _ref4;
  const {
    classes
  } = useHeaderNavContext();
  return /*#__PURE__*/React.createElement("div", {
    className: classes['account-cta-container']
  }, children);
};
process.env.NODE_ENV !== "production" ? AccountCTAsContainer.propTypes = {
  children: PropTypes.node
} : void 0;