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

"use strict";

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
  value: true
});
exports.SignUpButton = exports.LogOutButton = exports.LogInButton = exports.AccountCTAsContainer = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _tkComponentButtons = require("@xo-union/tk-component-buttons");
var _componentBlankButton = _interopRequireDefault(require("@xo-union/component-blank-button"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tkUiSkeleton = require("@xo-union/tk-ui-skeleton");
var _ContextCjs = require("../Context.cjs.js");
const LoadingPlaceholder = props => {
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Skeleton, (0, _extends2.default)({
    "aria-live": "polite"
  }, props), /*#__PURE__*/_react.default.createElement(_tkUiSkeleton.Bone, {
    className: classes['bone-button']
  }));
};
const SignUpButton = _ref => {
  let {
    className,
    hideLoadingInMobile,
    ...rest
  } = _ref;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes['header-cta-container']
  }, /*#__PURE__*/_react.default.createElement(LoadingPlaceholder, {
    className: hideLoadingInMobile && classes['hide-loading-in-mobile']
  }), /*#__PURE__*/_react.default.createElement(_tkComponentButtons.Button, (0, _extends2.default)({
    color: "primary",
    size: "md",
    "data-trackable": "",
    type: "button"
  }, rest, {
    className: (0, _classnames.default)(classes['header-cta'], 'sign-up-cta' in classes && classes['sign-up-cta'], className)
  }), "Sign up"));
};
exports.SignUpButton = SignUpButton;
process.env.NODE_ENV !== "production" ? SignUpButton.propTypes = {
  className: _propTypes.default.string,
  isLoading: _propTypes.default.bool,
  hideLoadingInMobile: _propTypes.default.bool
} : void 0;
const LogInButton = _ref2 => {
  let {
    className,
    hideLoadingInMobile,
    hideLoadingInMediaSmLow,
    ...rest
  } = _ref2;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes['header-cta-container']
  }, /*#__PURE__*/_react.default.createElement(LoadingPlaceholder, {
    className: (0, _classnames.default)(hideLoadingInMobile && classes['hide-loading-in-mobile'], hideLoadingInMediaSmLow && classes['hide-loading-in-media-sm-low'])
  }), /*#__PURE__*/_react.default.createElement(_tkComponentButtons.Button, (0, _extends2.default)({
    color: "primary-alternative",
    size: "md",
    "data-trackable": "",
    type: "button"
  }, rest, {
    className: (0, _classnames.default)(classes['log-in-cta'], className)
  }), "Log in"));
};
exports.LogInButton = LogInButton;
process.env.NODE_ENV !== "production" ? LogInButton.propTypes = {
  className: _propTypes.default.string,
  isLoading: _propTypes.default.bool,
  onClick: _propTypes.default.func,
  hideLoadingInMobile: _propTypes.default.bool,
  hideLoadingInMediaSmLow: _propTypes.default.bool
} : void 0;
const LogOutButton = _ref3 => {
  let {
    className,
    ...props
  } = _ref3;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes['header-cta-container']
  }, /*#__PURE__*/_react.default.createElement(_componentBlankButton.default, (0, _extends2.default)({
    className: (0, _classnames.default)(classes['log-out-cta'], className),
    "data-trackable": "",
    type: "button"
  }, props), "Log out"));
};
exports.LogOutButton = LogOutButton;
process.env.NODE_ENV !== "production" ? LogOutButton.propTypes = {
  className: _propTypes.default.string,
  isLoading: _propTypes.default.bool
} : void 0;
const AccountCTAsContainer = _ref4 => {
  let {
    children
  } = _ref4;
  const {
    classes
  } = (0, _ContextCjs.useHeaderNavContext)();
  return /*#__PURE__*/_react.default.createElement("div", {
    className: classes['account-cta-container']
  }, children);
};
exports.AccountCTAsContainer = AccountCTAsContainer;
process.env.NODE_ENV !== "production" ? AccountCTAsContainer.propTypes = {
  children: _propTypes.default.node
} : void 0;